@charset "UTF-8";

html {
	font-size: 62.5%;
	scroll-behavior: smooth;
}

body { 
	font-family: "Ubuntu", sans-serif;
	font-size: 18px; 
	font-size: 1.8rem; 
	color: #3A5676; /* Fließtext blau1 */ 
	}

* { margin: 0;
    padding: 0;
	box-sizing: border-box;
	}

.nobreak {
	white-space: nowrap;
}

/* BILDER */ 
img {
  width: 100%;
  height: auto;
	}

.headerbild {
	position: relative;
	text-align: center;
}
	figure {
	font-size: 14px; 
	font-size: 1.4rem; 
	margin: 5px 0;
	}

	figure img {
	}
	figure figcaption {
	padding: 2px 4px 2px 4px;
	color: #3A5676; /* Bildunterschrift blau1 */
	font-style: italic;
	text-align: start;
	}


/* IMAGETEXT */ 
.overtext {
  position: absolute;
  color: #FFFFFF;
  font-size: 75px;
  font-size: 7.5rem;
  font-weight: 500;
  text-shadow: 5px 5px 5px black;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
	width: 95%;
}
	@media screen and ( max-width: 930px) {
	  .overtext {
 	  font-size: 65px;
 	  font-size: 6.5rem;  
 	  top: 75%;
	  }
	}
	@media screen and ( max-width: 760px) {
	  .overtext {
 	  font-size: 50px;
 	  font-size: 5.0rem;  
 	  top: 75%;
	  }
	}	
	@media screen and ( max-width: 540px) {
	  .overtext {
 	  font-size: 40px;
 	  font-size: 4.0rem;  
 	  top: 75%;
	  }
	}	
	@media screen and ( max-width: 300px) {
	  .overtext {
 	  font-size: 30px;
 	  font-size: 3.0rem;  
 	  top: 75%;
	  }
	}	
	@media screen and ( max-width: 239px) {
	  .overtext {
		  display: none;	  }
	}	

	
/* ANKER */ 
.jump {
    visibility: hidden;
    height: 0px !important;
    position: absolute;
    margin-top: -150px;
}
@media screen and ( max-width: 950px) {
.jump { 
	margin-top: -100px; }
}


.servicesprung {
    visibility: hidden;
    height: 0px !important;
    position: absolute;
    margin-top: 20px;
}
@media screen and ( max-width: 950px) {
.servicesprung { 
	margin-top: 60px; }
}


/* SCHRIFTEN */ 
h1 {
	font-size: 45px; 
	font-size: 4.5rem; 
	letter-spacing: 0.05rem;
}

h2 {
	font-size: 28px; 
	font-size: 2.8rem; 
	font-weight: 500;
	letter-spacing: 0.05rem;
}

h3 {
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 0.05rem;
	font-size: 20px; 
	font-size: 2.0rem; 
}

h4 {
	letter-spacing: 0.025rem;
	line-height: 1.5;
	}

p { 
	font-size: 18px; 
	font-size: 1.8rem; 
	letter-spacing: 0.025rem;
	line-height: 1.5;
	padding-bottom: 10px;
}

.bildnachweis { 
	font-size: 11px; 
	font-size: 1.1rem; 
	letter-spacing: 0.02rem;
	text-align: center;
	width: 95%;
	margin: 15px auto 0 auto;
	color: #999;
}
.lowercase {text-transform: lowercase;}

h1, h2, h3 {
-webkit-hyphens: manual;
   -moz-hyphens: manual;
        hyphens: manual;
}
h4 {
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}

p {
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
-webkit-hyphenate-limit-lines: 2;
        hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-chars: auto 3;
        hyphenate-limit-chars: auto 3;
}

@media screen and (max-width: 800px) {
	h1 { font-size: 38px; font-size: 3.8rem;}
	h2 { font-size: 24px; font-size: 2.4rem;}
}
@media screen and (max-width: 540px) {
	h1 { font-size: 33px; font-size: 3.3rem; 	
	-moz-hyphens: manual;
	-o-hyphens: manual;
	-webkit-hyphens: manual;
	-ms-hyphens: manual;
	hyphens: manual;
}
	h2 { font-size: 20px; font-size: 2.0rem; 
	-moz-hyphens: manual;
	-o-hyphens: manual;
	-webkit-hyphens: manual;
	-ms-hyphens: manual;
	hyphens: manual;
}
	h3 {font-size: 18px; font-size: 1.8rem;}
}

@media screen and (max-width: 300px) {	
	h1 { font-size: 30px; font-size: 3.0rem; 	
	-moz-hyphens: manual;
	-o-hyphens: manual;
	-webkit-hyphens: manual;
	-ms-hyphens: manual;
	hyphens: manual;
}
	h2 { font-size: 18px; font-size: 1.8rem; 
	-moz-hyphens: manual;
	-o-hyphens: manual;
	-webkit-hyphens: manual;
	-ms-hyphens: manual;
	hyphens: manual;
}
	h3 {font-size: 16px; font-size: 1.6rem;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; }
	h4 {font-size: 16px; font-size: 1.6rem;}
	p { font-size: 16px; font-size: 1.6rem;}
}

@media screen and (max-width: 200px) {	
	h1, h2, h3, h4, p { 	
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}
}

/* LINKS */
a:link, a:visited {
  color: #07A1E2; /* cyan */
  text-decoration: none; font-weight:500;
}

