.cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } /* clearfix nicolasgallagher.com */
::selection { background:var(--marker); color:var(--black); } 
*       	{ box-sizing:border-box; margin:0; padding:0; }
img     	{ border:none; height:auto; width:100%; }
p 			{ margin-bottom: 1.9em; }
.cnt 		{ text-align:center; }
.beta, b 	{ background:var(--beta); font-weight:inherit; } 
:root 		{
			-webkit-text-size-adjust: 100%; /* Apple rotation bug */
			font-size: 62.5%; /* 1.6rem = 16px */
			scroll-behavior: smooth; 
			--antrazit:		 #575757;
			--rot: 			#EA5355;
            --text:			 #575757;
			--link:			 #EA5355;
			--link-hover:	 #FC9495;
            --akzent:		 green;
			--marker:		 #FFF6C3;
			--beta:			 pink;
  			}

@font-face {
	font-display: swap; 
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	src: url('lato-v24-latin-regular.woff2') format('woff2');
  }
  @font-face {
	font-display: swap; 
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	src: url('lato-v24-latin-700.woff2') format('woff2');
  }

a {
	color: var(--link);
	transition: 0.3s ease;
	text-decoration-line: underline;
	text-decoration-color: var(--link);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	}
a:hover {
	color: var(--link-hover);
	text-decoration-color: var(--link-hover);
}

body {
	font-family: Lato, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	line-height: 1.5;
	font-size: 1.9rem;
	font-weight: 400;
	color: var(--text);
	background-image: url('../img/kreis-back.png');
	background-size: 50px;
	background-position: auto;
	background-repeat: repeat;
    background-attachment: scroll; 
	background-color: #fff;
	}	
.box_L, .box_M, .box_S {
	width: 90%;
	height: auto;
	position: relative;
	margin: 0 auto;	
	}
.box_L { max-width: 1200px; }
.box_M { max-width:  900px; }
.box_S { max-width:  600px; }


header {
	height: 120px;
	text-align: center;
	background: #fff;
}
.logo {
	max-width: 330px;
	height: auto;
	padding-top: 23px;
	}

nav {
	width: 100%;
	height: 102px;
	position: relative;
	text-align: center;
	background: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
	}
nav a {
	padding-top: 13px;
	width: 17%; /* alle gleich breit */
	height: 100%;
	border: 1px solid rgba(255,255,255,0);
	text-decoration: none;
	text-align: center;
	display: inline-block;
	color: var(--antrazit);
}
nav a:hover {
	border: 1px solid var(--rot);
	color: var(--rot);
}
nav a.off {
	border: 1px solid var(--rot);
	color: var(--rot);	
}
.hero {
	margin-top: -102px; /* Höhe von nav */
	background: #fff;
}
main { 
	text-align: center; 
	background: #fff; 
	width: 100%;
	height: auto;
	padding: 30px 0 60px 0;
}
main p:last-child {
	margin-bottom: 0;
}

.urlaub {
	background-color: var(--rot);
	color: #fff;
	text-align: center;
	margin-top: -90px;
	margin-bottom: 30px;
	padding: 2rem 1rem;
}
.urlaubsinfo {
	text-transform: uppercase;
	letter-spacing: 3px;
}
.betriebsferien {
	font-size: 6rem;
}
.urlaubsdate {

}

i { 
	color: var(--rot);
	font-weight: 700;
	font-style: normal;
}

.spalten { 
	width: 100%;
	height: auto;
	clear:both; 
}
.col-1 { width: 25%; float: left; }
.col-2 { width: 75%; float: left; }

.lasche { 
	background: var(--rot);
	width: 126px;
	height: 120px;
	margin: 0 auto;
	text-align: center;
	color: #fff;
}
.lasche img {
	padding: 10px 20px;
}
.trans {
	background: rgba(255,255,255,0.8);
	height: 50px;
}
.muster {
	/* height: 90vh; */
}
.muster .lasche {
	margin-top: -50px;
	padding-top: 45px;
}
.logos {
	margin-top: 40px;
}
.logos img {
	width: 270px;
	display: inline-block;
	padding: 0 30px;
}
.textlogo i { color: var(--rot); }

.ortsinfo {
	display: flex;
	justify-content: space-between;
	align-items: top;
}
.anfahrt {
	width: 60%;
	padding-right: 20px;
}
.anfahrt p { 
	text-align: left; 
	padding-left: 80px;
}
.bus {
	background-image: url('../img/icon-bus.png');
	background-size: 50px auto;
	background-position: left center;
	background-repeat: no-repeat;
    background-attachment: scroll; 
}
.auto {
	background-image: url('../img/icon-auto.png');
	background-size: 50px auto;
	background-position: left center;
	background-repeat: no-repeat;
    background-attachment: scroll;
}
.rad {
	background-image: url('../img/icon-rad.png');
	background-size: 50px auto;
	background-position: left center;
	background-repeat: no-repeat;
    background-attachment: scroll;
	padding-bottom: 5px;
}
.karte {
	width: 40%;
}
.karte p { 
	font-size: 1.4rem;
	text-align: left;
	font-style: italic;
}


h2 { font-size: 3.8rem; }	

footer {
	background: var(--antrazit);
	padding: 30px 40px;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
footer img {
	width: 100%;
	max-width: 250px;
	height: auto;
}
footer p {
	text-align: center;
	font-size: 1.4rem;
	color: #fff;
	margin-bottom: 0;
	width: 60%;
}
footer a { 
	color: #fff;
	text-decoration: none;
}



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

@media screen and (max-width: 900px) {
	h1, h2 { font-size: 2.6rem }
	.col-1 { display: none; }
	.col-2 { 
		float: none;
		display: block;
		width: 100%;
	}
	.logo {
		max-width: 270px;
		padding-top: 35px;
	}
	.ortsinfo {
		display: block;
	}
	.anfahrt, .karte {
		width: 100%;
	}
	.karte { padding-top: 40px;}
	.betriebsferien { font-size: 4rem; }

	footer { 
		margin-top: 90px;
		display: block;
		text-align: center;
	}
	footer img {
		width: 100%;
		margin: 0 auto;
	}
	footer p {
		width: 100%;
	}


} /*  900  */

@media screen and (max-width: 740px) {
	nav {
		height: 95px;
		background: #fff;
		}
	nav a {
		padding: 0 0 3px 0;
		margin: 0 20px 10px 20px;
		width: auto;
		height: auto;
		border: 1px solid rgba(255,255,255,0);
		text-decoration: none;
		text-align: center;
		display: inline-block;
		color: var(--antrazit);
	}	
	nav a:hover {
		border-color: #fff;
		border-bottom: 1px solid var(--rot);
	}
	nav a.off {
		border-color: #fff;
		border-bottom: 1px solid var(--rot);	
	}
	.hero {
		margin-top: 0px;
	}

} /*  740  */