*{
	padding: 0;
	margin: 0 ;
}

@font-face { font-family: Inter; src: url('Inter/Inter-VariableFont_slnt,wght.ttf'); } 

html {
    scroll-behavior: smooth;
}


/* #Primary
================================================== */

body{
    font-family: 'Inter';
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: #212112;
	overflow-x: hidden;
    transition: all 200ms linear;
}
::selection {
	color: #fff;
	background-color: #8167a9;
}
::-moz-selection {
	color: #fff;
	background-color: #8167a9;
}

#web_version{
    overflow: hidden;
}


/* #Navigation
================================================== */

.start-header {
	opacity: 1;
	transform: translateY(0);
	padding: 20px 0;
	box-shadow: 0 10px 30px 0 rgba(138, 155, 165, 0.15);
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.start-header.scroll-on {
	box-shadow: 0 5px 10px 0 rgba(138, 155, 165, 0.15);
	padding: 10px 0;
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.start-header.scroll-on .navbar-brand img{
	height: 24px;
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.navigation-wrap{
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1000;
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.navbar{
	padding: 0;
}
.navbar-brand img{
	height: 28px;
	width: auto;
	display: block;
  filter: brightness(10%);
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.navbar-toggler {
	float: right;
	border: none;
	padding-right: 0;
}
.navbar-toggler:active,
.navbar-toggler:focus {
	outline: none;
}
.navbar-light .navbar-toggler-icon {
	width: 24px;
	height: 17px;
	background-image: none;
	position: relative;
	border-bottom: 1px solid #000;
    transition: all 300ms linear;
}
.navbar-light .navbar-toggler-icon:after, 
.navbar-light .navbar-toggler-icon:before{
	width: 24px;
	position: absolute;
	height: 1px;
	background-color: #000;
	top: 0;
	left: 0;
	content: '';
	z-index: 2;
    transition: all 300ms linear;
}
.navbar-light .navbar-toggler-icon:after{
	top: 8px;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
	transform: rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
	transform: translateY(8px) rotate(-45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
	border-color: transparent;
}
.nav-link{
	color: #212121 !important;
	font-weight: 500;
    transition: all 200ms linear;
}
.nav-item:hover .nav-link{
	color: #8167a9 !important;
}
.nav-item.active .nav-link{
	color: #777 !important;
}
.nav-link {
	position: relative;
	padding: 5px 0 !important;
	display: inline-block;
}
.nav-item:after{
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 100%;
	height: 2px;
	content: '';
	background-color: #8167a9;
	opacity: 0;
    transition: all 200ms linear;
}
.nav-item:hover:after{
	bottom: 0;
	opacity: 1;
}
.nav-item.active:hover:after{
	opacity: 0;
}
.nav-item{
	position: relative;
    transition: all 200ms linear;
}

/* #Primary style
================================================== */

.bg-light {
	background-color: #fff !important;
    transition: all 200ms linear;
}
.section {
    position: relative;
	width: 100%;
	display: block;
    
}
.full-height {
    height: 80vh;
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat-back.svg');
	background-position: center;
	background-repeat: repeat;
	background-size: 7%;
	background-color: #fff;
}
.over-hide {
    overflow: hidden;
}
.absolute-center {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
  margin-top: 40px;
	transform: translateY(-50%);
	z-index: 20;
}
h1{
	font-size: 48px;
	line-height: 1.2;
	font-weight: 700;
	color: #212112;
	text-align: center;
}


h1 span{
	display: inline-block;
    transition: all 300ms linear;
	opacity: 1;
	transform: translate(0);
}
body.hero-anime h1 span:nth-child(1){
	opacity: 0;
	transform: translateY(-20px);
}
body.hero-anime h1 span:nth-child(2){
	opacity: 0;
	transform: translateY(-30px);
}
body.hero-anime h1 span:nth-child(3){
	opacity: 0;
	transform: translateY(-50px);
}
body.hero-anime h1 span:nth-child(4){
	opacity: 0;
	transform: translateY(-10px);
}
body.hero-anime h1 span:nth-child(5){
	opacity: 0;
	transform: translateY(-50px);
}
body.hero-anime h1 span:nth-child(6){
	opacity: 0;
	transform: translateY(-20px);
}
body.hero-anime h1 span:nth-child(7){
	opacity: 0;
	transform: translateY(-40px);
}
body.hero-anime h1 span:nth-child(8){
	opacity: 0;
	transform: translateY(-10px);
}
body.hero-anime h1 span:nth-child(9){
	opacity: 0;
	transform: translateY(-30px);
}
body.hero-anime h1 span:nth-child(10){
	opacity: 0;
	transform: translateY(-20px);
}
h1 span:nth-child(1){
    transition-delay: 1000ms;
}
h1 span:nth-child(2){
    transition-delay: 700ms;
}
h1 span:nth-child(3){
    transition-delay: 900ms;
}
h1 span:nth-child(4){
    transition-delay: 800ms;
}
h1 span:nth-child(5){
    transition-delay: 1000ms;
}
h1 span:nth-child(6){
    transition-delay: 700ms;
}
h1 span:nth-child(7){
    transition-delay: 900ms;
}
h1 span:nth-child(8){
    transition-delay: 800ms;
}
h1 span:nth-child(9){
    transition-delay: 600ms;
}
h1 span:nth-child(10){
    transition-delay: 700ms;
}
body.hero-anime h1 span:nth-child(11){
	opacity: 0;
	transform: translateY(30px);
}
body.hero-anime h1 span:nth-child(12){
	opacity: 0;
	transform: translateY(50px);
}
body.hero-anime h1 span:nth-child(13){
	opacity: 0;
	transform: translateY(20px);
}
body.hero-anime h1 span:nth-child(14){
	opacity: 0;
	transform: translateY(30px);
}
body.hero-anime h1 span:nth-child(15){
	opacity: 0;
	transform: translateY(50px);
}
body.hero-anime h1 span:nth-child(16){
	opacity: 0;
	transform: translateY(50px);
}
body.hero-anime h1 span:nth-child(17){
	opacity: 0;
	transform: translateY(50px);
}
body.hero-anime h1 span:nth-child(18){
	opacity: 0;
	transform: translateY(50px);
}
body.hero-anime h1 span:nth-child(19){
	opacity: 0;
	transform: translateY(-50px);
}
body.hero-anime h1 span:nth-child(20){
	opacity: 0;
	transform: translateY(50px);
}
body.hero-anime h1 span:nth-child(21){
	opacity: 0;
	transform: translateY(-50px);
}
body.hero-anime h1 span:nth-child(22){
	opacity: 0;
	transform: translateY(50px);
}
body.hero-anime h1 span:nth-child(23){
	opacity: 0;
	transform: translateY(-50px);
}
body.hero-anime h1 span:nth-child(24){
	opacity: 0;
	transform: translateY(-50px);
}
body.hero-anime h1 span:nth-child(25){
	opacity: 0;
	transform: translateY(50px);
}
body.hero-anime h1 span:nth-child(26){
	opacity: 0;
	transform: translateY(-50px);
}
body.hero-anime h1 span:nth-child(27){
	opacity: 0;
	transform: translateY(50px);
}
body.hero-anime h1 span:nth-child(28){
	opacity: 0;
	transform: translateY(-50px);
}
body.hero-anime h1 span:nth-child(29){
	opacity: 0;
	transform: translateY(50px);
}
body.hero-anime h1 span:nth-child(30){
	opacity: 0;
	transform: translateY(-50px);
}
body.hero-anime h1 span:nth-child(31){
	opacity: 0;
	transform: translateY(50px);
}
body.hero-anime h1 span:nth-child(32){
	opacity: 0;
	transform: translateY(-50px);
}
body.hero-anime h1 span:nth-child(33){
	opacity: 0;
	transform: translateY(50px);
}
body.hero-anime h1 span:nth-child(34){
	opacity: 0;
	transform: translateY(-50px);
}
body.hero-anime h1 span:nth-child(35){
	opacity: 0;
	transform: translateY(50px);
}
body.hero-anime h1 span:nth-child(36){
	opacity: 0;
	transform: translateY(-50px);
}
body.hero-anime h1 span:nth-child(37){
	opacity: 0;
	transform: translateY(50px);
}
body.hero-anime h1 span:nth-child(38){
	opacity: 0;
	transform: translateY(-50px);
}
body.hero-anime h1 span:nth-child(39){
	opacity: 0;
	transform: translateX(50px);
}
body.hero-anime h1 span:nth-child(40){
	opacity: 0;
	transform: translateX(50px);
}

h1 span:nth-child(11){
    transition-delay: 1300ms;
}
h1 span:nth-child(12){
    transition-delay: 1500ms;
}
h1 span:nth-child(13){
    transition-delay: 1400ms;
}
h1 span:nth-child(14){
    transition-delay: 1200ms;
}
h1 span:nth-child(15){
    transition-delay: 1450ms;
}
h1 span:nth-child(16){
    transition-delay: 1450ms;
}
h1 span:nth-child(17){
  transition-delay: 1450ms;
}
h1 span:nth-child(18){
  transition-delay: 1450ms;
}
h1 span:nth-child(19){
  transition-delay: 1450ms;
}
h1 span:nth-child(20){
  transition-delay: 1450ms;
}
h1 span:nth-child(21){
  transition-delay: 1450ms;
}
h1 span:nth-child(22){
    transition-delay: 1450ms;
  }
  h1 span:nth-child(23){
    transition-delay: 1450ms;
  }
  h1 span:nth-child(24){
    transition-delay: 1450ms;
  }
  h1 span:nth-child(25){
    transition-delay: 1450ms;
  }
  h1 span:nth-child(26){
    transition-delay: 1450ms;
  }
  h1 span:nth-child(27){
    transition-delay: 1450ms;
  }
  h1 span:nth-child(28){
    transition-delay: 1450ms;
  }
  h1 span:nth-child(29){
    transition-delay: 1450ms;
  }
  h1 span:nth-child(30){
    transition-delay: 1450ms;
  }
  h1 span:nth-child(31){
    transition-delay: 1450ms;
  }
  h1 span:nth-child(32){
    transition-delay: 1450ms;
  }
  h1 span:nth-child(33){
    transition-delay: 1450ms;
  }
  h1 span:nth-child(34){
    transition-delay: 1300ms;
  }
  h1 span:nth-child(35){
    transition-delay: 1300ms;
  }
  h1 span:nth-child(36){
    transition-delay: 1300ms;
  }
  h1 span:nth-child(37){
    transition-delay: 1300ms;
  }
  h1 span:nth-child(38){
    transition-delay: 1300ms;
  }
  h1 span:nth-child(39){
    transition-delay: 1300ms;
  }
  h1 span:nth-child(40){
    transition-delay: 1300ms;
  }
#switch,
#circle {
	cursor: pointer;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
} 
#switch {
	width: 60px;
	height: 8px;
	border: 2px solid #8167a9;
	border-radius: 27px;
	background: #000;
	position: relative;
	display: block;
	margin: 0 auto;
	text-align: center;
	opacity: 1;
	transform: translate(0);
    transition: all 300ms linear;
    transition-delay: 1900ms;
}
body.hero-anime #switch{
	opacity: 0;
	transform: translateY(40px);
    transition-delay: 1900ms;
}
#circle {
	position: absolute;
	top: -11px;
	left: -13px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #000;
}
.switched {
	border-color: #000 !important;
	background: #8167a9 !important;
}
.switched #circle {
	left: 43px;
	box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
	background: #fff;
}
.nav-item .dropdown-menu {
    transform: translate3d(0, 10px, 0);
    visibility: hidden;
    opacity: 0;
	max-height: 0;
    display: block;
	padding: 0;
	margin: 0;
    transition: all 200ms linear;
}
.nav-item.show .dropdown-menu {
    opacity: 1;
    visibility: visible;
	max-height: 999px;
    transform: translate3d(0, 0px, 0);
}
.dropdown-menu {
	padding: 10px!important;
	margin: 0;
	font-size: 13px;
	letter-spacing: 1px;
	color: #212121;
	background-color: #fcfaff;
	border: none;
	border-radius: 3px;
	box-shadow: 0 5px 10px 0 rgba(138, 155, 165, 0.15);
    transition: all 200ms linear;
}
.dropdown-toggle::after {
	display: none;
}

.dropdown-item {
	padding: 3px 15px;
	color: #212121;
	border-radius: 2px;
    transition: all 200ms linear;
}
.dropdown-item:hover, 
.dropdown-item:focus {
	color: #fff;
	background-color: rgba(129,103,169,.6);
}

body.dark{
	color: #fff;
	background-color: #1f2029;
}
body.dark .navbar-brand img{
  filter: brightness(100%);
}
body.dark h1{
	color: #fff;
}
body.dark h1 span{
    transition-delay: 0ms !important;
}
body.dark p{
	color: #fff;
    transition-delay: 0ms !important;
}
body.dark .bg-light {
	background-color: #14151a !important;
}
body.dark .start-header {
	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.15);
}
body.dark .start-header.scroll-on {
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
}
body.dark .nav-link{
	color: #fff !important;
}
body.dark .nav-item.active .nav-link{
	color: #999 !important;
}
body.dark .dropdown-menu {
	color: #fff;
	background-color: #1f2029;
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25);
}
body.dark .dropdown-item {
	color: #fff;
}
body.dark .navbar-light .navbar-toggler-icon {
	border-bottom: 1px solid #fff;
}
body.dark .navbar-light .navbar-toggler-icon:after, 
body.dark .navbar-light .navbar-toggler-icon:before{
	background-color: #fff;
}
body.dark .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
	border-color: transparent;
}



