/* =========================================================================
   0. GLOBALE EINSTELLUNGEN, VARIABLEN & TYPOGRAFIE
   ========================================================================= */

/* HINWEIS: Hier wäre der ideale Ort für CSS-Variablen (Custom Properties)! */
/* Beispiel: :root { --blau-link: #0078E6; --grau-hell: #7d7d7d; } */

/* Farbpalette zur schnellen Übersicht */
/* Blau	"logo" 				#0078E6		*/
/* helles Grau "logo"		#7d7d7d		*/
/* Dunkleres Grau 			#555555		*/
/* sehr helles Grau "hover" #e5e6e7		*/

/* top and bottom | left and right */
/* top | left and right | bottom */
/* top | right | bottom | left */

:root {
    /* Farbpalette */
	--color-blue-light: #00C8F0;		/*	0,200,240 */
	--color-blue-medium:#0078E6;		/* Blau "logo" 0,120,230*/
	--color-blue-dark: 	#0050B4;			/*	0,80,180 */
	
    --color-gray-dark: 	#4b4b4b;			/* 100,100,100 */
	--color-gray-medium:#787878;		/* Grau "logo" 120,120,120*/
    --color-gray-light: #E6E6E6;		/* 230,230,230 */
	
	--focus-ring-color: #c7d2fe;    /* Fokus-Ring-Farbe */

	/* FEEDBACK-FARBEN */
	--error-color-light: #FFCCCC; 
	--error-color-dark: #FF0000;
	
	--success-color-light: #CCFFCC; 
	--success-color-dark: #006633;
	
	/*Schriftgößen */
	--text-sm: 0.8rem;
	--text-md: 1rem;
	--text-lg: 1.1rem;
	
	--text-title-sm: 1.1rem;
	--text-title-md: 1.4rem;
	--text-title-lg: 1.75rem;
	
	/*Abstände */
	--spacing-sm: 0.25rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--süacing-xxl: 2rem;
}


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

h1 { 
	font-size: var(--text-title-lg); 
	font-weight: 700; 
	color: var(--color-blue-medium); /* Angepasst */
	margin-bottom: var(--spacing-lg); /* Angepasst */
	line-height: 1.4;
	margin-top: 1rem;
	margin-bottom: 1rem;
	padding: 0;
}

h2 { 
	font-size: var(--text-title-md); 
	font-weight: 700; 
	color: var(--color-blue-medium); /* Angepasst */
	margin-bottom: var(--spacing-md); /* Angepasst */
	line-height: 1.3;
	margin-top: 1rem;
	margin-bottom: 1rem;
	padding: 0;
}

h3 { 
	font-size: var(--text-title-sm); 
	font-weight: 700; 
	color: var(--color-blue-medium); /* Angepasst */
	margin-bottom: var(--spacing-md); /* Angepasst */
	line-height: 1.2;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	padding: 0;
}


/* Ihre 'Größe 1' (H1-Äquivalent) */
.text-h1 {
    font-size: var(--text-lg);
    line-height: 1.3;
	color: var(--color-gray-dark);
	margin-top: 0.75rem;
	margin-bottom: 0.75rem;
	padding: 0;
}

/* Ihre 'Größe 2' (H2-Äquivalent) */
.text-h2 {
    font-size: var(--text-md);
    line-height: 1.3;
	color: var(--color-gray-dark);
	margin-top: 0.75rem;
	margin-bottom: 0.75rem;
	padding: 0;
	
}

/* Ihre 'Größe 3' (H3-Äquivalent) */
.text-h3 {
    font-size: var(--text-sm);
    line-height: 1.4;
	color: var(--color-gray-dark);
	margin-top: 0.75rem;
	margin-bottom: 0.75rem;
	padding: 0;
}

.text-accent{
	color: var(--color-blue-medium);
	text-shadow:	0.5px 0 0 rgba(0, 120, 230, 0.2), /* Schatten nach rechts */
					-0.5px 0 0 rgba(0, 120, 230, 0.2); /* Schatten nach links */
}





