#begriff_close,
.bgw {
	background: #fff;
}

body {
	color: #333;
}



.sslicon,
.back-to-top .path {
	fill: #007999;
}

#inhalt_teaser {
    padding-bottom: 0px !important;
}

#karte {
	margin-bottom: 0px !important;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

h1{
	font-size: 42px;
}

hr {
	height: 1px;
	background-color: #51aae0;
	border: none;
}

.readtxt{
	font-size: 22px;
}

img.socialmedia {
	width: 30px;
	margin-right: 10px;
}

.icon {
    fill: #007799;
    height: 48px;
    padding: 8px;
    width: 48px;
}

#begriffbox,
#footer_end,
#footer_end a,
#impressum {
	color: #fff;
}

#footer_end a, #footer_end b{
	font-weight: 400 !important;
}

#teaser {
    height: 100vh !important;
}

@supports (-moz-appearance: none) {
  .header-container {
    gap: 10px;
  }
}


.myButton {
	background-color:#fff;
	border-radius:15px;
	display:inline-block;
	border: 1px solid #007799;
	cursor:pointer;
	color:#007799 !important;
	font-size:22px;
	padding:10px 30px;
	text-decoration:none;
	font-weight: 600 !important;
}

.myButton:hover {
	background-color:#ffffff00;
	border: 1px solid #fff;
	color: #fff !important;
}
.myButton:active {
	position:relative;
	top:1px;
}

#footer_end a:hover {
  color: #1f2a33;
}

img.footerlogo {
    max-width: 85%;
}

.parallax{
	color:#fff;
	padding:200px 20px;
	font-size: 20px;
}
.parallax h2{
	color:#fff;
}

.parallax{
	color:#fff;
	padding:300px 20px;
	font-size: 20px;
}
.parallax h2{
	color:#fff;
}

.parallax1{
  background: linear-gradient(
    to right,
    #3c3c3b 0%,
    #3c3c3b 25%,
    #007799 25%,
    #007799 100%
  );
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 60px 0;
}

:root{
  --brand:#0b6f82;
  --text:#1f2a33;
  --muted:#6b7b86;

  --container:1200px;
  --padX:24px;

  --gapL:60px;
  --gapM:48px;
  --gapS:40px;

  --radius:12px;
}

/* ========== BASICS ========== */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--padX);
}

.section{
  padding: 140px 0;
}

