/* Definiere die Hauptfarben --------------------------------------------------------------------------------------------------------- */
:root {
	/* --mainColor: #2C2F33; Dunkles Asphaltgrau für Hauptakzente */ 
	--mainColor: #3A3D42; /* Helleres Asphaltgrau */
	--secondColor: #BCC0C6; /* Helles Grau für Unterstreichungen/Buttons */
	--accentColor: #D98E3C; /* Gedeckteres Orange-Gelb für Highlights */
	--accentColor-rgb: 217, 142, 60; /* RGB-Werte passend zum gedeckten Orange-Gelb */
	--backgroundColor: #FAFBFC; /* Noch helleres Grau, fast Weiß */

	--container-width: 1200px; /* Maximale Breite für größere Bildschirme */
    --fontSize-base: 14px; /* Standard Schriftgröße */
    --lineHeight-base: 1.618;
    --gutter: 40px; /* Abstand zwischen den Spalten */
	--paddingtop: calc(2 * var(--gutter));
    --columns: 12; /* Standardanzahl der Spalten */
    --column-bg: rgba(128, 128, 128, 0.6); /* Transparentes Grau für Spalten */
	--line-color: rgba(0, 0, 0, 0.2);
	
/* Schriftgrößen (basierend auf goldenem Schnitt) */
    --font-size-p: 1rem; /* Basisgröße */
	--font-size-h3: calc(var(--font-size-p) * 1.618);
	--font-size-h2: calc(var(--font-size-h3) * 1.618);
	--font-size-h1: calc(var(--font-size-h2) * 1.618);

/* Zeilenhöhe (proportional zur Schriftgröße) */
    --line-height-p: 1.618;      /* Gut lesbarer Abstand für Fließtext */
    --line-height-h3: 1.4;     /* Kompakter bei größeren Größen */
    --line-height-h2: 1.3;    /* Noch kompakter */
    --line-height-h1: 1.0;     /* Sehr kompakt für größte Überschrift */

	--scroll-offset: 0px; /* Initialer Offset für das Scrollen */
	--background-scale: cover; /* Einheitliches Zoom-Verhältnis */
    --background-position: center; /* Einheitliche Position */
	--background-position-tech: center; /* Einheitliche Position */
	--background-position-bird: center; /* Einheitliche Position */
    --logo-parallax-offset: -100px; /* Standardwert für den Logo-Parallax-Effekt */
	
	--header-font: 'Quattrocento Sans', Arial, serif; /* Schriftart für Überschriften */
    --paragraph-font: 'Mulish', Arial, sans-serif; /* Schriftart für Fließtext */
	
	/* Mögliche Schriftareten Header: Qzattrocento, Chivo */
	/* Mögliche Schriftarten Paragraph: Mulish, Krub */
}

@font-face {
    font-family: 'Quattrocento Sans';
    src: url('../06_fonts/Quattrocento_Sans/QuattrocentoSans-Regular.ttf') format('truetype');
    font-weight: 400; /* Normalgewicht */
    font-style: normal; /* Normale Schriftart */
}

@font-face {
    font-family: 'Quattrocento Sans';
    src: url('../06_fonts/Quattrocento_Sans/QuattrocentoSans-Bold.ttf') format('truetype');
    font-weight: 700; /* Fett */
    font-style: normal; /* Normale Schriftart */
}

@font-face {
    font-family: 'Quattrocento Sans';
    src: url('../06_fonts/Quattrocento_Sans/QuattrocentoSans-Italic.ttf') format('truetype');
    font-weight: 400; /* Normalgewicht */
    font-style: italic; /* Kursiv */
}

@font-face {
    font-family: 'Quattrocento Sans';
    src: url('../06_fonts/Quattrocento_Sans/QuattrocentoSans-BoldItalic.ttf') format('truetype');
    font-weight: 700; /* Fett */
    font-style: italic; /* Fett-Kursiv */
}