a:hover, a:focus {
  color: #3A5676; /* blau1 */
    text-decoration: underline;
  text-underline-offset: 0.3em; 
  text-decoration-thickness:2px;
}

a:active {
  color: #07A1E2; /* cyan */
    text-decoration: underline;
  text-underline-offset: 0.3em; 
  text-decoration-thickness:2px;
}

/* TEXTLINK */
.textlink:link, .textlink:visited {
  color: #0690CB; /* Textlink */
  text-decoration: none; font-weight:500;
}
.textlink:hover, .textlink:focus {
  color: #3A5676; /* blau1 */
    text-decoration: underline;
  text-underline-offset: 0.3em; 
  text-decoration-thickness:2px;
}
.textlink:active {
  color: #0690CB; /* cyan dark */
    text-decoration: underline;
  text-underline-offset: 0.3em; 
  text-decoration-thickness:2px;
}


header { 
  width: 100%; 
  z-index: 999;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 0;
  background-color: #FFF;
  border-bottom: 1px solid #C6C6C6;
}

main { 
	}


/* FOOTER */

footer {	
	max-width: 100%;
	background-color: #2B4058; /* blau3 */
	padding-top: 30px;
}

.flex-footer {
	width: 100%;
	max-width: 1350px;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	}
	.flex-footer > div {
	padding: 12px;

	font-size: 18px;
	font-size: 1.8rem;
	color: #FFF;
	letter-spacing: 0.025rem;
	line-height: 1.5;
	margin-bottom: 10px;
	}
	.flex-footer > div:nth-child(1),
	.flex-footer > div:nth-child(2),
	.flex-footer > div:nth-child(3) { width: 33.33%;
	}
	#zt {padding-left: 3%; 
	}

@media screen and (max-width: 940px) {
	#zt {padding-left: 12px; 
	}
	.flex-footer { display: flex; flex-wrap: wrap; 
		justify-content: flex-start; 
	}	
	.flex-footer > div { width: 50%; 
	}
	.flex-footer > div:nth-child(1),
	.flex-footer > div:nth-child(2),
	.flex-footer > div:nth-child(3) { width: 50%; 
	}
}

@media screen and (max-width: 540px) { /* einspaltig */
	.flex-footer { flex-direction: column; 
	}	
	.flex-footer > div { width: 100%; max-width: 420px; 
	}
	.flex-footer > div:nth-child(1),
	.flex-footer > div:nth-child(2),
	.flex-footer > div:nth-child(3) { width: 100%; 
	}
}


/* SCHRIFTEN im Footer */
.fuss h4 {
	font-size: 20px;
	font-size: 2.0rem;
	font-weight: 500;
	letter-spacing: 0.25rem;
	text-transform: uppercase;
	margin-bottom: 12px;
	color: #FFF;
}
.fuss p {
	font-size: 18px;
	font-size: 1.8rem;
	color: #FFF;
	letter-spacing: 0.025rem;
	line-height: 1.5;
	margin-bottom: 10px;
	-moz-hyphens: manual;
	-o-hyphens: manual;
	-webkit-hyphens: manual;
	-ms-hyphens: manual;
	hyphens: manual;
}
.fuss a:link, .fuss a:visited {
	color: #FFF;
	text-decoration: none;
}
.fuss a:hover, .fuss a:focus {
	color: #B4E2F6;
	text-decoration: underline;
}
.fuss a:active {
	color: #FFF;
	text-decoration: underline;
}

/* TABLE SPRECHZEITEN */
#consultation {
	color: #FFF;
	margin-left: -4px;
	margin-top: 0;
	border-collapse: collapse;
	}
	#consultation td {
	padding: 3px 4px;
	vertical-align: top;
	}

/* SPRECHZEITEN Kontakt */
#sprechzeiten {
	color: #3A5676;
	margin-left: -4px;
	margin-top: 0;
	border-collapse: collapse;
	font-size: 20px;
	font-size: 2.0rem;
	}
	#sprechzeiten td {
	padding: 3px 4px;
	vertical-align: top;
	}

	#hinweis1 {
	line-height: 1.5; 
	font-size: 18px;
	font-size: 1.8rem;
	}

	#hinweis2 {
	font-size: 14px;
	font-size: 1.4rem;
	margin-left: 45px;
	}
	#googlemaps {
	font-size: 14px; 
	font-size: 1.4rem;
	margin-left: 49px;	
	}
	#hinweis3 {
	line-height: 1.5; 
	margin-top: 20px;
	font-size: 16px;
	font-size: 1.6rem;
	max-width: 430px;
	}



/* MAPS */
#gm {
	font-size: 28px;
	font-size: 2.8rem;
	margin-left: 10px;
	}

/* DATENSCHUTZ, IMPRESSUM */
.bottom { 
	padding: 25px 0;
	color: #000;
	text-align: center;	
	font-family: "Ubuntu", sans-serif;
	letter-spacing: 0.025rem;
	background-color: #EFEFEF; /* grau */
	}
	.bottom a:link, .bottom a:visited {
	color: #000; ;
	font-weight: 400;
	}
	.bottom a:hover, .bottom a:focus {
	color: #07A1E2; /* cyan */
	text-decoration: underline;
	}
	.bottom a:active {
	color: #000;
	}

@media screen and (max-width: 300px) {
	.fuss h4, .fuss p, #hinweis1, 
	#gm, #consultation, #sprechzeiten, 
	.bottom { 
		font-size: 16px; 
		font-size: 1.6rem; 
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	}
}