/* poppins-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/poppins-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/poppins-v24-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/poppins-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/poppins-v24-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}




/* open-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v44-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/open-sans-v44-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v44-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/open-sans-v44-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v44-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/open-sans-v44-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}




/*
 * -----------------------------------------------------
 * 1. FONTS & BASE STYLES
 * -----------------------------------------------------
 */

:root {
    /* Farbpalette */
    --color-primary-orange: #fe5e00; 
    --color-dark-blue: #002334; /* Haupt-Hintergrundfarbe der dunklen Sektionen */
    --color-dark-blue-border: #002334; /* Sehr dunkles Blau für Divider/Border */
    --color-text-dark: #002334; 
    --color-text-light: #ffffff; 
    --color-section-light: #ffffff; 
    --color-dark-card-bg: #2c3a45; /* Hintergrund für Karten/Formular in dunkler Section */

    /* Schriftarten - Importiert im HTML */
	--bs-body-font-size: 1rem;
	--bs-body-font-size-small: .8rem;
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    
    /* Font Weights (gemäß Layout) */
    --font-thin: 300;
    --font-regular: 400;
	--font-semibold: 600;
    --font-bold: 600;
    --font-extrabold: 700;
	
}
html, body {
	overflow-x:hidden !important;
}	
body {
    background-color: var(--color-section-light);
    color: var(--color-text-dark);
    font-family: var(--font-body);
    font-weight: var(--font-thin);
    line-height: 1.6;
}

h1, h2 {
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
}
h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-extrabold);
}
strong {
	font-weight: var(--font-bold);
}
a {
	text-underline-offset: 4px;
    text-decoration-thickness: .5px;
	color:var(--color-text-dark);
}

/* -----------------------------------------------------
 * 2. SECTION HINTERGRÜNDE (FIXED)
 * -----------------------------------------------------
 */

/* Helle Sektionen (implizit weiß) */
.mood-text-image,
.text-content--light,
.divider-section,
.gallery--light,
.contact-form-section,
.footer--light {
    background-color: var(--color-section-light);
    color: var(--color-text-dark);
}

/* Dunkle Sektionen (FIX: Explizit dunkelblau setzen) */
.feature-boxes--dark,
.contact--dark {
	background-image:url(../img/foam.jpg);
	background-position:top left;
	background-size:700px auto;
	background-repeat:repeat;
    background-color: var(--color-dark-blue);
    color: var(--color-text-light); 
}
.feature-boxes--dark a,
.contact--dark a {
	color:var(--color-text-light);
}


/* -----------------------------------------------------
 * 3. HEADER & NAVIGATION STYLES
 * -----------------------------------------------------
 */

.header--light {
    background-color: var(--color-section-light);
    border-bottom: 3px solid var(--color-dark-blue-border);
}

/* Navigationslinks im hellen Header */
.nav-link {
    font-weight: 400;
    color: var(--color-dark-blue) !important;
    transition: color 0.3s ease;
	padding:1rem 0 1rem 2rem !important;
}
.nav-link:hover {
    color: var(--color-primary-orange) !important;
}