@font-face {
    font-family: 'Mulish';
    src: url('../06_fonts/Mulish/Mulish-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900; /* Variable Gewichtung von 100 bis 900 */
    font-style: normal; /* Normale Schriftart */
}

@font-face {
    font-family: 'Mulish';
    src: url('../06_fonts/Mulish/Mulish-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900; /* Variable Gewichtung von 100 bis 900 */
    font-style: italic; /* Kursiv */
}

*{
	    box-sizing: border-box; /* Padding und Border werden in der Breite berücksichtigt */	
}

/* Allgemeine Schriftarten für die Webseite --------------------------------------------------------------------------------------------------------- */
html, body {
	font-family: var(--paragraph-font); /* Standard: Fließtext */
    color: var(--mainColor);
    background-color: var(--backgroundColor); /* Einheitliche Hintergrundfarbe */
    line-height: var(--lineHeight-base);
    font-weight: 300;
    font-size: var(--fontSize-base); /* Basisschriftgröße */
    min-height: 100vh;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}


/* body::before { */
    /* content: ''; */
    /* display: block; */
    /* position: absolute; */
    /* top: 0; */
    /* left: 50%; */
    /* transform: translateX(-50%); */
    /* width: var(--container-width); */
    /* height: 5000px; */
    /* z-index: 1; */
    /* pointer-events: none; */
    /* background-image:  */
		/* repeating-linear-gradient( */
            /* to bottom, */
            /* transparent 0, */
            /* transparent calc(var(--gutter) - 1px), */
            /* var(--column-bg) calc(var(--gutter) - 1px), */
            /* var(--column-bg) var(--gutter) */
        /* ); */
    /* background-size: var(--container-width) 100%, 100% var(--gutter); /* Wiederholung über die gesamte Breite */ */
    /* opacity: 0.5; */
/* } */

/* body::after { */
    /* content: ''; */
    /* display: block; */
    /* position: absolute; */
    /* top: 0; */
    /* left: 50%; */
    /* transform: translateX(-50%); */
    /* width: var(--container-width); */
    /* height: 5000px; */
    /* z-index: 1; */
    /* pointer-events: none; */
    /* background-image:  */
        /* repeating-linear-gradient( */
            /* to right, */
            /* transparent 0, */
            /* transparent var(--gutter), */
            /* var(--column-bg) var(--gutter), */
            /* var(--column-bg) calc(var(--gutter) + (var(--container-width) - (var(--columns) + 1) * var(--gutter)) / var(--columns)), */
            /* transparent calc(var(--gutter) + (var(--container-width) - (var(--columns) + 1) * var(--gutter)) / var(--columns)) */
        /* ); */
    /* background-size: var(--container-width) 100%, 100% var(--gutter); /* Wiederholung über die gesamte Breite */ */
    /* opacity: 0.5; */
/* } */

/* Schriftarten ---------------------------------------------------------------------------------------------------------*/
h1 {
	font-family: var(--header-font);
	font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
	font-style: normal;
	margin-bottom: 0;
	margin-top: 0;
}

h2 {
    font-family: var(--header-font);
	font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
	text-transform: uppercase;
    font-weight: 400; /* Leichtes Gewicht */
	font-style: normal;
	margin-bottom: 0.5rem;
	margin-top: 0;
}

h3 {
    font-family: var(--header-font);
	font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    font-weight: 400;
	font-style: normal;
    margin-bottom: 0;
	margin-top: 0;	
}

/* Standardtext --------------------------------------------------------------------------------------------------------- */
p {
    font-family: var(--paragraph-font); /* Nutzt die Paragraph-Schriftart */
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
	font-weight: 400;
	font-style: normal;
	
}

/* Opt-in Banner Styling */
.optin-banner {
    position: fixed;
    bottom: -100px; /* Start außerhalb des Bildschirms */
    left: 0;
    right: 0;
    background-color: var(--mainColor); /* Dunkles Grau als Hintergrund */
    padding: 20px;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    color: white; /* Weißer Text */
    font-size: var(--font-size-p); /* Schriftgröße aus der Variable */
    animation: slideIn 1s ease-out forwards; /* Slide-In Animation */
}

.optin-banner p {
    margin: 0;
    font-size: var(--font-size-p);
}

/* Acceptance Button */
.optin-banner button {
    padding: 10px 20px;
    margin-left: 10px;
    border: 1px solid white; /* Rahmen in Akzentfarbe */
    background-color: rgba(var(--accentColor-rgb), 0.5); /* Gedecktes Orange mit 20% Transparenz */
    color: white; /* Weißer Text auf Buttons */
    cursor: pointer;
    font-size: var(--font-size-p);
    border-radius: 5px;
    transition: opacity 0.3s ease, background-color 0.3s ease; /* Sanfter Übergang */
}

.optin-banner button:hover {
    background-color: var(--accentColor); /* Gedecktes Orange mit 20% Transparenz */
}

/* Decline Button */
.optin-banner button.decline {
    background-color: transparent; /* Transparenter Hintergrund für "Ablehnen" */
    color: white; /* Weißer Text */
    border: 1px solid var(--accentColor); /* Rahmen in Akzentfarbe */
    opacity: 1; /* Immer vollständig sichtbar */
    transition: background-color 0.3s ease; /* Sanfter Übergang bei Hover */
}

.optin-banner button.decline:hover {
    background-color: var(--accentColor); /* Akzentfarbe bei Hover */
    color: white; /* Weißer Text beim Hover */
}

/* Keyframes für Slide-In */
@keyframes slideIn {
    0% {
        bottom: -100px; /* Startposition außerhalb des Bildschirms */
    }
    100% {
        bottom: 0; /* Endposition sichtbar */
    }
}

/* Vorhang-Container */
.curtain {
  position: fixed;
  top: calc(1.5 * var(--gutter)); /* Abstand vom oberen Rand */
  left: 0;
  width: 100%;
  height: calc(100% - calc(1.5 * var(--gutter))); /* Höhe wird entsprechend reduziert */
  display: flex;
  align-items: center; /* Zentriert das Logo vertikal */
  justify-content: center; /* Zentriert das Logo horizontal */
  z-index: 10000; /* Über allem */
  pointer-events: none; /* Interaktionen blockieren */
}

/* Weißer Hintergrund */
.curtain-background {
  position: absolute; /* Position innerhalb des Curtain-Containers */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white; /* Weiße Fläche */
  opacity: 1;
  transition: opacity 1s ease-in-out; /* Synchronisiert mit dem Logo */
  z-index: 9999; /* Direkt hinter dem Vorhang */
}

/* Linker Vorhang */
.curtain-left,
.curtain-right {
  flex: 1;
  background: #000; /* Farbe des Vorhangs */
  height: 100%; /* Passt sich an den Curtain-Container an */
  transform: translateX(0);
  transition: transform 1s ease-in-out;
  background: white; /* Alternativ andere Farbe */
  z-index: 10000; /* Über dem Hintergrund */
}

/* Logo im Vorhang */
.curtain-logo {
  position: absolute;
  opacity: 1;
  transition: opacity 1s ease-in-out; /* Synchronisiert mit der Vorhang-Animation */
  z-index: 10001; /* Über den Vorhängen */
  scale: 0.7;
}

.curtain.open .curtain-logo {
  opacity: 0; /* Logo ausfaden */
}

.curtain.open .curtain-background {
  opacity: 0; /* Weiße Fläche ausfaden */
}

/* Öffnungs-Animation */
.curtain.open .curtain-left {
  transform: translateX(-100%);
}

.curtain.open .curtain-right {
  transform: translateX(100%);
}

/* Schließungs-Animation */
.curtain.close .curtain-left {
  transform: translateX(0);
}

.curtain.close .curtain-right {
  transform: translateX(0);
}

.background-wrapper {
    background-color: var(--mainColor); /* Hintergrundfarbe */
}

.background-wrapper h1,
.background-wrapper h2,
.background-wrapper h3,
.background-wrapper p {
    color: white; /* Schriftfarbe */
}

/* Haputklasse für alle Sektionen --------------------------------------------------------------------------------------------------------- */
.main-text {
    box-sizing: border-box; /* Padding und Border werden in der Breite berücksichtigt */	
	background-color: var(--backgroundColor);
	margin: 0 auto; /* Zentriert den Container horizontal */
	padding: var(--paddingtop) var(--gutter) var(--paddingtop) var(--gutter); /* Padding auf allen Seiten gleich */
	text-align: left;
    max-width: var(--container-width); /* Maximale Breite entspricht der Container-Breite */
}

/* Seperator für Strich unter den Überschriften --------------------------------------------------------------------------------------------------------- */
.separator {
    width: calc(2 * var(--gutter) + 3 * calc((var(--container-width) - (var(--columns) + 1) * var(--gutter)) / var(--columns)));
    height: 1px; /* Dicke des Strichs */
	background-color: var(--accentColor); /* Standardfarbe des Strichs */
	color: var(--accentColor);
    margin: 0 0 0 0; /* Abstand nach oben/unten
    border: none; /* Keine Umrandung */
}

/* Aufbau nach Spalten allgemein und Umsetzung für 3 und 4 Spalten --------------------------------------------------------------------------------------------------------- */
.custom-columns {
    display: flex; 
    justify-content: space-between;
    gap: var(--gutter);
    flex-wrap: wrap; 
	position: relative;
	/* margin-bottom: calc(1.5 * var(--gutter)); */
} 

.icon-gericht-svg {
    width: 100%;
    height: auto;
    fill: var(--mainColor); /* Farbe des SVGs */
}

.column {
    width: calc(3 * var(--gutter) + 4 * calc((var(--container-width) - (var(--columns) + 1) * var(--gutter)) / var(--columns)));
    display: flex;
    flex-direction: column;
    padding: 0;
}

.column-2 {
    width: calc(5 * var(--gutter) + 6 * calc((var(--container-width) - (var(--columns) + 1) * var(--gutter)) / var(--columns)));
    display: flex;
    flex-direction: column;
    padding: 0;
}


.column-4 {
    width: calc(2 * var(--gutter) + 3 * calc((var(--container-width) - (var(--columns) + 1) * var(--gutter)) / var(--columns)));
    display: flex;
    flex-direction: column;
    padding: 0;
}

.column, .column-4, .image-span-1, .image-span-2{
    opacity: 0;
    transform: translateY(calc(2 * var(--gutter))); /* Von unten hereingleiten */
    transition: opacity 0.6s ease-out, transform 1.2s ease-out; /* Verlangsamte Animation */
    transition-delay: var(--animation-delay, 0s); /* Standardmäßig keine Verzögerung */
}

.column.visible, .column-4.visible, .image-span-1.visible, .image-span-2.visible {
    opacity: 1;
    transform: translateY(0); /* In die ursprüngliche Position gleiten */
}

/* Text-Ausrichtungen oben und unten --------------------------------------------------------------------------------------------------------- */
.text-top {
    justify-content: flex-start;
}

.text-bottom {
    justify-content: flex-end;
}

/* Bild in Profilsektion --------------------------------------------------------------------------------------------------------- */
.image-container {
	display: flex; /* Flexbox für Ausrichtung */
    /* justify-content: flex-end; /* Nach links ausgerichtet */
    align-items: flex-start; 
    position: relative; /* Ermöglicht präzise Anpassung */
    width: calc(5 * var(--gutter) + 6 * calc((var(--container-width) - (var(--columns) + 1) * var(--gutter)) / var(--columns)));
    height: calc(8 * var(--gutter)); /* Feste Höhe */
	overflow: hidden; /* Schneidet alles ab, was außerhalb des Containers liegt */
}

.image-container-contact {
	display: flex; /* Flexbox für Ausrichtung */
    justify-content: flex-start; /* Nach links ausgerichtet */
    align-items: center; /* Vertikale Zentrierung */
    position: relative; /* Ermöglicht präzise Anpassung */
    width: auto;
    height: auto; /* Automatische Höhe */
}

/* Kreis definieren */
.clip-circle {
    position: relative;
    width: calc(8 * var(--gutter)); /* Breite passt sich dem Container an */
    height: calc(8 * var(--gutter)); /* Höhe des Containers */
    clip-path: circle(50% at 50% 50%); /* Perfekter, zentrierter Kreis */
    background-color: var(--mainColor); /* Hintergrundfarbe des Kreises */
    display: flex;
    align-items: center; /* Bild innerhalb des Kreises vertikal zentrieren */
    justify-content: center; /* Bild horizontal zentrieren */
    overflow: hidden; /* Inhalte außerhalb des Kreises ausblenden */
}

.clip-circle img {
    position: absolute; /* Unabhängig vom Container positioniert */
	top: 20px;
    height: 100%; /* Bild skaliert in der Höhe */
    width: calc(6.5 * var(--gutter)); /* Breite passt sich proportional an */
    object-fit: cover; /* Passt das Bild so an, dass es nicht verzerrt wird */
    object-position: center; /* Zentriert das Bild */
	filter: grayscale(100%) brightness(80%) contrast(120%);
	transition: filter 0.3s ease-in-out; /* Sanfte Transition für den Filter */
}

.clip-circle img:hover {
    filter: grayscale(0%) brightness(80%) contrast(120%);
}


/* Styling für Icons allgemein und SVGs --------------------------------------------------------------------------------------------------------- */
.column-image-logo {
    display: flex; /* Sicherstellen, dass das Bild als Block-Element bleibt */
	align-items: center;
    object-fit: contain; /* Proportionen wahren */
    width: calc(4 * var(--gutter)); /* Originalgröße des Bildes */
    height: calc(4 * var(--gutter)); /* Originalgröße des Bildes */
	filter: invert(1);
}

.image-container {
	justify-content: center;
}

.column-icon {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}

.icon-svg {
    height: calc(1.5 * var(--gutter));
	width: calc(1.5 * var(--gutter));
	margin-bottom: var(--gutter);
	fill: var(--accentColor);
}

/* Defintion der Übeschriften und Ausrichtungen der Paragraphen in Standardsektionen --------------------------------------------------------------------------------------------------------- */
.custom-heading {
    text-align: left;
    width: 100%;
	padding: 0 0 0 0;
	min-height: calc(2.5*var(--gutter));
}

.custom-heading-h3 {
	padding: 0 var(--gutter) 0 0;
	/* min-height: calc(1.5*var(--gutter)); */
}

.text-bottom h3 {
    margin: 0; /* Entfernt den Standardabstand */
    padding: 0; /* Entfernt eventuell unerwünschtes Padding */
}

.text-bottom p {
    margin: 0; /* Entfernt den Standardabstand */
    padding: 0; /* Entfernt eventuell unerwünschtes Padding */
}

/* Titelbild mit Parallax-Effekt */
.hero-image-container {
    display: flex;
    position: relative;
    width: 100%; /* Vollbildbreite */
    height: calc(16 * var(--gutter)); /* Höhe der Sektion bleibt wie gehabt */
    background-attachment: fixed; /* Parallax-Effekt */
    background-size: 100%vw calc(16 * var(--gutter));
    background-position: center center; /* Mittelpunkt des Bildes */
    background-repeat: no-repeat; /* Keine Wiederholung */
    background-image: url('../01_pictures/Verkehrsunfall_Banner_3_licensed_2560.webp');
    overflow: hidden; /* Verhindert unerwünschtes Scrollen */
}

.hero-image-container::before {
    content: ""; 
    position: absolute;
    top: 0;  
    left: 0;
    width: 100%; 
    height: 100%; 
    background: var(--mainColor); /* Einheitliche Farbe */
	opacity: 0.4;
    z-index: 0;
}

.hero-image-container .hero-image-text {
    position: relative; /* Bezugsrahmen für absolute Positionierung von Kindern */
	top: 15%;
    left: 50%; /* Linker Rand des Containers wird auf die Mitte ausgerichtet */
    transform: translateX(-50%); /* Verschiebt das Element um die Hälfte seiner Breite nach links */
    width: calc(11 * var(--gutter) + 12 * calc((var(--container-width) - (var(--columns) + 1) * var(--gutter)) / var(--columns))); /* Definierte Breite */
    text-align: center; /* Text innerhalb des Containers linksbündig ausrichten */
    z-index: 2; /* Über dem Hintergrundbild */
    color: white; /* Textfarbe */
    box-sizing: border-box; /* Beachtet Padding und Border in der Breite */
    /* padding-top: calc(3.5 * var(--gutter)); */
    display: flex; /* Flexbox-Layout für relative Positionierung */
    flex-direction: column; /* Vertikale Ausrichtung */
    gap: 0.3rem; 
}

.hero-image-container .hero-image-text h1,
.hero-image-container .hero-image-text h2,
.hero-image-container .hero-image-text h3 {
	margin: 0; 
	color: white;
}


.hero-image-container .hero-image-text h1 {
	font-family: var(--header-font);
	font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
	font-style: normal;
	margin-bottom: 0;
	margin-top: 0;
	}

.hero-image-container .hero-image-text .hero-image-logo {
    position: relative; /* Absolut positioniert relativ zum Container */
    /* top: calc(7 * var(--gutter));  /* Positioniert das Logo unter dem Text */
    margin-top: calc(1.0 * var(--gutter));
	/* margin-bottom: calc(2.0 * var(--gutter)); */
	left: 50%; /* Horizontale Mitte */
    transform: translate(-50%, -0%); /* Exakt zentrieren */
    width: calc(4 * var(--gutter)); /* Feste Breite */
    height: calc(4 * var(--gutter)); /* Feste Höhe */
    object-fit: contain; /* Proportionen beibehalten */
    z-index: 1; /* Unterhalb des Textes, über dem Overlay */
    opacity: 0.8; /* Leichte Transparenz */
    transition: transform 0.5s ease, opacity 0.5s ease; /* Hover-Effekt */

    /* Hintergrundfarbe für den Maskeneffekt */
    background: var(--accentColor);

    /* Verwende das Logo als Maske */
    -webkit-mask-image: var(--mask-image); /* Für Webkit-Browser */
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-composite: destination-out;

    mask-image: var(--mask-image); /* Für andere Browser */
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-composite: subtract;

    /* Entferne sichtbaren Hintergrund */
    background-clip: border-box;
    color: transparent; /* Kein sichtbarer Hintergrund */
}

.hero-image-container .hero-image-text .hero-image-logo:hover {
    opacity: 1; /* Leichte Transparenz */
}

.hero-button {
    position: relative; /* Relativ positioniert, damit top wirksam ist */
	height: 30px;
    width: 80px;
    margin-top: calc(0.5*var(--gutter));
    background-color: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 1);
    backdrop-filter: blur(2px);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), 
                4px 4px 8px rgba(0, 0, 0, 0.3);
    border-radius: 21px;
    display: flex; /* Flexbox für zentrierte Inhalte */
    justify-content: center; /* Horizontal zentrieren */
    align-items: center; /* Vertikal zentrieren */
	left: 50%;
	transform: translateX(-50%);
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center; /* Text zentriert ausrichten */
    color: white; /* Textfarbe */
    font-family: var(--header-font); /* Nutzt die Header-Schriftart */
    font-size: var(--font-size-h3);
}