.section--white{ background:#fff; }
.section--gray{ background:#e7e7e7; }

/* Split Background (wie dein contentsection1) */
.section--split{
  background: linear-gradient(
    to right,
    #3c3c3b 0%,
    #3c3c3b 33%,
    #007799 33%,
    #007799 100%
  );
  background-repeat:no-repeat;
}

.section--nosplit{
  background: linear-gradient(
    to right,
    #3c3c3b 0%,
    #3c3c3b 0%,
    #007799 0%,
    #007799 100%
  );
  background-repeat:no-repeat;
}

/* ========== TYPO / UTILS ========== */
.h-brand{ color: #007799; }
.h-upper{ text-transform: uppercase;}
.h-center{ text-align:center; margin-bottom:30px; font-size: 26px; }
.h-centerhead{ text-align:center; margin-bottom:30px; font-size: clamp(24px, 2.6vw, 40px); }

.h-serif{
  font-size: 40px;
  line-height: 1.3;
  margin: 0 0 18px;
  font-weight: 700;
}

.prose p{
  margin: 0 0 14px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.65;
}

.lead{
  color:#fff;
  font-size: 20px;
  line-height: 1.6;
  max-width: 520px;
  margin: 0;
}

/* ========== FLEX SPLIT (2 Spalten) ========== */
.split{
  display:flex;
  gap: var(--gapM);
}

.split--center{ align-items:center; }

.split__media{
  flex: 0 0 50%;
  margin: 0;
}

.split__media img{
  width:100%;
  height:auto;
  display:block;
  object-fit: cover;
}

.split__content{ flex:1; }

.split__content--white{ color:#fff; }
.split__content--white h2{ color:#fff !important; margin:0 0 16px; }


.split__content a{
	font-weight: 400;
}

/* ========== CARDS (Begleiten) ========== */
.cards{
  display:flex;
  flex-wrap: wrap;                 /* wichtig für responsive */
  column-gap: var(--gapL);         /* Abstand nebeneinander */
  row-gap: 60px;                   /* Abstand nach unten (wenn umbricht) */
  margin-bottom: 60px;             /* Abstand zwischen deinen .cards-Blöcken */
}

.cards:last-child{
  margin-bottom: 0;
}

.card{
  background:#fff;
  padding: 70px 50px;
  text-align:center;

  /* Desktop: zwei nebeneinander (statt flex:1) */
  flex: 1 1 calc((100% - var(--gapL)) / 2);
}

.card__title{
  margin: 0 0 18px;
  font-size: 20px;
}

.card p{
  margin: 0;
  color: var(--text);
  line-height: 1.6;
  font-size: 18px;
}

/* ========== ICON LIST (Kontakt) ========== */
.iconlist{
  display:flex;
  flex-direction:column;
  gap: 18px;
}

.iconlist__item{
  display:flex;
  align-items:center;
  gap: 15px;
}

.iconlist__item a,
.iconlist__item span{
  color: var(--text);
  text-decoration:none;
}

.iconlist__item a:hover, #footer_end a:hover{
  color: var(--text);
  text-decoration: underline;
}

.iconlist__icon{
  width:42px;
  height:42px;
  min-width:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  color: var(--brand);
  border:2px solid rgba(11,111,130,.6);
}

h2.h-serif.h-brand.h-upper {
    text-align: center;
}

h2.h-centerhead.h-upper.l {
    text-align: left;
}

.back-to-top {
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .2);
	border: 1px solid white;
	padding: 7px 1px 2px 6px;
	right: 10px;
}


/* --- Profil Kopf --- */

.profile h2{
	color: white !important;
}

.profile__title { text-align: center; margin: 0 0 14px; }
.profile__intro { text-align: center; margin-bottom: 26px; color: white;}
.profile__pill{
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: #f4f6f8;
  font-weight: 600;
}
.profile__meta{ margin-top: 8px; opacity: .85; }

/* --- Timeline --- */
.timeline{
  position: relative;
  display: grid;
  gap: 28px;
}

.timeline::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 16px;          /* Platz für Pfeil */
  width: 2px;
  background: #e6e6e6;
  transform: translateX(-50%);
  pointer-events: none;
}

.timeline::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 14px solid #e6e6e6;
  pointer-events: none;
}

.tl-item{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  align-items: stretch;
}

/* Boxen */
.tl-card{
  width: min(420px, 100%);
  background: #fff;
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.tl-left  .tl-card{ grid-column: 1; justify-self: end; }
.tl-right .tl-card{ grid-column: 3; justify-self: start; }


@media (max-width: 780px){
.timeline::before{
    left: 18px;
    transform: none;
  }

  .timeline::after{
    left: 10px;
    transform: none;
  }

  .tl-item{
    grid-template-columns: 36px 1fr;
  }

  .tl-card{
    grid-column: 2 !important;
	width: 100% !important;
  }

}

/* ========== RESPONSIVE ========== */
@media (max-width: 900px){
  .split{ flex-direction:column; gap: var(--gapS); }
  .split__media{ flex: 0 0 auto; width: 100%; max-width: 520px; }
}

@media (max-width: 768px){
  .section--split{ background:#007799; }
  .cards{ flex-direction:column; }
}

.parallax2{
	background-image: url(westerholt.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed, scroll;
}

#footer_end h1, #footer_end h3 {
    color: white;
}

#footer_end h3{
	font-family: Outfit, verdana, sans-serif;
	line-height: 1.8em;
}

#footer_end {
	background-color: #007999;
}

div#content {
	margin-top: -20px;
}

header {
	background-color: #fff;
	padding: 0px 0px;
	box-shadow: none;
}


#menu ul ul li a {
	background-color: rgba(47, 93, 128, 0.9) !important;
	color: #fff !important;
}

#menu ul ul li a.on,
#menu ul ul li a:hover {
	background-color: rgba(47, 93, 128, 1) !important;
	color: #fff !important;
}


.logo {
	width: 300px;
	margin-top: 40px;
}

#balken2 {
	display: none;
}

#menu {
	margin-top: -30px;
}

@-moz-document url-prefix() {
  #menu {
    margin-top: 0 !important;
  }
}

.footermp a {
	padding-bottom: 15px;
	font-weight: bold;
	display: inline-block;
}

	#drw-button2 {
		display: block;
		position: fixed;
		z-index: 9999;
		top:40%;
		right: 0;
		border: 0;
		border-radius: 10px 0 0 10px;
		outline: 0 !important;
		background-color:#fff;
		color:#ee383f;
		vertical-align: middle;
		box-shadow: 0 0 8px 0 rgba(0,0,0,.2);
		transform: translateY(-100%);
		cursor: pointer;
		font-size: 15px;
	}

	
	#drw-button3 {
		display: block;
		position: fixed;
		z-index: 9999;
		top: 48%;
		right: 0;
		border: 0;
		border-radius: 10px 0 0 10px;
		outline: 0 !important;
		background-color:#fff;
		color:#ee383f;
		vertical-align: middle;
		box-shadow: 0 0 8px 0 rgba(0,0,0,.2);
		transform: translateY(-100%);
		cursor: pointer;
		font-size: 15px;
	}