/* =========================================================================
   1. BASIS-LAYOUT & STICKY FOOTER & BACKGROUND
   ========================================================================= */

/* HTML: Basisgröße für REM, Höhe & erzwungene Scrollbar */
html{
	font-size: 100%;
	height: 100%; 
	overflow-y: scroll; 
}

body {
	/* Sticky Footer Logik: Flex-Container für vertikale Anordnung */
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	/* Typografie */
	font-family: 'Century Gothic', sans-serif;
	font-size: var(--text-md);
	color: var(--color-gray-dark);
	
}

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

/* Header & Footer Hintergrundfarbe */
header,footer{background-color: white}

/* Hintergrundbild (Fixed) */
.background{
	position: fixed; 
	top: 0;
	left: 0;   
	width: 100%;
	height: 100vh;
	background-image: url("../img/background/background-768w.jpg");
	overflow: hidden;	
	z-index: -1;
	background-size: cover;
	background-position: center top; 
	transform: translateZ(0);/* Hardware-Beschleunigung */
}

.content-container {
	/* 1. LAYOUT & ZENTRIERUNG (Mobile) */
	margin: 0 4vw; /* damit etwas vom background zusehen ist, l&r*/
	max-width: 1300px;
	/* 2. STYLE & HINTERGRUND */
	background-color: rgba(255, 255, 255, 0.8);/* Weiß (75% Opazität) */
	border-radius: 8px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
	/* 3. PADDING & TEXT */
	padding: 1.5rem 1.5rem;/* Innenabstand für den Text */
	text-align: left;/* Text bleibt linksbündig */
}

.link{
	color: var(--color-blue-medium);
}
.link-single{
	color: var(--color-blue-medium);
	line-height: 1.75;
}

/* =========================================================================
   2. HEADER-STYLING (MOBILE FIRST)
   ========================================================================= */
   
.header-content{
	max-width: 1440px;
	margin: 0 auto;
	position: relative; 
	display: flex;
	align-items: center;
	flex-direction: row;
}

/* Logo Wrapper (Übernimmt Margins/Abstände) */
.logo-wrapper {
	/* Positionierung für Mobile (Links: 8vw Abstand) */
	margin: 3vh 1vh 3vh 8vw;/*t,r,b,l*/
	display: inline-flex;/* Wichtig für die korrekte Breitenberechnung */
}

/* Logo Bild (Übernimmt Größe und Skalierung) */
.site-logo{
	width: 65vw;
	max-width: 350px;
	margin: 0;/* Verhindert klickbare Abstände durch den Link */
}

/* Desktop-Menü (Default versteckt, Mobile First) */
.nav--desktop {display: none}


/* =========================================================================
   3. MODUL: MOBILE-NAVIGATION (.nav--mobile)
   ========================================================================= */

/* Positionierung des gesamten Mobile-Containers (Button & Liste) */
.nav--mobile {
	margin-left: auto;/* Schiebt Container nach rechts */
	margin-right: 5vw;/* Abstand zur rechten Kante */
}

/* Ausblenden der Checkbox */
input#menu-toggle {display:none} 

/* Burgermenü-Button Kasten */
label.menu-button-container {	
	display: inline-block;
	background: var(--color-gray-medium);
	width: 44px;
	height: 44px; 
	position: relative; 
	border-radius: 4px;
	z-index: 1000;
}

/* Linien-Formatierung (Gemeinsame Styles) */
.line { 
	position: absolute; 
	left: 6px;
	height: 4px; /*dicke der Linie*/
	width: 32px; 
	background: #fff; border-radius: 2px;
	display: block;
	transition: 0.5s; 
	transform-origin: center; 
	backface-visibility: hidden;
	transform: translateZ(0); /* Hardware-Beschleunigung */
}