.hero-button:hover {
    background-color: var(--accentColor);
    opacity: 0.8;
    scale: 1.05;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7), 
                4px 4px 8px rgba(0, 0, 0, 0.5);
	color: white;
}

.hero-button span {
    /* pointer-events: none;  */
}


.fullwidth-section {
    position: relative;
    width: 100%;
    height: calc(10*var(--gutter));
    overflow: hidden;
}

.background-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../01_pictures/p4_time_distance_2560.webp');
	background-attachment: fixed; /* Parallax-Effekt */
    background-size: 100%vw calc(16 * var(--gutter));
    background-position: center bottom; /* Mittelpunkt des Bildes */
	filter: brightness(1.4) contrast(1.3) saturate(1.5);
	/* background-repeat: no-repeat; */
    z-index: 1;
}

.fullwidth-section-alternate .background-image-container {
    background-image: url('../01_pictures/Gefahrenerkennung_V5050_2.png'); /* Anderes Hintergrundbild */
	background-size: var(--background-scale); /* Einheitliche Größe */
    background-position: var(--background-position-bird); 
    background-attachment: fixed; /* Parallax-Effekt */
}

.fullwidth-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--mainColor);
    filter: opacity(0.2);
    z-index: 2;
}

/* Testimonial Sektion --------------------------------------------------------------------------------------------------------- */