/* #Media
================================================== */

@media (max-width: 767px) { 
	h1{
		font-size: 38px;
	}
	.nav-item:after{
		display: none;
	}
	.nav-item::before {
		position: absolute;
		display: block;
		top: 15px;
		left: 0;
		width: 11px;
		height: 1px;
		content: "";
		border: none;
		background-color: #000;
		vertical-align: 0;
	}
	.dropdown-toggle::after {
		position: absolute;
		display: block;
		top: 10px;
		left: -23px;
		width: 1px;
		height: 11px;
		content: "";
		border: none;
		background-color: #000;
		vertical-align: 0;
		transition: all 200ms linear;
	}
	.dropdown-toggle[aria-expanded="true"]::after{
		transform: rotate(90deg);
		opacity: 0;
	}
	.dropdown-menu {
		padding: 0 !important;
		background-color: transparent;
		box-shadow: none;
		transition: all 200ms linear;
	}
	.dropdown-toggle[aria-expanded="true"] + .dropdown-menu {
		margin-top: 10px !important;
		margin-bottom: 20px !important;
	}
	body.dark .nav-item::before {
		background-color: #fff;
	}
	body.dark .dropdown-toggle::after {
		background-color: #fff;
	}
	body.dark .dropdown-menu {
		background-color: transparent;
		box-shadow: none;
	}
}

/* #Link to page
================================================== */

.logo {
	position: absolute;
	bottom: 30px;
	right: 30px;
	display: block;
	z-index: 100;
	transition: all 250ms linear;
}


body.dark .logo img {
  filter: brightness(100%);
}
.absolute-center{
    margin-top: -10vh;
}

.mt-5{
    margin-top:10px;
}

.header-menu{
	position:relative;
	background:#fff;
	width:100%;
	min-width:1200px;
    border-bottom:1px solid black;
	height:72px;
	top:0;
	margin:0 auto;
}
.header-menu-div{
	position:relative;
	width:430px;
	margin:0 auto;
	height:70px;
    display:flex;
}
.header-menu-div-div1{
    height: 35px;
    margin-top:20px;
    padding-left: 10px;
    padding-right: 10px;
    transition: 0.5s;
    border-top: 2px solid transparent;
}
.header-menu-div-div1:hover{
    border-top: 2px solid #5edbff;
}
.header-menu-div-div2{
    height: 35px;
    margin-top:20px;
    padding-left: 10px;
    padding-right: 10px;
    transition: 0.5s;
    border-top: 2px solid transparent;
}
.header-menu-div-div2:hover{
    border-top: 2px solid #5edbff;
}
.header-menu-div-div3{
    height: 35px;
    margin-top:0px;
    padding-left: 10px;
    padding-right: 10px;
    transition: 0.5s;
}
.header-menu-div-div4{
    height: 35px;
    margin-top:20px;
    padding-left: 10px;
    padding-right: 10px;
    transition: 0.5s;
    border-top: 2px solid transparent;
}
.header-menu-div-div4:hover{
    border-top: 2px solid #5edbff;
}
.header-menu-div-div5{
    height: 35px;
    margin-top:20px;
    padding-left: 10px;
    padding-right: 10px;
    transition: 0.5s;
    border-top: 2px solid transparent;
}
.header-menu-div-div5:hover{
    border-top: 2px solid #5edbff;
}
.header-text{
	margin-left: 20px;
	font-family:Patrick Hand;
	font-size:20px;
	cursor:pointer;
	text-decoration:none;
}
.header-text:hover {
  color: #01c9ca;  
}

.header-text2{
	margin-left: 20px;
	font-family:Patrick Hand;
	font-size:20px;
	cursor:pointer;
	text-decoration:none;
}
.header-text2:hover {
  color: #01c9ca;  
}
.header-text3{
	font-family:Patrick Hand;
	font-size:20px;
	margin-top:20px;
	cursor:pointer;
	text-decoration:none;
}
.header-text3:hover {
  color: #01c9ca;  
}
.header-text4{
	font-family:Patrick Hand;
	font-size:20px;
	margin-top:20px;
	cursor:pointer;
	text-decoration:none;
}
.header-text4:hover {
  color: #01c9ca;  
}
.header-text5{
	font-family:Patrick Hand;
	font-size:20px;
	margin-top:20px;
	cursor:pointer;
	text-decoration:none;
}
.header-text5:hover {
  color: #01c9ca;  
}
.header-text6{
	font-family:Patrick Hand;
	font-size:20px;
	margin-top:20px;
	cursor:pointer;
	text-decoration:none;
}
.header-text6:hover {
  color: #01c9ca;  
}

.header-text:before {
  content: '';
  position: absolute;
  top: 20;
  left: 12px;
  display: block;
  width: 95px;
  height: 2px;
  background: #000;
  transform: scale(0);
  transition: all 0.2s;
}

.header-text:hover:before {
  background: #01c9ca;
  transform: scale(1);
}

.header-text2{
	float:left;
	margin-left: 20px;
	font-family:Patrick Hand;
	font-size:20px;
	margin-top:20px;
	cursor:pointer;
	text-decoration:none;
}
.header-text2:hover {
  color: #01c9ca;  
}
.header-img-logo{
	display: block;
	margin-left: 20px;
	margin-right: auto;
	width:70px;
	height:70px;
	float:left;
	
}



.menu-points{
    position: relative;
    width: 100%;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    height: 60px;
    margin-top:10px;
}


