/* style.css */

/* Blau	"logo" 				#0078E6		*/
/* helles Grau "logo"		#7d7d7d		*/
/* Dunkleres Grau 			#555555		*/
/* sehr helles Grau "hover" #222222		*/

/* =========================================================================
   1. FONT-DEFINITIONEN
   ========================================================================= */

@font-face {
font-family: 'Century Gothic';
src: url('../fonts/CenturyGothic.woff2') format('woff2');
font-style: normal;
font-weight: normal;
}


/* =========================================================================
   2. BASIS-LAYOUT & STICKY FOOTER
   ========================================================================= */

/* HTML: Setzt die Basis für REM und stellt die initiale Höhe sicher. */
html{
font-size: 100%; /* Basisgröße für REM-Berechnungen */
height: 100%;
}

/* BODY: Flex-Container für vertikale Anordnung (Sticky Footer Logik) */
body {
/* Layout */
display: flex;
/* BODY: Flex-Container für vertikale Anordnung (Sticky Footer Logik) */
flex-direction: column;

/* Höhe & Abstände */
height: 100%;
min-height: 100vh; /* NEU: Verwenden Sie min-height: 100vh für mehr Stabilität */


margin: 0;
padding: 0;
/* Typografie */
font-family: 'Century Gothic', sans-serif;/* Fallback hinzugefügt */
}

/* MAIN: Füllt den gesamten verfügbaren vertikalen Raum zwischen Header und Footer */
main {
    flex-grow: 1;
    /* Optional: Fügt etwas vertikalen Puffer am Anfang und Ende des Hauptinhalts hinzu */
    padding-top: 2rem; 
    padding-bottom: 2rem;
    
    /* Stellt sicher, dass die Inhalte auf sehr breiten Bildschirmen zentriert bleiben */
    width: 100%;
}


.background{
	/* ✅ LÖSUNG 1: Sorgt dafür, dass der Hintergrund IMMER im Viewport bleibt */
    position: fixed; 
	top: 0;
	left: 0;
    
	width: 100%;
    /* ✅ LÖSUNG 2: Füllt IMMER die sichtbare Bildschirmhöhe (ViewPort Height) */
	height: 100vh; 
	
	background-image: url("../img/background/background-768w.jpg");
	overflow: hidden;	
	z-index: -1;
	background-size: cover;
    
    /* Optional, aber gut für fixed position 
	background-attachment: fixed; */
	 background-position: center top; 
	 transform: translateZ(0);

}

/* ⚠️ WICHTIG: Content-Elemente müssen transparente Hintergründe haben */


.content-container {
    /* 1. LAYOUT & ZENTRIERUNG */
    /*max-width: 600px; /* Begrenzt die Breite auf Mobile/Tablet */
    /*margin: 0 3vw 0 3vw; /* Zentriert den Container horizontal */
	margin-left: calc(4 * 0.5vw);
    margin-right: calc(4 * 0.5vw);
	
    
    /* 2. STYLE & HINTERGRUND */
    /* Semi-transparentes Weiß (75% Opazität) */
    background-color: rgba(255, 255, 255, 0.75); 
    border-radius: 8px; /* Optional: leichte Abrundung */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* Optional: leichter Schatten */
    
    /* 3. PADDING & TEXT */
    padding: 1.5rem 1rem; /* Innenabstand für den Text */
    text-align: left; /* Text bleibt linksbündig */
}



header,footer{
background-color: white;
}


/* =========================================================================
   3. FOOTER-STYLING & BEREINIGUNG
   ========================================================================= */

.footer-content{
	text-align: center;
	color: #555555;
	/*background-color: #e5e6e7;*/
	font-size: 0.9rem;
	padding-top: 15px;
	padding-bottom: 10px;
}

/* Fix: Überschreibt die Standard-Kursivschrift des <address>-Tags */
footer address {
font-style: normal;
margin-top: 1.5rem;
}

.footer-nav a{
	color: #0078E6;
	text-decoration: none;
	border-bottom: #7d7d7d solid 0.1rem;
	padding: 0.3rem;
	transition: background-color 0.3s ease;
}

.footer-nav a:hover{
	background-color: #e5e6e7;
	border-radius: 0.2rem;
	border-bottom: #0078E6 solid 0.15rem;
	color: #555555;
}

/* Trennzeichen Abstände (Gilt für Navigation und Kontakt-Span) */
.footer-nav span,
.footer-contact span {
padding: 0 1rem;
}

/* WICHTIG: CSS-Cloaking zum Schutz von E-Mail und Telefonnummer */
.no-display {
display: none !important;
visibility: hidden !important;
}



@media screen and (min-width: 768px) {	
	html{
		font-size: 112,5%; /* Basisgröße für REM-Berechnungen */
	}
	.background{
		background-image: url("../img/background/background-1280w.jpg");
	}
	.content-container {
		margin: 0 5vw 0 5vw;
	}

}

@media screen and (min-width: 1024px) {
	html{
		font-size: 125%; /* Basisgröße für REM-Berechnungen */
	}
	.background{
		background-image: url("../img/background/background-1920w.jpg");
	}
	.content-container {					
		margin: 0 10vw 0 10vw;
	}
}


@media screen and (min-width: 1440px) {
	html{
	font-size: 137,5%; /* Basisgröße für REM-Berechnungen */
	}
	.background{
		background-image: url("../img/background/background-2560w.jpg");
	}	
	.content-container {
		max-width: 1200px;
		margin: 0 auto;
	}
}