/* Linien-Positionierung (Anordnung) von der Oberkante des Kästchen aus*/
.line:nth-child(1) { top: 10px; }
.line:nth-child(2) { top: 20px; }
.line:nth-child(3) { top: 30px; }

/* Wenn #menu-toggle gecheked (checkbox) also -> wenn box angeklickt dann linien animieren*/
#menu-toggle:checked + .menu-button-container .line:nth-child(1)
{transform: translateY(10px) rotate(-45deg)}/* Obere Linie drehen */
#menu-toggle:checked + .menu-button-container .line:nth-child(2)
{opacity:0}/* Mittlere Linie ausblenden */
#menu-toggle:checked + .menu-button-container .line:nth-child(3)
{transform: translateY(-10px) rotate(45deg)}/* Untere Linie drehen */


/* Mobile Menü Liste (Container) */
.menu-nav-list {
	position: absolute;
	top: 100%;/* öffnet Unterhalb des Headers, somit nicht über menübutton! */
	right: 5vw;	/* Bündig mit dem Burger-Menü */
	width: 15rem;	/*Breite des Menü*/
	margin: 0;
	padding: 0;
	height: 0; 
	overflow: hidden;
	transition: height 600ms cubic-bezier(0.23, 1, 0.32, 1);/*Höhe "ausklappen"*/
}

/* Liste: Geöffneter Zustand (Animation beenden) */
#menu-toggle:checked ~ .menu-nav-list {
	/* height muss auf auto (oder einen festen Wert) gesetzt werden */
	height: auto;
	max-height: 1000px;
}

/* Formatierung der Listen-Elemente (Links) */
.menu-nav-list a{
	display: block;
	color: var(--color-gray-dark);
	text-decoration: none;
	font-size: var(--text-lg);
	padding-bottom: 0.75rem;
	padding-top: 0.75rem;
	text-align: center;
	background-color: #ffffff;
	transition: background-color 0.1s;
}

/* Formatierung der LI-Elemente */
.menu-nav-list > li {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%; /*100% um die Breite des Navlist an zu nehemn, dort wird die Breite eingestellt*/
	background-color: #ffffff;
	border: 1px solid transparent; 
	opacity: 0;/* Standardmäßig unsichtbar */
	transition: opacity 200ms ease 25ms, border-color 100ms ease 25ms;/* Einblenden der Inhalte (kurze Dauer, leichter Delay) */
}

/* LI: Sichtbar im geöffneten Zustand */
#menu-toggle:checked ~ .menu-nav-list li {
	opacity: 1;
	border-color: #333;
	height: auto;
	padding: 0;
	color: var(--color-gray-dark);
	transition: opacity 600ms ease 0ms, border-color 400ms ease 100ms;
}

/* Link: Active/Gedrückt Zustand */
.menu-nav-list a:active {
	background-color: #E0E0E0;
	color: var(--color-blue-medium);
}



/* =========================================================================
   3.5 MODUL: DESKTOP-NAVIGATION (.nav--desktop)
   ========================================================================= */

/* Basis-Styling des UL-Containers */
.nav--desktop ul {
    list-style: none;
    margin: 0;
    padding: 0;
    
    /* HORIZONTALE AUSRICHTUNG */
    display: flex;
	justify-content: center;
    align-items: center; /* Vertikale Zentrierung im Header-Flex-Container */
    gap: 2vw; /* Abstand zwischen den Links */
    height: 100%; /* Stellt sicher, dass das UL die volle Höhe der NAV einnimmt */
}

/* Styling der Links */
.nav--desktop a {
    text-decoration: none;
    color: var(--color-gray-medium); /* Dunkles Grau aus der Palette */
    font-size: var(--text-md);
    padding: 5px 8px; /* Vergrößert die klickbare Fläche */
    transition: color 0.3s, background-color 0.3s;
    border-radius: 4px;
    display: block; /* Wichtig, damit Padding funktioniert */
}