.menu-points-a {
    position: relative;
    --h: 1.2em;   /* the height */
    margin-left: 10px;
    font-size: 30px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 12px;
    cursor: pointer;
    top:18px;
    linea-height: var(--h);
    color: #0000;
    overflow: hidden;
    text-shadow: 
      0 var(--_t,var(--h)) #fff,
      0 0 var(--_c,#000);
    background: 
      linear-gradient(#1095c1 0 0) 
      bottom/100% var(--_d, 0) no-repeat;
    transition: 0.3s;
  }
  .menu-points-a:hover{
    background-color: #1095c1;
    color: #fff;
    border: 2px solid #1095c1;
  }
  

  .headline1{
    position: relative;
    font-size:35px;
    color:#000;
    padding-top:40px;
    text-align: center;
  }
  .headline2{
    position: relative;
    font-size:28px;
    color:#000;
    padding-top:10px;
    text-align: center;
  }

  .step1{
    position: relative;
    width: 1000px;
    display: flex;
    margin-top:50px;
    border:1px solid black;
    background-color: #fff;
    border-radius: 20px;
  }
  .step2{
    position: relative;
    width: 1000px;
    display: flex;
    margin-top:50px;
    border:1px solid black;
    background-color: #fff;
    border-radius: 20px;
  }
  .step3{
    position: relative;
    width: 1000px;
    display: flex;
    margin-top:50px;
    border:1px solid black;
    background-color: #fff;
    height: 230px;
    border-radius: 20px;
  }
  .step1_img{
    width: 300px;
    height: auto;
    border-radius: 20px;
  }

  .step1_text_number{
    font-size: 27px;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(39, 144, 185);
    font-weight: bold;
    margin-left: 50px;
}
.step1_text{
    font-size: 27px;
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    margin-left: 5px;
    font-weight: bold;
}
.step1_text2{
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    margin-left: 50px;
    top: 15px;
    width: 600px;
    text-align: left;
    line-height: 1.5;
    margin-top: 10px;
}




.webseite-erstellen-lassen-headline-div1{
    position: relative;
    width:180px;
    height: 15px;
    background-color: #2c8de7;
    margin-top:100px;
}
.webseite-erstellen-lassen-headline-div2{
    position: relative;
    width:180px;
    height: 15px;
    background-color: #2c8de7;
}
.webseite-erstellen-lassen-headline{
    position: relative;
    width:730px;
    padding-bottom: 30px;
    padding-top: 30px;
    text-align: center;
    font-size:50px;
    color:#000;
}

.homepage-erstelllen-lassen-div{
    position: relative;
    width:1000px;
    margin:50px auto;
    border:1px solid black;
    background-color: #fff;
    border-radius: 20px;
}

.homepage-erstelllen-lassen-p{
    position: relative;
    font-size: 22px;
    font-family: Arial, Helvetica, sans-serif;
    color:#000;
    padding-left: 15px;
    padding-right: 15px;
    padding-top:35px;
    padding-bottom:25px;
}

.homepage-erstelllen-lassen-img{
    position: relative;
    width:800px;
    height: auto;
    margin-top:25px;
}

.webseite-erstellen-lassen-leistungen{
    position: relative;
    width:900px;
    height: auto;
    margin:25px auto;
    display:flex;
}

.webseite-erstellen-lassen-leistungen-div{
    position: relative;
    width:300px;
    height: 350px;
    padding:15px;
}

  
.webseite-erstellen-lassen-leistungen-icon-rocket{
    width:100px;
    height: auto;
}
.webseite-erstellen-lassen-leistungen-icon-Handy{
    width:80px;
    height: auto;
}
.webseite-erstellen-lassen-leistungen-icon-Birne{
    width:110px;
    height: auto;
}

.webseite-erstellen-lassen-leistungen-h{
    position: relative;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    margin-top:15px;
}

.webseite-erstellen-lassen-leistungen-p{
    position: relative;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;

}






.stellenanzeigen-typ{
    position: relative;
    width:1050px;
    height: auto;
    margin:100px auto;
  }

  .card {
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    width: 320px;
    height: 583px;
    display: inline-block;
    padding-top:15px;
    cursor: pointer;
    transition:0.4s;
    top:0px;
    background-color: #fff;
  }

  .card2 {
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    width: 320px;
    height: 620px;
    display: inline-block;
    padding-top:15px;
    cursor: pointer;
    transition:0.4s;
    box-shadow: 0 4px 8px 0 #5edbff;
    background-color: #fff;
  }


  .card-headline{
    position: relative;
    color:#000;
    font-size: 26px;
    font-family: Arial, Helvetica, sans-serif;
  }
  .card-headline2{
    position: relative;
    color:#000;
    font-size: 26px;
    font-family: Arial, Helvetica, sans-serif;
    margin-top:10px;
  }

  .card-info{
    position: relative;
    width: 100%;
    height: auto;
    background-color: #f5f5f5;
    padding-top:30px;
    padding-bottom: 30px;
  }
  .card-info2{
    position: relative;
    width: 100%;
    height: auto;
    background-color: #f5f5f5;
    padding-top:45px;
    padding-bottom: 45px;
  }

  .card-info-text{
    position: relative;
    font-size: 18px;
    padding-top:3px;
    padding-bottom:3px;
    text-align: left;
    margin-left: 15px;
    color:#000;
  }
  
  .price {
    color: #000;
    font-weight: bold;
    font-size: 22px;
    text-align: left;
    margin-left:30px;
    margin-top:15px;
    padding-bottom:15px;
  }  
  .card button:hover {
    opacity: 0.7;
  }
  .card-info-button{
    position: relative;
    width: 100%;
    height: 50px;
    font-size:22px;
    background-color: #5edbff;
    cursor: pointer;
    color:#fff;
    border:none;
    transform: 2.0s;
  }

  .card-info-button:hover{
    background-color: #60a9fc;
  }


section {
  padding: 3rem 0;
  background: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #242424;
}

h1.section-title {
  font-size: 2.2rem;
  margin-bottom: 1.3rem;
}

a {
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}

p.lead {
  color: #a1a2ac;
  margin-bottom: 6rem;
}

.btn {
  text-transform: uppercase;
  font-weight: 600;
}

.btn-outline-signin {
  border: 1px solid #e1e8ee;
}

.btn-start {
  background: #fd4d66;
  color: #fff;
  padding: 0.8rem;
  width: 100%;
  margin: 0 auto;
}

.btn-start:hover,
.btn-start:focus {
  color: #fff;
}

.btn-outline-start {
  background: #fff;
  border: 1px solid #fddbe4;
  color: #fd4d66;
  padding: 0.8rem;
  width: 100%;
  margin: 0 auto;
}

.btn-outline-start:hover,
.btn-outline-start:focus {
  color: #fd4d66;
}

section.pricing-plans {
  background: #fff;
  padding: 8rem 0;
}

#navbar-main {
  position: absolute;
  font-family: 'Roboto', sans-serif;
  background: #fff;
  border-bottom: 1px solid #e1e8ee;
}

#navbar-main .navbar-brand {
  color: #fd4d66;
  text-transform: lowercase;
  font-weight: 600;
  font-size: 1.40rem;
}

#navbar-main .navbar-toggler {
  border: none;
  font-size: 2rem;
}

#navbar-main .navbar-nav > li.nav-item > a {
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-align: center;
}

.pricing-box {
  padding: 1rem;
  background: #fff;
  border: 1px solid #e1e8ee;
}

.pricing-box .card-title {
  font-size: 1rem;
  line-height: 2;
}

.pricing-box .currency {
  top: -1.50rem;
  font-size: 1.50rem;
  letter-spacing: 0.75rem;
  margin-right: -1.5rem;
}

.pricing-box .amount {
  font-size: 3.8rem;
}

.pricing-box .month {
  color: #a1a2ac;
  margin-left: -0.8rem;
}

.pricing-box .list-group {
  margin-bottom: 1rem;
}

.pricing-box .list-group-item {
  padding: 0.45rem 1rem;
  border: none;
}

.pricing-premium {
  position: relative;
  z-index: 1;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.09);
  -moz-box-shadow: 0 5px 10px rgba(0,0,0,.09);
  box-shadow: 0 5px 10px rgba(0,0,0,.09);
}

@media (max-width: 768px) {
  .pricing-box {
    margin-bottom: 1rem;
  }
}

@media only screen and (min-width: 992px) {
  #navbar-main {
    background: transparent;
    border-bottom: 1px solid transparent;
  }
  
  #navbar-main .navbar-nav > li.nav-item > a {
    color: #a1a2ac;
    padding: 1rem;
  }
  
  #navbar-main .navbar-nav > li.nav-item > a:hover,
  #navbar-main .navbar-nav > li.nav-item > a:focus {
    color: #242424;
  }
}

@media (min-width: 768px) {
  .pricing-premium {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    transform: scale(1.05);
  }
}


  







.zitat-div{
    position: relative;
    width:100%;
    height: 380px;
    margin-top:50px;
 background-color: #000;
}
.zitat-div-img{
    position: relative;
    width:100%;
    height: 380px;
    opacity: 0.8;
 object-fit:cover;
 z-index: 1;
}

.zitat-div-h2{
    position: absolute;
    left: 0;
    right: 0;
    top:100px;
    font-size: 30px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color:#fff;
    text-align: center;
    line-height: 1.3;
    z-index: 99;
}