.header-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	margin-bottom: 20px !important;
	padding-top: 10px;
}

.headercontent{
  top: 15vh;
}


.hero-title{
  color: #ffffff;
  font-size: clamp(34px, 4.2vw, 62px);
}

#headerbalken,
#menu ul {
	background-color: #2f5d8000;
}

#headerbalken {
	background-color: #2f5d8000;
	;
}

#menu a {
	color: #fff;
	font-weight: 600;
}

.contact-info {
	display: flex;
	align-items: center;
	gap: 5px;
	color: #2f5d80;
	margin-top: -20px;
}

.contact-info a {
	color: #2f5d80
}

.phone,
.email {
	color: #333;
	font-size: 16px;
}

.email {
	font-weight: bold;
}

li::marker {
	content: "» ";
	color: black;
	font-size: 1em;
}

.referenzen img {
	padding: 30px
}

.spalte3.readtxt.leistungen {
	display: flex;
	align-items: center !important;
}

.spalte3.readtxt.leistungen2 {
	display: flex;
	align-items: center !important;
	justify-content: center;
}

.flowchart {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.step {
	position: relative;
	background: #f1f1f1;
	padding: 15px 30px;
	margin: 20px 0;
	width: -webkit-fill-available;
	width: -moz-available;
	max-width: 400px;
	text-align: center;
}

.step:after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	width: 2px;
	height: 20px;
	background: #000;
	transform: translateX(-50%);
}

.step:last-child:after {
	display: none;
}

.bluebox {
	background: #ffffff;
	color: #333;
	height: 370px;
	width: 32.33333333%;
	margin-left: 1%;
	padding-top: 15px;
	margin-top: 10px;
	border: 1px solid #38aae1;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.bluebox:hover {
	background-color: #51aae0;
	border-color: #2f5d80;
	color: white;
}

.bluebox:hover h3,
.bluebox:hover .pfeil {
	color: white;
}

.bluebox h3 {
	hyphens: auto;
	word-wrap: break-word;
}

.bluebox3 h3,
.bluebox2 h3,
.bluebox4 h2,
.bluebox4 a {
	color: #000000;
}

.iconclass {
	margin-top: 10px !important;
}

.kontakt-r1 {
	background: #7aa3a1;
	color: #1c4644 !important;
}

.pfeil {
	color: #007999;
	font-size: 30px;
	float: right;
}

.pfeil2 {
	color: #4e7473;
	font-size: 36px;
	float: right;
}

#teamicon {
	background: url(../bilder/team.svg) no-repeat center top;
}

#linksicon {
	background: url(../bilder/links.svg) no-repeat center top;
}

.mittig {
	margin: 0 auto 40px auto;
	float: none;
	clear: both;
}

.plus {
	border-radius: 0;
	padding: 5px;
}

#menu a {
	font-size: 22px;
	padding: 13px 20px 14px 20px;
}

#menu li {
    border-right: none;
}

#logo>a>img {
	height: auto;
	padding: 10px;
}

#kontaktboxheader {
	background-color: #f1f1f1;
	display: none !important;
}

h3 {
	text-transform: uppercase;
}

h2 {
	color: #007999;
	font-size: 1.6rem;
}

h3.starth3 {
	font-size: 22px;
}

.leistungen,
.leistungen2 {
	min-height: 160px;
	background: #f1f1f1;
	padding: 20px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	margin-bottom: 0;
	font-size: 14px;
}

.leistungen>h3 {
	color: black;
	line-height: 1.5em;
}

.spalte3.readtxt.leistungen2:hover {
	background: #c4c4c4;
	border: 1px solid #51aae0;
}

.leistungen2>h3 {
	line-height: 1.5em;
}

.button {
	background: #ffffff;
	color: #333;
	padding: 20px;
	border: 1px solid #38aae1;
}

.button2 {
	display: block;
}

.button:hover {
	background-color: #51aae0;
	border-color: #2f5d80;
	color: white;
}

.arrow {
	padding: 20px 40px;
	background-color: #eee;
}

.arrow::after {
	top: 22px;
	left: 15px;
}

.leistungsboxen a:hover .leistungen {
	background: #e4e4e4;
}

