@charset "UTF-8";
/* CSS Document */

html {
  scroll-behavior: smooth;
}
body {border-top: 8px solid black; text-align: center; }
.gelb {background-color: #faff00; padding: 1% 0 00}
.logo {width: 215px; height: 77px; padding: 5% 0 }
.icons {width: 100%; height: auto; padding: 0 0 5% 0}
.katrin {width: 208px; height: auto; line-height: 1px; vertical-align:bottom; margin-bottom: -20px}
.footer {width: 100%; }
.logo-kl {width: 37px; height: 52px; padding: 20px 0 10px 0}
.dot {display: none}

/* josefin-sans-300 - latin */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/josefin-sans-v25-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/josefin-sans-v25-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/josefin-sans-v25-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/josefin-sans-v25-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/josefin-sans-v25-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/josefin-sans-v25-latin-300.svg#JosefinSans') format('svg'); /* Legacy iOS */
}
/* josefin-sans-500 - latin */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/josefin-sans-v25-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/josefin-sans-v25-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/josefin-sans-v25-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/josefin-sans-v25-latin-500.woff') format('woff'), /* Modern Browsers */
       url('fonts/josefin-sans-v25-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/josefin-sans-v25-latin-500.svg#JosefinSans') format('svg'); /* Legacy iOS */
}

.navi ul {padding-bottom: 50px;}
.navi ul li {list-style-type: none; display: inline-block; margin: 8px 4px; font-weight: 500; font-size: 1.6rem}
.navi ul li a {text-decoration: none; color: #fff; background-color: #000; padding: 6px 6px; border-radius: 2px; }
.navi ul li a:hover {color: #000; background-color: #fff;}

@media (min-width: 342px) {
	.dot {display: inline}
	
}

@media (min-width: 600px) {
	.logo {width: 301px; height: 220px; padding: 0}
	.katrin {width: 308px; height: auto; line-height: 1px; vertical-align:bottom; margin-bottom: -30px}
	.navi ul li {font-size: 1.8rem}

}


@media (min-width: 900px) {
	.logo {padding: 0 10% }
	
	
	.icons {width: 600px; height: auto;}

}


@media (min-width: 1200px) {
	.katrin {position: absolute; bottom: 0; right: -250px; width: 408px; height: auto; margin-bottom: 0px}
	.logo {width: 430px; height: 180px;}
	.icons {width: 790px; height: auto; padding: 5% 0; align-self: flex-start}
}

.grau {padding: 5% 0; background-color: #f0f0f0; }
.weiss {padding: 5% 0; background-color: #fff; }
.yellow {padding: 5% 0; background-color: #faff00; }

em {background-color: #faff00; font-size: 3.5rem; font-style: normal}
.yellow em {background-color: #fff; }

@media (min-width: 600px) {
.grid-container.zweispaltig {
		grid-template-columns: 3fr 1fr;
	}}
.zweispaltig {text-align: left}

.linksbuendig {text-align: left}
.spanne {grid-column-end: span 2}

.hinweis {top: 10%; left: 10%; transform: rotate(-10deg); margin-top: 5%}
.hinweis p {font-weight: 500; color: white; background-color: black; display: inline; padding: 10px 10px 5px 10px; text-transform: uppercase; letter-spacing: 0.5rem}


@media (min-width: 900px) {
	.hinweis {position: absolute; transform: rotate(-10deg); margin-top: 0%}
}