.zitat-div-h3{
    position: absolute;
    font-size:25px;
    left: 0;
    right: 0;
    top:200px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color:#fff;
    text-align: center;
    z-index: 99;
}








  
  :root {
	--color-1: #186cb8;
	--color-2: #2a9a9f;
	--color-3: #f1b211;
	--color-4: #e83611;
	--color-5: #f9002f;
  }
  
  .container{
    font-family: 'Courier New', Courier, monospace;
  }
  
  .wrapper {
	background: transparent;
	line-height: 1;
	min-height: 100%;
	display: grid;
	place-items: center;
	min-height: calc(100vh - 16px);
  }
  
  .color-headline {
	font-family: "Exo", sans-serif;
	font-size: 7vw;
	font-weight: 900;
	width: -webkit-min-content;
	width: -moz-min-content;
	width: min-content;
	margin: auto;
	text-transform: uppercase;
	background: linear-gradient(219deg, 
	  var(--color-1) 19%, 
	  transparent 19%,transparent 20%, 
	  var(--color-2) 20%, var(--color-2)  39%,
	  transparent 39%,transparent 40%, 
	  var(--color-3) 40%,var(--color-3) 59% ,
	  transparent 59%,transparent 60%, 
	  var(--color-4) 60%, var(--color-4) 79%,
	  transparent 79%, transparent 80%, 
	  var(--color-5) 80%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
  }
  



  .warum-wir-div{
    width: 90%;
    height: auto;
    display: flex;
    min-width: 1200px;
    max-width: 1900px;
    margin-top:-100px;
  }
  .warum-wir-div-p-div{
    position: relative;
    font-size: 30px;
    color:#000;
    width: 50%;
    text-align: left;
    margin-top: 20px;
}
.warum-wir-div-p{
    position: relative;
    font-size: 26px;
    color:#000;
    width: 90%;
    margin-left: 5%;
    text-align: left;
    line-height: 1.6;
}
.warum-wir-div-img{
    position: relative;
    width: 50%;
    height: auto;
    object-fit: cover
}

.warum-wir-div2{
    width: 90%;
    height: auto;
    display: flex;
    min-width: 1200px;
    max-width: 1900px;
    margin-top:150px;
  }
  .warum-wir-div-img-div{
    position: relative;
    width: 50%;
    height: auto;
    object-fit: cover
}
.warum-wir-div-img2{
    position: relative;
    width: 50%;
    height: auto;
    object-fit: cover;
    margin-top:50px;
}

.made-in-germany-div{
    position: relative;
    margin-top:50px;
}
.made-in-germany-div-h1{
    position: relative;
    color:#000;
}

.made-in-germany-div-flag{
  position: relative;
  width: 500px;
  height: 8px;
  display: flex;
  margin-top: 20px;
}
.made-in-germany-div-flag-black{
  position: relative;
  width: 166px;
  height: 8px;
  background-color: #000;
}
.made-in-germany-div-flag-red{
  position: relative;
  width: 166px;
  height: 8px;
  background-color: rgb(255, 0, 0);
}
.made-in-germany-div-flag-gold{
  position: relative;
  width: 166px;
  height: 8px;
  background-color: #FFD700;
}
.made-in-germany-div-flag-text{
    width: 800px;
    margin-top: 20px;
    line-height: 1.5;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
}













.col-xs-12{
    width: 100%;
    min-width: 100%;
    background-color: #2c3bc0;
    height: 150px;
    margin-top:200px;
}
.mb-30{
    position: relative;
    font-size: 25px;
    color: #fff;
    text-align: center;
    top: 30px;
    font-size: 35px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.btn-contact{
    position: relative;
    margin:0 auto;
    border: 1px solid #fff;
    color: #fff;
    background: transparent;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom:10px;
    font-size: 20px;
    border-radius: 15px;
    transition: 0.3s;
    cursor: pointer;
    top: 40px;
}
.btn-contact:hover{
    background-color: #fff;
    color: #2c3bc0;
    border: 1px solid #000;
}









  /*app side*/
  .headlinie-div{
    position: relative;
    width: 90%;
    margin-left: 5%;
    min-width:1200px;
    padding-top:50px;
  }
  .headline{
    position: relative;
    color: #fff;
    text-align: left;
    margin-left: 50px;
    font-weight: bold;
    font-size: 60px;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .headline-text{
    position: relative;
    color: #fff;
    text-align: left;
    margin-left: 50px;
    font-weight: bold;
    font-size: 25px;
    line-height: 1.6;
    width: 800px;
    font-family: Arial, Helvetica, sans-serif;
  }

  .sector1-div{
    position: relative;
    display: flex;
    width: 90%;
    margin-left: 5%;
    min-width: 960px;
    margin-top:30px;
  }
 
  .sector1-div-ios{
    position: relative;
    width: 450px;
    background-color: #fff;
    border:none;
    color: #000;
    border-radius: 20px;
    height: 200px;
    transition: 0.3s;
    cursor: pointer;
  }
  .sector1-div-ios:hover{
    color:#ffffff;
    background: rgb(255, 123, 0);
  }

  .sector1-div-ios-headline{
    position: relative;
    font-size: 30px;
    color: rgb(168, 39, 158);
    text-align: left;
    margin-left: 30px;
    padding-top:20px;
  }
  .sector1-div-ios-text{
    position: relative;
    text-align: left;
    width:430px;
    margin-left: 20px;
    height: auto;
    font-size:18px;
    margin-top:10px;
  }



  .sector2-div{
    position: relative;
    display: flex;
    width: 90%;
    margin-left: 5%;
    min-width: 960px;
    margin-top:30px;
  }  
  .sector2-div-next{
    position: relative;
    width: 650px;
    background-color: #fff;
    border:none;
    color: #000;
    border-radius: 20px;
    height: 150px;
    transition: 0.3s;
    cursor: pointer;
  }
  .sector2-div-next:hover{
    color:#ffffff;
    background: rgb(255, 123, 0);
  }

  .sector2-div-next-headline{
    position: relative;
    font-size: 30px;
    color: rgb(168, 39, 158);
    text-align: left;
    margin-left: 30px;
    padding-top:20px;
  }
  .sector2-div-next-text{
    position: relative;
    text-align: left;
    width:630px;
    margin-left: 20px;
    height: auto;
    font-size:18px;
    margin-top:10px;
  }



.div-haed{
  position: relative;
  width: 100%;
  max-width:1200px;
  border:1px solid rgb(201, 201, 201);
  margin:25px auto;
  background: #fff;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
.div-haed-m{
    position: relative;
    width:100%;
    border:1px solid rgb(201, 201, 201);
    margin:25px auto;
    background: #fff;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}

.ratgeber-header-img{
  position: relative;
  width: 100%;
  max-width:1200px;
  height: auto;
  max-height: 500px;
  object-fit: cover;
  background-color: orange;
}


.ratgeber-splitter{
  width: 1200px;
  height: 4px;
  background-image: linear-gradient(to right, rgb(0, 183, 255) , rgb(206, 3, 206));
}

.nav-m{
    padding-bottom:40px;
}

.Headline1{
  position: relative;
  text-align: center;
  margin-top:25px;
  font-size: 38px;
}

.Headline2{
  position: relative;
  text-align: center;
  font-size: 25px;
}
.Headline2-m{
    position: relative;
    font-size: 2vh;
    width:80%;
    margin-left: 10%;
    text-align: center;
  }

.input-text-1{
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.3;
  width:90%;
  margin:1.5em auto;
  padding-bottom: 25px;
}

#anchor-links{
    color: #011fca;
    transition: 0.5s;
    text-decoration: none;
}
#anchor-links:hover{
    color: #c70b0b;
}

.input-text-2{
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.3;
    width:90%;
    margin:1.5em auto;
    padding-bottom: 25px;
  }


.div-main{
  position: relative;
  width:96%;
  max-width:1200px;
  border:1px solid rgb(201, 201, 201);
  margin:25px auto;
  background: #fff;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}


.div-main-h2{
  position: relative;
  color:#000;
  margin-top:7vh;
  width: 90%;
  margin-left: 5%;
  font-size: 2em;
  line-height: 1.2;
  font-weight: 700;
}
.div-main-h2-center{
  position: relative;
  color:#000;
  margin-top:7vh;
  width: 90%;
  margin-left: 5%;
  font-size: 2em;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
}
.div-main-h3{
  position: relative;
  color:#000;
  margin-top:1vh;
  width: 90%;
  margin-left: 5%;
  font-size: 1.3em;
  line-height: 1.1;
}
.div-main-p{
  position: relative;
  color:#000;
  width:90%;
  margin-top:2vh;
  margin-left:5%;
  font-size:18px;
  line-height: 1.3;
  font-family: 'Inter';
}
.div-main-p-list{
    position: relative;
    color:#000;
    width:80%;
    margin-top:3px;
    margin-left:7%;
    font-size:18px;
    line-height: 1.3;
  }

.div-main-h3-m{
  position: relative;
  color:#000;
  margin-top:0.5vh;
  margin-left: 2vh;
  font-size: 2vh;
  height: auto;
}
.div-main-p-m{
  position: relative;
  color:#000;
  width:90%;
  margin-top:2vh;
  margin-left:5%;
  font-size:2vh;
  line-height: 1.3;
}

.div-mail-img1{
  position: relative;
  width:90%;
  max-width:800px;
  height: auto;
  margin:25px auto;
}


.div-mail-img1-m{
  position: relative;
  width:80%;
  height: auto;
  margin:25px auto;
  margin-left: 10%;
}

.makler-erkennen-div-t-m{
    position: relative;
    font-family: "Inter";
    line-height: 1.5;
    font-size:16px;
    font-weight: 400;
    margin-top:10px;
    width:100%;
    max-width:600px;
    margin-left:auto;
    margin-right:auto;
}

.button-ratgeber{
  position: relative;
  width:90%;
  max-width:1200px;
  cursor: pointer;
  color:#fff;
  background-color: #fd8a02;
  padding-top:0.6vh;
  padding-bottom:0.6vh;
  font-size:2.5vh;
  border-radius: 0.2vh;
  border:none;
}

.button-ratgeber-m{
  position: relative;
  width:80%;
  color:#fff;
  background-color: #ea8000;
  padding-top:0.6vh;
  padding-bottom:0.6vh;
  font-size:2.5vh;
  border-radius: 0.2vh;
  border:none;
}

.div-mail-link{
  position: relative;
  text-decoration: none;
  color: #01c9ca;
  cursor: pointer;
}
.div-mail-link:hover{
  position: relative;
  text-decoration: none;
  color: #011fca;
}







.text-box-info{
    position: relative;
    width: 90%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    margin-top: 3em;
}

.text-box-info-box1{
    position: relative;
    width: 49%;
    height: auto;
}

.text-box-info-box1-img{
    position: relative;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    cursor: pointer;
    transition: 0.5s;
}
.text-box-info-box1-img:hover{
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}





.table-container {
    overflow-x: auto;
    max-width: 1000px;
    width:90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5em;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}
th {
    background-color: #f2f2f2;
}
tr:nth-child(even) {
    background-color: #f9f9f9;
}
@media screen and (max-width: 600px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }
    th, td {
        padding: 10px;
        text-align: right;
    }
    th::before, td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
    }
    tr {
        margin-bottom: 10px;
    }
}









.text-box-info{
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    margin-top: 3em;
}

.text-box-info-box1{
    position: relative;
    width: 49%;
    height: auto;
}

.text-box-info-box1-img{
    position: relative;
    width: 100%;
    height: auto;
}

.text-box-info-box2{
    position: relative;
    width: 49%;
    height: auto;
    margin-left: 2%;

}

.main-text-h6-m{
    position: relative;
    font-family: "Inter";
    font-size:22px;
    text-align: left;
    color:#252525;
    font-weight: 500;
    margin-top:0px;
    width:98%;
    margin-left: 2%;
}

@media screen and (max-width: 850px) {
	.text-box-info{
		display: inline-block;
    } 
    .text-box-info-box1{
        position: relative;
        width: 96%;
        margin-left: 2%;
        height: auto;
    }
    .text-box-info-box2{
        position: relative;
        width: 96%;
        margin-left: 2%;
        height: auto;
        margin-top:20px;
    }
}






  .vermieter-werden{
    position: relative;
    width: 100%;
    max-width: 400px;
    height: auto;
    border:1px solid black;
    transition: 0.5s;
    overflow: hidden;
  }
  .vermieter-werden:hover{
      border-radius: 14px;
  }
  
  .vermieter-werden-head{
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    color:#fff;
    background-color: #fd8a02;
  }
  
  .vermieter-werden-head-p{
    position: relative;
    font-family: "Inter";
    font-size: 1.2em;
    line-height: 1.4;
    text-align: center;
  }
  .vermieter-werden-body{
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    color:#fff;
    background-color: #efefef;
  }
  
  .vermieter-werden-body-p{
    position: relative;
    font-family: "Inter";
    font-size: 1em;
    text-align: center;
    width: 90%;
    margin-left:5%;
    color: #000;
    text-align: left;
  }
  
  .vermieter-werden-body-p2{
    position: relative;
    font-family: "Inter";
    font-size: 1em;
    text-align: center;
    width: 90%;
    margin-left:5%;
    color: #000000;
    text-align: left;
    margin-top: 0.5em;
  }
  
  .vermieter-werden-form{
    position: relative;
    width: 100%;
    max-width: 400px;
    height: auto;
    border:1px solid black;
    background-color: #efefef;
    padding-bottom: 1em;
    transition:0.5s;
  }
  
  .vermieter-werden-form:hover{
      border-radius: 14px;
  }
  
  
  .vermieter-werden-form-h3{
    position: relative;
    font-size: 1.2em;
    font-family: "Inter";
    color:#000;
    text-align: center;
    margin-top: 0.3em;
    text-align: left;
    width: 90%;
    margin-left: 5%;
    margin-top: 0.7em;
  }
  
  .vermieter-werden-form-inputbox{
    position: relative;
    width: 90%;
    margin-left: 5%;
    margin-top: 1.5em;
  }
  
  .vermieter-werden-form-inputbox2{
    position: relative;
    width: 90%;
    margin-left: 5%;
    margin-top: 1.3em;
  }
  
  
  .input-field{
    position: relative;
    font-family: "Inter";
  }
  .input-field input{
     width: 90%;
    height: 30px;
    border-radius: 3px;
    font-size: 1em;
    padding: 0 15px;
    border: 1px solid #000;
    background: #fff;
    color: #000;
    outline: none;
    font-family: "Inter";
  }
  .input-field label{
    position: absolute;
    top: 60%;
    left: 15px;
    transform: translateY(-70%);
    color: #000;
    font-size: 1em;
    pointer-events: none;
    transition: 0.3s;
  }
  input:focus{
    border: 2px solid #000;
  }
  input:focus ~ label,
  input:valid ~ label{
    top: 0;
    left: 15px;
    font-size: 0.9em;
    padding-left:8px;
    padding-right:8px;
    padding-top:3px;
    padding-bottom:3px;
    background: #fff;
  }
  
  .vermieter-werden-form-btn{
    position: relative;
    width: 90%;
    margin-left: 5%;
    background-color: #fd8a02;
    color:#fff;
    font-family: "Inter";
    margin-top:1.3em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border: none;
    font-size: 0.9em;
    transition: 0.5s;
    font-weight: bold;
  }
  .vermieter-werden-form-btn:hover{
      position: relative;
      background-color: #ea8000;
      border-radius: 7px;
      cursor: pointer;
  }
  
  .vermieter-werden-form-inputbox3{
      position: relative;
      display: flex;
      width: 90%;
      margin-left: 5%;
      margin-top: 1.3em;
    }
  
    
  .checkbox-bg{
      position: relative;
      background-color: transparent;
      width: 95%;
      margin-left: 5%;
      font-size:1em;
      font-family: "Inter";
  }
  
  @media screen and (max-width: 850px) {
  .text-box-info{
    display: inline-block;
    width: 100%;
    } 
    .text-box-info-box1{
        position: relative;
        width: auto;
        margin-left: auto;
        margin-right: auto;
        height: auto;
    }
    .vermieter-werden{
      position: relative;
      margin-left: auto;
      margin-right: auto;
    }
    .text-box-info-box2{
        position: relative;
        width: auto;
        margin-left: auto;
        margin-right: auto;
        height: auto;
        margin-top:20px;

    }
    .vermieter-werden-form{
      position: relative;
      margin-left: auto;
      margin-right: auto;
    }
    #kontakt_form_box1{
        width: 90%;
    }
    #kontakt_form_box2{
        width: 90%;
    }
    #form_box_top{
        margin-top: 0em;
    }

    .makler-grund{
        margin-left: 0px;
        margin-left: 5%;
    }
  }




  .table-container {
    overflow-x: auto;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    margin-top:1em;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
thead {
    background-color: #f4f4f4;
}
th, td {
    text-align: left;
    padding: 8px;
    border-bottom: 1px solid #ddd;
}
th {
    font-weight: bold;
}
tr:hover {
    background-color: #f9f9f9;
}
@media (max-width: 600px) {
    th, td {
        font-size: 14px;
    }
}








.property-section {
    padding: 60px 20px;
}

.container-property {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 40px;
}

/* Bild */
.image-wrapper {
    flex: 1;
}

.image-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

/* Textbereich */
.content-property {
    flex: 1;
}

.content-property h3 {
    font-size: 2rem;
    margin-bottom: 20px;
    font-family: 'Inter';
    color: #1f2937;
    line-height: 1.2;
}

.content-property p {
    font-size: 1rem;
    line-height: 1.6;
    color: #6b7280;
    margin-bottom: 25px;
    font-family: 'Inter';
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: #ff5a5f;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-family: 'Inter';
    transition: background 0.3s ease;
}

.btn:hover {
    background-color: #e14b50;
}

/* Responsive */
@media (max-width: 768px) {
    .container-property {
        flex-direction: column;
        text-align: center;
    }

    .content-property {
        margin-top: 20px;
    }
}








.services {
    padding: 50px 20px;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Karten */
.service-card {
    background: #ffffff;
    width: 100%;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 25px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-family: 'Inter';
    border:1px solid #e3e3e3;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

/* Icon */
.icon-card {
    min-width: 60px;
    height: 60px;
    background-color: #c0392b; /* roter Kreis */
    color: white;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Text */
.content-list-headline {
    margin-bottom: 10px;
    color: #222;
    font-weight: 700;
}

.content-list p {
    font-size: 1em;
    color: #232323;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
    .service-card {
        flex-direction: column;
        text-align: center;
    }

    .ico-card {
        margin-bottom: 15px;
    }
}







.cards-section .container-section {
  max-width: 1100px;
  width: 90%;
  margin: 0 auto;
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap; /* Zeilenumbruch bei zu wenig Platz */
}

.card-infos {
  background: white;
  flex: 1 1 280px; /* Flex-grow:1, flex-shrink:1, Basis: 280px */
  min-width: 280px; /* Minimale Breite */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.card-infos:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.15);
}

.icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 15px auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 0;
  background-color: transparent;
}

.contract-icon {
  background-image: url('immobilienverkauf.png');
}

.access-icon {
  background-image: url('immobilie-kaufen.png');
}

.analysis-icon {
  background-image: url('immobilienbewertung.png');
}

.contract-icon-headline {
  font-size: 1.8em;
  margin-bottom: 10px;
  text-transform: lowercase;
  color: #222;
  font-weight: 800;
}

.card-infos p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #555;
}

/* Optional: Bei sehr kleinen Bildschirmen max-width rausnehmen, damit die Boxen 100% breit werden */
@media (max-width: 400px) {
  .card-infos {
    flex-basis: 100%;
    min-width: 100%;
  }
}






 .checklist-container {
        background: #f2f2f2;
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        width: 90%;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 3vh;
    }

    .checklist-container h2 {
        margin-top: 0;
        margin-bottom: 20px;
        font-size: 1.5rem;
        text-align: center;
        color: #333;
    }

    .checklist {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .checklist li {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        font-size: 1rem;
        color: #333;
    }

    .checklist input[type="checkbox"] {
        margin-right: 12px;
        width: 18px;
        height: 18px;
        accent-color: #f4b400;
        cursor: pointer;
    }

    /* Responsive Anpassung */
    @media (max-width: 480px) {
        .checklist-container {
            padding: 20px;
        }

        .checklist-container h2 {
            font-size: 1.2rem;
        }

        .checklist li {
            font-size: 0.95rem;
        }
    }










    /* =========================================
   GARAGENVERKAUF – TIPPS
   Alle Klassen sind individuell gekapselt
   ========================================= */

.garagen-tipps-section {
    width: 100%;
    padding: 80px 20px;
    background: #ffffff;
    box-sizing: border-box;
}

.garagen-tipps-section *,
.garagen-tipps-section *::before,
.garagen-tipps-section *::after {
    box-sizing: border-box;
}

.garagen-tipps-wrapper {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
}


/* ---------- Überschrift ---------- */

.garagen-tipps-heading {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}

.garagen-tipps-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: #20b96b;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.garagen-tipps-heading h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(30px, 4vw, 43px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.garagen-tipps-heading p {
    max-width: 650px;
    margin: 16px auto 0;
    color: #6b7280;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
}


/* ---------- Karten ---------- */

.garagen-tipps-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.garagen-tipps-card {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    padding: 27px 30px;
    border: 1px solid rgba(17, 24, 39, 0.045);
    border-radius: 20px;
    background: #ffffff;
    box-shadow:
        0 4px 14px rgba(17, 24, 39, 0.045),
        0 12px 32px rgba(17, 24, 39, 0.035);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.garagen-tipps-card:hover {
    transform: translateY(-3px);
    border-color: rgba(32, 185, 107, 0.14);
    box-shadow:
        0 7px 18px rgba(17, 24, 39, 0.06),
        0 18px 40px rgba(17, 24, 39, 0.055);
}


/* ---------- Grünes Icon ---------- */

.garagen-tipps-icon {
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #ffffff;
    background: #28c979;
}

.garagen-tipps-icon svg {
    display: block;
    width: 22px;
    height: 22px;
}


/* ---------- Text ---------- */

.garagen-tipps-content {
    min-width: 0;
    flex: 1;
}

.garagen-tipps-content h3 {
    margin: 0 0 6px;
    color: #111827;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.45;
}

.garagen-tipps-content p {
    max-width: 760px;
    margin: 0;
    color: #7b8493;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 700px) {

    .garagen-tipps-section {
        padding: 60px 18px;
    }

    .garagen-tipps-heading {
        margin-bottom: 30px;
    }

    .garagen-tipps-heading h2 {
        font-size: 32px;
    }

    .garagen-tipps-heading p {
        font-size: 15px;
        line-height: 1.6;
    }

    .garagen-tipps-card {
        gap: 18px;
        padding: 22px;
        border-radius: 17px;
    }
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 480px) {

    .garagen-tipps-section {
        padding: 48px 15px;
    }

    .garagen-tipps-heading {
        margin-bottom: 25px;
    }

    .garagen-tipps-eyebrow {
        margin-bottom: 9px;
        font-size: 11px;
    }

    .garagen-tipps-heading h2 {
        font-size: 28px;
        line-height: 1.2;
    }

    .garagen-tipps-heading p {
        margin-top: 13px;
        font-size: 14px;
    }

    .garagen-tipps-list {
        gap: 12px;
    }

    .garagen-tipps-card {
        align-items: flex-start;
        gap: 15px;
        padding: 19px 17px;
        border-radius: 15px;
    }

    .garagen-tipps-icon {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .garagen-tipps-icon svg {
        width: 19px;
        height: 19px;
    }

    .garagen-tipps-content h3 {
        margin-bottom: 5px;
        font-size: 15px;
    }

    .garagen-tipps-content p {
        font-size: 13px;
        line-height: 1.65;
    }
}


/* =========================================
   SEHR KLEINE SMARTPHONES
   ========================================= */

@media (max-width: 350px) {

    .garagen-tipps-section {
        padding-right: 12px;
        padding-left: 12px;
    }

    .garagen-tipps-heading h2 {
        font-size: 25px;
    }

    .garagen-tipps-card {
        gap: 12px;
        padding: 17px 14px;
    }

    .garagen-tipps-icon {
        flex-basis: 33px;
        width: 33px;
        height: 33px;
    }

    .garagen-tipps-content h3 {
        font-size: 14px;
    }

    .garagen-tipps-content p {
        font-size: 12.5px;
    }
}


/* =========================================
   REDUZIERTE BEWEGUNG
   ========================================= */

@media (prefers-reduced-motion: reduce) {

    .garagen-tipps-card {
        transition: none;
    }

    .garagen-tipps-card:hover {
        transform: none;
    }
}









/* ==========================================================
   GARAGEN-DOKUMENTEN-CHECKLISTE
   Individueller Prefix: garage-doku-check-
   ========================================================== */

.garage-doku-check-tool {
    width: 100%;
    padding: 70px 20px;
    background: #f7faf8;
    font-family: inherit;
    color: #17211c;
}

.garage-doku-check-tool *,
.garage-doku-check-tool *::before,
.garage-doku-check-tool *::after {
    box-sizing: border-box;
}


/* ----------------------------------------------------------
   Hauptkarte
   ---------------------------------------------------------- */

.garage-doku-check-card {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    padding: 38px;
    background: #ffffff;
    border: 1px solid rgba(25, 40, 31, 0.07);
    border-radius: 24px;
    box-shadow:
        0 10px 30px rgba(20, 40, 28, 0.05),
        0 30px 70px rgba(20, 40, 28, 0.06);
}


/* ----------------------------------------------------------
   Header
   ---------------------------------------------------------- */

.garage-doku-check-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 32px;
}

.garage-doku-check-icon {
    display: flex;
    flex: 0 0 52px;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #24c979 0%,
        #16ad63 100%
    );
    box-shadow:
        0 8px 20px rgba(28, 191, 112, 0.22);
}

.garage-doku-check-icon svg {
    width: 27px;
    height: 27px;
}

.garage-doku-check-heading {
    min-width: 0;
}

.garage-doku-check-label {
    display: inline-block;
    margin-bottom: 7px;
    color: #18a960;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.garage-doku-check-heading h2 {
    margin: 0;
    color: #152019;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.garage-doku-check-heading p {
    max-width: 650px;
    margin: 10px 0 0;
    color: #718078;
    font-size: 15px;
    line-height: 1.65;
}


/* ----------------------------------------------------------
   Fortschritt
   ---------------------------------------------------------- */

.garage-doku-check-progress-area {
    padding: 19px 20px 20px;
    margin-bottom: 18px;
    border-radius: 15px;
    background: #f6f9f7;
}

.garage-doku-check-progress-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 11px;
}