/* Hover-Effekt */
.nav--desktop a:hover {
    color: var(--color-blue-medium); /* Blaue Hauptfarbe */
	text-shadow: 0 0 0.5px var(--color-blue-medium);
	/*font-weight: 700;
    /*background-color: var(--color-gray-light); /* Sehr helles Grau */
}

/* =========================================================================
   3.8 MODUL: SEITEN-MENÜ (FBM-mobil)
   ========================================================================= */

/* Basis-Styles für den neuen Container */
#menu-container {
    margin: 1rem 2rem;
}

/* 1. Mobile Akkordeon (Standard) */
#FBM-mobil {
    display: block;
}

/* Desktop-Menü (standardmäßig versteckt) */
#FBM-desktop {
    display: none;
}

/* 2. Styling der Menü-Rubriken (ersetzt die Inline-Styles) */
.menu-heading {
    /* Holt die Styles, die vorher inline waren */
    border-Bottom: var(--color-blue-medium) solid 0.10rem; 
    display: inline-block;
    padding: 5px 7px 0px 7px;
    margin: 0 0 0rem 0; /* Abstand zur oberen Sektion */
    /* Stellt sicher, dass H3 nicht zu groß ist, wenn H3 auf der Seite existiert */
	color: var(--color-blue-medium);
	font-weight: normal;
}
.menu-heading:hover,
.toggle-menu-fbm:checked + .main-menu-label .menu-heading {
    background-color: var(--color-gray-light);
    border-radius: 4px;
}

/* Basis-Stile für die Links */
.submenu-item a {
    text-decoration: none;
    color: var(--color-gray-dark);
    font-size: var(--text-title-md);
    display: block;
    padding: 4px;
    transition: color 0.3s;
	margin-bottom: 0.4rem;
}

.submenu-item a:hover,
.submenu-item a:active { 
    color: var(--color-blue-medium);
	background-color: var(--color-gray-light);
}


/* Akkordeon Funktionalität */
.toggle-menu-fbm {
    display: none; /* Checkbox verstecken */
}

.main-menu-label {
    cursor: pointer;
    display: block;
}

/* Submenü (ul) standardmäßig verstecken */
.submenu {
    max-height: 0;
    overflow: hidden;
    /* Angemessene Übergangsdauer, hier 400ms */
    transition: max-height 400ms ease-out; 
    list-style: none;
    padding: 0;
    margin-left: 1rem;
}

/* Wenn die Checkbox aktiviert ist, klappt das Submenü auf */
.toggle-menu-fbm:checked + .main-menu-label + .submenu {
    max-height: 500px; /* Muss hoch genug für alle Links sein */
    transition: max-height 600ms ease-in;
}

/* =========================================================================
   3.9 MODUL: SEITEN-MENÜ (FBM-desktop)
   ========================================================================= */
/* Styling des Rubrik-Containers (wurde vorher fälschlicherweise als ID definiert) */
.cont-item {
    /* Sie können hier z.B. einen inneren Rahmen oder Schatten definieren, falls nötig. */
}

/* Listen-Reset für die Desktop-Menü-Links */
.menu-boden {
    list-style: none;
    padding: 0;
	margin-top: 0;
	margin-bottom: 0;
    margin-left: 1rem; 
}

/* Styling der Desktop-Links (Gemeinsam mit Mobile-Links) */
.menu-boden a {
    text-decoration: none;
    color: var(--color-gray-dark);
    font-size: var(text-lg);
    display: block;
    padding: 4px; 
    transition: color 0.3s;
	margin: 0.3rem 0;
}

/* Hover-Effekt (kann hier für beide Menüs geteilt werden, falls identisch) */
.menu-boden a:hover {
    color: var(--color-blue-medium);
	background-color: var(--color-gray-light);
}



/* =========================================================================
   4. MODUL: FOOTER-STYLING
   ========================================================================= */