/* Toggler Icon (muss für Blau im hellen HG angepasst werden) */
.header--light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231f2732' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-brand img {
	width:200px;
}
.navbar-toggler, .navbar-toggler:focus {
	border:none;
	color: var(--color-dark-blue) !important;
	outline:none;
	box-shadow:none;
}
@media (max-width: 992px) {
	.offcanvas.offcanvas-end {
		max-width:70%;
		border-left:none;
		-webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,.1);
		box-shadow: 0 0 20px 0 rgba(0,0,0,.1);
	}
	.btn-close {
		--bs-btn-close-color: #002334 !important;
		--bs-btn-close-opacity: 1 !important;
	}
	.offcanvas-backdrop {
		background:#fff;
	}
	/* Grundzustand der Listenelemente */
	.offcanvas-anim li {
		opacity: 0;
		transform: translateX(30px);
	}

	/* Animation beim Öffnen des Bootstrap-Offcanvas */
	.offcanvas.show .offcanvas-anim li {
		animation: fadeSlideIn 0.4s ease-out forwards;
	}

	/* Stagger-Effekt */
	.offcanvas.show .offcanvas-anim li:nth-child(1) { animation-delay: 0.05s; }
	.offcanvas.show .offcanvas-anim li:nth-child(2) { animation-delay: 0.15s; }
	.offcanvas.show .offcanvas-anim li:nth-child(3) { animation-delay: 0.20s; }
	.offcanvas.show .offcanvas-anim li:nth-child(4) { animation-delay: 0.25s; }
	.offcanvas.show .offcanvas-anim li:nth-child(5) { animation-delay: 0.30s; }
	.offcanvas.show .offcanvas-anim li:nth-child(6) { animation-delay: 0.35s; }
	.offcanvas.show .offcanvas-anim li:nth-child(7) { animation-delay: 0.40s; }
	.offcanvas.show .offcanvas-anim li:nth-child(8) { animation-delay: 0.45s; }
	.offcanvas.show .offcanvas-anim li:nth-child(9) { animation-delay: 0.50s; }
	.offcanvas.show .offcanvas-anim li:nth-child(10) { animation-delay: 0.55s; }

	@keyframes fadeSlideIn {
		from {
			opacity: 0;
			transform: translateX(30px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
}


/* -----------------------------------------------------
 * 4. SIZES & DIVIDERS
 * -----------------------------------------------------
 */


/* Divider zwischen "Über uns" und Galerie */
.divider-section {
    padding: 20px 0;
}
.divider {
    height: 3px;
    background-color: var(--color-dark-blue-border);
    border: none;
    opacity: 1;
    margin: 0;
}


/* -----------------------------------------------------
 * 5. BUTTONS & GENERAL STYLES
 * -----------------------------------------------------
 */

.button--primary, .button--primary:hover {
    background-color: var(--color-primary-orange);
    border-color: var(--color-primary-orange);
    color: var(--color-text-light);
    font-weight: 400;
	font-size:var(--bs-body-font-size-small);
    border-radius: 0; 
	font-family: var(--font-heading);
    font-weight: var(--font-regular);
}
.button--secondary, .button--secondary:hover {
    background-color: var(--color-dark-blue);
    border: 1px solid var(--color-dark-blue);
    color: var(--color-text-light);
	font-size:var(--bs-body-font-size-small);
    font-weight: 400;
    border-radius: 0;
	font-family: var(--font-heading);
    font-weight: var(--font-regular);
}


/* Text content */




/* Header Mood */
.header-mood__content .btn {
	margin-right:1rem;
}


/* --- Feature Boxes (Dark Section) --- */
.feature-box {
    border: 3px solid var(--color-text-light);
    border-radius: 0;
    padding: 2rem !important;
}
.feature-box__icon {
    font-size: 3rem;
    color: var(--color-text-light);
    display: block;
    margin-bottom: 0.5rem;
}
.feature-box__title {
    color: var(--color-primary-orange);
    margin-top: 0 !important;
}
.feature-box__text {
    font-weight: var(--font-thin); 
}
.feature-box__iconcontainer {
	width:150px;
	height:100px;
	margin:0 0 1.5rem 0;
}
.feature-box__iconcontainer img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position:left center;
	width:100%;
	height:100%;
}

/* --- Gallery Section (White Background) --- */
.carousel-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 4rem 1.25rem 1.25rem 1.25rem;
    color: #fff;
    text-align: center;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.gallery__control {
    background-color: var(--color-dark-blue);
    width: 60px;
    height: 60px;
    opacity: 1;
    border-radius: 0;
	top:50%;
	margin-top:-30px;
}
/* Pfeil nach LINKS (Previous) */
.carousel-control-prev-icon {
	    width: 3rem;
    height: 3rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fe5e00'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") !important;
}
/* Pfeil nach RECHTS (Next) */
.carousel-control-next-icon {
	    width: 3rem;
    height: 3rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fe5e00'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}


/* --- Contact Info Section (Dark) --- */
.contact-detail {
    text-align: left !important;
}
.contact-detail__title {
    font-size: 1rem; 
}
.contact-detail__text {
    font-weight: var(--font-thin); 
    color: #d1d1d1;
}
.contact-detail__mail-link {
    color: #d1d1d1;
}

/* Ansprechpartner Headline (Orange, Links) */
.contact-persons__title {
    color: var(--color-primary-orange);
    text-align: left !important;
}

/* --- Contact Persons (Kacheln) --- */
.contact-card__link {
    position: relative;
    display: block;
}
.contact-card__avatar-container {
    position: absolute;
    top: -40px; 
    left: 0;
	right: 0;
	margin: 0 auto;
    width: 80px;
    height: 80px;
    border: 3px solid var(--color-text-light); 
    border-radius: 50%;
    z-index: 10;
    background-color: var(--color-text-light); 
    transition: all 0.3s ease;
	overflow:hidden;
}
.contact-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%; 
}
.contact-card {
    background-color: transparent;
    border: 3px solid var(--color-text-light); 
    border-radius: 0;
    padding: 50px 10px 10px 10px !important;
    margin-top: 50px; 
    min-height: 100px;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.contact-card__name {
    font-weight: var(--font-bold);
    color: var(--color-text-light); 
}
.contact-card__role {
    font-weight: var(--font-thin); 
    color: #d1d1d1;
}
.contact-card__email {
	opacity:0;
	color:var(--color-dark-blue);
	font-size:var(--bs-body-font-size-small);
}

/* Hover Effekt */
.contact-card__link:hover .contact-card {
    transform: translateY(-3px); 
    background-color: var(--color-text-light); 
    color: var(--color-dark-blue); 
    border-color: var(--color-text-light); 
}
.contact-card__link:hover .contact-card__name,
.contact-card__link:hover .contact-card__role {
    color: var(--color-dark-blue); 
}
.contact-card__link:hover .contact-card__avatar-container {
     transform:scale(1.05);
}
.contact-card__link:hover .contact-card__email {
	opacity:1;
}


/* --- Contact Form Section (White Background) --- */
.contact-form__title {
    text-align: left !important;
}
/* Formularfelder (Weißer HG, Blauer Border) */
.contact-form .form-control {
    background-color: var(--color-section-light); 
    border: 3px solid var(--color-dark-blue-border); 
    color: var(--color-text-dark);
    border-radius: 0; 
    padding: 10px; 
    font-weight: var(--font-thin);
	font-size:var(--bs-body-font-size);
}
.contact-form .form-control:focus {
    border-color: var(--color-primary-orange); 
    box-shadow: none;
}
.contact-form__note {
	font-size:var(--bs-body-font-size-small);
}
::placeholder,
::placeholder {
    color: var(--color-dark-blue) !important;
}

-ms-input-placeholder,
:-ms-input-placeholder {
    color: var(--color-dark-blue) !important;
}

::-ms-input-placeholder,
::-ms-input-placeholder {
    color: var(--color-dark-blue) !important;
}

.red {
	color:#e74a4a;
}

.contact-form .form-control.error {
	border-color:#e74a4a;
}
.block-form__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: background-color .25s ease, color .2s ease;
}
/* Loading State */
.block-form__btn.btn-primary--loading {
	background-color: var(--color-primary-orange);
	color: transparent;
	pointer-events: none;
	box-shadow: 0 0 0 0 rgba(255,255,255,.3);
	animation: btnPulse 1.5s ease-in-out infinite;
}

/* Spinner */
.block-form__btn.btn-primary--loading::after {
	content: "";
	position: absolute;
	width: 22px;
	height: 22px;
	border: 2px solid rgba(255,255,255,.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: btnSpinner .8s linear infinite;
}

/* Animation */
@keyframes btnSpinner {
	to {
		transform: rotate(360deg);
	}
}


/* FancyBox
------------------------- */
.fancybox-thumbs {
	background:#fff;
}
.fancybox-thumbs__list a:before {
	border: 4px solid #395578;
}
.fancybox-button {
    background: var(--main) !important;
	color:#fff !important;
}
.fancybox-button--arrow_left, .fancybox-button--arrow_right {
	background: none !important;
}
.fancybox-button--arrow_left div, .fancybox-button--arrow_right div {
	background: var(--main) !important;
}
.fancybox-button[disabled], .fancybox-button[disabled]:hover {
	color:rgba(255,255,255,.6);
}
.fancybox-progress {
	color: rgba(0,131,196,1);
}
.fancybox-infobar {
	color:#fff;
}


/* --- Footer (White Background, Mehr Padding) --- */
.footer--light {
    background-color: var(--color-section-light);
    color: var(--color-dark-blue);
    padding: 30px 0 !important; 
    border-top: 3px solid var(--color-dark-blue);
	margin-top:5rem;
}
.footer__copy {
    color: var(--color-dark-blue);
    font-weight: var(--font-thin);
}
.footer__links a {
    color: var(--color-dark-blue) !important; 
    font-weight: var(--font-thin);
    transition: color 0.3s;
	text-decoration:none;
	display:inline-block;
	padding:1rem;
}
.footer__links a:hover {
    color: var(--color-primary-orange) !important; 
}