.garage-doku-check-progress-top span {
    color: #66736b;
    font-size: 13px;
    font-weight: 600;
}

.garage-doku-check-progress-count {
    color: #18a960;
    font-size: 13px;
    font-weight: 750;
}

.garage-doku-check-progress-track {
    width: 100%;
    height: 7px;
    overflow: hidden;
    border-radius: 100px;
    background: #dfe9e3;
}

.garage-doku-check-progress-bar {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        #27c979,
        #13ac61
    );
    transition: width 0.35s ease;
}


/* ----------------------------------------------------------
   Checklisten-Liste
   ---------------------------------------------------------- */

.garage-doku-check-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* ----------------------------------------------------------
   Einzelner Checklisten-Punkt
   ---------------------------------------------------------- */

.garage-doku-check-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 18px 19px;
    border: 1px solid #e9eeeb;
    border-radius: 15px;
    background: #ffffff;
    cursor: pointer;
    user-select: none;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.garage-doku-check-item:hover {
    border-color: #cfe9da;
    background: #fbfefc;
    box-shadow: 0 5px 16px rgba(25, 50, 35, 0.045);
    transform: translateY(-1px);
}


/* ----------------------------------------------------------
   Native Checkbox verstecken
   ---------------------------------------------------------- */

.garage-doku-check-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ----------------------------------------------------------
   Eigene Checkbox
   ---------------------------------------------------------- */