.footer-content{
	text-align: center;
	color: var(--color-gray-dark);
	font-size: var(--text-sm);
	margin-top: 1.2rem;
	margin-bottom: 1.2rem;
}

footer address {
	font-style: normal;/* Korrigiert: Überschreibt Standard-Kursivschrift */
	margin-top: 1.5rem;
}

/* Footer-Navigation (Liste) */
.footer-nav ul{
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 2rem;
	margin:0;
	padding:0;
}

/* Footer-Links */
.footer-nav a{
	color: var(--color-blue-medium);
	text-decoration: none;
	border-bottom: var(--color-gray-medium) solid 0.1rem;
	padding: 0.3rem;
	transition: background-color 0.3s ease;
}

/* Footer-Links Hover Zustand */
.footer-nav a:hover{
	/*background-color: var(--color-gray-light);
	border-radius: 0.2rem;*/
	border-bottom: var(--color-blue-medium) solid 0.15rem;
	color: var(--color-gray-dark);
}

/* Footer Trennzeichen Abstände */
.footer-contact span {
padding: 0 1rem;
}

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


/* =========================================================================
   4.4 SEITEN STYLING
   ========================================================================= */

.page-content{
	margin: 0;
	padding: 0vw 0vw;	
	text-align: left;
	align-items:center;
}
/*
.page-content .lead {
    font-size: 1.25rem; 
    font-weight: 500;   
    color: var(--color-gray-dark);
    margin-bottom: var(--spacing-lg);
    padding-bottom: 0.5rem;
}
*/


.img-mobile-version {
    display: block;
	border-radius: 0.7rem;
	object-fit: cover;
	margin:0 auto;
	width: 100%;
	max-width: 1200px;
	height: auto;
	margin-bottom: 2rem;
	border-radius: 0.5rem;
}

.img-desktop-version {
    display: none; 
	border-radius: 0.7rem;
	object-fit: cover;
	margin:0 auto;
	width: 100%;
	max-width: 1200px;
	height: auto;
	margin-bottom: 2rem;
	border-radius: 0.5rem;
}

    .employee-card {
        display: flex;
        flex-direction: column; /* MOBILE FIRST: Stapelt die Elemente vertikal */
        padding-top: 1rem;
		width: 100%;
    }

    /* Bild-Sektion: Sorgt dafür, dass das Bild immer 100% der Breite des Containers einnimmt */
    .employee-img {
        width: 100%;
        max-width: 200px; /* Maximale Breite auf Mobile, damit das Bild nicht zu riesig wird */
        margin: 0; /* Zentriert das Bild auf mobilen Ansichten */
		padding-right: 2rem;
    }

    .employee-img img {
        width: 150px;
        height: auto;
        border-radius: 8px;
        object-fit: cover; /* Stellt sicher, dass das Bild gut skaliert */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
 /* WICHTIG: Box-Sizing Fix gegen Überlauf */
    .employee-card, .employee-info, .employee-image {
        box-sizing: border-box;
    }





/* =========================================================================
   4.5 FORMULAR STYLES & FEHLER-STILE 
   ========================================================================= */

.form-wrapper {
	max-width: 32rem;
	width: 100%;
	margin:0 auto;
}

.form-group {
	margin-bottom: var(--spacing-md); /* Angepasst */
}

.label-text {
	display: block;
	font-size: var(--text-md); 
	font-weight: normal; 
	color: var(--color-gray-dark); /* Angepasst */
	margin-bottom: var(--spacing-sm); /* Angepasst */
}
.input-field {
	width:100%;
	box-sizing: border-box;
	padding: 0.6rem 0.75rem; /* Angepasst */
	border: 1px solid var(--color-gray-medium); /* Angepasst */
	border-radius: 0.3rem; /* Angepasst */
	outline: none;
	transition: all 0.15s ease-in-out;
	font-family: 'Century Gothic', sans-serif;
	font-size: var(--text-md);
	color:var(--color-gray-dark);
}

/* ZUSTAND: Input im Fokus */
.input-field:focus:not(.input-error) {
	border-color: var(--color-blue-light);
	box-shadow: 0 0 0 2px var(--color-blue-medium);
}

/* ZUSTAND: Input mit Fehler */
.input-error {
	border-color: var(--error-color-dark) !important;
	border-width: 3px !important;
}
/* ZUSTAND: Checkbox mit Fehler */
.checkbox-error {
	outline: 3px solid var(--error-color-dark) !important;
	outline-offset: 2px !important;
}

textarea.input-field {
	resize: vertical;
	min-height: 8rem; 
}
.error-message {
	color: var(--error-color-dark);
	font-size: var(--text-md);
	margin-top: var(--spacing-sm); /* Angepasst */
}

/* ----------------------------------------------------------------- */
/* 4. Checkbox */
/* ----------------------------------------------------------------- */
.checkbox-container {
	display: flex;
	align-items: flex-start;
	margin-bottom: var(--spacing-lg);
	align-items: center;
}
.checkbox-input {
	margin-top: 0.1rem;
	height: 3rem;
	width: 3rem;
	accent-color: var(--color-blue-medium);
	border-radius: 0.25rem;
	cursor: pointer;
}
.checkbox-label {
	margin-left: 0.75rem;
	font-size: var(--text-md);
	color: var(--color-gray-dark);
	cursor: pointer;
}

/* ----------------------------------------------------------------- */
/* 5. Button & Loader */
/* ----------------------------------------------------------------- */
.submit-button-wrapper {
	text-align: center;
}

.submit-button {
/*	width: auto;*/
	margin: 0 auto;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 0.75rem 1rem;
	border: 1px solid transparent;
	text-decoration: none;
	font-size: var(--text-md);
	font-weight: 500;
	border-radius: 0.5rem; /* Angepasst */
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	color: white;
	background-color: var(--color-gray-dark); 
	transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.submit-button:hover {
	background-color: var(--color-blue-medium);
}
.submit-button:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--focus-ring-color); 
	background-color: var(--color-blue-medium);
}