.testimonial {
    width: calc(4 * var(--gutter));
    height: calc(4 * var(--gutter));
    border-radius: 50%;
    border: 2px solid var(--mainColor);
    overflow: hidden;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

/* Styling für die Spalten der Gründe */
.reasons-grid {
    display: flex;
    justify-content: space-between;
    gap: var(--gutter); /* Abstand zwischen den Spalten */
    flex-wrap: wrap; /* Umbruch für kleinere Bildschirme */
    position: relative;
}

/* Ausschneiden der Mitte mit einem runden Clip-Path */
.reasons-grid::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(3.5*var(--gutter));
    height: calc(3.5*var(--gutter));
    background: var(--mainColor); /* Hintergrundfarbe oder transparent */
    /* border: 1px solid var(--accentColor); /* Rahmen in der Akzentfarbe */ */
    border-radius: 50%; /* Runde Form */
    z-index: 9; /* Über den Gründen, aber hinter dem Logo */
    pointer-events: none; /* Klicks nicht blockieren */
}

.reason {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding: calc(0.5*var(--gutter)); /* Innenabstand */
    border: 1px solid var(--accentColor); /* Rahmen in der Akzentfarbe */
    border-radius: 10px; /* Abgerundete Ecken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
    flex-grow: 1; /* Gleiche Höhe für alle Gründe */
    /* margin-bottom: calc(0.5 * var(--gutter)); /* Zusätzlicher Abstand unten */ */
}