.garage-doku-check-custom {
    display: flex;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1.8px solid #c9d4cd;
    border-radius: 7px;
    color: #ffffff;
    background: #ffffff;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.garage-doku-check-custom svg {
    width: 15px;
    height: 15px;
    opacity: 0;
    transform: scale(0.6);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


/* Checked */

.garage-doku-check-input:checked
+ .garage-doku-check-custom {
    border-color: #20bd6d;
    background: #20bd6d;
}

.garage-doku-check-input:checked
+ .garage-doku-check-custom svg {
    opacity: 1;
    transform: scale(1);
}


/* Tastatur-Fokus */

.garage-doku-check-input:focus-visible
+ .garage-doku-check-custom {
    outline: 3px solid rgba(32, 189, 109, 0.2);
    outline-offset: 3px;
}


/* ----------------------------------------------------------
   Text
   ---------------------------------------------------------- */

.garage-doku-check-item-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
}

.garage-doku-check-item-content strong {
    color: #1b2720;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    transition: color 0.2s ease;
}

.garage-doku-check-item-content small {
    color: #7a877f;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
}


/* Erledigter Punkt */

.garage-doku-check-item:has(
    .garage-doku-check-input:checked
) {
    border-color: #d9eee1;
    background: #f8fcf9;
}

.garage-doku-check-item:has(
    .garage-doku-check-input:checked
)
.garage-doku-check-item-content strong {
    color: #65736b;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}


/* ----------------------------------------------------------
   Erfolgsnachricht
   ---------------------------------------------------------- */

.garage-doku-check-success {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 18px;
    padding: 15px 17px;
    border: 1px solid #cdebd9;
    border-radius: 14px;
    background: #f1fbf5;
    color: #177c49;
}

.garage-doku-check-success-icon {
    display: flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #ffffff;
    background: #20bd6d;
}

.garage-doku-check-success-icon svg {
    width: 18px;
    height: 18px;
}

.garage-doku-check-success strong {
    display: block;
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 750;
}

.garage-doku-check-success span {
    display: block;
    color: #5e7768;
    font-size: 12px;
    line-height: 1.5;
}


/* ----------------------------------------------------------
   Footer
   ---------------------------------------------------------- */

.garage-doku-check-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 22px;
    padding-top: 19px;
    border-top: 1px solid #edf1ee;
}

.garage-doku-check-saving {
    color: #849089;
    font-size: 11px;
    line-height: 1.5;
}

.garage-doku-check-reset {
    padding: 8px 0;
    border: 0;
    color: #6d7972;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
}

.garage-doku-check-reset:hover {
    color: #e05252;
}

