::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: 2rem; }
.cnt 		{ text-align:center; }
.beta, b 	{ background:var(--beta); font-weight:inherit; } 
.marker 	{ background:var(--marker);  }
html {
	-webkit-text-size-adjust: 100%; /* Apple rotation bug */
	font-size: 62.5%; /* 1.6rem = 16px */
	scroll-behavior: smooth; 
	--blau1: 	#626C89;
	--blau2:	#2C2F38;
	--txt: 		#333;
	--headline:	#52596E;
	--btn: 		#9F0505;
	--link: 	#9F0505;
	--link2: 	#F5A343;
	--hover: 	#000;
	--bg: 		#fff;
	--bg-sand: 	#F5F0E6;
	--marker:	 #FFF6C3;
	--beta:		 pink;
	}
body {
	background: var(--bg);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 1.6rem;
	line-height: 1.6;
	font-weight: 300;
	color: var(--txt);
	}	
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(--hover);
	text-decoration-color: var(--hover);
}
header a {
	color: var(--link2);
	transition: 0.3s ease;
	text-decoration-line: underline;
	text-decoration-color: var(--link2);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	}
header a:hover {
	color: #fff;
	text-decoration-color: #fff;
}

.box_L, .box_M, .box_S, .box_XS {
	width: 90%;
	height: auto;
	position: relative;
	margin: 0 auto;	
	}
.box_L { max-width: 1200px; }
.box_M { max-width:  900px; }
.box_S { max-width:  600px; }
.box_XS { max-width: 400px; }
.grid_2 {
	display: grid;
	grid-gap: 2vw;
	grid-template-columns: 1fr 1fr;
	}
.grid_3 {
	display: grid;
	grid-gap: 2vw;
	grid-template-columns: 1fr 1fr 1fr;
	}
.grid_4 {
	display: grid;
	grid-column-gap: 20px;
	grid-row-gap: 35px;
	grid-template-columns: repeat(auto-fill, minmax(255px, 280px));
	}
.grid_1-2 {
	display: grid;
	grid-gap: 2vw;
	grid-template-columns: 1fr 2fr;
	}
.grid_1-3 {
	display: grid;
	grid-gap: 2vw;
	grid-template-columns: 1fr 3fr;
	}
.abstand { height: 5vh; }

header {
	padding: 6vh 0;
	text-align:center;
	color: #fff;
	background: var(--blau1);
	background: linear-gradient(180deg, var(--blau1) 20%, var(--blau2) 100%);	
}
.jakob {
	width: 240px;
	height: auto;
	border-radius: 50%;
	filter: grayscale(0%);
	margin-bottom: 3vh;
}
.social {
	width: 180px;
	height: auto;
	margin: 40px auto 0 auto;
	display: grid;
	grid-gap: 40px;
	grid-template-columns: 1fr 1fr 1fr;
	justify-content: center;
	align-items: center; 
}
.stimmproben {
	background: var(--bg-sand);
	padding: 8vh 0;
	text-align: center;
}
.stimmproben .grid_4 {
	margin: 4vh auto;
}
audio { 
	width: 95%; 
	max-width: 300px;
}
.aktuell {
	padding: 8vh 0;
	text-align: center;	
}
table {
	width: 100%;
	border-collapse: collapse;
	}
td { padding: 1rem; text-align: left; }
td:first-child { font-weight: 600; }
.sub { 
	font-style: italic;
	font-size: 1.4rem;
}
.fotos img, .foto img {
	filter: grayscale(0%);
}
.kinderstimme {
	padding: 8vh 0;
	background: var(--bg-sand);
}

h1 { 
	font-size: 6rem; 
	line-height: 0.7;
	margin-bottom: 3vh;
	text-align: center;
	font-weight: 800;
}
h1 i {
	font-size: 2.0rem;
	font-style: normal;
}
h2 {
	font-size: 3.4rem; 
	margin-bottom: 0.5em;
	line-height: 1.3;
	text-align: center;
}
ul {
	margin-left: 30px;
	margin-bottom: 30px;
}

.partnerlogos {
	display: grid;
    grid-gap: 3rem;
	align-items: center;
    grid-template-columns: repeat(auto-fill, minmax(120px, 10vw));
}

.btn {
	padding: 12px 25px 12px 15px;
	margin-top: 15px;
	background: var(--btn);
	color: #fff;
	text-decoration: none;
	font-weight: 400;
	display: inline-block;
	transition: all 0.5s ease;
	border-radius: 6px;
	}
.btn:hover {
	background: var(--blau1);
	color: #fff;
	text-decoration: none;
	}	
.icon-micro {
	padding: 5px 15px;
	background-image: url(img/icon-micro.svg);
	background-size: 14px auto;
	background-position: center center;
	background-repeat: no-repeat;
    background-attachment: scroll;
}



footer {
	background-color: var(--blau1);
	padding: 3vh 0;
	margin-top: 0;
	color: #fff;
}
footer i { padding: 0 20px;}



/* ------------------------- Anker mit JS einblenden */
#top {
	position: fixed;
	bottom: 40px;
	right: 5vw;
	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(--grau);
	}	
#top:hover {
	color: var(--rot);
}


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


@media screen and (max-width: 800px) {
	h1 { font-size: 5rem }
	.grid_2, 
    .grid_3,
	.grid_1-3 
		{ grid-template-columns: 1fr; }
	.grid_4 {
		grid-template-columns: repeat(auto-fill, minmax(255px, 360px));
		}
	audio { width: 100%; }
	.tabelle {
		overflow: hidden;
		overflow-x: scroll;
	}
	.tabelle td { 
		/* white-space: nowrap;  */
		display: block;
		padding: 2px;
	}
	.tabelle td:first-child { padding-top: 10px;}

	
	footer i { padding: 0 5px; }




} /*  -800  */