::selection { background:#DDE9F7; color:#000; } 
*       	{ box-sizing:border-box; margin:0; padding:0; }
img     	{ border:none; height:auto; max-width:100%; }
strong  	{ font-weight: 700;}
.cnt 		{ margin:0 auto; text-align: center; }
:focus 		{ outline: 2px solid #B90202; outline-offset: 2px; }
.beta, b 	{ background: pink; font-weight: inherit;} /* for testing */
:root 		{
			-webkit-text-size-adjust: 100%; /* Safari rotation bug */
			/* -webkit-hyphens:auto; hyphens:auto; */
			font-size: 62.5%; /* 1.6rem = 16px */
			scroll-behavior: smooth; 
			--weiss: #fff;
			--schwarz: #000;
			--blau: #356399;
			--blau_hell: #DDE9F7;
			--blau_mittel: #98C7FD; /* footer links */
			--rot: #B90202;
			--grau_hell: #F7F7F7;
			--grau_mittel: #D5D5D5;
			--grau_dunkel: #333;
			--marker: #FFF6C3;
			--beta: pink;
  			}

@font-face {
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto Condensed Regular'),
		 url('roboto-condensed-v25-latin-regular.woff2') format('woff2'), 
		 url('roboto-condensed-v25-latin-regular.woff') format('woff'); 
          font-display: swap;
	}
  @font-face {
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 700;
	src: local('Roboto Condensed Bold'),
		 url('roboto-condensed-v25-latin-700.woff2') format('woff2'), 
		 url('roboto-condensed-v25-latin-700.woff') format('woff'); 
        font-display: swap;
  	}
@font-face {
	font-family: 'Roboto Slab';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto Slab Regular'),
		 url('roboto-slab-v24-latin-regular.woff2') format('woff2'), 
		 url('roboto-slab-v24-latin-regular.woff') format('woff'); 
        font-display: swap;
  	}
@font-face {
	font-family: 'Roboto Slab';
	font-style: normal;
	font-weight: 700;
	src: local('Roboto Slab Bold'),
		 url('roboto-slab-v24-latin-700.woff2') format('woff2'), 
		 url('roboto-slab-v24-latin-700.woff') format('woff');   
        font-display: swap;
  	}
.skip {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.skip:focus {
	position: static;
	width: auto;
	height: auto;
}
body {
	background: var(--weiss);
    font-family: 'Roboto Slab', Arial, sans-serif;
    line-height: 1.6;
    font-size: 1.6rem;
	font-weight: normal;
	color: var(--grau_dunkel);
	}	
section {
	width: 100%;
	height: auto;
	display: block;
	padding: 15vh 0;
	}
.box_L, .box_M, .box_S {
	width: 91%;
	height: auto;
	position: relative;
	margin: 0 auto;	
	}
.box_L { max-width: 1400px; }
.box_M { max-width: 1100px; }
.box_S { max-width:  700px; }


.hero {
	/* overflow: hidden; */
	padding: 4vh 0 0 0;
	}
.hero .box_S {
	margin-top: -70px; /* hochziehen ins Bild */
	background: var(--weiss);
	padding: 30px 50px;
	text-align: center;
	font-size: 1.9rem;
	}
.hero+section { padding-top: 5vh; }
.logo {
	width: 100%;
	max-width: 500px;
	margin: 50px auto;
	}
.dot-line { 
	display: grid; 
	grid-template-columns: 10px auto 10px; 
	align-items: center; 
	}
.dot { 
	width: 10px; 
	height: 10px; 
	border: 1px solid #aaa; 
	border-radius: 50%; 
	}
.line { 
	width: 100%; 
	height: 0; 
	border-bottom: 1px solid #aaa; 
	}
.trenner {
	padding: 10px 0;
	overflow: hidden;
	}
nav {
	width: 100%;
	height: auto;
	position: relative;
	margin: 0px auto;
	font-family: 'Roboto Condensed', Arial, sans-serif;
	font-size: 16px;
	z-index: 10;
	}
nav ul {
	width: calc(100% - 30px);
	max-width: 1100px;
	margin: 0 auto;
	list-style-type: none;
	height: 37px;
	position: relative;
	}
nav ul li {
	float: left;
	/* border-right: 1px solid #ccc; */
	width: 14.25%; /* 8 = 12.5 */
	line-height: 2.3;
	text-align: center;
	position: relative;
}
nav ul li a {
	display: inline-block;
	background: var(--weiss);
	color: var(--grau_dunkel);
	width: 100%;
	height: auto;
	padding: 0 10px;
	text-decoration: none;
}
nav ul li a:hover {
	background: var(--blau_hell);
	color: var(--schwarz);
	text-decoration: none;
}
nav ul li a.aktiv,
nav ul li a:focus {
	background: var(--blau_hell);
	color: var(--schwarz);
}
.hamburger { display: none; }
.bar1, .bar2, .bar3 {
	width: 30px;
	height: 3px;
	background-color: var(--blau);
	margin: 6px 0;
	transition: 0.4s;
	}
.change .bar1 { transform: rotate(-45deg) translate(-5px, 6px); }
.change .bar2 { opacity: 0; }
.change .bar3 {	transform: rotate(45deg) translate(-7px, -8px); }


/* Submenue */
nav ul ul {
    position: absolute;
    display: none;
	width: 200px;
	height: auto;
	background: none;
	box-shadow: 6px 18px 7px 0px rgba(0,0,0,0.2);
    }
nav ul li:hover ul,
nav ul li:focus .nav-leistungen { 
    display: block;  /* submenu einblenden */
}
nav ul ul li {
    float: none;
	display: block;
	width: 100%;
}
nav ul ul li:first-child {
    margin-top: 13px;
}

nav ul ul a {
	text-align: left;
    font-size: 1.5rem;
    line-height: 1.2;
    display: block;
    padding: 10px 20px;
	border-bottom: 1px solid #fff;
	/* margin-bottom: 2px; */
	background-color: var(--blau);
	color: #fff;
}
nav ul ul li:last-child a {
	border-bottom: none;
}
nav ul ul a:hover, nav ul ul a.off {
    background-color: var(--blau_hell);

}	
/*  Link auf externe Seite */
.ext::after { content: ' ▹'; }
.ext { cursor: ne-resize; }


.zwei {
	display: grid;
	grid-template-columns: 1fr 1fr; 
	grid-column-gap: 50px;
	align-items: start;	
	}
.drei {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr; 
	grid-column-gap: 30px;
	align-items: start;	
	}
.vier {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr; 
	grid-column-gap: 25px;
	align-items: start;
	}
.funf {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 
	grid-column-gap: 20px;
	align-items: start;	
	}
.zwei2-3 {
	display: grid;
	grid-template-columns: 2fr 3fr; 
	grid-column-gap: 50px;
	align-items: center;
	}
.zwei3-2 {
	display: grid;
	grid-template-columns: 3fr 2fr; 
	grid-column-gap: 50px;
	align-items: center;
	}

	/* Wir freuen uns auf Sie - mit icons */
.infos p {
	margin-bottom: 4px;
	padding-left: 30px;
	}
.infos .ort {
	background-image: url('../img/icon/icon-pin.svg');
	background-size: 18px auto;
	background-position: left center;
	background-repeat: no-repeat;
    background-attachment: scroll; 
	}
.infos .tel {
	background-image: url('../img/icon/icon-phone.svg');
	background-size: 18px auto;
	background-position: left center;
	background-repeat: no-repeat;
    background-attachment: scroll; 
	}	
.infos .fax {
	background-image: url('../img/icon/icon-fax.svg');
	background-size: 18px auto;
	background-position: left center;
	background-repeat: no-repeat;
    background-attachment: scroll; 
	}	
.infos .mail {
	background-image: url('../img/icon/icon-mail.svg');
	background-size: 18px auto;
	background-position: left 3px;
	background-repeat: no-repeat;
    background-attachment: scroll; 
	}	
	
.marker {
	background-color: var(--marker);
	display: inline-block;
}
.teaser {
	text-align: center;
}
.icon {
	width: 60px;
	height: auto;
	margin: 0 auto;
	opacity: 0.6;
}
.teaser_wir {
	background-color: var(--grau_hell);
	padding: 120px 0;
	position: relative;
}
.teaser_wir .box_M {	
	z-index: 2;
}
.teaser_wir .wappen {
	opacity: 0.05;
	position: absolute;
	z-index: 1;
	width: 220px;
	height: auto;
	right: 10%;
	top: 20px;
}
.grau {
	background-color: var(--grau_hell);
	padding: 100px 0 130px 0;
	position: relative;
}
.wappen_bg {
	background-image: url('../img/logo-wappen2.png');
	background-size: 200px auto;
	background-position: 90% 25%;
	background-repeat: no-repeat;
    background-attachment: scroll;
}
.teaser_rezept {
	padding: 120px 0;
}
ul, ol {
	margin-left: 2em;
	margin-bottom: 2em;
}
.lupe a {
	cursor: zoom-in;
}

.head_S 	{ font-size: 2rem }  
.head_M 	{ font-size: 3rem }  
.head_L 	{ font-size: 5rem }  
.spacer_S 	{ height: 50px; }
.spacer_M 	{ height: 100px; }
.spacer_L 	{ height: 150px; }
.mtop_S		{ margin-top: 50px; }
.mtop_M		{ margin-top: 100px; }
.mtop_L		{ margin-top: 150px; }
.mbot_S		{ margin-bottom: 50px; }
.mbot_M		{ margin-bottom: 100px; }
.mbot_L		{ margin-bottom: 150px; }


h1 {
	font: bold normal 4.6rem/1.2 'Roboto Condensed', Arial, sans-serif;
	color: var(--blau);
	max-width: 800px;
	margin: 0 auto 40px auto;
	text-align: center;
	}	
h2 {
	font-family: 'Roboto Condensed', Arial, sans-serif;
	color: var(--blau);
	font-size: 3.2rem;
	line-height: 1.3;
	margin-bottom: 10px;
	}	
h3 {
	font-family: 'Roboto Condensed', Arial, sans-serif;
	color: var(--blau);
	font-size: 2.4rem;
	line-height: 1.3;
	margin: 15px 0;
	}
.headline_S { font-size: 2.4rem }
.headline_M { font-size: 3.2rem }
.headline_L { font-size: 4.6rem }


#offen h2 { font-size: 2.4rem; }
h2 i { 
	font-weight: normal; 
	font-size: 2.2rem;
	color: var(--grau_mittel);
	display: block; 
	}
/* h3:has(i) { line-height: 1; } */
h3 i { 
	color: var(--grau_mittel);
	font-size: 1.6rem;
	font-weight: normal;
	display: block;
	}
p+h3 { margin-top: 70px; }
p 	{ margin-bottom: 1.8rem; }
.sub {
	font-size: 1.3rem;
	font-style: italic;
	margin-top: 0;
	line-height: 1.3;
	}
.btn {
	padding: 10px 25px;
	background: none;
	border: 1px solid var(--blau);
	color: var(--blau);
	display: inline-block;
	margin: 10px 0 15px 0;
	border-radius: 8px;
	text-decoration: none;
	}
.btn:hover {
	color: var(--weiss);
	background: var(--blau);
	text-decoration: none;
	box-shadow: 0 15px 10px -10px rgba(0,0,0,0.2);
	}	
.mob { display: none; } /* nur mobile zeigen: info.php */

[data-tooltip] {
	position: relative;
	z-index: 10;
  }
  [data-tooltip]:before,
  [data-tooltip]:after {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	left: 50%;
	bottom: calc(100% + 5px);
	pointer-events: none;
	transition: 0.2s;
	will-change: transform;
  }
  [data-tooltip]:before {
	content: attr(data-tooltip);
	padding: 10px 18px;
	min-width: 50px;
	max-width: 300px;
	width: max-content;
	width: -moz-max-content;
	border-radius: 6px;
	font-size: 14px;
	background-color: var(--grau_dunkel);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
	color: #fff;
	text-align: center;
	white-space: pre-wrap;
	transform: translate(-50%, -5px) scale(0.5);
  }
  
  [data-tooltip]:after {
	content: '';
	border-style: solid;
	border-width: 5px 5px 0px 5px;
	border-color: rgba(55, 64, 70, 0.9) transparent transparent transparent;
	transition-duration: 0s; 
	transform-origin: top; 
	transform: translateX(-50%) scaleY(0);
  }
  
  [data-tooltip]:hover:before,
  [data-tooltip]:hover:after {
	visibility: visible;
	opacity: 1;
  }
  [data-tooltip]:hover:before {
	transition-delay: 0.1s;
	transform: translate(-50%, -5px) scale(1);
  }
  /* Slide down effect only on mouseenter (NOT on mouseleave) */
  [data-tooltip]:hover:after {
	transition-delay: 0.3s; /* Starting after the grow effect */
	transition-duration: 0.2s;
	transform: translateX(-50%) scaleY(1);
  }



a {
	color: var(--rot);
	text-decoration: underline;
	transition: 0.3s ease;
	text-underline-offset: 3px;
	}	
a:hover {
	color: var(--blau);
	text-decoration: none;
	/* text-underline-offset: 3px; */
	}	

footer {
	background-color: var(--grau_dunkel);
	color: var(--weiss);
	padding: 90px 0;
	position: relative;
	overflow: hidden;
	}
footer .box_M { z-index: 2; }
footer h2 { color: var(--weiss); }
footer a { color: var(--blau_mittel); }
footer a:hover { color: var(--blau_hell); }
footer .wappen {
	opacity: 0.2;
	position: absolute;
	z-index: 1;
	width: 270px;
	height: auto;
	right: 60%;
	top: 130px;
}
footer .feedback {
	width: 100%;
	height: auto;
	padding: 10px;
	text-align: center;
	z-index: 2;
	position: absolute;
	bottom:0;
	background: rgba(0,0,0,0.4);
}
sup i {
	font-style: normal;
	font-weight: 700;
	font-family: Times,serif;
	/* 
	background: var(--blau);
	border-radius: 50%;
	padding: 0px 4px; 
	*/
	text-decoration: none;
}


input[type=password],
input[type=email],
input[type=tel], 
input[type=text],
input[type=number],
textarea {
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 10px 15px;
	font-size: 1.6rem;
	margin: 3px 0 20px 0;
}
input:focus::placeholder { color: #aaa; }


/* ------------------------- Anker mit JS einblenden */
#top {
	position: fixed;
	bottom: 40px;
	right: 5%;
	z-index: 98;
	display: none;  /* einblenden per JS */
    background: none;
    width: 60px;
    height: auto;
    padding: 15px;
    font-size: 4rem;
    text-decoration: none;
    /* transform: rotate(270deg); */
    /* color: var(--blau_hell); */
	}	
#top:hover {
	color: var(--rot);
}

/* ------------------------- bg-size:cover bug in iOS */
#bg {
	position:fixed; 
	top:-50%; 
	left:-50%; 
	width:200%; 
	height:200%;
	z-index: -1; 
	}
#bg img { 
	position:absolute; 
	top:0; 
	left:0; 
	right:0; 
	bottom:0; 
	margin:auto; 
	min-width:50%;
	min-height:50%;	
	}

	