/* Loader & Spinner */
.loader-content {
	display: flex; 
	align-items: center;
	display: none; 
}
.spinner {
	border: 4px solid rgba(255, 255, 255, 0.3);
	border-top: 4px solid #ffffff;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	animation: spin 1s linear infinite;
	margin-right: 0.5rem;
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.hidden {
	display: none !important;
}


/* ----------------------------------------------------------------- */
/* 6. Feedback Boxen (Dynamisch) */
/* ----------------------------------------------------------------- */
#form-feedback {
	margin-bottom: 32px; 
	margin-top: var(--spacing-lg); /* Angepasst */
	opacity: 1;
	transition: opacity 0.5s ease-out;
}
.feedback-box {
	display: flex;
	align-items: center;
	justify-content: flex-start; 
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	border-radius: 12px;
	padding: var(--spacing-md); /* Angepasst */
	font-size: var(--text-lg);
	line-height: 1.25;
	font-weight: 500;
}
.feedback-icon {
	width: 40px; 
	height: 40px; 
	flex-shrink: 0;
	margin-right: 0.75rem;
}
.success-box {
	background-color: var(--success-color-light); 
	border: 1px solid var(--success-color-dark); 
	color: var(--success-color-dark);
}
.error-box {
	background-color: var(--error-color-light); 
	border: 1px solid var(--error-color-dark); 
	color: var(--error-color-dark);
}
.feedback-text strong {
	font-weight: 700;
}








/* =========================================================================
   5. RESPONSIVE ANPASSUNGEN (MEDIA QUERIES)
   ========================================================================= */
/* Mobile-Querformat */
/* Logo mittig, Burgermenü rechts */
@media screen and (orientation: landscape) and (max-width: 768px) {
	/* Logo-Zentrierung */
	.logo-wrapper {
		/* Zentrierung durch großen linken Margin l = 100-logowidth/2 */
		margin: 3vh 1vh 3vh 30vw; /*t,r,b,l*/
	}
	/* Logo-Breite anpassen */
	.site-logo{
		width: 40vw
	}
	
	.checkbox-input {
	height: 2rem;
	width: 2rem;
	}
}