#menu .on,
#menu ul li a:hover {
	color: #fff;
	text-decoration: underline;
}

#headerbalken {

	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

.bgw {
	background: none;
}

#site {
	background: url(../bilder/wasserzeichen.svg) no-repeat bottom left;
	background-size: 30% auto !important;
	background-attachment: fixed;
}

@media (max-width: 1680px) {
	
	#footer_end h3{
		font-size: 18px;
	}

	.leistungen {
		min-height: 190px;
	}
	
		#drw-button3 {
			top: 49%;
		}
}

@media (max-width: 1360px) {

	.bluebox {
		height: 450px;
	}
	
		#drw-button3 {
			top: 49%;
		}
		
	.spalte3.readtxt.footeradresse, .spalte3.readtxt.footerkontakt {
		width: 50%;
	}
}

@media (max-width: 1200px) {
	
	#menu a {
		font-size: 14px;
	  }

	  #menu {
		margin-top: -30px;
	  }

	  .header-container {
		padding-top: 0px;
	  }
	  
	.hero-title {
		font-size: 38px;
	  }
	  
	  
	.myButton {
		font-size: 20px;
	}

	.readtxt {
		font-size: 20px;
		line-height: 1.7em;
	}
		
	.section {
	  padding: 100px 0;
	}
	
	.parallax {
	  padding: 250px 20px;
	}
	
	#menu a {
		font-size: 18px;
	}
	

	
	.split__content h2 {
		font-size: 32px;
	}

}

@media (min-width: 980px){
	#header{
	height: 100vh !important;
}
}

@media (min-width: 981px) {

	.spaltenbox>.spalte3:nth-child(3n + 4),
	.spaltenbox>.spalte4:nth-child(4n + 5) {
		clear: none !important;
	}
}

@media (max-width: 980px) {
	
	
	#karte p {
        padding: 100px 20px;
    }
	
    .hide980 {
        display: none !important;
    }
	
    .spalte3.readtxt.footeradresse, .spalte3.readtxt.footerkontakt {
        width: 100%;
    }
	
	.footeradresse{
		text-align: center !important;
	}
	
	.section {
		padding: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
		padding-top: 70px;
		padding-bottom: 70px;
	  }
	
	.h-serif {
		font-size: 24px;
	}
	
	.split__content h2 {
		font-size: 22px;
	}
	
	.section--split {
		background: linear-gradient(to right, #3c3c3b 0%, #3c3c3b 0%, #007799 0%, #007799 100%);
		background-repeat: no-repeat;
	}
	
	.h-center {
		font-size: 20px;
	}
	
.cards{
    column-gap: 0;
    row-gap: 24px;      /* Abstand zwischen Cards */
    margin-bottom: 24px;/* Abstand zwischen Gruppen */
  }

  .card{
    flex-basis: 100%;
    padding: 40px 24px;
  }
	

	.h-centerhead {
	  margin-bottom: 10px;
	}

	.parallax {
	  padding: 200px 20px;
	}
	
    .wrap {
        width: 100% !important;
    }
	
	.spalte3.r.readtxt.footermp {
		text-align: justify;
	}
	
	#headerbalken svg{
		fill: #fff;
	}

	#menu ul li a {
		padding: 29px 15px;
	}

	#menu ul {
		font-size: 14px;
		margin-bottom: 0px !important;
	}
	
	#menu li{
		display: block;
	}
	
	#menu .on, #menu ul li a:hover {
        background-color: #007799;
        color: #fff !important;
		font-weight: 500;
    }
	
	#kartenbox, #oeffnungszeitenbox, #kontaktbox {
		padding: 0 0px; !important;
	}


	#kontaktboxheader {
		font-size: 13px;
	}
	
	  .header-container.wrap img {
		max-width: 750px !important;
		width: 70%;
	  }

	.leistungen {
		min-height: auto;
	}

	.spalte23,
	.spalte3 {
		width: 98%;
	}

	#teaser {
		height: 350px !important;
		background-size: 100% auto !important;
	}

	.referenzen img {
		padding: 0 30px;
	}

	#site {
		background-size: 50% auto !important;
		background-attachment: fixed;
	}

	.bluebox {
		height: 270px;
	}

  .header-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

	.logo {
		margin-bottom: 20px;
	}

	#logomobile{
		display: none;
	}

	.contact-info {
		margin-top: 0px;
	  }
	  
	#headerbalken {
		background-color: #007799;
	  }
	  
	#menu ul ul li {
		border-left: 1px solid #fff;
		border-right: none;
	}
	
	#menu ul li a {
		padding: 12px 10px;
	}

	#menu ul {
		font-size: 15px;
	}
	
	#teaser .slick-slide,
	#teaser {
		height: 220px !important;
	}

	#teaser {
		background-size: 100% auto !important;
	}
	
	#inhalt_teaser {
		margin-top: 0px !important;
	}
	
    #teaser:not(.teaserslider) {
        height: 340px !important;
        background-size: cover;
    }
	
  #teaser:not(.teaserslider) {
    margin-top: 200px !important;
  }
	
	.hero-title {
		font-size: 30px;
		margin-top: 20px;
		text-align: center;
	}
	
	.readtxt{
		font-size: 18px;
		line-height: 1.6em;
	}
	
	.wrap.headercontent {
		text-align: center;
	}
	
	.header-container.wrap img{
		max-width: 70% !important;
		height: 140px;
	}

	#inhalt_teaser {
	  padding-bottom: 0px;
	}
	
	.spalte.c.readtxt.parallax.parallax2 {
	  background-attachment: scroll;
	}
	
    #kontaktbox > div, #oeffnungszeitenbox > div, #kartenbox > div, #formularbox > div {
        padding: 20px 20px 0;
        text-align: center;
        border: 1px solid #fff;
        -webkit-box-shadow: 0 0 8px 0 rgba(0,0,0,.2);
        box-shadow: 0 0 8px 0 rgba(0,0,0,.2);
        margin-bottom: 20px;
        color: #333;
        background: #fff;
		font-size: 18px;
    }
	
	#kontaktbox > div a{
		color: #007799 !important;
	}	
	
    #menu {
        margin-top: 0px !important;
        background: #fff;
    }
	
	#menu a{
		color: #007799 !important;
	}
		
	.iconlist {
			gap: 5px;
	}
	
	