.garage-doku-check-reset:focus-visible {
    outline: 2px solid #20bd6d;
    outline-offset: 4px;
    border-radius: 3px;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 700px) {

    .garage-doku-check-tool {
        padding: 55px 16px;
    }

    .garage-doku-check-card {
        padding: 28px 24px;
        border-radius: 20px;
    }

    .garage-doku-check-header {
        gap: 15px;
        margin-bottom: 27px;
    }

    .garage-doku-check-icon {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }

    .garage-doku-check-icon svg {
        width: 24px;
        height: 24px;
    }

    .garage-doku-check-heading h2 {
        font-size: 25px;
    }

    .garage-doku-check-heading p {
        font-size: 14px;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 500px) {

    .garage-doku-check-tool {
        padding: 42px 12px;
    }

    .garage-doku-check-card {
        padding: 23px 15px;
        border-radius: 18px;
    }

    .garage-doku-check-header {
        align-items: flex-start;
        gap: 13px;
        margin-bottom: 23px;
    }

    .garage-doku-check-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .garage-doku-check-icon svg {
        width: 22px;
        height: 22px;
    }

    .garage-doku-check-label {
        margin-bottom: 5px;
        font-size: 10px;
    }

    .garage-doku-check-heading h2 {
        font-size: 22px;
    }

    .garage-doku-check-heading p {
        margin-top: 8px;
        font-size: 13px;
        line-height: 1.55;
    }


    /* Fortschritt */

    .garage-doku-check-progress-area {
        padding: 15px;
        margin-bottom: 12px;
        border-radius: 13px;
    }

    .garage-doku-check-progress-top {
        margin-bottom: 9px;
    }

    .garage-doku-check-progress-top span,
    .garage-doku-check-progress-count {
        font-size: 12px;
    }


    /* Items */

    .garage-doku-check-list {
        gap: 8px;
    }

    .garage-doku-check-item {
        align-items: flex-start;
        gap: 12px;
        padding: 15px 13px;
        border-radius: 13px;
    }

    .garage-doku-check-custom {
        flex-basis: 22px;
        width: 22px;
        height: 22px;
        margin-top: 1px;
        border-radius: 6px;
    }

    .garage-doku-check-custom svg {
        width: 14px;
        height: 14px;
    }

    .garage-doku-check-item-content {
        gap: 3px;
    }

    .garage-doku-check-item-content strong {
        font-size: 13px;
    }

    .garage-doku-check-item-content small {
        font-size: 12px;
        line-height: 1.5;
    }


    /* Footer */

    .garage-doku-check-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        margin-top: 17px;
        padding-top: 16px;
    }

    .garage-doku-check-reset {
        font-size: 12px;
    }
}


/* ==========================================================
   SEHR KLEINE SMARTPHONES
   ========================================================== */

@media (max-width: 350px) {

    .garage-doku-check-card {
        padding: 20px 12px;
    }

    .garage-doku-check-header {
        gap: 10px;
    }

    .garage-doku-check-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }

    .garage-doku-check-heading h2 {
        font-size: 20px;
    }

    .garage-doku-check-item {
        padding: 14px 11px;
    }

    .garage-doku-check-item-content small {
        font-size: 11.5px;
    }
}


/* ==========================================================
   REDUZIERTE BEWEGUNG
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .garage-doku-check-item,
    .garage-doku-check-custom,
    .garage-doku-check-custom svg,
    .garage-doku-check-progress-bar {
        transition: none;
    }

    .garage-doku-check-item:hover {
        transform: none;
    }
}











/* =========================================
   PENTHOUSE CARDS
   Individueller Prefix: phx-
========================================= */

.phx-attractiveness {
  --phx-primary: #17251f;
  --phx-accent: #b69a68;
  --phx-text: #26332d;
  --phx-muted: #68736e;
  --phx-border: #e7e9e6;
  --phx-bg: #f7f7f5;
  --phx-white: #ffffff;

  width: 100%;
  padding: 70px 20px;
  background: var(#fff);
  box-sizing: border-box;
}

.phx-attractiveness *,
.phx-attractiveness *::before,
.phx-attractiveness *::after {
  box-sizing: border-box;
}

.phx-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.phx-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

/* Card */

.phx-card {
  position: relative;
  display: flex;
  gap: 24px;
  min-height: 250px;
  padding: 34px;
  overflow: hidden;

  background: var(--phx-white);
  border: 1px solid var(--phx-border);
  border-radius: 18px;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.phx-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 0;
  background: var(--phx-accent);
  transition: height 0.35s ease;
}

.phx-card:hover {
  transform: translateY(-5px);
  border-color: #d8d8d2;
  box-shadow: 0 18px 45px rgba(23, 37, 31, 0.09);
}

.phx-card:hover::before {
  height: 100%;
}

/* Icon */

.phx-icon {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--phx-accent);
  background: #f4f0e8;
  border-radius: 50%;

  transition:
    background 0.35s ease,
    color 0.35s ease,
    transform 0.35s ease;
}

.phx-card:hover .phx-icon {
  color: var(--phx-white);
  background: var(--phx-primary);
  transform: scale(1.05);
}

.phx-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Content */

.phx-content {
  position: relative;
  flex: 1;
  min-width: 0;
}

.phx-number {
  display: block;
  margin-bottom: 9px;

  color: var(--phx-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.phx-content h3 {
  margin: 0 0 12px;

  color: var(--phx-primary);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.phx-content p {
  margin: 0;

  color: var(--phx-muted);
  font-size: 15px;
  line-height: 1.7;
  font-weight: 400;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 800px) {

  .phx-attractiveness {
    padding: 55px 18px;
  }

  .phx-grid {
    gap: 16px;
  }

  .phx-card {
    min-height: 230px;
    padding: 27px;
    gap: 19px;
  }

  .phx-content h3 {
    font-size: 19px;
  }

  .phx-content p {
    font-size: 14px;
    line-height: 1.65;
  }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

  .phx-attractiveness {
    padding: 42px 15px;
  }

  .phx-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .phx-card {
    min-height: auto;
    padding: 25px 22px;
    gap: 17px;
    border-radius: 15px;
  }

  .phx-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
  }

  .phx-icon svg {
    width: 21px;
    height: 21px;
  }

  .phx-content h3 {
    margin-bottom: 9px;
    font-size: 18px;
  }

  .phx-content p {
    font-size: 14px;
    line-height: 1.6;
  }

  .phx-number {
    margin-bottom: 7px;
    font-size: 11px;
  }
}


/* =========================================
   VERY SMALL DEVICES
========================================= */

@media (max-width: 380px) {

  .phx-card {
    padding: 21px 18px;
  }

  .phx-icon {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }

  .phx-content h3 {
    font-size: 17px;
  }

  .phx-content p {
    font-size: 13.5px;
  }
}


/* =========================================
   ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {

  .phx-card,
  .phx-card::before,
  .phx-icon {
    transition: none;
  }

  .phx-card:hover {
    transform: none;
  }
}







.phprice-section {
  width: 100%;
  padding: 60px 20px;
  background: #f7f7f5;
  box-sizing: border-box;
}

.phprice-section *,
.phprice-section *::before,
.phprice-section *::after {
  box-sizing: border-box;
}

.phprice-container {
  width: 90%;
  max-width: 1100px;
  margin: 4vh auto;
}

/* Tabelle */

.phprice-table-wrap {
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e5e7e4;
  border-radius: 18px;
  box-shadow: 0 12px 35px rgba(23, 37, 31, 0.06);
}

.phprice-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: inherit;
}

/* Kopf */

.phprice-table thead {
  background: #17251f;
}

.phprice-table th {
  padding: 20px 25px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  letter-spacing: 0.04em;
}

.phprice-table th:nth-child(1) {
  width: 15%;
}

.phprice-table th:nth-child(2) {
  width: 25%;
}

.phprice-table th:nth-child(3) {
  width: 60%;
}

/* Zellen */

.phprice-table td {
  padding: 19px 25px;
  color: #34413b;
  font-size: 15px;
  line-height: 1.5;
  border-bottom: 1px solid #eceeeb;
  vertical-align: middle;
}

.phprice-table tbody tr:last-child td {
  border-bottom: none;
}

/* Jahr */

.phprice-table td:first-child {
  color: #17251f;
  font-weight: 600;
}

/* Preis */

.phprice-value {
  color: #a08455 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  white-space: nowrap;
}

.phprice-muted {
  color: #9ba19d !important;
}

/* Hover */

.phprice-table tbody tr {
  transition: background-color 0.2s ease;
}

.phprice-table tbody tr:hover {
  background: #fafaf8;
}

/* Hervorgehobene aktuelle Daten */

.phprice-highlight {
  background: rgba(182, 154, 104, 0.035);
}

.phprice-current {
  background: #f3f0e9;
}

.phprice-current td {
  border-bottom: none;
}

.phprice-current td:first-child {
  position: relative;
}

.phprice-current td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 28px;
  background: #b69a68;
  border-radius: 0 3px 3px 0;
  transform: translateY(-50%);
}

/* Hinweis */

.phprice-note {
  max-width: 900px;
  margin: 20px auto 0;
  padding: 0 5px;

  color: #707a75;
  font-size: 13px;
  line-height: 1.7;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 750px) {

  .phprice-section {
    padding: 45px 16px;
  }

  .phprice-table th,
  .phprice-table td {
    padding: 16px 18px;
  }

  .phprice-table th {
    font-size: 12px;
  }

  .phprice-table td {
    font-size: 14px;
  }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

  .phprice-section {
    padding: 35px 14px;
  }

  .phprice-table-wrap {
    border-radius: 14px;
    overflow: hidden;
  }

  /*
    Tabellenkopf auf mobilen Geräten ausblenden.
    Die data-label Attribute übernehmen die Bezeichnungen.
  */

  .phprice-table thead {
    display: none;
  }

  .phprice-table,
  .phprice-table tbody,
  .phprice-table tr,
  .phprice-table td {
    display: block;
    width: 100%;
  }

  .phprice-table tr {
    position: relative;
    padding: 18px 20px;
    border-bottom: 1px solid #e8ebe8;
  }

  .phprice-table tr:last-child {
    border-bottom: none;
  }

  .phprice-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 5px 0;
    border: none;

    font-size: 14px;
    text-align: right;
  }

  .phprice-table td::before {
    content: attr(data-label);

    margin-right: 20px;

    color: #7a837f;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
  }

  .phprice-table td:first-child {
    padding-top: 0;
    font-size: 16px;
  }

  .phprice-table td:last-child {
    align-items: flex-start;
    color: #66716b;
  }

  .phprice-value {
    font-size: 15px !important;
  }

  .phprice-current td:first-child::before {
    display: none;
  }

  .phprice-note {
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.6;
  }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 380px) {

  .phprice-section {
    padding-left: 10px;
    padding-right: 10px;
  }

  .phprice-table tr {
    padding: 17px 16px;
  }

  .phprice-table td {
    font-size: 13px;
  }

  .phprice-table td::before {
    font-size: 10px;
  }

  .phprice-value {
    font-size: 14px !important;
  }
}