/* Tablet/Desktop Ansicht Hochformat(ab 768px) */
/* Logo mittig, Klassikmenü unter Logo mittig */
@media screen and (min-width: 768px) {	
	html{
		font-size: 110%;/* Basisgröße für REM erhöhen */
	}
	.header-content{
        flex-direction: column;/* vertiakl anordenen für mittige zentrierung*/
    }
	.background{
		background-image: url("../img/background/background-1280w.jpg");
	}
	.content-container {
		margin: 0 5vw;
		padding: 1.5rem 1.5rem;
	}
	.logo-wrapper {
        margin: 1vh auto;/*t,r,b,l*/
    }
	.site-logo{
		width: 300px;
	}
	.page-content{
		padding: 0vw 2vw;	
	}
	.img-mobile-version {
		display: none; 
	}
	.img-desktop-version {
		display: block; 
	}
        .employee-card {
            flex-direction: row; /* DESKTOP: Ordnet die Elemente horizontal an */
            justify-content: space-between;
            align-items: flex-start; /* Stellt sicher, dass der Inhalt oben bündig ist */
        }

        .employee-info {
            flex: 1 1 0; /* Nimmt den verbleibenden Platz ein, kann schrumpfen */
            min-width: 0; /* Ermöglicht dem Element, bei Bedarf zu schrumpfen. */
        }
		.employee-img img {
			width: 200px;
		}


	
	.nav--mobile {
        display: none;
    }
    .nav--desktop {
        display: block;/* Desktop-Navigation anzeigen */
        margin: 0 auto 1vh auto; /* Entfernt die störenden auto/40px Margins */
		max-width: 1440px;
    }
	
	
	
	/* Umschalten der Menü-Ansicht */
    #FBM-mobil {
        display: none; /* Mobile Ansicht aus */
    }
    #FBM-desktop {
        display: grid; /* Desktop-Grid an */
        
        /* LAYOUT: Erstellt mindestens 200px breite Spalten, füllt die Breite */
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        column-gap: 100px; /* Abstand zwischen den Spalten/Rubriken */
		row-gap: 20px;
		padding: 1rem 0;
    }
    
    /* Layout-Korrekturen für das Grid */
    .cont-item {
        /* Wichtig: Stellt sicher, dass alle Rubrik-Blöcke oben ausgerichtet bleiben */
        align-self: start; 
    }
	
	.menu-heading:hover {
		background-color: transparent; 
		border-radius: 0;             
	}
	
.checkbox-input {
	height: 2rem;
	width: 2rem;
}

/* Tablet/Desktop Ansicht (ab 1024px) */
@media screen and (min-width: 1024px) {
	html{
		font-size: 120%;/* Basisgröße für REM erhöhen */
	}
	.background{
		background-image: url("../img/background/background-1920w.jpg");
	}
	.logo-wrapper {
        margin: 2vh auto;/*t,r,b,l*/
    }
	.site-logo{
		width: 350px;
	}
	.content-container {
		padding: 1.5rem 1rem;
	}
	.checkbox-input {
		height: 1.5rem;
		width: 1.5rem;
	}
	.page-content{
		padding: 0vw 6vw;	
	}

}

/* Große Desktop Ansicht (ab 1440px) */
@media screen and (min-width: 1440px) {
	html{
		font-size: 130%;/* Basisgröße für REM erhöhen */
	}
	.background{
		background-image: url("../img/background/background-2560w.jpg");
	}	
	.content-container {
		margin: 0 auto;/* Zentrierung des Containers */
	}
	.nav--desktop ul {
        gap: 35px; /* Fixiert den Abstand auf großen Bildschirmen */
    }

}