.reason-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.reason-logo img {
    max-width: calc(3*var(--gutter));
    max-height: calc(3*var(--gutter));
    object-fit: contain;
    display: block; /* Verhindert zusätzliches Inline-Spacing */
    margin: 0 auto; /* Zentriert das Bild innerhalb des Containers */
}

.reason-logo-clip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9; /* Hinter dem Logo, aber vor anderen Elementen */
    width: calc(4*var(--gutter));
    height: calc(4*var(--gutter));
    border: 1px solid var(--accentColor); /* Rahmen in der Akzentfarbe */
    border-radius: 50%; /* Rundes Element */
    background: transparent; /* Keine Füllung */
    pointer-events: none; /* Klicks nicht blockieren */
}

.reasons-grid .top-left {
    flex: 1 1 calc(50% - var(--gutter));
	padding-right: calc(2*var(--gutter));
}

.reasons-grid .top-right {
    flex: 1 1 calc(50% - var(--gutter));
	padding-left: calc(2*var(--gutter));
}

.reasons-grid .bottom-left {
    flex: 1 1 calc(50% - var(--gutter));
	padding-right: calc(2*var(--gutter));
}

.reasons-grid .bottom-right {
    flex: 1 1 calc(50% - var(--gutter));
	padding-left: calc(2*var(--gutter));
}