/* =========================================
   ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {

  .phprice-table tbody tr {
    transition: none;
  }
}















.kpx-property-section {
    width: 100%;
    padding: 90px 30px;
    background: #ffffff;
    box-sizing: border-box;
}

.kpx-property-container {
    width: min(1180px, 100%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
    align-items: center;
    gap: 90px;
}


/* =========================================================
   IMAGE
   ========================================================= */

.kpx-property-image-wrap {
    position: relative;
    width: 100%;
    min-height: 560px;
    overflow: hidden;
    border-radius: 24px;
    background: #edf1ef;
}

.kpx-property-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 560px;
    object-fit: cover;

    transition:
        transform 0.6s ease,
        filter 0.6s ease;
}

.kpx-property-image-wrap:hover .kpx-property-image {
    transform: scale(1.035);
}

.kpx-property-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(16, 83, 78, 0.12),
            rgba(255, 255, 255, 0)
        );

    pointer-events: none;
}


/* =========================================================
   CONTENT
   ========================================================= */

.kpx-property-content {
    width: 100%;
    max-width: 560px;
}

.kpx-property-label {
    display: inline-block;

    margin-bottom: 13px;

    color: #ff8a45;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.2px;
}

.kpx-property-title {
    margin: 0 0 18px;

    color: #14645f;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(30px, 3vw, 43px);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.7px;
}

.kpx-property-intro {
    max-width: 540px;

    margin: 0 0 34px;

    color: #777777;

    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;
}


/* =========================================================
   FEATURES
   ========================================================= */

.kpx-property-feature {
    display: flex;
    align-items: flex-start;

    gap: 20px;

    margin-bottom: 27px;
}

.kpx-property-feature:last-child {
    margin-bottom: 0;
}


/* Icon */

.kpx-property-icon {
    flex: 0 0 34px;

    width: 34px;
    height: 52px;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    color: #ff8844;
}

.kpx-property-icon svg {
    display: block;

    width: 43px;
    height: 43px;

    overflow: visible;
}


/* Text */

.kpx-property-feature-text {
    padding-top: 1px;
}

.kpx-property-feature-text h3 {
    margin: 0 0 6px;

    color: #14645f;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.kpx-property-feature-text p {
    max-width: 390px;

    margin: 0;

    color: #777777;

    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .kpx-property-section {
        padding: 70px 25px;
    }

    .kpx-property-container {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
        gap: 45px;
    }

    .kpx-property-image-wrap,
    .kpx-property-image {
        min-height: 500px;
    }

    .kpx-property-title {
        font-size: 32px;
    }

    .kpx-property-intro {
        font-size: 14px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .kpx-property-section {
        padding: 55px 20px;
    }

    .kpx-property-container {
        display: flex;
        flex-direction: column;

        gap: 45px;
    }

    .kpx-property-image-wrap {
        width: 100%;
        min-height: 320px;

        border-radius: 18px;
    }

    .kpx-property-image {
        min-height: 320px;
    }

    .kpx-property-content {
        max-width: 100%;
    }

    .kpx-property-title {
        font-size: 30px;
        line-height: 1.2;
    }

    .kpx-property-desktop-break {
        display: none;
    }

    .kpx-property-intro {
        margin-bottom: 30px;

        font-size: 14px;
        line-height: 1.7;
    }

    .kpx-property-feature {
        gap: 17px;
        margin-bottom: 25px;
    }

    .kpx-property-feature-text h3 {
        font-size: 19px;
    }

    .kpx-property-feature-text p {
        font-size: 13.5px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .kpx-property-section {
        padding: 45px 16px;
    }

    .kpx-property-image-wrap,
    .kpx-property-image {
        min-height: 270px;
    }

    .kpx-property-title {
        font-size: 27px;
    }

    .kpx-property-feature {
        gap: 14px;
    }

    .kpx-property-icon {
        flex-basis: 30px;
    }

    .kpx-property-icon svg {
        width: 38px;
        height: 38px;
    }
}



















/* =========================================
   IMMOBILIEN-CHECKLISTE
   ========================================= */

.immobilien-checkliste {
    --checkliste-bg: #f5f7f8;
    --checkliste-card: #ffffff;
    --checkliste-text: #17201f;
    --checkliste-muted: #6b7472;
    --checkliste-border: #e3e8e6;
    --checkliste-accent: #16796a;
    --checkliste-accent-dark: #0f5d52;
    --checkliste-accent-light: #e8f5f2;
    --checkliste-shadow: 0 20px 60px rgba(20, 45, 40, 0.08);

    width: 100%;
    padding: 30px 20px;
    background: var(--checkliste-bg);
    box-sizing: border-box;
    margin-top:4vh;
}

.checkliste-container {
    width: min(100%, 820px);
    margin: 0 auto;
    padding: 42px;
    background: var(--checkliste-card);
    border: 1px solid var(--checkliste-border);
    border-radius: 24px;
    box-shadow: var(--checkliste-shadow);
}

/* =========================================
   HEADER
   ========================================= */

.checkliste-header {
    margin-bottom: 30px;
}

.checkliste-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: var(--checkliste-accent-light);
    color: var(--checkliste-accent-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.checkliste-title {
    margin: 0 0 10px;
    color: var(--checkliste-text);
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.checkliste-intro {
    max-width: 650px;
    margin: 0;
    color: var(--checkliste-muted);
    font-size: 16px;
    line-height: 1.65;
}

/* =========================================
   CHECKLIST ITEMS
   ========================================= */

.checkliste-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.unterlagen-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 19px 20px;
    border: 1px solid var(--checkliste-border);
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.unterlagen-item:hover {
    border-color: #b9d8d1;
    background: #fbfefd;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(20, 45, 40, 0.06);
}

/* Versteckte native Checkbox */

.unterlagen-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Individuelle Checkbox */

.checkbox-design {
    position: relative;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border: 2px solid #c7d0cd;
    border-radius: 7px;
    background: #fff;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

/* Checkmark */

.checkbox-design::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    opacity: 0;
    transform: rotate(45deg) scale(0.7);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

/* Checked */

.unterlagen-checkbox:checked + .checkbox-design {
    border-color: var(--checkliste-accent);
    background: var(--checkliste-accent);
    transform: scale(1.05);
}

.unterlagen-checkbox:checked + .checkbox-design::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

/* Tastatur-Navigation */

.unterlagen-checkbox:focus-visible + .checkbox-design {
    outline: 3px solid rgba(22, 121, 106, 0.2);
    outline-offset: 3px;
}

/* =========================================
   TEXT
   ========================================= */

.unterlagen-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.unterlagen-title {
    color: var(--checkliste-text);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    transition: color 0.2s ease;
}

.unterlagen-description {
    color: var(--checkliste-muted);
    font-size: 14px;
    line-height: 1.55;
}

/* Durchgestrichener Titel nach Auswahl */

.unterlagen-checkbox:checked
~ .unterlagen-content
.unterlagen-title {
    color: var(--checkliste-accent-dark);
}

/* =========================================
   FOOTER / STATUS
   ========================================= */

.checkliste-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--checkliste-border);
}

.checkliste-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--checkliste-muted);
    font-size: 14px;
    font-weight: 600;
}

.status-punkt {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--checkliste-accent);
    box-shadow: 0 0 0 4px var(--checkliste-accent-light);
}

/* =========================================
   RESPONSIVE DESIGN
   ========================================= */

@media (max-width: 700px) {

    .immobilien-checkliste {
        padding: 35px 15px;
    }

    .checkliste-container {
        padding: 28px 20px;
        border-radius: 20px;
    }

    .checkliste-header {
        margin-bottom: 24px;
    }

    .unterlagen-item {
        padding: 16px;
        gap: 13px;
    }

    .unterlagen-description {
        font-size: 13px;
    }
}

@media (max-width: 480px) {

    .immobilien-checkliste {
        padding: 20px 10px;
    }

    .checkliste-container {
        padding: 24px 16px;
        border-radius: 18px;
    }

    .checkliste-title {
        font-size: 28px;
    }

    .checkliste-intro {
        font-size: 14px;
    }

    .unterlagen-item {
        padding: 15px;
    }

    .unterlagen-title {
        font-size: 15px;
    }

    .unterlagen-description {
        font-size: 12.5px;
    }

    .checkliste-footer {
        margin-top: 20px;
    }
}

/* =========================================
   REDUZIERTE BEWEGUNG
   ========================================= */

@media (prefers-reduced-motion: reduce) {

    .unterlagen-item,
    .checkbox-design,
    .checkbox-design::after {
        transition: none;
    }
}















/* WRAPPER */
.hpfaq-wrap{
  max-width: 900px;
  margin: 40px auto;
  padding: 10px;
  font-family: Arial, sans-serif;
}

/* ITEM */
.hpfaq-item{
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  background: #fff;
  transition: 0.3s ease;
}

/* QUESTION BUTTON */
.hpfaq-question{
  width: 100%;
  padding: 18px 20px;
  text-align: left;
  background: #fafafa;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ICON */
.hpfaq-icon{
  font-size: 20px;
  transition: 0.3s;
}

/* ANSWER */
.hpfaq-answer{
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  background: #fff;
  transition: all 0.35s ease;
  font-size: 15px;
  line-height: 1.6;
}

/* ACTIVE STATE */
.hpfaq-item.active .hpfaq-answer{
  max-height: 200px;
  padding: 15px 20px 20px;
}

.hpfaq-item.active .hpfaq-icon{
  transform: rotate(45deg);
}

/* MOBILE */
@media (max-width: 600px){
  .hpfaq-question{
    font-size: 15px;
    padding: 16px;
  }

  .hpfaq-answer{
    font-size: 14px;
  }
}