/* saira-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Saira';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/saira-v21-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* saira-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Saira';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/saira-v21-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* saira-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Saira';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/saira-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* saira-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Saira';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/saira-v21-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* saira-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Saira';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/saira-v21-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* saira-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Saira';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/saira-v21-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Magnies';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/Magnies.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@media (max-width: 1024px) {
  .expose-grid {
    grid-template-columns: 1fr;
  }
}

.secondary-intro{
  color:#153461 !important;
}

.title{
  hyphens: none;
}

.expose-card:hover .expose-content > .expose-button{
  background-color: #f0f0f0;
  transform: scale(1.03);
}

	.headwidth2 h2{
		line-height:3rem !important;
	}

  dialog.cookiefirst-root{
	display:block !important;
  }

  span.headline2{
	font-size:26px;
	font-weight:200;
	opacity:0.3;
  }

  .circlephone > .active {
	display:block;
  }

  .button_container {
	position: fixed;
	top: 43px;
  right: 104px;
	height: 27px;
	width: 27px;
	cursor: pointer;
	z-index: 100;
	transition: opacity .25s ease;
  }
  .button_container:hover {
	opacity: .7;
  }
  .button_container.active .top {
	transform: translateY(11px) translateX(0) rotate(45deg);
	background: #FFF;
  }
  .button_container.active .middle {
	opacity: 0;
	background: #FFF;
  }
  .button_container.active .bottom {
	transform: translateY(-11px) translateX(0) rotate(-45deg);
	background: #FFF;
  }
  .button_container span {
	background: #272726;
	border: none;
	height: 2px;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: all .35s ease;
	cursor: pointer;
  }
  .button_container span:nth-of-type(2) {
	top: 11px;
	top: 8px;
  }
  .button_container span:nth-of-type(3) {
	top: 22px;
	top:16px;
  }
  
  .overlay {
	position: fixed;
	background: #ccbfb4;
	top: 0;
	left: 0;
	width: 100%;
	height: 0%;
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s, visibility .35s, height .35s;
	overflow: hidden;
  }
  .overlay.open {
	opacity: 1;
	visibility: visible;
	height: 100%;
  }
  .overlay.open li {
	animation: fadeInRight .5s ease forwards;
	animation-delay: .35s;
  }
  .overlay.open li:nth-of-type(2) {
	animation-delay: .4s;
  }
  .overlay.open li:nth-of-type(3) {
	animation-delay: .45s;
  }
  .overlay.open li:nth-of-type(4) {
	animation-delay: .50s;
  }
  .overlay nav {
	position: relative;
	height: 70%;
	top: 50%;
	transform: translateY(-50%);
	font-size: 50px;
	font-family: 'Saira', serif;
	font-weight: 200;
	text-align: center;
  }
  .overlay ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: inline-block;
	position: relative;
	height: 100%;
  }
  .overlay ul li {
	display: block;
	height: 25%;
	height: calc(100% / 5);
	min-height: 50px;
	position: relative;
	opacity: 0;
  }
  .overlay ul li a {
	display: block;
	position: relative;
	color: #FFF;
	text-decoration: none;
	overflow: hidden;
	font-size: 34px;
	line-height:46px;
  }
  .overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
	width: 100%;
  }
  .overlay ul li a:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0%;
	transform: translateX(-50%);
	height: 2px;
	background: #FFF;
	transition: .35s;
  }

  #overlaymenu nav{
	display:block !important;
  }

  .closemenu{
	position:absolute; top:20px; right:20px; display:block; cursor:pointer;
	i{
		color:#272726;
		font-size:32px;
	}
  }
  
  @keyframes fadeInRight {
	0% {
	  opacity: 0;
	  left: 20%;
	}
	100% {
	  opacity: 1;
	  left: 0;
	}
  }


  .welcomepic, .contentpic {
    .overlay {
      height: 100%;
      width: 100%;
      opacity: 1;
	  visibility: visible;
    }
  }

  .nav_top_z1{
	margin-top: 25px !important;
  }


  /* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: #153461 #ffffff;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 10px;
  }

  *::-webkit-scrollbar-track {
    background: #f7f9f5;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #153461;
    border-radius: 0px;
    border: 3px solid #f7f9f5;
  }
  

body {			position:absolute;
				top:0;
				left:0;
				margin:0px;
				padding:0px;
				width: 100%;
				height:100%;
				color:#969696;
				background-color:#ffffff;
				overflow-x:hidden;

}


::-moz-selection {
  color: #fff; background: #cdc0b4;
}

::selection {
  color: #fff; background: #cdc0b4;
}

.bg_index{
	background-color:#fff;
}

html, body {
  height: 100%;
  margin: 0;
}



.standard{ float:left; display:inline; position:relative; margin:0px; padding:0px; text-align:left;}
.standard_r{ float:right; display:inline; position:relative; margin:0px; padding:0px; text-align:left;}



@media only screen  and (min-width : 20px) and (max-width : 600px) {

      .beratung-section {
  background-color: #153461;
    border-radius: 60px;
    padding: 1rem 2.5rem 20rem 2.5rem;
    margin-top:60px;
    margin: 8rem auto 4rem auto;
    width: 92%;
    margin-left: 2%;
    color: white;
    overflow: visible;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

.beratung-container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}

.beratung-text {
  flex: 1 1 70%;
}

.beratung-text h2 {
  font-size: 40px;
  margin-bottom: 54px;
  line-height:54px;
  font-weight: 400;
  color: white;
}

.beratung-text p {
  font-size: 20px;
  line-height: 32px;
  font-weight: 200;
  color: white;
  margin-bottom: 2rem;
}

.beratung-image {
  flex: 1 1 25%;
  position: relative;
  z-index: 3;
}

.beratung-image img {
  max-height: 340px;
  position: absolute;
  top: -20px; /* Bild ragt oben raus */
  right: 0;
  object-fit: contain;
}

  .announcement-section {
    padding: 7rem 2% 4rem 2%; /* oben & unten viel Platz, seitlich flexibel */
    width:96%;
    margin: 0 auto;
    text-align: center;
    background-color: transparent; /* oder eine Farbe, wenn gewünscht */
  }

  .announcement-text {
    font-size: 30px;
    line-height: 40px;
    font-weight: 200;
    color: #183460;
    max-width: 90%;
    margin: 0 auto;
  }

  .linktelmobile{
    font-size: 18px !important;
    margin-top: 60px !important;
    display:block !important;
  }

  .detail-kaufen > .expose-content{
  .eyebrow{
    margin-bottom: -1.5rem;
  }
}

  .expose-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 4rem 2rem;
  }

  .detail-kaufen{
    margin-bottom:0 !important;
  }

	.marginb80{
    margin-bottom:100px;
  }

  .bildbox {
    width: 100% !important;
    border-radius: 50px !important;
    overflow: hidden !important;
    display: block !important;
    height: auto !important;
    margin-bottom:60px;
  }

     .bildbox img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
      }

        .width50 {
          width: 100% !important;
        }

  /* INDEX STYLES */

  .footer {
  background-color: #cdc0b4;
  padding: 4rem 6% 2rem 6%;
  width:94%;
  margin-left:2%;
  border-top-left-radius: 80px;
  border-top-right-radius: 80px;
  color: #183460;
  font-family: 'Saira', sans-serif;
  font-size: 1rem;
  box-sizing: border-box;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.footer-col {
  flex: 1 1 100%;
}

.footer-col p {
  font-size: 24px;
  line-height: 1.5;
  font-weight: 200;
  color:#183460;
  margin: 0;
  a{
    font-size: 24px !important;
  line-height: 1.5 !important;
  font-weight: 200 !important;
  color:#183460 !important;
  text-decoration: none !important;
  margin: 0;
  }
}

.right{
  text-align:left !important;
}

.footer-col strong {
  font-size: 22px;
  font-weight: 700;
  display: block;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  color: white;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 0.9rem;
  font-weight: 400;
  color: white;
}

.footer-bottom a {
  color: white !important;
  text-decoration: none !important;
  margin-left: 0.5rem !important;
  font-size:0.9rem !important;
  font-weight: 400 !important;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

  .inspiration-section {
  text-align: center;
  padding: 4rem 2% 6rem 2%;
  width: 96%;
  margin: 0 auto;
}

.symbol {
  width: 72px;
  height:100px;
  margin-bottom: 3rem;
  opacity: 0.8;
}

.inspiration-text {
  font-size: 30px;
  line-height: 40px;
  font-weight: 200;
  color: #183460;
  margin: 0 auto;
  max-width: 90%;
}

.expose-card {
  position: relative;
  width: 96%;
  margin-left: 2%;
  height: 440px;
  background-position: center;
  background-size: cover;
  border-radius: 80px;
  overflow: hidden;
  margin-bottom: 4rem;
  min-height: 440px;
}

.immooverlay {
  position: absolute;
  inset: 0;
  background-color: rgba(21, 52, 97, 0.4);
  z-index: 1;
}

.expose-content {
  position: absolute;
  bottom: 20px;
  left: 4%;
  width: 92%;
  padding: 2rem;
  background-color: #cdc0b4;
  border-radius: 70px 0 70px 70px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  z-index: 2;
  box-sizing: border-box;
}

/* Header-Button-Stil */
.expose-button {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  background-color: white;
  border-radius: 999px;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  font-weight: 200;
  color: #183460;
  text-decoration: none !important;
  font-size: 24px;
  gap: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s ease, transform 0.3s ease;
  position:absolute;
  right:0;
  top:-35px;
}

.expose-button:hover {
  background-color: #f0f0f0;
  transform: scale(1.02);
}

/* Pfeilkreis */
.expose-button .circle {
  background-color: #183460;
  color: white;
  width: 50px;
  height: 50px;
  margin-left:20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expose-button .circle i {
  font-size: 1.5rem;
}

.eyebrow {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 20px;
  line-height: 36px;
  color: #fff;
  margin-bottom: 0.5rem;
}

.title {
  font-size: 22px;
    line-height: 38px;
  font-weight: 200;
  color: #183460;
  margin: 0;
}

.expose-text {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: nowrap;
}

.text-left {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.expose-meta {
  width: 50%;
  display: none;
  justify-content: flex-end;
  align-items: center;
  gap: 2rem;
  color: #fff;
  font-size: 24px;
  line-height:36px;
  margin-top:60px;
}

.expose-meta i {
  margin-right: 0.5rem;
  color: #153461;
}



.info-cta-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 5rem 6%;
  margin-top: 100px;
  align-items: stretch; /* sorgt dafür, dass beide Spalten gleich hoch sind */
}

.info-box {
  background-color: #183460; /* dunkles Blau */
  color: white;
  border-radius: 40px;
  padding: 2.5rem;
  display:flex;
  flex: 1 1 45%;
  flex-direction: column;
  min-height:600px;
  box-sizing: border-box;
}

.info-box h2 {
  font-size: 30px !important;
  font-weight: 400 !important;
  line-height:42px !important;
  color:#fff !important;
  margin-bottom: 2rem;
  width:90%;
  margin-top:0;
}

.info-box p {
  font-size: 22px;
  font-weight:200;
  line-height:32px;
  color:#fff;
  margin-bottom: 2rem;
}

.cta-button-con {
  background: #183460;
  color: #fff !important;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  border-radius: 40px;
  text-decoration: none;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-size:24px;
  font-weight: 200;
  text-decoration: none !important;
  width: auto; /* oder ein fixer Wert wie 200px */
  align-self: flex-start;
}

.cta-button-con:hover {
  background-color: #315693;
  transform: scale(1.02);
}

.cta-button-con .circle {
  background-color: #fff;
  color: #183460;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left:20px;
  i{
    font-size: 1.5rem;
  }
}

.cta-button {
  background: white;
  color: #183460 !important;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  border-radius: 40px;
  text-decoration: none;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-size:18px;
  font-weight: 200;
  text-decoration: none !important;
  width: auto; /* oder ein fixer Wert wie 200px */
  align-self: flex-start;
}

.cta-button:hover {
  background-color: rgba(255,255,255,0.7);
  transform: scale(1.02);
}

.cta-button .circle {
  background-color: #183460;
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left:20px;
  i{
    font-size: 1.5rem;
  }
}

.cta-boxes {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem; /* kontrolliert Abstand */
}

.cta-link {
  flex: 1;
  display: flex;
  hyphens: none;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 1.5rem;
  text-decoration: none !important;
  background-color: #cdc0b4;
  border-radius: 24px;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height:44px !important;
  color:#fff !important;
}

.cta-switch {
  width: 90px;              /* Gesamtbreite der Pille */
  height: 50px;
  background-color: white;
  border-radius: 999px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Kreis rechts */
  transition: background-color 0.3s ease;
  overflow: hidden;
}

.switch-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

/* Blauer Kreis */
.cta-switch .circle {
  background-color: #183460;
  color: white;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

/* Icon etwas größer */
.cta-switch .circle i {
  font-size: 1.1rem;
}


/* Hover */
.cta-link:hover {
  background-color: #ab9889;
}

  .beige-box {
    position: absolute !important;
    background-color: #cdc0b4;
    padding: 3.5rem 2.5rem 2rem 2.5rem;
    width: 92%;
    left: 4%;
    bottom: 20px;
    border-radius: 70px 0 70px 70px;
    font-family: 'Saira', sans-serif;
    color: #1d2d4f;
    z-index: 3;
    box-sizing: border-box;
  }

.expose-link {
  position: absolute;
  font-family:'Saira';
  top: 1rem;
  right: 1rem;
  background: white;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  border-radius: 40px;
  text-decoration: none !important;
  color: #153461 !important;
  font-weight: 200;
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  right: 0;
    top: -30px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.expose-link:hover {
  background-color: #f5f5f5;
  transform: scale(1.01);
}

.expose-link .arrow {
  background-color: #153461;
  color: white;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-left:20px;
}

.weiss{
  font-size: 20px !important;
  line-height: 32px !important;
}

.subheadline {
  font-family: 'Magnies', serif;
  font-size: 28px;
  line-height:36px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0;
  font-weight: bold;
  color:#fff;
}

.subheadline-con {
  font-family: 'Saira', serif;
font-size: 24px;
    line-height: 32px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0;
  font-weight: bold;
  color:#fff;
  margin-top: 5px;
    margin-bottom: 30px;
}

.headline {
  font-size: 26px;
  line-height: 42px;
  margin:0 0 20px 0;
  color:#153461;
  font-weight:200;
}

.headline-con {
  font-size: 22px;
  line-height: 36px;
  margin:0 0 20px 0;
  color:#153461;
  font-weight:200;
}

  .custom-banner {
  width: 96%;
  min-height: 940px; /* oder was du brauchst */
  margin-left: 2%;
  position: relative;
  background-position: center;
  background-size: cover;
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
  overflow: hidden;
  margin-top:-170px;
}

  .custom-banner-con {
  width: 96%;
  min-height: 840px; /* oder was du brauchst */
  margin-left: 2%;
  position: relative;
  background-position: center;
  background-size: cover;
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
  overflow: hidden;
  margin-top:-170px;
  margin-bottom:100px;
}

/* Blauer Overlay mit Opazität */
.custom-banner-con .overlayheader, .custom-banner .overlayheader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #153461;
  opacity: 0.4;
  z-index: 1;
}

/* Gradient von oben bis ca. 30% Höhe */
.custom-banner-con .gradient, .custom-banner .gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(to bottom, #153461, transparent);
  z-index: 2;
}

/* Inhalte im Banner können optional hier z-index: 3 erhalten */
.custom-banner-con > *:not(.overlayheader):not(.gradient), .custom-banner > *:not(.overlayheader):not(.gradient) {
  position: relative;
  z-index: 3;
}

  .headeroutter{
    width:90
  }

	/* INDEX STYLES ENDE */

	/* PROJEKT START */

  .divcon{
		width:100%;
		padding:0 6%;
		box-sizing: border-box;
	}

	.respmenu{
		display:none;
	}

	nav{
		display:inline;
	}

	.notelresp{
		display:inline;
	}

	.nav_top_logo{
		width: 180px;
		margin: 20px 0 0 5%;
		padding: 0 0 0 0;
		height: 80px;
		img{
			width:180px;
			height:80px;
			margin: 0 0 0 0;
		}
	}


	.bgdiv_nav_top_z1, .bgdiv_nav_top_z2, .nav_scroll_bg {
		display: inline;
	  }


	/* Detailseiten START */

	.s25p{
		width: 100%;
		padding: 60px 0 0 20px;
		box-sizing: border-box;
		div{
			p, a{
				font-size:26px !important;
				line-height:36px !important;
			}
		}
	}

	.s50p{
		width:98%;
		margin:0 1% 0 0;
	}

	.sp50con{
		width:100%;
		margin:0;
	}


	a {           font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:22px; line-height:32px; font-weight:200; outline:0;
		-moz-transition: all 0.4s ease-out;  /* FF4+ */
		-o-transition: all 0.4s ease-out;  /* Opera 10.5+ */
		-webkit-transition: all 0.4s ease-out;  /* Saf3.2+, Chrome */
		-ms-transition: all 0.4s ease-out;  /* IE10? */
		transition: all 0.4s ease-out; }
	a:link {      text-decoration: none; color: #ccbfb4; }
	a:active {    text-decoration: none; color: #676766; }
	a:visited {   text-decoration: none; color: #ccbfb4; }
	a:hover {
		text-decoration: underline;
		color: #676766;
	}

	.nav_top_z1{
		margin-right:4%;
	}

	a.navtop {           font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:18px; line-height:1.2; font-weight:200; outline:0; padding:0 0 0 0; margin:25px 20px 0 0; display:inline; position:relative; float:left; text-transform:none; }
	a.navtop:link {      text-decoration: none; color: #fff; }
	a.navtop:active {    text-decoration: none; color: #ccbfb4; }
	a.navtop:visited {   text-decoration: none; color: #fff; }
	a.navtop:hover {
		text-decoration: none;
		color: #ccbfb4;
		-moz-transition: all 0.4s ease-out;  /* FF4+ */
		-o-transition: all 0.4s ease-out;  /* Opera 10.5+ */
		-webkit-transition: all 0.4s ease-out;  /* Saf3.2+, Chrome */
		-ms-transition: all 0.4s ease-out;  /* IE10? */
		transition: all 0.4s ease-out;
	}

	a.navtop_active, a.navtop_active:link, a.navtop_active:active, a.navtop_active:visited, a.navtop_active:hover {
		text-decoration: none;
		color: #ccbfb4;
		margin:25px 20px 0 0;
		font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:18px; line-height:1.2; font-weight:200;
		display:inline; position:relative; float:left; text-transform: none; padding: 0 0 0 0;
	}

  a.navtop i{
    color:#ccbfb4 !important;
  }

  a.navtop{
    display:none !important;
  }

	p,div { font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:22px; line-height:32px; color:#153461; margin-top:0px; padding-top:0px; word-wrap: break-word; font-weight:200;}
	td {    font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:22px; line-height:32px; color:#153461; margin-top:0px; padding-top:0px; word-wrap: break-word; font-weight:200; }

	a.nav_foot {           font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:24px; line-height:36px; font-weight:200; outline:0; padding:0 0 0 0;}
	a.nav_foot:link {      text-decoration: none; color: rgba(255,255,255,0.7); }
	a.nav_foot:active {    text-decoration: none; color: rgba(255,255,255,1); }
	a.nav_foot:visited {   text-decoration: none; color: rgba(255,255,255,0.7); }
	a.nav_foot:hover {
		text-decoration: none;
		color: rgba(255,255,255,1);
		-moz-transition: all 0.4s ease-out;  /* FF4+ */
		-o-transition: all 0.4s ease-out;  /* Opera 10.5+ */
		-webkit-transition: all 0.4s ease-out;  /* Saf3.2+, Chrome */
		-ms-transition: all 0.4s ease-out;  /* IE10? */
		transition: all 0.4s ease-out;
	}

	a.nav_foot_active, a.nav_foot_active:link, a.nav_foot_active:active, a.nav_foot_active:visited, a.nav_foot_active:hover {
		text-decoration: none;
		color:rgba(255,255,255,1);
		padding:0 0 0 0;
		font-family:  'Saira', Arial, Helvetica, sans-serif;
		font-size:24px;
		line-height:36px;
		font-weight:200;
		outline:0;
	}

	h1{
		font-size:90px;
		line-height:110px;
		color:#153461;
		font-weight: 700;
		font-family: 'Saira';
		margin:20px 0;
	}

	h2{
		font-size:30px;
		line-height:70px;
		color:#908e8d;
		font-weight: 200;
		font-family: 'Saira';
	}

	h3{
		font-size:34px;
		line-height:44px;
		color:#ccbfb4;
		font-weight: 700;
		font-family: 'Saira';
		margin:0 0 20px 0;
	}

	h4{ font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:46px; line-height:60px; color: #4d4f5a; font-weight:500; margin:0 0 0 0; padding:0 0 0 0; word-wrap: break-word;}
	h5{ font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:24px; line-height:36px; color: #4d4f5a; font-weight:200; margin:20px 0 0 0; padding:0 0 0 0; word-wrap: break-word;}

	.sp50{
		width:49%;
		margin:0;
	}
	.primaryfontcolor{
		color:#272726;
	}

	.primarybgcolor{
		background-color:#272726;
	}

	.secondaryfontcolor{
		color:#ccbfb4;
	}

	.secondarybgcolor{
		background-color:#ccbfb4;
	}


/* PROJEKT ENDE */
	
	}




@media only screen  and (min-width : 600px) and (max-width : 900px) {


  .expose-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 4rem 2rem;
  }

  .detail-kaufen{
    margin-bottom:0 !important;
  }

    .beratung-section {
  background-color: #153461;
    border-radius: 60px;
    padding: 1rem 4% 4rem 4%;
    margin-top:60px;
    margin: 8rem auto 4rem auto;
    width: 92%;
    margin-left: 2%;
    color: white;
    overflow: visible;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

.beratung-container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}

.beratung-text {
  flex: 1 1 60%;
}

.beratung-text h2 {
  font-size: 40px;
  margin-bottom: 54px;
  line-height:54px;
  font-weight: 400;
  color: white;
}

.beratung-text p {
  font-size: 20px;
  line-height: 32px;
  font-weight: 200;
  color: white;
  margin-bottom: 2rem;
}

.beratung-image {
  flex: 1 1 25%;
  position: relative;
  z-index: 3;
}

.beratung-image img {
  max-height: 440px;
  position: absolute;
  top: -380px; /* Bild ragt oben raus */
  right: 0;
  object-fit: contain;
}

  .announcement-section {
    padding: 7rem 2% 4rem 2%; /* oben & unten viel Platz, seitlich flexibel */
    width:96%;
    margin: 0 auto;
    text-align: center;
    background-color: transparent; /* oder eine Farbe, wenn gewünscht */
  }

  .announcement-text {
    font-size: 30px;
    line-height: 40px;
    font-weight: 200;
    color: #183460;
    max-width: 90%;
    margin: 0 auto;
  }

  .linktelmobile{
    display:none !important;
  }

  .detail-kaufen > .expose-content{
  .eyebrow{
    margin-bottom: -1.5rem;
  }
}

	.marginb80{
    margin-bottom:100px;
  }

  .bildbox {
    width: 100% !important;
    border-radius: 50px !important;
    overflow: hidden !important;
    display: block !important;
    height: auto !important;
    margin-bottom:60px;
  }

     .bildbox img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
      }

        .width50 {
          width: 100% !important;
        }

  /* INDEX STYLES */

  .footer {
  background-color: #cdc0b4;
  padding: 4rem 4% 2rem 4%;
  width:94%;
  margin-left:2%;
  border-top-left-radius: 80px;
  border-top-right-radius: 80px;
  color: #183460;
  font-family: 'Saira', sans-serif;
  font-size: 1rem;
  box-sizing: border-box;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.footer-col {
  flex: 1 1 100%;
}

.footer-col p {
  font-size: 30px;
  line-height: 1.5;
  font-weight: 200;
  color:#183460;
  margin: 0;
  a{
    font-size: 30px !important;
  line-height: 1.5 !important;
  font-weight: 200 !important;
  color:#183460 !important;
  text-decoration: none !important;
  margin: 0;
  }
}

.right{
  text-align:left !important;
}

.footer-col strong {
  font-size: 22px;
  font-weight: 700;
  display: block;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  color: white;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 0.9rem;
  font-weight: 400;
  color: white;
}

.footer-bottom a {
  color: white !important;
  text-decoration: none !important;
  margin-left: 0.5rem !important;
  font-size:0.9rem !important;
  font-weight: 400 !important;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

  .inspiration-section {
  text-align: center;
  padding: 4rem 2% 6rem 2%;
  width: 96%;
  margin: 0 auto;
}

.symbol {
  width: 72px;
  height:100px;
  margin-bottom: 3rem;
  opacity: 0.8;
}

.inspiration-text {
  font-size: 30px;
  line-height: 40px;
  font-weight: 200;
  color: #183460;
  margin: 0 auto;
  max-width: 90%;
}

.expose-card {
  position: relative;
  width: 96%;
  margin-left: 2%;
  height: 500px;
  background-position: center;
  background-size: cover;
  border-radius: 80px;
  overflow: hidden;
  margin-bottom: 4rem;
  min-height: 500px;
}

.immooverlay {
  position: absolute;
  inset: 0;
  background-color: rgba(21, 52, 97, 0.4);
  z-index: 1;
}

.expose-content {
  position: absolute;
  bottom: 40px;
  left: 2%;
  width: 96%;
  padding: 2rem;
  background-color: #cdc0b4;
  border-radius: 50px 0 50px 50px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  z-index: 2;
  box-sizing: border-box;
}

/* Header-Button-Stil */
.expose-button {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  background-color: white;
  border-radius: 999px;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  font-weight: 200;
  color: #183460;
  text-decoration: none !important;
  font-size: 24px;
  gap: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s ease, transform 0.3s ease;
  position:absolute;
  right:0;
  top:-35px;
}

.expose-button:hover {
  background-color: #f0f0f0;
  transform: scale(1.02);
}

/* Pfeilkreis */
.expose-button .circle {
  background-color: #183460;
  color: white;
  width: 50px;
  height: 50px;
  margin-left:20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expose-button .circle i {
  font-size: 1.5rem;
}

.eyebrow {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 24px;
  line-height: 36px;
  color: #fff;
  margin-bottom: 0.5rem;
}

.title {
  font-size: 30px;
  line-height: 40px;
  font-weight: 200;
  color: #183460;
  margin: 0;
}

.expose-text {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: nowrap;
}

.text-left {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.expose-meta {
  width: 50%;
  display: none;
  justify-content: flex-end;
  align-items: center;
  gap: 2rem;
  color: #fff;
  font-size: 24px;
  line-height:36px;
  margin-top:60px;
}

.expose-meta i {
  margin-right: 0.5rem;
  color: #153461;
}



.info-cta-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 5rem 2.5rem;
  margin-top: 100px;
  align-items: stretch; /* sorgt dafür, dass beide Spalten gleich hoch sind */
}

.info-box {
  background-color: #183460; /* dunkles Blau */
  color: white;
  border-radius: 40px;
  padding: 4rem;
  display:flex;
  flex: 1 1 45%;
  flex-direction: column;
  min-height:600px;
  box-sizing: border-box;
}

.info-box h2 {
  font-size: 40px !important;
  font-weight: 400 !important;
  line-height:54px !important;
  color:#fff !important;
  margin-bottom: 2rem;
  width:90%;
  margin-top:0;
}

.info-box p {
  font-size: 26px;
  font-weight:200;
  line-height:36px;
  color:#fff;
  margin-bottom: 2rem;
}

.cta-button-con {
  background: #183460;
  color: #fff !important;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  border-radius: 40px;
  text-decoration: none;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-size:24px;
  font-weight: 200;
  text-decoration: none !important;
  width: auto; /* oder ein fixer Wert wie 200px */
  align-self: flex-start;
}

.cta-button-con:hover {
  background-color: #315693;
  transform: scale(1.02);
}

.cta-button-con .circle {
  background-color: #fff;
  color: #183460;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left:20px;
  i{
    font-size: 1.5rem;
  }
}

.cta-button {
  background: white;
  color: #183460 !important;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  border-radius: 40px;
  text-decoration: none;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-size:24px;
  font-weight: 200;
  text-decoration: none !important;
  width: auto; /* oder ein fixer Wert wie 200px */
  align-self: flex-start;
}

.cta-button:hover {
  background-color: rgba(255,255,255,0.7);
  transform: scale(1.02);
}

.cta-button .circle {
  background-color: #183460;
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left:20px;
  i{
    font-size: 1.5rem;
  }
}

.cta-boxes {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem; /* kontrolliert Abstand */
}

.cta-link {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 1.5rem;
  text-decoration: none !important;
  background-color: #cdc0b4;
  border-radius: 24px;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-size: 32px !important;
  font-weight: 400 !important;
  line-height:54px !important;
  color:#fff !important;
}

.cta-switch {
  width: 90px;              /* Gesamtbreite der Pille */
  height: 50px;
  background-color: white;
  border-radius: 999px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Kreis rechts */
  transition: background-color 0.3s ease;
  overflow: hidden;
}

.switch-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

/* Blauer Kreis */
.cta-switch .circle {
  background-color: #183460;
  color: white;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

/* Icon etwas größer */
.cta-switch .circle i {
  font-size: 1.1rem;
}

/* Hover-Effekt: Kreis nach links schieben */
.cta-link:hover .circle {
  transform: translateX(48px);
}

/* Hover */
.cta-link:hover {
  background-color: #ab9889;
}

  .beige-box {
    position: absolute !important;
    background-color: #cdc0b4;
    padding: 2rem 2.5rem;
    width: 96%;
    left: 2%;
    bottom: 40px;
    border-radius: 50px 0 50px 50px;
    font-family: 'Saira', sans-serif;
    color: #1d2d4f;
    z-index: 3;
    box-sizing: border-box;
  }

.expose-link {
  position: absolute;
  font-family:'Saira';
  top: 1rem;
  right: 1rem;
  background: white;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  border-radius: 40px;
  text-decoration: none !important;
  color: #153461 !important;
  font-weight: 200;
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  right: 0;
    top: -30px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.expose-link:hover {
  background-color: #f5f5f5;
  transform: scale(1.01);
}

.expose-link .arrow {
  background-color: #153461;
  color: white;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-left:20px;
}

.subheadline {
  font-family: 'Magnies', serif;
  font-size: 28px;
  line-height:36px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0;
  font-weight: bold;
  color:#fff;
}

.subheadline-con {
  font-family: 'Saira', serif;
  font-size: 38px;
  line-height:50px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0;
  font-weight: bold;
  color:#fff;
  margin-top: 5px;
    margin-bottom: 30px;
}

.headline {
  font-size: 32px;
  line-height: 48px;
  margin:0 0 20px 0;
  color:#153461;
  font-weight:200;
}

.headline-con {
  font-size: 26px;
  line-height: 38px;
  margin:0 0 20px 0;
  color:#153461;
  font-weight:200;
}

  .custom-banner {
  width: 96%;
  min-height: 940px; /* oder was du brauchst */
  margin-left: 2%;
  position: relative;
  background-position: center;
  background-size: cover;
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
  overflow: hidden;
  margin-top:-170px;
}

  .custom-banner-con {
  width: 96%;
  min-height: 840px; /* oder was du brauchst */
  margin-left: 2%;
  position: relative;
  background-position: center;
  background-size: cover;
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
  overflow: hidden;
  margin-top:-170px;
  margin-bottom:100px;
}

/* Blauer Overlay mit Opazität */
.custom-banner-con .overlayheader, .custom-banner .overlayheader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #153461;
  opacity: 0.4;
  z-index: 1;
}

/* Gradient von oben bis ca. 30% Höhe */
.custom-banner-con .gradient, .custom-banner .gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(to bottom, #153461, transparent);
  z-index: 2;
}

/* Inhalte im Banner können optional hier z-index: 3 erhalten */
.custom-banner-con > *:not(.overlayheader):not(.gradient), .custom-banner > *:not(.overlayheader):not(.gradient) {
  position: relative;
  z-index: 3;
}

  .headeroutter{
    width:90
  }

	/* INDEX STYLES ENDE */

	/* PROJEKT START */

  .divcon{
		width:100%;
		padding:0 6%;
		box-sizing: border-box;
	}

	.respmenu{
		display:none;
	}

	nav{
		display:inline;
	}

	.notelresp{
		display:inline;
	}

	.nav_top_logo{
		width: 220px;
		margin: 20px 0 0 5%;
		padding: 0 0 0 0;
		height: 105px;
		img{
			width:220px;
			height:105px;
			margin: 0 0 0 0;
		}
	}


	.bgdiv_nav_top_z1, .bgdiv_nav_top_z2, .nav_scroll_bg {
		display: inline;
	  }


	/* Detailseiten START */

	.s25p{
		width: 100%;
		padding: 60px 0 0 20px;
		box-sizing: border-box;
		div{
			p, a{
				font-size:26px !important;
				line-height:36px !important;
			}
		}
	}

	.s50p{
		width:49%;
		margin:0 1% 0 0;
	}

	.sp50con{
		width:49%;
		margin:0;
	}


	a {           font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:26px; line-height:40px; font-weight:200; outline:0;
		-moz-transition: all 0.4s ease-out;  /* FF4+ */
		-o-transition: all 0.4s ease-out;  /* Opera 10.5+ */
		-webkit-transition: all 0.4s ease-out;  /* Saf3.2+, Chrome */
		-ms-transition: all 0.4s ease-out;  /* IE10? */
		transition: all 0.4s ease-out; }
	a:link {      text-decoration: none; color: #ccbfb4; }
	a:active {    text-decoration: none; color: #676766; }
	a:visited {   text-decoration: none; color: #ccbfb4; }
	a:hover {
		text-decoration: underline;
		color: #676766;
	}

	.nav_top_z1{
		margin-right:4%;
	}

	a.navtop {           font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:18px; line-height:1.2; font-weight:200; outline:0; padding:0 0 0 0; margin:20px 60px 0 0; display:inline; position:relative; float:left; text-transform:none; }
	a.navtop:link {      text-decoration: none; color: #fff; }
	a.navtop:active {    text-decoration: none; color: #ccbfb4; }
	a.navtop:visited {   text-decoration: none; color: #fff; }
	a.navtop:hover {
		text-decoration: none;
		color: #ccbfb4;
		-moz-transition: all 0.4s ease-out;  /* FF4+ */
		-o-transition: all 0.4s ease-out;  /* Opera 10.5+ */
		-webkit-transition: all 0.4s ease-out;  /* Saf3.2+, Chrome */
		-ms-transition: all 0.4s ease-out;  /* IE10? */
		transition: all 0.4s ease-out;
	}

	a.navtop_active, a.navtop_active:link, a.navtop_active:active, a.navtop_active:visited, a.navtop_active:hover {
		text-decoration: none;
		color: #ccbfb4;
		margin:20px 60px 0 0;
		font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:18px; line-height:1.2; font-weight:200;
		display:inline; position:relative; float:left; text-transform: none; padding: 0 0 0 0;
	}

  a.navtop i{
    color:#ccbfb4 !important;
  }

	p,div { font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:26px; line-height:40px; color:#153461; margin-top:0px; padding-top:0px; word-wrap: break-word; font-weight:200;}
	td {    font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:26px; line-height:40px; color:#153461; margin-top:0px; padding-top:0px; word-wrap: break-word; font-weight:200; }

	a.nav_foot {           font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:24px; line-height:36px; font-weight:200; outline:0; padding:0 0 0 0;}
	a.nav_foot:link {      text-decoration: none; color: rgba(255,255,255,0.7); }
	a.nav_foot:active {    text-decoration: none; color: rgba(255,255,255,1); }
	a.nav_foot:visited {   text-decoration: none; color: rgba(255,255,255,0.7); }
	a.nav_foot:hover {
		text-decoration: none;
		color: rgba(255,255,255,1);
		-moz-transition: all 0.4s ease-out;  /* FF4+ */
		-o-transition: all 0.4s ease-out;  /* Opera 10.5+ */
		-webkit-transition: all 0.4s ease-out;  /* Saf3.2+, Chrome */
		-ms-transition: all 0.4s ease-out;  /* IE10? */
		transition: all 0.4s ease-out;
	}

	a.nav_foot_active, a.nav_foot_active:link, a.nav_foot_active:active, a.nav_foot_active:visited, a.nav_foot_active:hover {
		text-decoration: none;
		color:rgba(255,255,255,1);
		padding:0 0 0 0;
		font-family:  'Saira', Arial, Helvetica, sans-serif;
		font-size:24px;
		line-height:36px;
		font-weight:200;
		outline:0;
	}

	h1{
		font-size:90px;
		line-height:110px;
		color:#153461;
		font-weight: 700;
		font-family: 'Saira';
		margin:20px 0;
	}

	h2{
		font-size:30px;
		line-height:70px;
		color:#908e8d;
		font-weight: 200;
		font-family: 'Saira';
	}

	h3{
		font-size:34px;
		line-height:44px;
		color:#ccbfb4;
		font-weight: 700;
		font-family: 'Saira';
		margin:0 0 20px 0;
	}

	h4{ font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:46px; line-height:60px; color: #4d4f5a; font-weight:500; margin:0 0 0 0; padding:0 0 0 0; word-wrap: break-word;}
	h5{ font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:24px; line-height:36px; color: #4d4f5a; font-weight:200; margin:20px 0 0 0; padding:0 0 0 0; word-wrap: break-word;}

	.sp50{
		width:49%;
		margin:0;
	}
	.primaryfontcolor{
		color:#272726;
	}

	.primarybgcolor{
		background-color:#272726;
	}

	.secondaryfontcolor{
		color:#ccbfb4;
	}

	.secondarybgcolor{
		background-color:#ccbfb4;
	}


/* PROJEKT ENDE */

}




@media only screen  and (min-width : 900px) and (max-width : 1225px) {

  .detail-kaufen{
    margin-bottom:0 !important;
  }

  .beratung-section {
  background-color: #153461;
    border-radius: 60px;
    padding: 1rem 4% 4rem 4%;
    margin-top:60px;
    margin: 8rem auto 4rem auto;
    width: 92%;
    margin-left: 2%;
    color: white;
    overflow: visible;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

.beratung-container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}

.beratung-text {
  flex: 1 1 60%;
}

.beratung-text h2 {
  font-size: 40px;
  margin-bottom: 54px;
  line-height:54px;
  font-weight: 400;
  color: white;
}

.beratung-text p {
  font-size: 26px;
  line-height: 36px;
  font-weight: 200;
  color: white;
  margin-bottom: 2rem;
}

.beratung-image {
  flex: 1 1 25%;
  position: relative;
  z-index: 3;
}

.beratung-image img {
  max-height: 500px;
  position: absolute;
  top: -440px; /* Bild ragt oben raus */
  right: 0;
  object-fit: contain;
}

  .announcement-section {
    padding: 7rem 2% 4rem 2%; /* oben & unten viel Platz, seitlich flexibel */
    width:96%;
    margin: 0 auto;
    text-align: center;
    background-color: transparent; /* oder eine Farbe, wenn gewünscht */
  }

  .announcement-text {
    font-size: 30px;
    line-height: 40px;
    font-weight: 200;
    color: #183460;
    max-width: 90%;
    margin: 0 auto;
  }

  .linktelmobile{
    display:none !important;
  }

    /* Grid-Layout */
.expose-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 4rem 2rem;
}

/* Einzelne Card */
.expose-card {
  position: relative;
  background-size: cover;
  background-position: center;
  height: 500px;
  border-radius: 60px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Overlay */
.immooverlay {
  position: absolute;
  inset: 0;
  background-color: rgba(21, 52, 97, 0.4);
  z-index: 1;
}

.expose-button{
  z-index:9;
}

.detail-kaufen > .expose-content{
  width:92%;
  left:4%;
  .expose-meta{
    justify-content: flex-start;
    margin-top: 20px;
  }
  .eyebrow{
    margin-bottom: -1.5rem;
  }
}

	 .marginb80{
    margin-bottom:100px;
  }

  .bildbox {
    width: 48% !important;
    border-radius: 50px !important;
    overflow: hidden !important;
    display: block !important;
    height: auto !important;
  }

     .bildbox img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
      }

        .width50 {
          width: 48% !important;
        }

  /* INDEX STYLES */

  .footer {
  background-color: #cdc0b4;
  padding: 4rem 4% 2rem 4%;
  width:94%;
  margin-left:2%;
  border-top-left-radius: 80px;
  border-top-right-radius: 80px;
  color: #183460;
  font-family: 'Saira', sans-serif;
  font-size: 1rem;
  box-sizing: border-box;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.footer-col {
  flex: 1 1 45%;
}

.footer-col p {
  font-size: 36px;
  line-height: 1.5;
  font-weight: 200;
  color:#183460;
  margin: 0;
  a{
    font-size: 36px !important;
  line-height: 1.5 !important;
  font-weight: 200 !important;
  color:#183460 !important;
  text-decoration: none !important;
  margin: 0;
  }
}

.right{
  text-align:right !important;
}

.footer-col strong {
  font-size: 22px;
  font-weight: 700;
  display: block;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  color: white;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 0.9rem;
  font-weight: 400;
  color: white;
}

.footer-bottom a {
  color: white !important;
  text-decoration: none !important;
  margin-left: 0.5rem !important;
  font-size:0.9rem !important;
  font-weight: 400 !important;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

  .inspiration-section {
  text-align: center;
  padding: 4rem 2% 6rem 2%;
  width: 96%;
  margin: 0 auto;
}

.symbol {
  width: 72px;
  height:100px;
  margin-bottom: 3rem;
  opacity: 0.8;
}

.inspiration-text {
  font-size: 30px;
  line-height: 40px;
  font-weight: 200;
  color: #183460;
  margin: 0 auto;
  max-width: 90%;
}

.expose-card {
  position: relative;
  width: 96%;
  margin-left: 2%;
  height: 500px;
  background-position: center;
  background-size: cover;
  border-radius: 80px;
  overflow: hidden;
  margin-bottom: 4rem;
  min-height: 600px;
}

.immooverlay {
  position: absolute;
  inset: 0;
  background-color: rgba(21, 52, 97, 0.4);
  z-index: 1;
}

.expose-content {
  position: absolute;
  bottom: 40px;
  left: 2%;
  width: 96%;
  padding: 2rem;
  background-color: #cdc0b4;
  border-radius: 50px 0 50px 50px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  z-index: 2;
  box-sizing: border-box;
}

/* Header-Button-Stil */
.expose-button {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  background-color: white;
  border-radius: 999px;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  font-weight: 200;
  color: #183460;
  text-decoration: none !important;
  font-size: 24px;
  gap: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s ease, transform 0.3s ease;
  position:absolute;
  right:0;
  top:-35px;
}

.expose-button:hover {
  background-color: #f0f0f0;
  transform: scale(1.02);
}

/* Pfeilkreis */
.expose-button .circle {
  background-color: #183460;
  color: white;
  width: 50px;
  height: 50px;
  margin-left:20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expose-button .circle i {
  font-size: 1.5rem;
}

.eyebrow {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 24px;
  line-height: 36px;
  color: #fff;
  margin-bottom: 0.5rem;
}

.title {
  font-size: 30px;
  line-height: 40px;
  font-weight: 200;
  color: #183460;
  margin: 0;
}

.expose-text {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: nowrap;
}

.text-left {
  width: 50%;
  display: flex;
  flex-direction: column;
}

.expose-meta {
  width: 50%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2rem;
  color: #fff;
  font-size: 24px;
  line-height:36px;
  margin-top:60px;
}

.expose-meta i {
  margin-right: 0.5rem;
  color: #153461;
}



.info-cta-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 5rem 2.5rem;
  margin-top: 100px;
  align-items: stretch; /* sorgt dafür, dass beide Spalten gleich hoch sind */
}

.info-box {
  background-color: #183460; /* dunkles Blau */
  color: white;
  border-radius: 40px;
  padding: 4rem;
  display:flex;
  flex: 1 1 45%;
  flex-direction: column;
  min-height:600px;
  box-sizing: border-box;
}

.info-box h2 {
  font-size: 40px !important;
  font-weight: 400 !important;
  line-height:54px !important;
  color:#fff !important;
  margin-bottom: 2rem;
  width:90%;
  margin-top:0;
}

.info-box p {
  font-size: 26px;
  font-weight:200;
  line-height:36px;
  color:#fff;
  margin-bottom: 2rem;
}

.cta-button-con {
  background: #183460;
  color: #fff !important;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  border-radius: 40px;
  text-decoration: none;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-size:24px;
  font-weight: 200;
  text-decoration: none !important;
  width: auto; /* oder ein fixer Wert wie 200px */
  align-self: flex-start;
}

.cta-button-con:hover {
  background-color: #315693;
  transform: scale(1.02);
}

.cta-button-con .circle {
  background-color: #fff;
  color: #183460;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left:20px;
  i{
    font-size: 1.5rem;
  }
}

.cta-button {
  background: white;
  color: #183460 !important;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  border-radius: 40px;
  text-decoration: none;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-size:24px;
  font-weight: 200;
  text-decoration: none !important;
  width: auto; /* oder ein fixer Wert wie 200px */
  align-self: flex-start;
}

.cta-button:hover {
  background-color: rgba(255,255,255,0.7);
  transform: scale(1.02);
}

.cta-button .circle {
  background-color: #183460;
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left:20px;
  i{
    font-size: 1.5rem;
  }
}

.cta-boxes {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem; /* kontrolliert Abstand */
}

.cta-link {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 1.5rem;
  text-decoration: none !important;
  background-color: #cdc0b4;
  border-radius: 24px;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-size: 32px !important;
  font-weight: 400 !important;
  line-height:54px !important;
  color:#fff !important;
}

.cta-switch {
  width: 90px;              /* Gesamtbreite der Pille */
  height: 50px;
  background-color: white;
  border-radius: 999px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Kreis rechts */
  transition: background-color 0.3s ease;
  overflow: hidden;
}

.switch-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

/* Blauer Kreis */
.cta-switch .circle {
  background-color: #183460;
  color: white;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

/* Icon etwas größer */
.cta-switch .circle i {
  font-size: 1.1rem;
}

/* Hover-Effekt: Kreis nach links schieben */
.cta-link:hover .circle {
  transform: translateX(48px);
}

/* Hover */
.cta-link:hover {
  background-color: #ab9889;
}

  .beige-box {
    position: absolute !important;
    background-color: #cdc0b4;
    padding: 2rem 2.5rem;
    width: 96%;
    left: 2%;
    bottom: 40px;
    border-radius: 50px 0 50px 50px;
    font-family: 'Saira', sans-serif;
    color: #1d2d4f;
    z-index: 3;
    box-sizing: border-box;
  }

.expose-link {
  position: absolute;
  font-family:'Saira';
  top: 1rem;
  right: 1rem;
  background: white;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  border-radius: 40px;
  text-decoration: none !important;
  color: #153461 !important;
  font-weight: 200;
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  right: 0;
    top: -30px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.expose-link:hover {
  background-color: #f5f5f5;
  transform: scale(1.01);
}

.expose-link .arrow {
  background-color: #153461;
  color: white;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-left:20px;
}

.subheadline {
  font-family: 'Magnies', serif;
  font-size: 28px;
  line-height:36px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0;
  font-weight: bold;
  color:#fff;
}

.subheadline-con {
  font-family: 'Saira', serif;
  font-size: 42px;
  line-height:56px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0;
  font-weight: bold;
  color:#fff;
  margin-top: 5px;
    margin-bottom: 30px;
}

.headline {
  font-size: 42px;
  line-height: 60px;
  margin:0 0 20px 0;
  color:#153461;
  font-weight:200;
}

.headline-con {
  font-size: 30px;
  line-height: 40px;
  margin:0 0 20px 0;
  color:#153461;
  font-weight:200;
}

  .custom-banner {
  width: 96%;
  min-height: 940px; /* oder was du brauchst */
  margin-left: 2%;
  position: relative;
  background-position: center;
  background-size: cover;
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
  overflow: hidden;
  margin-top:-170px;
}

  .custom-banner-con {
  width: 96%;
  min-height: 740px; /* oder was du brauchst */
  margin-left: 2%;
  position: relative;
  background-position: center;
  background-size: cover;
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
  overflow: hidden;
  margin-top:-170px;
  margin-bottom:100px;
}

/* Blauer Overlay mit Opazität */
.custom-banner-con .overlayheader, .custom-banner .overlayheader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #153461;
  opacity: 0.4;
  z-index: 1;
}

/* Gradient von oben bis ca. 30% Höhe */
.custom-banner-con .gradient, .custom-banner .gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(to bottom, #153461, transparent);
  z-index: 2;
}

/* Inhalte im Banner können optional hier z-index: 3 erhalten */
.custom-banner-con > *:not(.overlayheader):not(.gradient), .custom-banner > *:not(.overlayheader):not(.gradient) {
  position: relative;
  z-index: 3;
}

  .headeroutter{
    width:90
  }

	/* INDEX STYLES ENDE */

	/* PROJEKT START */

  .divcon{
		width:100%;
		padding:0 6%;
		box-sizing: border-box;
	}

	.respmenu{
		display:none;
	}

	nav{
		display:inline;
	}

	.notelresp{
		display:inline;
	}

	.nav_top_logo{
		width: 220px;
		margin: 50px 0 0 5%;
		padding: 0 0 0 0;
		height: 105px;
		img{
			width:220px;
			height:105px;
			margin: 0 0 0 0;
		}
	}


	.bgdiv_nav_top_z1, .bgdiv_nav_top_z2, .nav_scroll_bg {
		display: inline;
	  }


	/* Detailseiten START */

	.s25p{
		width: 100%;
		padding: 60px 0 0 20px;
		box-sizing: border-box;
		div{
			p, a{
				font-size:26px !important;
				line-height:36px !important;
			}
		}
	}

	.s50p{
		width:49%;
		margin:0 1% 0 0;
	}

	.sp50con{
		width:49%;
		margin:0;
	}


	a {           font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:32px; line-height:44px; font-weight:200; outline:0;
		-moz-transition: all 0.4s ease-out;  /* FF4+ */
		-o-transition: all 0.4s ease-out;  /* Opera 10.5+ */
		-webkit-transition: all 0.4s ease-out;  /* Saf3.2+, Chrome */
		-ms-transition: all 0.4s ease-out;  /* IE10? */
		transition: all 0.4s ease-out; }
	a:link {      text-decoration: none; color: #ccbfb4; }
	a:active {    text-decoration: none; color: #676766; }
	a:visited {   text-decoration: none; color: #ccbfb4; }
	a:hover {
		text-decoration: underline;
		color: #676766;
	}

	.nav_top_z1{
		margin-right:4%;
	}

	a.navtop {           font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:22px; line-height:1.2; font-weight:200; outline:0; padding:0 0 0 0; margin:20px 50px 0 0; display:inline; position:relative; float:left; text-transform:none; }
	a.navtop:link {      text-decoration: none; color: #fff; }
	a.navtop:active {    text-decoration: none; color: #ccbfb4; }
	a.navtop:visited {   text-decoration: none; color: #fff; }
	a.navtop:hover {
		text-decoration: none;
		color: #ccbfb4;
		-moz-transition: all 0.4s ease-out;  /* FF4+ */
		-o-transition: all 0.4s ease-out;  /* Opera 10.5+ */
		-webkit-transition: all 0.4s ease-out;  /* Saf3.2+, Chrome */
		-ms-transition: all 0.4s ease-out;  /* IE10? */
		transition: all 0.4s ease-out;
	}

	a.navtop_active, a.navtop_active:link, a.navtop_active:active, a.navtop_active:visited, a.navtop_active:hover {
		text-decoration: none;
		color: #ccbfb4;
		margin:20px 50px 0 0;
		font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:22px; line-height:1.2; font-weight:200;
		display:inline; position:relative; float:left; text-transform: none; padding: 0 0 0 0;
	}

  a.navtop i{
    color:#ccbfb4 !important;
  }

	p,div { font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:26px; line-height:40px; color:#153461; margin-top:0px; padding-top:0px; word-wrap: break-word; font-weight:200;}
	td {    font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:26px; line-height:40px; color:#153461; margin-top:0px; padding-top:0px; word-wrap: break-word; font-weight:200; }

	a.nav_foot {           font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:24px; line-height:36px; font-weight:200; outline:0; padding:0 0 0 0;}
	a.nav_foot:link {      text-decoration: none; color: rgba(255,255,255,0.7); }
	a.nav_foot:active {    text-decoration: none; color: rgba(255,255,255,1); }
	a.nav_foot:visited {   text-decoration: none; color: rgba(255,255,255,0.7); }
	a.nav_foot:hover {
		text-decoration: none;
		color: rgba(255,255,255,1);
		-moz-transition: all 0.4s ease-out;  /* FF4+ */
		-o-transition: all 0.4s ease-out;  /* Opera 10.5+ */
		-webkit-transition: all 0.4s ease-out;  /* Saf3.2+, Chrome */
		-ms-transition: all 0.4s ease-out;  /* IE10? */
		transition: all 0.4s ease-out;
	}

	a.nav_foot_active, a.nav_foot_active:link, a.nav_foot_active:active, a.nav_foot_active:visited, a.nav_foot_active:hover {
		text-decoration: none;
		color:rgba(255,255,255,1);
		padding:0 0 0 0;
		font-family:  'Saira', Arial, Helvetica, sans-serif;
		font-size:24px;
		line-height:36px;
		font-weight:200;
		outline:0;
	}

	h1{
		font-size:90px;
		line-height:110px;
		color:#153461;
		font-weight: 700;
		font-family: 'Saira';
		margin:20px 0;
	}

	h2{
		font-size:30px;
		line-height:70px;
		color:#908e8d;
		font-weight: 200;
		font-family: 'Saira';
	}

	h3{
		font-size:34px;
		line-height:44px;
		color:#ccbfb4;
		font-weight: 700;
		font-family: 'Saira';
		margin:0 0 20px 0;
	}

	h4{ font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:46px; line-height:60px; color: #4d4f5a; font-weight:500; margin:0 0 0 0; padding:0 0 0 0; word-wrap: break-word;}
	h5{ font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:24px; line-height:36px; color: #4d4f5a; font-weight:200; margin:20px 0 0 0; padding:0 0 0 0; word-wrap: break-word;}

	.sp50{
		width:49%;
		margin:0;
	}
	.primaryfontcolor{
		color:#272726;
	}

	.primarybgcolor{
		background-color:#272726;
	}

	.secondaryfontcolor{
		color:#ccbfb4;
	}

	.secondarybgcolor{
		background-color:#ccbfb4;
	}


/* PROJEKT ENDE */


}





@media only screen  and (min-width : 1225px) and (max-width : 1400px) {
/* Unterseiten STYLES */

.detail-kaufen{
    margin-bottom:0 !important;
  }

.beratung-section {
  background-color: #153461;
    border-radius: 60px;
    padding: 1rem 4% 4rem 4%;
    margin-top:60px;
    margin: 8rem auto 4rem auto;
    width: 92%;
    margin-left: 2%;
    color: white;
    overflow: visible;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

.beratung-container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}

.beratung-text {
  flex: 1 1 65%;
}

.beratung-text h2 {
  font-size: 40px;
  line-height: 54px;
  margin-bottom: 54px;
  font-weight: 400;
  color: white;
  hyphens: none;
}

.beratung-text p {
  font-size: 26px;
  line-height: 36px;
  font-weight: 200;
  color: white;
  margin-bottom: 2rem;
}

.beratung-image {
  flex: 1 1 30%;
  position: relative;
  z-index: 3;
}

.beratung-image img {
  max-height: 600px;
  position: absolute;
  top: -540px; /* Bild ragt oben raus */
  right: 0;
  object-fit: contain;
}

.announcement-section {
    padding: 7rem 2% 4rem 2%; /* oben & unten viel Platz, seitlich flexibel */
    width:96%;
    margin: 0 auto;
    text-align: center;
    background-color: transparent; /* oder eine Farbe, wenn gewünscht */
  }

  .announcement-text {
    font-size: 42px;
    line-height: 56px;
    font-weight: 200;
    color: #183460;
    max-width: 80%;
    margin: 0 auto;
  }

.linktelmobile{
    display:none !important;
  }

  /* Grid-Layout */
.expose-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 4rem 2rem;
}

/* Einzelne Card */
.expose-card {
  position: relative;
  background-size: cover;
  background-position: center;
  height: 500px;
  border-radius: 60px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Overlay */
.immooverlay {
  position: absolute;
  inset: 0;
  background-color: rgba(21, 52, 97, 0.4);
  z-index: 1;
}

.expose-button{
  z-index:9;
}

.detail-kaufen > .expose-content{
  width:92% !important;
  left:4% !important;
  .expose-meta{
    justify-content: flex-start !important;
    margin-top: 20px !important;
  }
  .eyebrow{
    margin-bottom: -1.5rem !important;
  }
}


  .marginb80{
    margin-bottom:100px;
  }

  .bildbox {
    width: 48% !important;
    border-radius: 50px !important;
    overflow: hidden !important;
    display: block !important;
    height: auto !important;
  }

     .bildbox img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
      }

        .width50 {
          width: 48% !important;
        }

  /* INDEX STYLES */

  .footer {
  background-color: #cdc0b4;
  padding: 4rem 4% 2rem 4%;
  width:94%;
  margin-left:2%;
  border-top-left-radius: 80px;
  border-top-right-radius: 80px;
  color: #183460;
  font-family: 'Saira', sans-serif;
  font-size: 1rem;
  box-sizing: border-box;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.footer-col {
  flex: 1 1 45%;
}

.footer-col p {
  font-size: 36px;
  line-height: 1.5;
  font-weight: 200;
  color:#183460;
  margin: 0;
  a{
    font-size: 36px !important;
  line-height: 1.5 !important;
  font-weight: 200 !important;
  color:#183460 !important;
  text-decoration: none !important;
  margin: 0;
  }
}

.right{
  text-align:right !important;
}

.footer-col strong {
  font-size: 22px;
  font-weight: 700;
  display: block;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  color: white;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 0.9rem;
  font-weight: 400;
  color: white;
}

.footer-bottom a {
  color: white !important;
  text-decoration: none !important;
  margin-left: 0.5rem !important;
  font-size:0.9rem !important;
  font-weight: 400 !important;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

  .inspiration-section {
  text-align: center;
  padding: 4rem 2% 6rem 2%;
  width: 96%;
  margin: 0 auto;
}

.symbol {
  width: 72px;
  height:100px;
  margin-bottom: 3rem;
  opacity: 0.8;
}

.inspiration-text {
  font-size: 42px;
  line-height: 56px;
  font-weight: 200;
  color: #183460;
  margin: 0 auto;
  max-width: 90%;
}

.expose-card {
  position: relative;
  width: 96%;
  margin-left: 2%;
  height: 500px;
  background-position: center;
  background-size: cover;
  border-radius: 80px;
  overflow: hidden;
  margin-bottom: 4rem;
  min-height: 700px;
}

.immooverlay {
  position: absolute;
  inset: 0;
  background-color: rgba(21, 52, 97, 0.4);
  z-index: 1;
}

.expose-content {
  position: absolute;
  bottom: 40px;
  left: 2%;
  width: 96%;
  padding: 2rem;
  background-color: #cdc0b4;
  border-radius: 50px 0 50px 50px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  z-index: 2;
  box-sizing: border-box;
}

/* Header-Button-Stil */
.expose-button {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  background-color: white;
  border-radius: 999px;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  font-weight: 200;
  color: #183460;
  text-decoration: none !important;
  font-size: 24px;
  gap: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s ease, transform 0.3s ease;
  position:absolute;
  right:0;
  top:-35px;
}

.expose-button:hover {
  background-color: #f0f0f0;
  transform: scale(1.02);
}

/* Pfeilkreis */
.expose-button .circle {
  background-color: #183460;
  color: white;
  width: 50px;
  height: 50px;
  margin-left:20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expose-button .circle i {
  font-size: 1.5rem;
}

.eyebrow {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 24px;
  line-height: 36px;
  color: #fff;
  margin-bottom: 0.5rem;
}

.title {
  font-size: 42px;
  line-height: 56px;
  font-weight: 200;
  color: #183460;
  margin: 0;
}

.expose-text {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: nowrap;
}

.text-left {
  width: 50%;
  display: flex;
  flex-direction: column;
}

.expose-meta {
  width: 50%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2rem;
  color: #fff;
  font-size: 24px;
  line-height:36px;
  margin-top:60px;
}

.expose-meta i {
  margin-right: 0.5rem;
  color: #153461;
}



.info-cta-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 5rem 2.5rem;
  margin-top: 100px;
  align-items: stretch; /* sorgt dafür, dass beide Spalten gleich hoch sind */
}

.info-box {
  background-color: #183460; /* dunkles Blau */
  color: white;
  border-radius: 40px;
  padding: 4rem;
  display:flex;
  flex: 1 1 45%;
  flex-direction: column;
  min-height:600px;
  box-sizing: border-box;
}

.info-box h2 {
  font-size: 40px !important;
  font-weight: 400 !important;
  line-height:54px !important;
  color:#fff !important;
  margin-bottom: 2rem;
  width:90%;
  margin-top:0;
}

.info-box p {
  font-size: 26px;
  font-weight:200;
  line-height:36px;
  color:#fff;
  margin-bottom: 2rem;
}

.cta-button-con {
  background: #183460;
  color: #fff !important;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  border-radius: 40px;
  text-decoration: none;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-size:24px;
  font-weight: 200;
  text-decoration: none !important;
  width: auto; /* oder ein fixer Wert wie 200px */
  align-self: flex-start;
}

.cta-button-con:hover {
  background-color: #315693;
  transform: scale(1.02);
}

.cta-button-con .circle {
  background-color: #fff;
  color: #183460;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left:20px;
  i{
    font-size: 1.5rem;
  }
}

.cta-button {
  background: white;
  color: #183460 !important;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  border-radius: 40px;
  text-decoration: none;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-size:24px;
  font-weight: 200;
  text-decoration: none !important;
  width: auto; /* oder ein fixer Wert wie 200px */
  align-self: flex-start;
}

.cta-button:hover {
  background-color: rgba(255,255,255,0.7);
  transform: scale(1.02);
}

.cta-button .circle {
  background-color: #183460;
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left:20px;
  i{
    font-size: 1.5rem;
  }
}

.cta-boxes {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem; /* kontrolliert Abstand */
}

.cta-link {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 1.5rem;
  text-decoration: none !important;
  background-color: #cdc0b4;
  border-radius: 24px;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-size: 32px !important;
  font-weight: 400 !important;
  line-height:54px !important;
  color:#fff !important;
}

.cta-switch {
  width: 90px;              /* Gesamtbreite der Pille */
  height: 50px;
  background-color: white;
  border-radius: 999px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Kreis rechts */
  transition: background-color 0.3s ease;
  overflow: hidden;
}

.switch-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

/* Blauer Kreis */
.cta-switch .circle {
  background-color: #183460;
  color: white;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

/* Icon etwas größer */
.cta-switch .circle i {
  font-size: 1.1rem;
}

/* Hover-Effekt: Kreis nach links schieben */
.cta-link:hover .circle {
  transform: translateX(48px);
}

/* Hover */
.cta-link:hover {
  background-color: #ab9889;
}

  .beige-box {
    position: absolute !important;
    background-color: #cdc0b4;
    padding: 2rem 2.5rem;
    width: 96%;
    left: 2%;
    bottom: 40px;
    border-radius: 50px 0 50px 50px;
    font-family: 'Saira', sans-serif;
    color: #1d2d4f;
    z-index: 3;
    box-sizing: border-box;
  }

.expose-link {
  position: absolute;
  font-family:'Saira';
  top: 1rem;
  right: 1rem;
  background: white;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  border-radius: 40px;
  text-decoration: none !important;
  color: #153461 !important;
  font-weight: 200;
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  right: 0;
    top: -30px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.expose-link:hover {
  background-color: #f5f5f5;
  transform: scale(1.01);
}

.expose-link .arrow {
  background-color: #153461;
  color: white;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-left:20px;
}

.subheadline {
  font-family: 'Magnies', serif;
  font-size: 28px;
  line-height:36px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0;
  font-weight: bold;
  color:#fff;
}

.subheadline-con {
  font-family: 'Saira', serif;
  font-size: 42px;
  line-height:56px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0;
  font-weight: bold;
  color:#fff;
  margin-top: 5px;
    margin-bottom: 30px;
}

.headline {
  font-size: 56px;
  line-height: 72px;
  margin:0 0 20px 0;
  color:#153461;
  font-weight:200;
}

.headline-con {
  font-size: 32px;
  line-height: 46px;
  margin:0 0 20px 0;
  color:#153461;
  font-weight:200;
}

  .custom-banner {
  width: 96%;
  min-height: 940px; /* oder was du brauchst */
  margin-left: 2%;
  position: relative;
  background-position: center;
  background-size: cover;
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
  overflow: hidden;
  margin-top:-170px;
}

  .custom-banner-con {
  width: 96%;
  min-height: 740px; /* oder was du brauchst */
  margin-left: 2%;
  position: relative;
  background-position: center;
  background-size: cover;
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
  overflow: hidden;
  margin-top:-170px;
  margin-bottom:100px;
}

/* Blauer Overlay mit Opazität */
.custom-banner-con .overlayheader, .custom-banner .overlayheader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #153461;
  opacity: 0.4;
  z-index: 1;
}

/* Gradient von oben bis ca. 30% Höhe */
.custom-banner-con .gradient, .custom-banner .gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(to bottom, #153461, transparent);
  z-index: 2;
}

/* Inhalte im Banner können optional hier z-index: 3 erhalten */
.custom-banner-con > *:not(.overlayheader):not(.gradient), .custom-banner > *:not(.overlayheader):not(.gradient) {
  position: relative;
  z-index: 3;
}

  .headeroutter{
    width:90
  }

	/* INDEX STYLES ENDE */

	/* PROJEKT START */

  .divcon{
		width:100%;
		padding:0 6%;
		box-sizing: border-box;
	}

	.respmenu{
		display:none;
	}

	nav{
		display:inline;
	}

	.notelresp{
		display:inline;
	}

	.nav_top_logo{
		width: 220px;
		margin: 50px 0 0 5%;
		padding: 0 0 0 0;
		height: 105px;
		img{
			width:220px;
			height:105px;
			margin: 0 0 0 0;
		}
	}


	.bgdiv_nav_top_z1, .bgdiv_nav_top_z2, .nav_scroll_bg {
		display: inline;
	  }


	/* Detailseiten START */

	.s25p{
		width: 25%;
		padding: 0 0 0 20px;
		box-sizing: border-box;
		div{
			p, a{
				font-size:26px !important;
				line-height:36px !important;
			}
		}
	}

	.s50p{
		width:49%;
		margin:0 1% 0 0;
	}

	.sp50con{
		width:49%;
		margin:0;
	}


	a {           font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:32px; line-height:44px; font-weight:200; outline:0;
		-moz-transition: all 0.4s ease-out;  /* FF4+ */
		-o-transition: all 0.4s ease-out;  /* Opera 10.5+ */
		-webkit-transition: all 0.4s ease-out;  /* Saf3.2+, Chrome */
		-ms-transition: all 0.4s ease-out;  /* IE10? */
		transition: all 0.4s ease-out; }
	a:link {      text-decoration: none; color: #ccbfb4; }
	a:active {    text-decoration: none; color: #676766; }
	a:visited {   text-decoration: none; color: #ccbfb4; }
	a:hover {
		text-decoration: underline;
		color: #676766;
	}

	.nav_top_z1{
		margin-right:4%;
	}

	a.navtop {           font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:22px; line-height:1.2; font-weight:200; outline:0; padding:0 0 0 0; margin:20px 50px 0 0; display:inline; position:relative; float:left; text-transform:none; }
	a.navtop:link {      text-decoration: none; color: #fff; }
	a.navtop:active {    text-decoration: none; color: #ccbfb4; }
	a.navtop:visited {   text-decoration: none; color: #fff; }
	a.navtop:hover {
		text-decoration: none;
		color: #ccbfb4;
		-moz-transition: all 0.4s ease-out;  /* FF4+ */
		-o-transition: all 0.4s ease-out;  /* Opera 10.5+ */
		-webkit-transition: all 0.4s ease-out;  /* Saf3.2+, Chrome */
		-ms-transition: all 0.4s ease-out;  /* IE10? */
		transition: all 0.4s ease-out;
	}

	a.navtop_active, a.navtop_active:link, a.navtop_active:active, a.navtop_active:visited, a.navtop_active:hover {
		text-decoration: none;
		color: #ccbfb4;
		margin:20px 50px 0 0;
		font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:22px; line-height:1.2; font-weight:200;
		display:inline; position:relative; float:left; text-transform: none; padding: 0 0 0 0;
	}

  a.navtop i{
    color:#ccbfb4 !important;
  }

	p,div { font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:26px; line-height:40px; color:#153461; margin-top:0px; padding-top:0px; word-wrap: break-word; font-weight:200;}
	td {    font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:26px; line-height:40px; color:#153461; margin-top:0px; padding-top:0px; word-wrap: break-word; font-weight:200; }

	a.nav_foot {           font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:24px; line-height:36px; font-weight:200; outline:0; padding:0 0 0 0;}
	a.nav_foot:link {      text-decoration: none; color: rgba(255,255,255,0.7); }
	a.nav_foot:active {    text-decoration: none; color: rgba(255,255,255,1); }
	a.nav_foot:visited {   text-decoration: none; color: rgba(255,255,255,0.7); }
	a.nav_foot:hover {
		text-decoration: none;
		color: rgba(255,255,255,1);
		-moz-transition: all 0.4s ease-out;  /* FF4+ */
		-o-transition: all 0.4s ease-out;  /* Opera 10.5+ */
		-webkit-transition: all 0.4s ease-out;  /* Saf3.2+, Chrome */
		-ms-transition: all 0.4s ease-out;  /* IE10? */
		transition: all 0.4s ease-out;
	}

	a.nav_foot_active, a.nav_foot_active:link, a.nav_foot_active:active, a.nav_foot_active:visited, a.nav_foot_active:hover {
		text-decoration: none;
		color:rgba(255,255,255,1);
		padding:0 0 0 0;
		font-family:  'Saira', Arial, Helvetica, sans-serif;
		font-size:24px;
		line-height:36px;
		font-weight:200;
		outline:0;
	}

	h1{
		font-size:90px;
		line-height:110px;
		color:#153461;
		font-weight: 700;
		font-family: 'Saira';
		margin:20px 0;
	}

	h2{
		font-size:30px;
		line-height:70px;
		color:#908e8d;
		font-weight: 200;
		font-family: 'Saira';
	}

	h3{
		font-size:34px;
		line-height:44px;
		color:#ccbfb4;
		font-weight: 700;
		font-family: 'Saira';
		margin:0 0 20px 0;
	}

	h4{ font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:46px; line-height:60px; color: #4d4f5a; font-weight:500; margin:0 0 0 0; padding:0 0 0 0; word-wrap: break-word;}
	h5{ font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:24px; line-height:36px; color: #4d4f5a; font-weight:200; margin:20px 0 0 0; padding:0 0 0 0; word-wrap: break-word;}

	.sp50{
		width:49%;
		margin:0;
	}
	.primaryfontcolor{
		color:#272726;
	}

	.primarybgcolor{
		background-color:#272726;
	}

	.secondaryfontcolor{
		color:#ccbfb4;
	}

	.secondarybgcolor{
		background-color:#ccbfb4;
	}


/* PROJEKT ENDE */


}







@media only screen  and (min-width : 1400px) and (max-width : 1660px) {

	/* Unterseiten STYLES */

  .detail-kaufen{
    margin-bottom:0 !important;
  }

  .beratung-section {
  background-color: #153461;
    border-radius: 60px;
    padding: 1rem 4% 4rem 4%;
    margin-top:60px;
    margin: 8rem auto 4rem auto;
    width: 92%;
    margin-left: 2%;
    color: white;
    overflow: visible;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

.beratung-container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}

.beratung-text {
  flex: 1 1 65%;
}

.beratung-text h2 {
  font-size: 40px;
  margin-bottom: 54px;
  font-weight: 400;
  color: white;
}

.beratung-text p {
  font-size: 26px;
  line-height: 36px;
  font-weight: 200;
  color: white;
  margin-bottom: 2rem;
}

.beratung-image {
  flex: 1 1 30%;
  position: relative;
  z-index: 3;
}

.beratung-image img {
  max-height: 600px;
  position: absolute;
  top: -540px; /* Bild ragt oben raus */
  right: 0;
  object-fit: contain;
}



  .announcement-section {
    padding: 7rem 2% 4rem 2%; /* oben & unten viel Platz, seitlich flexibel */
    width:96%;
    margin: 0 auto;
    text-align: center;
    background-color: transparent; /* oder eine Farbe, wenn gewünscht */
  }

  .announcement-text {
    font-size: 42px;
    line-height: 56px;
    font-weight: 200;
    color: #183460;
    max-width: 80%;
    margin: 0 auto;
  }

  .linktelmobile{
    display:none !important;
  }

    /* Grid-Layout */
.expose-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 4rem 2rem;
}

/* Einzelne Card */
.expose-card {
  position: relative;
  background-size: cover;
  background-position: center;
  height: 500px;
  border-radius: 60px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Overlay */
.immooverlay {
  position: absolute;
  inset: 0;
  background-color: rgba(21, 52, 97, 0.4);
  z-index: 1;
}

.expose-button{
  z-index:9;
}

.detail-kaufen > .expose-content{
  width:92%;
  left:4%;
  .expose-meta{
    justify-content: flex-start;
    margin-top: 20px;
  }
  .eyebrow{
    margin-bottom: -1.5rem;
  }
}

  .marginb80{
    margin-bottom:100px;
  }

  .bildbox {
    width: 48% !important;
    border-radius: 50px !important;
    overflow: hidden !important;
    display: block !important;
    height: auto !important;
  }

     .bildbox img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
      }

        .width50 {
          width: 48% !important;
        }

  /* INDEX STYLES */

  .footer {
  background-color: #cdc0b4;
  padding: 4rem 4% 2rem 4%;
  width:94%;
  margin-left:2%;
  border-top-left-radius: 80px;
  border-top-right-radius: 80px;
  color: #183460;
  font-family: 'Saira', sans-serif;
  font-size: 1rem;
  box-sizing: border-box;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.footer-col {
  flex: 1 1 45%;
}

.footer-col p {
  font-size: 36px;
  line-height: 1.5;
  font-weight: 200;
  color:#183460;
  margin: 0;
  a{
    font-size: 36px !important;
  line-height: 1.5 !important;
  font-weight: 200 !important;
  color:#183460 !important;
  text-decoration: none !important;
  margin: 0;
  }
}

.right{
  text-align:right !important;
}

.footer-col strong {
  font-size: 22px;
  font-weight: 700;
  display: block;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  color: white;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 0.9rem;
  font-weight: 400;
  color: white;
}

.footer-bottom a {
  color: white !important;
  text-decoration: none !important;
  margin-left: 0.5rem !important;
  font-size:0.9rem !important;
  font-weight: 400 !important;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

  .inspiration-section {
  text-align: center;
  padding: 4rem 2% 6rem 2%;
  width: 96%;
  margin: 0 auto;
}

.symbol {
  width: 72px;
  height:100px;
  margin-bottom: 3rem;
  opacity: 0.8;
}

.inspiration-text {
  font-size: 42px;
  line-height: 56px;
  font-weight: 200;
  color: #183460;
  margin: 0 auto;
  max-width: 100%;
}

.expose-card {
  position: relative;
  width: 96%;
  margin-left: 2%;
  height: 500px;
  background-position: center;
  background-size: cover;
  border-radius: 80px;
  overflow: hidden;
  margin-bottom: 4rem;
  min-height: 700px;
}

.immooverlay {
  position: absolute;
  inset: 0;
  background-color: rgba(21, 52, 97, 0.4);
  z-index: 1;
}

.expose-content {
  position: absolute;
  bottom: 40px;
  left: 2%;
  width: 96%;
  padding: 2rem;
  background-color: #cdc0b4;
  border-radius: 50px 0 50px 50px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  z-index: 2;
  box-sizing: border-box;
}

/* Header-Button-Stil */
.expose-button {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  background-color: white;
  border-radius: 999px;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  font-weight: 200;
  color: #183460;
  text-decoration: none !important;
  font-size: 24px;
  gap: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s ease, transform 0.3s ease;
  position:absolute;
  right:0;
  top:-35px;
}

.expose-button:hover {
  background-color: #f0f0f0;
  transform: scale(1.02);
}

/* Pfeilkreis */
.expose-button .circle {
  background-color: #183460;
  color: white;
  width: 50px;
  height: 50px;
  margin-left:20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expose-button .circle i {
  font-size: 1.5rem;
}

.eyebrow {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 24px;
  line-height: 36px;
  color: #fff;
  margin-bottom: 0.5rem;
}

.title {
  font-size: 42px;
  line-height: 56px;
  font-weight: 200;
  color: #183460;
  margin: 0;
}

.expose-text {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: nowrap;
}

.text-left {
  width: 50%;
  display: flex;
  flex-direction: column;
}

.expose-meta {
  width: 50%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2rem;
  color: #fff;
  font-size: 24px;
  line-height:36px;
  margin-top:60px;
}

.expose-meta i {
  margin-right: 0.5rem;
  color: #153461;
}



.info-cta-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 5rem 2.5rem;
  margin-top: 100px;
  align-items: stretch; /* sorgt dafür, dass beide Spalten gleich hoch sind */
}

.info-box {
  background-color: #183460; /* dunkles Blau */
  color: white;
  border-radius: 40px;
  padding: 4rem;
  display:flex;
  flex: 1 1 45%;
  flex-direction: column;
  min-height:600px;
  box-sizing: border-box;
}

.info-box h2 {
  font-size: 40px !important;
  font-weight: 400 !important;
  line-height:54px !important;
  color:#fff !important;
  margin-bottom: 2rem;
  width:90%;
  margin-top:0;
}

.info-box p {
  font-size: 26px;
  font-weight:200;
  line-height:36px;
  color:#fff;
  margin-bottom: 2rem;
}

.cta-button-con {
  background: #183460;
  color: #fff !important;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  border-radius: 40px;
  text-decoration: none;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-size:24px;
  font-weight: 200;
  text-decoration: none !important;
  width: auto; /* oder ein fixer Wert wie 200px */
  align-self: flex-start;
}

.cta-button-con:hover {
  background-color: #315693;
  transform: scale(1.02);
}

.cta-button-con .circle {
  background-color: #fff;
  color: #183460;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left:20px;
  i{
    font-size: 1.5rem;
  }
}

.cta-button {
  background: white;
  color: #183460 !important;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  border-radius: 40px;
  text-decoration: none;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-size:24px;
  font-weight: 200;
  text-decoration: none !important;
  width: auto; /* oder ein fixer Wert wie 200px */
  align-self: flex-start;
}

.cta-button:hover {
  background-color: rgba(255,255,255,0.7);
  transform: scale(1.02);
}

.cta-button .circle {
  background-color: #183460;
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left:20px;
  i{
    font-size: 1.5rem;
  }
}

.cta-boxes {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem; /* kontrolliert Abstand */
}

.cta-link {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 1.5rem;
  text-decoration: none !important;
  background-color: #cdc0b4;
  border-radius: 24px;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-size: 40px !important;
  font-weight: 400 !important;
  line-height:54px !important;
  color:#fff !important;
}

.cta-switch {
  width: 90px;              /* Gesamtbreite der Pille */
  height: 50px;
  background-color: white;
  border-radius: 999px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Kreis rechts */
  transition: background-color 0.3s ease;
  overflow: hidden;
}

.switch-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

/* Blauer Kreis */
.cta-switch .circle {
  background-color: #183460;
  color: white;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

/* Icon etwas größer */
.cta-switch .circle i {
  font-size: 1.1rem;
}

/* Hover-Effekt: Kreis nach links schieben */
.cta-link:hover .circle {
  transform: translateX(48px);
}

/* Hover */
.cta-link:hover {
  background-color: #ab9889;
}

  .beige-box {
    position: absolute !important;
    background-color: #cdc0b4;
    padding: 2rem 2.5rem;
    width: 96%;
    left: 2%;
    bottom: 40px;
    border-radius: 50px 0 50px 50px;
    font-family: 'Saira', sans-serif;
    color: #1d2d4f;
    z-index: 3;
    box-sizing: border-box;
  }

.expose-link {
  position: absolute;
  font-family:'Saira';
  top: 1rem;
  right: 1rem;
  background: white;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  border-radius: 40px;
  text-decoration: none !important;
  color: #153461 !important;
  font-weight: 200;
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  right: 0;
    top: -30px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.expose-link:hover {
  background-color: #f5f5f5;
  transform: scale(1.01);
}

.expose-link .arrow {
  background-color: #153461;
  color: white;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-left:20px;
}

.subheadline {
  font-family: 'Magnies', serif;
  font-size: 28px;
  line-height:36px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0;
  font-weight: bold;
  color:#fff;
}

.subheadline-con {
  font-family: 'Saira', serif;
  font-size: 50px;
  line-height:66px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0;
  font-weight: bold;
  color:#fff;
  margin-top: 5px;
    margin-bottom: 30px;
}

.headline {
  font-size: 56px;
  line-height: 72px;
  margin:0 0 20px 0;
  color:#153461;
  font-weight:200;
}

.headline-con {
  font-size: 32px;
  line-height: 46px;
  margin:0 0 20px 0;
  color:#153461;
  font-weight:200;
}

  .custom-banner {
  width: 96%;
  min-height: 940px; /* oder was du brauchst */
  margin-left: 2%;
  position: relative;
  background-position: center;
  background-size: cover;
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
  overflow: hidden;
  margin-top:-170px;
}

  .custom-banner-con {
  width: 96%;
  min-height: 740px; /* oder was du brauchst */
  margin-left: 2%;
  position: relative;
  background-position: center;
  background-size: cover;
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
  overflow: hidden;
  margin-top:-170px;
  margin-bottom:100px;
}

/* Blauer Overlay mit Opazität */
.custom-banner-con .overlayheader, .custom-banner .overlayheader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #153461;
  opacity: 0.4;
  z-index: 1;
}

/* Gradient von oben bis ca. 30% Höhe */
.custom-banner-con .gradient, .custom-banner .gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(to bottom, #153461, transparent);
  z-index: 2;
}

/* Inhalte im Banner können optional hier z-index: 3 erhalten */
.custom-banner-con > *:not(.overlayheader):not(.gradient), .custom-banner > *:not(.overlayheader):not(.gradient) {
  position: relative;
  z-index: 3;
}

  .headeroutter{
    width:90
  }

	/* INDEX STYLES ENDE */

	/* PROJEKT START */

  .divcon{
		width:100%;
		padding:0 6%;
		box-sizing: border-box;
	}

	.respmenu{
		display:none;
	}

	nav{
		display:inline;
	}

	.notelresp{
		display:inline;
	}

	.nav_top_logo{
		width: 270px;
		margin: 50px 0 0 5%;
		padding: 0 0 0 0;
		height: 120px;
		img{
			width:270px;
			height:120px;
			margin: 0 0 0 0;
		}
	}


	.bgdiv_nav_top_z1, .bgdiv_nav_top_z2, .nav_scroll_bg {
		display: inline;
	  }


	/* Detailseiten START */

	.s25p{
		width: 25%;
		padding: 0 0 0 20px;
		box-sizing: border-box;
		div{
			p, a{
				font-size:26px !important;
				line-height:36px !important;
			}
		}
	}

	.s50p{
		width:49%;
		margin:0 1% 0 0;
	}

	.sp50con{
		width:49%;
		margin:0;
	}


	a {           font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:32px; line-height:44px; font-weight:200; outline:0;
		-moz-transition: all 0.4s ease-out;  /* FF4+ */
		-o-transition: all 0.4s ease-out;  /* Opera 10.5+ */
		-webkit-transition: all 0.4s ease-out;  /* Saf3.2+, Chrome */
		-ms-transition: all 0.4s ease-out;  /* IE10? */
		transition: all 0.4s ease-out; }
	a:link {      text-decoration: none; color: #ccbfb4; }
	a:active {    text-decoration: none; color: #676766; }
	a:visited {   text-decoration: none; color: #ccbfb4; }
	a:hover {
		text-decoration: underline;
		color: #676766;
	}

	.nav_top_z1{
		margin-right:4%;
	}

	a.navtop {           font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:22px; line-height:1.2; font-weight:200; outline:0; padding:0 0 0 0; margin:20px 50px 0 0; display:inline; position:relative; float:left; text-transform:none; }
	a.navtop:link {      text-decoration: none; color: #fff; }
	a.navtop:active {    text-decoration: none; color: #ccbfb4; }
	a.navtop:visited {   text-decoration: none; color: #fff; }
	a.navtop:hover {
		text-decoration: none;
		color: #ccbfb4;
		-moz-transition: all 0.4s ease-out;  /* FF4+ */
		-o-transition: all 0.4s ease-out;  /* Opera 10.5+ */
		-webkit-transition: all 0.4s ease-out;  /* Saf3.2+, Chrome */
		-ms-transition: all 0.4s ease-out;  /* IE10? */
		transition: all 0.4s ease-out;
	}

	a.navtop_active, a.navtop_active:link, a.navtop_active:active, a.navtop_active:visited, a.navtop_active:hover {
		text-decoration: none;
		color: #ccbfb4;
		margin:20px 50px 0 0;
		font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:22px; line-height:1.2; font-weight:200;
		display:inline; position:relative; float:left; text-transform: none; padding: 0 0 0 0;
	}

  a.navtop i{
    color:#ccbfb4 !important;
  }

	p,div { font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:30px; line-height:40px; color:#153461; margin-top:0px; padding-top:0px; word-wrap: break-word; font-weight:200;}
	td {    font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:30px; line-height:40px; color:#153461; margin-top:0px; padding-top:0px; word-wrap: break-word; font-weight:200; }

	a.nav_foot {           font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:24px; line-height:36px; font-weight:200; outline:0; padding:0 0 0 0;}
	a.nav_foot:link {      text-decoration: none; color: rgba(255,255,255,0.7); }
	a.nav_foot:active {    text-decoration: none; color: rgba(255,255,255,1); }
	a.nav_foot:visited {   text-decoration: none; color: rgba(255,255,255,0.7); }
	a.nav_foot:hover {
		text-decoration: none;
		color: rgba(255,255,255,1);
		-moz-transition: all 0.4s ease-out;  /* FF4+ */
		-o-transition: all 0.4s ease-out;  /* Opera 10.5+ */
		-webkit-transition: all 0.4s ease-out;  /* Saf3.2+, Chrome */
		-ms-transition: all 0.4s ease-out;  /* IE10? */
		transition: all 0.4s ease-out;
	}

	a.nav_foot_active, a.nav_foot_active:link, a.nav_foot_active:active, a.nav_foot_active:visited, a.nav_foot_active:hover {
		text-decoration: none;
		color:rgba(255,255,255,1);
		padding:0 0 0 0;
		font-family:  'Saira', Arial, Helvetica, sans-serif;
		font-size:24px;
		line-height:36px;
		font-weight:200;
		outline:0;
	}

	h1{
		font-size:90px;
		line-height:110px;
		color:#153461;
		font-weight: 700;
		font-family: 'Saira';
		margin:20px 0;
	}

	h2{
		font-size:30px;
		line-height:70px;
		color:#908e8d;
		font-weight: 200;
		font-family: 'Saira';
	}

	h3{
		font-size:34px;
		line-height:44px;
		color:#ccbfb4;
		font-weight: 700;
		font-family: 'Saira';
		margin:0 0 20px 0;
	}

	h4{ font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:46px; line-height:60px; color: #4d4f5a; font-weight:500; margin:0 0 0 0; padding:0 0 0 0; word-wrap: break-word;}
	h5{ font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:24px; line-height:36px; color: #4d4f5a; font-weight:200; margin:20px 0 0 0; padding:0 0 0 0; word-wrap: break-word;}

	.sp50{
		width:49%;
		margin:0;
	}
	.primaryfontcolor{
		color:#272726;
	}

	.primarybgcolor{
		background-color:#272726;
	}

	.secondaryfontcolor{
		color:#ccbfb4;
	}

	.secondarybgcolor{
		background-color:#ccbfb4;
	}


/* PROJEKT ENDE */


}


@media only screen and (min-width : 1660px ){

	/* Unterseiten STYLES */

  .detail-kaufen{
    margin-bottom:0 !important;
  }

  .beratung-section {
  background-color: #153461;
    border-radius: 60px;
    padding: 1rem 4% 4rem 4%;
    margin-top:60px;
    margin: 8rem auto 4rem auto;
    width: 92%;
    margin-left: 2%;
    color: white;
    overflow: visible;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

.beratung-container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}

.beratung-text {
  flex: 1 1 65%;
}

.beratung-text h2 {
  font-size: 40px;
  margin-bottom: 54px;
  font-weight: 400;
  color: white;
}

.beratung-text p {
  font-size: 26px;
  line-height: 36px;
  font-weight: 200;
  color: white;
  margin-bottom: 2rem;
}

.beratung-image {
  flex: 1 1 30%;
  position: relative;
  z-index: 3;
}

.beratung-image img {
  max-height: 600px;
  position: absolute;
  top: -540px; /* Bild ragt oben raus */
  right: 0;
  object-fit: contain;
}

  .announcement-section {
    padding: 7rem 2% 4rem 2%; /* oben & unten viel Platz, seitlich flexibel */
    width:96%;
    margin: 0 auto;
    text-align: center;
    background-color: transparent; /* oder eine Farbe, wenn gewünscht */
  }

  .announcement-text {
    font-size: 42px;
    line-height: 56px;
    font-weight: 200;
    color: #183460;
    max-width: 80%;
    margin: 0 auto;
  }

  .linktelmobile{
    display:none !important;
  }

  /* Grid-Layout */
.expose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 4rem 2rem;
}

/* Einzelne Card */
.expose-card {
  position: relative;
  background-size: cover;
  background-position: center;
  height: 500px;
  border-radius: 60px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Overlay */
.immooverlay {
  position: absolute;
  inset: 0;
  background-color: rgba(21, 52, 97, 0.4);
  z-index: 1;
}

.expose-button{
  z-index:9;
}

.detail-kaufen > .expose-content{
  width:92%;
  left:4%;
  .expose-meta{
    justify-content: flex-start;
    margin-top: 20px;
  }
  .eyebrow{
    margin-bottom: -1.5rem;
  }
}




  .marginb80{
    margin-bottom:100px;
  }

  .bildbox {
    width: 48% !important;
    border-radius: 50px !important;
    overflow: hidden !important;
    display: block !important;
    height: auto !important;
  }

     .bildbox img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
      }

        .width50 {
          width: 48% !important;
        }

  /* INDEX STYLES */

  .footer {
  background-color: #cdc0b4;
  padding: 4rem 4% 2rem 4%;
  width:94%;
  margin-left:2%;
  border-top-left-radius: 80px;
  border-top-right-radius: 80px;
  color: #183460;
  font-family: 'Saira', sans-serif;
  font-size: 1rem;
  box-sizing: border-box;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.footer-col {
  flex: 1 1 45%;
}

.footer-col p {
  font-size: 36px;
  line-height: 1.5;
  font-weight: 200;
  color:#183460;
  margin: 0;
  a{
    font-size: 36px !important;
  line-height: 1.5 !important;
  font-weight: 200 !important;
  color:#183460 !important;
  text-decoration: none !important;
  margin: 0;
  }
}

.right{
  text-align:right !important;
}

.footer-col strong {
  font-size: 22px;
  font-weight: 700;
  display: block;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  color: white;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 0.9rem;
  font-weight: 400;
  color: white;
}

.footer-bottom a {
  color: white !important;
  text-decoration: none !important;
  margin-left: 0.5rem !important;
  font-size:0.9rem !important;
  font-weight: 400 !important;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

  .inspiration-section {
  text-align: center;
  padding: 4rem 2% 6rem 2%;
  width: 96%;
  margin: 0 auto;
}

.symbol {
  width: 72px;
  height:100px;
  margin-bottom: 3rem;
  opacity: 0.8;
}

.inspiration-text {
  font-size: 42px;
  line-height: 56px;
  font-weight: 200;
  color: #183460;
  margin: 0 auto;
  max-width: 90%;
}

.expose-card {
  position: relative;
  width: 96%;
  margin-left: 2%;
  height: 500px;
  background-position: center;
  background-size: cover;
  border-radius: 80px;
  overflow: hidden;
  margin-bottom: 4rem;
  min-height: 700px;
}

.immooverlay {
  position: absolute;
  inset: 0;
  background-color: rgba(21, 52, 97, 0.4);
  z-index: 1;
}

.expose-content {
  position: absolute;
  bottom: 40px;
  left: 2%;
  width: 96%;
  padding: 2rem;
  background-color: #cdc0b4;
  border-radius: 50px 0 50px 50px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  z-index: 2;
  box-sizing: border-box;
}

/* Header-Button-Stil */
.expose-button {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  background-color: white;
  border-radius: 999px;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  font-weight: 200;
  color: #183460;
  text-decoration: none !important;
  font-size: 24px;
  gap: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s ease, transform 0.3s ease;
  position:absolute;
  right:0;
  top:-35px;
}

.expose-button:hover {
  background-color: #f0f0f0;
  transform: scale(1.02);
}

/* Pfeilkreis */
.expose-button .circle {
  background-color: #183460;
  color: white;
  width: 50px;
  height: 50px;
  margin-left:20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expose-button .circle i {
  font-size: 1.5rem;
}

.eyebrow {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 24px;
  line-height: 36px;
  color: #fff;
  margin-bottom: 0.5rem;
}

.title {
  font-size: 42px;
  line-height: 56px;
  font-weight: 200;
  color: #183460;
  margin: 0;
}

.expose-text {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: nowrap;
}

.text-left {
  width: 50%;
  display: flex;
  flex-direction: column;
}

.expose-meta {
  width: 50%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2rem;
  color: #fff;
  font-size: 24px;
  line-height:36px;
  margin-top:60px;
}

.expose-meta i {
  margin-right: 0.5rem;
  color: #153461;
}



.info-cta-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 5rem 2.5rem;
  margin-top: 100px;
  align-items: stretch; /* sorgt dafür, dass beide Spalten gleich hoch sind */
}

.info-box {
  background-color: #183460; /* dunkles Blau */
  color: white;
  border-radius: 40px;
  padding: 4rem;
  display:flex;
  flex: 1 1 45%;
  flex-direction: column;
  min-height:600px;
  box-sizing: border-box;
}

.info-box h2 {
  font-size: 40px !important;
  font-weight: 400 !important;
  line-height:54px !important;
  color:#fff !important;
  margin-bottom: 2rem;
  width:90%;
  margin-top:0;
}

.info-box p {
  font-size: 26px;
  font-weight:200;
  line-height:36px;
  color:#fff;
  margin-bottom: 2rem;
}

.cta-button-con {
  background: #183460;
  color: #fff !important;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  border-radius: 40px;
  text-decoration: none;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-size:24px;
  font-weight: 200;
  text-decoration: none !important;
  width: auto; /* oder ein fixer Wert wie 200px */
  align-self: flex-start;
}

.cta-button-con:hover {
  background-color: #315693;
  transform: scale(1.02);
}

.cta-button-con .circle {
  background-color: #fff;
  color: #183460;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left:20px;
  i{
    font-size: 1.5rem;
  }
}

.cta-button {
  background: white;
  color: #183460 !important;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  border-radius: 40px;
  text-decoration: none;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-size:24px;
  font-weight: 200;
  text-decoration: none !important;
  width: auto; /* oder ein fixer Wert wie 200px */
  align-self: flex-start;
}

.cta-button:hover {
  background-color: rgba(255,255,255,0.7);
  transform: scale(1.02);
}

.cta-button .circle {
  background-color: #183460;
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left:20px;
  i{
    font-size: 1.5rem;
  }
}

.cta-boxes {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem; /* kontrolliert Abstand */
}

.cta-link {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 1.5rem;
  text-decoration: none !important;
  background-color: #cdc0b4;
  border-radius: 24px;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-size: 40px !important;
  font-weight: 400 !important;
  line-height:54px !important;
  color:#fff !important;
}

.cta-switch {
  width: 90px;              /* Gesamtbreite der Pille */
  height: 50px;
  background-color: white;
  border-radius: 999px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Kreis rechts */
  transition: background-color 0.3s ease;
  overflow: hidden;
}

.switch-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

/* Blauer Kreis */
.cta-switch .circle {
  background-color: #183460;
  color: white;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

/* Icon etwas größer */
.cta-switch .circle i {
  font-size: 1.1rem;
}

/* Hover-Effekt: Kreis nach links schieben */
.cta-link:hover .circle {
  transform: translateX(48px);
}

/* Hover */
.cta-link:hover {
  background-color: #ab9889;
}

  .beige-box {
    position: absolute !important;
    background-color: #cdc0b4;
    padding: 2rem 2.5rem;
    width: 96%;
    left: 2%;
    bottom: 40px;
    border-radius: 50px 0 50px 50px;
    font-family: 'Saira', sans-serif;
    color: #1d2d4f;
    z-index: 3;
    box-sizing: border-box;
  }

.expose-link {
  position: absolute;
  font-family:'Saira';
  top: 1rem;
  right: 1rem;
  background: white;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  border-radius: 40px;
  text-decoration: none !important;
  color: #153461 !important;
  font-weight: 200;
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  right: 0;
    top: -30px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.expose-link:hover {
  background-color: #f5f5f5;
  transform: scale(1.01);
}

.expose-link .arrow {
  background-color: #153461;
  color: white;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-left:20px;
}

.subheadline {
  font-family: 'Magnies', serif;
  font-size: 28px;
  line-height:36px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0;
  font-weight: bold;
  color:#fff;
}

.subheadline-con {
  font-family: 'Saira', serif;
  font-size: 50px;
  line-height:66px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0;
  font-weight: bold;
  color:#fff;
  margin-top: 5px;
    margin-bottom: 30px;
}

.headline {
  font-size: 56px;
  line-height: 72px;
  margin:0 0 20px 0;
  color:#153461;
  font-weight:200;
}

.headline-con {
  font-size: 42px;
  line-height: 56px;
  margin:0 0 20px 0;
  color:#153461;
  font-weight:200;
}

  .custom-banner {
  width: 96%;
  min-height: 940px; /* oder was du brauchst */
  margin-left: 2%;
  position: relative;
  background-position: center;
  background-size: cover;
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
  overflow: hidden;
  margin-top:-170px;
}

  .custom-banner-con {
  width: 96%;
  min-height: 740px; /* oder was du brauchst */
  margin-left: 2%;
  position: relative;
  background-position: center;
  background-size: cover;
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
  overflow: hidden;
  margin-top:-170px;
  margin-bottom:100px;
}

/* Blauer Overlay mit Opazität */
.custom-banner-con .overlayheader, .custom-banner .overlayheader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #153461;
  opacity: 0.4;
  z-index: 1;
}

/* Gradient von oben bis ca. 30% Höhe */
.custom-banner-con .gradient, .custom-banner .gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(to bottom, #153461, transparent);
  z-index: 2;
}

/* Inhalte im Banner können optional hier z-index: 3 erhalten */
.custom-banner-con > *:not(.overlayheader):not(.gradient), .custom-banner > *:not(.overlayheader):not(.gradient) {
  position: relative;
  z-index: 3;
}

  .headeroutter{
    width:90
  }

	/* INDEX STYLES ENDE */

	/* PROJEKT START */

  .divcon{
		width:100%;
		padding:0 6%;
		box-sizing: border-box;
	}

	.respmenu{
		display:none;
	}

	nav{
		display:inline;
	}

	.notelresp{
		display:inline;
	}

	.nav_top_logo{
		width: 270px;
		margin: 50px 0 0 5%;
		padding: 0 0 0 0;
		height: 120px;
		img{
			width:270px;
			height:120px;
			margin: 0 0 0 0;
		}
	}


	.bgdiv_nav_top_z1, .bgdiv_nav_top_z2, .nav_scroll_bg {
		display: inline;
	  }


	/* Detailseiten START */

	.s25p{
		width: 25%;
		padding: 0 0 0 20px;
		box-sizing: border-box;
		div{
			p, a{
				font-size:26px !important;
				line-height:36px !important;
			}
		}
	}

	.s50p{
		width:49%;
		margin:0 1% 0 0;
	}

	.sp50con{
		width:49%;
		margin:0;
	}


	a {           font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:32px; line-height:44px; font-weight:200; outline:0;
		-moz-transition: all 0.4s ease-out;  /* FF4+ */
		-o-transition: all 0.4s ease-out;  /* Opera 10.5+ */
		-webkit-transition: all 0.4s ease-out;  /* Saf3.2+, Chrome */
		-ms-transition: all 0.4s ease-out;  /* IE10? */
		transition: all 0.4s ease-out; }
	a:link {      text-decoration: none; color: #ccbfb4; }
	a:active {    text-decoration: none; color: #676766; }
	a:visited {   text-decoration: none; color: #ccbfb4; }
	a:hover {
		text-decoration: underline;
		color: #676766;
	}

	.nav_top_z1{
		margin-right:4%;
	}

	a.navtop {           font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:22px; line-height:1.2; font-weight:200; outline:0; padding:0 0 0 0; margin:20px 50px 0 0; display:inline; position:relative; float:left; text-transform:none; }
	a.navtop:link {      text-decoration: none; color: #fff; }
	a.navtop:active {    text-decoration: none; color: #ccbfb4; }
	a.navtop:visited {   text-decoration: none; color: #fff; }
	a.navtop:hover {
		text-decoration: none;
		color: #ccbfb4;
		-moz-transition: all 0.4s ease-out;  /* FF4+ */
		-o-transition: all 0.4s ease-out;  /* Opera 10.5+ */
		-webkit-transition: all 0.4s ease-out;  /* Saf3.2+, Chrome */
		-ms-transition: all 0.4s ease-out;  /* IE10? */
		transition: all 0.4s ease-out;
	}

	a.navtop_active, a.navtop_active:link, a.navtop_active:active, a.navtop_active:visited, a.navtop_active:hover {
		text-decoration: none;
		color: #ccbfb4;
		margin:20px 50px 0 0;
		font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:22px; line-height:1.2; font-weight:200;
		display:inline; position:relative; float:left; text-transform: none; padding: 0 0 0 0;
	}

  a.navtop i{
    color:#ccbfb4 !important;
  }

	p,div { font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:30px; line-height:40px; color:#153461; margin-top:0px; padding-top:0px; word-wrap: break-word; font-weight:200;}
	td {    font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:30px; line-height:40px; color:#153461; margin-top:0px; padding-top:0px; word-wrap: break-word; font-weight:200; }

	a.nav_foot {           font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:24px; line-height:36px; font-weight:200; outline:0; padding:0 0 0 0;}
	a.nav_foot:link {      text-decoration: none; color: rgba(255,255,255,0.7); }
	a.nav_foot:active {    text-decoration: none; color: rgba(255,255,255,1); }
	a.nav_foot:visited {   text-decoration: none; color: rgba(255,255,255,0.7); }
	a.nav_foot:hover {
		text-decoration: none;
		color: rgba(255,255,255,1);
		-moz-transition: all 0.4s ease-out;  /* FF4+ */
		-o-transition: all 0.4s ease-out;  /* Opera 10.5+ */
		-webkit-transition: all 0.4s ease-out;  /* Saf3.2+, Chrome */
		-ms-transition: all 0.4s ease-out;  /* IE10? */
		transition: all 0.4s ease-out;
	}

	a.nav_foot_active, a.nav_foot_active:link, a.nav_foot_active:active, a.nav_foot_active:visited, a.nav_foot_active:hover {
		text-decoration: none;
		color:rgba(255,255,255,1);
		padding:0 0 0 0;
		font-family:  'Saira', Arial, Helvetica, sans-serif;
		font-size:24px;
		line-height:36px;
		font-weight:200;
		outline:0;
	}

	h1{
		font-size:90px;
		line-height:110px;
		color:#153461;
		font-weight: 700;
		font-family: 'Saira';
		margin:20px 0;
	}

	h2{
		font-size:30px;
		line-height:70px;
		color:#908e8d;
		font-weight: 200;
		font-family: 'Saira';
	}

	h3{
		font-size:34px;
		line-height:44px;
		color:#ccbfb4;
		font-weight: 700;
		font-family: 'Saira';
		margin:0 0 20px 0;
	}

	h4{ font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:46px; line-height:60px; color: #4d4f5a; font-weight:500; margin:0 0 0 0; padding:0 0 0 0; word-wrap: break-word;}
	h5{ font-family:  'Saira', Arial, Helvetica, sans-serif; font-size:24px; line-height:36px; color: #4d4f5a; font-weight:200; margin:20px 0 0 0; padding:0 0 0 0; word-wrap: break-word;}

	.sp50{
		width:49%;
		margin:0;
	}
	.primaryfontcolor{
		color:#272726;
	}

	.primarybgcolor{
		background-color:#272726;
	}

	.secondaryfontcolor{
		color:#ccbfb4;
	}

	.secondarybgcolor{
		background-color:#ccbfb4;
	}


/* PROJEKT ENDE */
}

/* Media Query for Mobile Devices */
@media (max-width: 768px) {
	.inner-div {
	  flex: 1 1 45%; /* Each box takes 45% of the width on small screens */
	}
  }
  
  @media (max-width: 480px) {
	.inner-div {
	  flex: 1 1 100%; /* Each box takes the full width on very small screens */
	}
  }

  /* Tablet-Ansicht */
	@media (max-width: 768px) {
		.leistung-box {
			flex: 0 1 calc(50% - 20px); /* Zwei Spalten */
		}
	}
	
	/* Mobile Ansicht */
	@media (max-width: 480px) {
		.leistung-box {
			flex: 1 1 100%; /* Eine Spalte */
		}
	}



@media (max-width: 768px) {
  .fahrzeuginfo {
    grid-template-columns: 1fr;
  }

  .info-rechts,
  .info-links {
    text-align: left;
    align-items: flex-start;
  }

  .fahrzeug-details li {
    text-align: left;
  }

  .zum-modell-link {
    text-align: left;
  }
}

@media (max-width: 1024px) {
    .fahrzeug-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 600px) {
    .fahrzeug-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 1200px) {
  .modelle-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .modelle-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .modelle-grid {
    grid-template-columns: 1fr;
  }
}