#contact-form {
    display: block;
    background-color: var(--mainColor);
    padding: 20px;
    border-radius: 10px;
    max-width: 400px;
    margin: var(--gutter) auto;
	margin-top: 0;
	font-family: var(--paragraph-font); /* Nutzt die Paragraph-Schriftart */
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
}

#contact-form label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
	color: white;
}

#contact-form input, #contact-form textarea {
    width: 90%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
	font-family: var(--paragraph-font); /* Nutzt die Paragraph-Schriftart */
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
}

#contact-form button {
    font-family: var(--paragraph-font); /* Nutzt die Paragraph-Schriftart */
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
	margin-top: 15px;
    padding: 10px 10px;
    background-color: white;
    color: var(--mainColor);
    border: none;
    border-radius: 5px;
    cursor: pointer;
	opacity: 0.9;
}

#contact-form button:hover {
    opacity: 1;
	background-color: var(--accentColor);
    color: white;
}


/* Dynamische Anpassung an Bildschirmbreite --------------------------------------------------------------------------------------------------------- */
@media (min-width: 2560px) {
	
	.hero-image-container {
		background-image: url('../01_pictures/Verkehrsunfall_Banner_3_licensed_5120.webp');
	}	

	.background-image-container {
		background-image: url('../01_pictures/p4_time_distance.webp');
	}

}