#kontaktbox, #oeffnungszeitenbox, #kartenbox, #formularbox {

margin: 0px auto;
margin-top: -6px;
    }
	
	.headercontent {
		top: 0vh;
	}

}

@media (min-width: 781px) and (max-width: 980px) {

  #inhalt_teaser {
    margin-top: 40px !important;
  }

}

@media (max-width: 780px) {
	
		.spalte.c.readtxt.parallax.parallax2{
			background-attachment: scroll !important;
		}

		.section {
			padding: 0px;
			padding-top: 0px;
			padding-bottom: 0px;
			padding-top: 70px;
			padding-bottom: 70px;
		  }

	
		.header-container.wrap img{
			max-width: 70% !important;
		}
	
		#teaser:not(.teaserslider) {
			margin-top: -240px !important;
		}
		
		#teaser:not(.teaserslider) {
			height: 280px !important;
			background-size: cover;
		}

		#drw-button2, #drw-button3{
			width: 90px !important;
			height: 90px !important;
		}

		#drw-button2 {
			top: 60%;
			background-color: rgba(255, 255, 255, 0);
			box-shadow:none;
		}

		#drw-button3 {
			top: 73%;
		}

		#drw-button2 {
			font-size: 12px;
		}	

	.bluebox,
	.bluebox2,
	.bluebox3 {
		width: 98%;
		height: 330px;
	}

	body,
	.readtxt {
		font-size: 16px;
	}

	.leistungen {
		min-height: auto;
	}

	.spalte3.leistungen,
	.spalte3.halb {
		width: 100%;
	}

	.accordeon .klickopen,
	accordeon .klickbtn:hover {
		padding-left: 40px;
	}
	


}

@media (max-width: 480px) {
	
   #kontaktbox > div, #oeffnungszeitenbox > div, #kartenbox > div, #formularbox > div {
		font-size: 16px;
    }
	
	.hero-title {
			font-size: 24px;
			margin-top: 0px;
		}
		
		.header-container.wrap img{
			max-width: 100% !important;
		}
	
    #teaser:not(.teaserslider) {
        margin-top: -220px !important;
    }

	.bluebox,
	.bluebox2,
	.bluebox3 {
		width: 98%;
		height: 400px;
	}

	.contact-info {
		display: block;
		align-items: center;
		gap: 5px;
	}

	#logo>a>img {
		width: 350px;
	}

	#teaser .slick-slide,
	#teaser {
		height: 150px !important;
	}
	
    .myButton {
        font-size: 18px;
        padding: 10px 15px;
        font-family: Outfit, verdana, sans-serif;
    }
	
}


@media (max-width: 360px) {
	
    #teaser:not(.teaserslider) {
        margin-top: -275px !important;
    }

	
}