/* --- RESPONSIVE ---------------------------------------------- */

@media screen and (max-width: 840px) {
	h1 { font-size: 3.2rem; text-align: left; }
	h2 { font-size: 2.6rem; }
	h3 { font-size: 2.2rem; }
	.logo { margin: 10px auto; }
	nav ul {
		width: 100%;
		height: auto;
		display: none;
		}
	nav ul li {
		float: none;
		width: 100%;
		line-height: 2.3;
		text-align: left;
		}
	nav ul li a.aktiv {
		background: var(--blau_hell);
		color: var(--schwarz);
		}
	.hamburger {
		cursor: pointer;
		position: relative;
		padding: 3px 15px 3px 0;
		display: block;
		position: relative;
		background: none;
		width: 100%;
		height: 40px;
		}
	.mobile { /*  per JS an ul.hauptnavigation  */
		display: block; 
		opacity: 1; 
		}
	.navText {
		float: left;
		color: var(--blau_hell);
		font-size: 3rem;
		line-height: 1.2;
		padding-left: 15px;
		margin-bottom: 0;
		text-transform: uppercase;
	}
	nav ul ul {
		position: relative;
		display: block;
		width: 100%;
		height: auto;
		display: none;
	}
	nav ul ul li:first-child {
		margin-top: 0px;
	}
	nav ul ul a {
		padding: 10px 40px;
		border-bottom: 1px solid #fff;
		/* margin-bottom: 2px; */
		background-color: #fff;
		color: var(--grau_dunkel);
	}

	section {
		padding: 5vh 0;
		}
	.box_L, .box_M, .box_S {
		width: 87%;
		}
	.hero {
		margin: 20px auto 40px auto;
		}
	.hero .box_S {
		width: 100%;
		margin-top: 20px;
		padding: 0;
		text-align: left;
		font-size: 1.9rem;
		}

	.dot-line { 
		display: grid; 
		grid-template-columns: 1px auto 1px; 
		align-items: center; 
		}
	.dot { 
		width: 1px; 
		height: 1px; 
		border: 1px solid #aaa; 
		border-radius: 50%; 
		}

	.mob { display: block; } /* nur mobile zeigen: info.php */

	.trenner {
		padding: 40px 0;
		overflow: auto;
		}
	.btn { margin-top: 5px; }

	.zwei {
		grid-template-columns: 1fr; 
		grid-template-rows: 1fr;
		grid-row-gap: 30px;
		}
	.drei {
		grid-template-columns: 1fr; 
		grid-template-rows: 1fr;
		grid-row-gap: 30px;
		}
	.vier {
		grid-template-columns: 1fr; 
		grid-template-rows: 1fr;
		grid-row-gap: 30px;
	}
	.funf {
		grid-template-columns: 1fr; 
		grid-template-rows: 1fr;
		grid-row-gap: 30px;
		}
	.zwei2-3 {
		grid-template-columns: 1fr; 
		grid-template-rows: 1fr;
		grid-row-gap: 30px;
	}
	.zwei3-2 {
		grid-template-columns: 1fr; 
		grid-template-rows: 1fr;
		grid-row-gap: 30px;
	}
	.teaser { grid-row-gap: 100px; }
	.teaser_wir {
		padding: 40px 0 80px 0;
		margin-top: 80px;
	}
	.teaser_wir .wappen {
		display: none;
	}
	.teaser_rezept { padding: 80px 0 100px 0; }
	/* footer { padding: 20px 0; } */
	footer .wappen {
		width: 170px;
		height: auto;
		right: 10%;
		top: 100px;
	}

} /*  600  */