@media (max-width: 1920px) {
	
	.hero-image-container {
		background-image: url('../01_pictures/Verkehrsunfall_Banner_3_licensed_1920.webp');
	}	

	.background-image-container {
		background-image: url('../01_pictures/p4_time_distance_1920.webp');
	}

}


@media (max-width: 1200px) {
	
  :root {
		 --gutter: 32px; /* Abstand zwischen den Spalten */
		 --container-width: 100vw; /* Maximale Breite für kleinere Bildschirme*/
		}
		
	.hero-image-container {
		background-image: url('../01_pictures/Verkehrsunfall_Banner_3_licensed_1200.webp');
	}	
	.background-image-container {
		background-image: url('../01_pictures/p4_time_distance_1200.webp');
	}
}

@media (max-width: 1000px) {
    :root {
		--font-size-h1: calc(var(--font-size-h2) * 1.3);
        --columns: 8;
    }

.column-4 {
    width: calc(3 * var(--gutter) + 4 * calc((var(--container-width) - (var(--columns) + 1) * var(--gutter)) / var(--columns)));
}

    .column-4.image-container .column-image-logo {
        margin-left: 0; /* Zurücksetzen auf linksbündig */
    }
	
	.column-2 {
    width: calc(3 * var(--gutter) + 4 * calc((var(--container-width) - (var(--columns) + 1) * var(--gutter)) / var(--columns)));
}

.image-container {
    width: calc(3 * var(--gutter) + 4 * calc((var(--container-width) - (var(--columns) + 1) * var(--gutter)) / var(--columns)));
}


	
	nav .desktop-menu {
        display: none; /* Versteckt das Desktop-Menü */
    }

    nav .hamburger {
        display: flex; /* Zeigt das Hamburger-Menü */
    }

    nav .mobile-menu.active {
        display: flex; /* Zeige das Menü bei Aktivierung */
    }
	
}

@media (max-width: 560px) {
    :root {
    --columns: 4;
	--font-size-h3: calc(var(--font-size-p) * 1.272);
	--font-size-h2: calc(var(--font-size-h3) * 1.272);
	--font-size-h1: calc(var(--font-size-h2) * 1.272);
    }	
	
	.nav-left .title {
    display: none;
	}
	
	.column-4.text-top {
		align-items: center;
		text-align: center;
	}
	
	.column-4.image-container-contact {
		align-items: center;
	}
	
	.reasons-grid {
        flex-direction: column;
        align-items: center;
    }

    .reason {
        width: 100%;
    }
	
	.reasons-grid .top-left {
	padding-right: calc(0.5*var(--gutter));
	}

	.reasons-grid .top-right {
		padding-left: calc(0.5*var(--gutter));
		padding-bottom: calc(1.5*var(--gutter));
	}

	.reasons-grid .bottom-left {
		padding-right: calc(0.5*var(--gutter));
		padding-top: calc(1.5*var(--gutter));
	}

	.reasons-grid .bottom-right {
		padding-left: calc(0.5*var(--gutter));
	}
	
}

@media (pointer: coarse) {
    .background-image-container {
        background-position: center top; /* Startpunkt für mobile Geräte */
    }
}


/* Links */
a {
    color: white;
    text-decoration: none;
	font-family: var(--paragraph-font); /* Nutzt die Paragraph-Schriftart */
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
    transition: color 0.3s ease, text-decoration-color 0.3s ease; /* Glatter Übergang */
}

