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

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Regular.eot');
    src: url('../fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/OpenSans-Regular.woff2') format('woff2'),
        url('../fonts/OpenSans-Regular.woff') format('woff'),
        url('../fonts/OpenSans-Regular.ttf') format('truetype'),
        url('../fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chewy';
    src: url('../fonts/Chewy-Regular.eot');
    src: url('../fonts/Chewy-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Chewy-Regular.woff2') format('woff2'),
        url('../fonts/Chewy-Regular.woff') format('woff'),
        url('../fonts/Chewy-Regular.ttf') format('truetype'),
        url('../fonts/Chewy-Regular.svg#Chewy-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
:root {
	position: relative;
	min-height: 100vh; /* großzügig, wie im PDF-Look */
	display: grid;
	place-items: center;	
	color: var(--text-light);
	isolation: isolate;
	--dunkelgruen:#5A6641;
	--mittelgruen: #7B8567;
	--hellgruen: #DEE0D9;
	
}
[data-bs-theme="dark"] {
     --bs-body-bg: var(--dunkelgruen);
	--bs-secondary-bg: var(--hellgruen);
}
body{
	font-family:'Open Sans';
}
main img{
  width: 100%;
  height: auto;
}

.about{
	background-color: var(--bs-secondary-bg);
	color: rgba(0,0,0,0.5);
}
body#datenschutz, body#impressum{
	text-align: left;
}

.hero {
	width: 100%;
	position: relative;
	background-image: url("../images/header/leuchtender_wald.jpg");
	background-position: center;
	background-repeat: no-repeat;
}

.hero-logo {
	position: absolute;
	max-width: 750px;
	height: auto;
	bottom: 1.25rem;
	filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	padding-top: 100px;
	z-index: 10;

}
.overlay{
	background-color:rgba(0,0,0,0.3);
}
/* Standard: kein Zeilenumbruch sichtbar */
.mobile-break {
  display: none;
}


h1 {
	
	letter-spacing: .12em;
	text-align: center;
	font-family: 'Chewy';
	font-size:2.8rem;
}
h2{
	letter-spacing: .12em;
	text-align: center;
	font-family: 'Chewy';
	font-size:2.4rem;
	font-weight: normal;
	
}
h3{
	font-weight: bold;
}

.lead-tight {
	font-size: 1.125rem;
}


/* Abschnittsüberschriften aus dem PDF */
.section-title {
	letter-spacing: .02em;
	margin-bottom: .5rem;
}



.privatperson, .kita, .unternehmen, .jugendliche{
	position: relative;
}
.privatperson h3:before, .jugendliche h3:before, .unternehmen h3:before, .kita h3:before{	
	display: inline-block; /* Wichtig für Breiten- und Höheneigenschaften */
    position: absolute;
  	top: 6px;
  	left: -45px;	
}
.privatperson h3:before{
	content: url("../images/icons/privatperson.png");
}
.jugendliche h3:before{
	content: url("../images/icons/jugendliche.png");
}
.unternehmen h3:before{
	content: url("../images/icons/unternehmen.png");
}
.kita h3:before{
	content: url("../images/icons/kita.png");
}



.accent {
color: var(--accent);
}


/* Footer minimal */
footer {
	background-color: var(--mittelgruen);
	color: #fff;
	
}
footer a {
	color: #fff;
}
/* Responsiveness Tweaks */

@media (min-width: 768px) and (max-width:991px) {
.hero,.overlay { 
	min-height: 70vh; 
	background-size: cover;
	}
}

@media (min-width: 992px) {
.hero,.overlay { min-height: 90vh; }
.lead-tight { font-size: 1.25rem; }
.hero h1 { font-size: 3rem; }
}

@media (max-width:767px) {
	.hero, .overlay { 
	min-height: 30vh; 
	background-size: cover;
	}
	.hero-logo{
		max-width:400px;
		top: 40%;
	}
	

}
@media (max-width:500px) {
.mobile-break {
    display: inline;
  }
	.hero,.overlay { 
	min-height: 70vh; 
	background-size: cover;
	}
	.hero-logo{
		max-width:250px;
	}
	h1{
		font-size:2.3rem;
	}
	.privatperson h3:before, .jugendliche h3:before, .unternehmen h3:before, .kita h3:before{
		top:-8px;
		left:0;
}
	.privatperson h3, .jugendliche h3, .unternehmen h3, .kita h3 {
		margin-left: 50px;
	}
	.privatperson p, .jugendliche p, .unternehmen p, .kita p {
		margin-left: 50px;
	}
	.privatperson h3::before, .jugendliche h3::before, .unternehmen h3::before, .kita h3::before {
		left: 10px;
	}
}