a.active,
a:hover {
    color: var(--accentColor);
    font-weight: bold;
}


/* Standard Navigation */
nav {
    display: flex;
	z-index: 1000;
    justify-content: space-between;
    align-items: center;
    /* background: var(--mainColor); */
	/* border-bottom: 1px solid var(--mainColor); */
	color: white;
    padding: auto;
    height: calc(1.5 * var(--gutter));
    position: fixed;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    opacity: 1;
    transition: height 0.3s ease, padding 0.3s ease;
    font-family: var(--paragraph-font);
}

/* Navigation bei Scroll */
nav.scrolled {
    height: calc(1 * var(--gutter));
    /* padding: calc(0.25 * var(--gutter)) calc(0.5 * var(--gutter)); */
    background: var(--mainColor);
    opacity: 0.8;
	color: white;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.nav-left .logo {
    display: flex;
    align-items: center;
	padding-left: 20px;
}

/* Logo Styling */
.nav-left .logo img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: invert(1);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

nav.scrolled .nav-left .logo img {
    transform: scale(0.7);
    opacity: 1;
	 filter: invert(1);
}

nav.scrolled .nav-left .title {
    color: white;
}

nav.scrolled .desktop-menu {
    color: white;
}

nav.scrolled ul li a {
    color: white;
}

.nav-left .logo img:hover {
    transform: scale(1.1);
}

/* Titel in der Navigation */
.nav-left .title {
    color: white;
    font-family: var(--paragraph-font);
    font-weight: 700;
}

/* Verstecke das Menü standardmäßig für mobile Geräte */
.desktop-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    padding-top: auto;
	padding-bottom: auto;
    right: var(--gutter);
	color: white;
    /* border-radius: 5px; */
}

/* Hamburger Menu Styling */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 50px;
    height: 25px;
    cursor: pointer;
	padding-right: 20px;
}

/* Wenn das Menü aktiv ist */
.desktop-menu.active {
    display: flex;
}

.desktop-menu a {
    text-decoration: none;
    transition: color 0.3s ease-in-out;
    font-family: var(--paragraph-font);
    font-weight: 500;
}

.desktop-menu a:hover {
    color: var(--accentColor);
}


.hamburger .line {
    width: 30px;
    height: 3px;
    background-color: white;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Platzierung der Linien im Grundzustand */
.hamburger .line:nth-child(1) {
    top: 0; /* Oberste Linie */
}

.hamburger .line:nth-child(2) {
    top: 50%; /* Mittlere Linie */
    transform: translateY(-50%); /* Exakte Zentrierung */
}

.hamburger .line:nth-child(3) {
    bottom: 0; /* Unterste Linie */
}

/* Zustand für das "X" */
.hamburger.is-active .line:nth-child(1) {
    transform: rotate(45deg) translate(4px, 11px); /* 45 Grad nach rechts oben */
    top: 50%; /* In die Mitte verschieben */
}

.hamburger.is-active .line:nth-child(2) {
    opacity: 0; /* Mittlere Linie ausblenden */
}

.hamburger.is-active .line:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -11px); /* 45 Grad nach links unten */
    top: 50%; /* In die Mitte verschieben */
}

/* General Menu Styling */
ul {
    list-style: none;
    display: flex;
    margin: 0;
    gap: var(--gutter);
}

ul li a {
    color: white;
	text-decoration: none;
    font-family: var(--paragraph-font);
    font-weight: 500;
    transition: color 0.3s ease-in-out;
}

ul li a:hover {
    color: var(--accentColor);
}

/* Verstecke das mobile Menü standardmäßig */
.mobile-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(2 * var(--gutter)); /* Position unterhalb der Navigation */
    right: var(--gutter);
    background: var(--mainColor);
    padding: calc(0.5 * var(--gutter));
    border-radius: 5px;
    z-index: 1000;
    width: 200px; /* Festlegung einer Breite für die Spalte */
    text-align: center; /* Rechtsbündige Ausrichtung der Links */
}
.mobile-menu ul {
    display: flex;
    flex-direction: column; /* Elemente vertikal ausrichten */
    gap: 10px; /* Optional: Abstand zwischen den Links */
    margin: 0;
    padding: 0; /* Entfernt unnötigen Platz */
}

/* Zeige das mobile Menü, wenn aktiv */
.mobile-menu.active {
    display: flex;
}

.mobile-menu a {
    color: white;
    text-decoration: none;
    margin: 10px 0; /* Erhöhung des vertikalen Abstands für bessere Lesbarkeit */
    transition: color 0.3s ease-in-out;
}

.mobile-menu a:hover {
    color: var(--accentColor);
}