/* Allgemeine Farben */
/*body {
    font-family: Open Sans, Arial, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
    background-color: var(--bg-color);
    color: var(--text-color);
}
*/

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Work Sans', Arial, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Work Sans', Arial, sans-serif;
    font-weight: 600; /* Optional: Setzt eine stärkere Gewichtung für Überschriften */
}

p, a, span, li {
    font-family: 'Work Sans', Arial, sans-serif;
    font-weight: 400; /* Standard-Gewichtung für Fließtext */
}
/* Farbvariablen */
:root {
    --bg-color: #fffaf0;
    --text-color: #000000;
    --nav-bg: rgba(238, 230, 220, 0.5);/*#f8f9fa;*/
    --footer-bg: #000000;
    --footer-text: #eee6dc;
    --btn-orange: #FF8C00;
    --btn-hover: #FFA733;
}

body.dark-mode {
    --bg-color: #2c2c2c; /* Neutraler, dunkler Hintergrund (nicht schwarz) */
    --text-color: #F8F8FF; /* Helles Grau für Schrift */
    --nav-bg: #3a3a3a; /* Navigation dunkler */
    --footer-bg: #3a3a3a; /* Footer dunkler */
    --footer-text: #FBFBF9; /* Footer-Text hellgrau */
    --btn-orange: #d67f00; /* Entsättigtes Orange für Button */
    --btn-hover: #e49433; /* Entsättigtes Hellorange bei Hover */
}

/* Navbar */

.navbar {
    background-color: var(--nav-bg) !important;
}
/* Navbar */

.nav-link.active {
    font-weight: bold; /* Beispiel: Fettschrift */
    color: #FF6600; /* Beispiel: Oranger Text */
}
/* Wenn sie nach unten gescrollt wird, wird sie fixiert */
.navbar.fixed {
    position: fixed;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    width: 100%;
    background-color: rgba(238, 230, 220, 0.9);
	z-index: 1000;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Weitere allgemeine Styling-Anpassungen für den Navbar */
.navbar .container {
    max-width: 100%; /* Verhindert, dass der Container eine feste Breite hat */
}

.navbar-main {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    background: transparent; 
    z-index: 10;
}


/* Darkmode Navbar */
body.dark-mode .navbar {
    /*background-color: rgba(58, 58, 58, 0.7) !important;*/
	 background: linear-gradient(to top, rgba(58, 58, 58, 1) 0%, rgba(58, 58, 58, 0) 100%);

}

body.dark-mode .navbar {
    background: linear-gradient(to top, rgba(58, 58, 58, 0.9) 0%, rgba(58, 58, 58, 0) 100%); /* Start mit dunkel und transparentem Verlauf */
}

/* Navbar Logo */
.navbar-brand img {
    height: 80px;
    width: auto;
    max-height: 100px;
    transition: all 0.3s ease;
}

body.dark-mode .navbar-brand img {
    content: url('pics/png/vds_logo_white(1).png');
}

/* Navbar-Toggler */
.navbar-toggler-icon {
    background-size: contain;
    transition: all 0.3s ease;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0, 0, 0, 0.7)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

body.dark-mode .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255, 0.7)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

body.dark-mode .fa-sun {
    color: #FFA733
}

/* Standard Navbar-Toggler Hintergrund */
.navbar-toggler {
    border-color: rgba(0, 0, 0, 0.1); /* Rahmenfarbe */
}

/* Darkmode-Anpassungen */
body.dark-mode .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.2); /* Heller Rahmen für Darkmode */
}

/* Dropdown-Menü */
.navbar-light .navbar-nav .nav-link {
    color: rgba(0, 0, 0, 0.7);
}
body.dark-mode .navbar-light .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.85);
}

/* Buttons */
.btn-custom, .btn-secondary {
    border: none;
    transition: background-color 0.3s ease;
}
.btn-custom {
    background-color: var(--btn-orange);
    color: white;
	transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-custom:hover{
    background-color: var(--btn-hover);
}

.btn-secondary {
    background-color: #757675;
    color: white;
}
body.dark-mode .btn-secondary {
    background-color: var(--btn-orange);
    color: black;
}
body.dark-mode .btn-custom {
    background-color: var(--btn-orange);
    color: white;
}
body.dark-mode .btn-custom:hover {
    background-color: var(--btn-hover);
    color: white;
}

body.dark-mode .btn-custom:active,
body.dark-mode .btn-custom:focus {
    background-color: #bfbfbf; /* Entsättigtes Hellgrau */
    color: #1f1f1f; /* Dunkleres Grau im Text */
}
body.dark-mode .form-control{
	background-color: #FBFBF9;
}
body.dark-mode .form-select{
	background-color: #FBFBF9;
}

/* Hero Section */
header.bg-light {
    background-color: #eee6dc !important;/*#f8f9fa; -- weiß #f3e4dc -- eierschale*/
    /*color: #eee6dc;*/
    transition: background-color 0.3s ease, color 0.3s ease;
	padding-top: 60px;
	
    /*background-color: rgba(110, 112, 114, 0.7) !important; /* Helles Grau mit 70% Deckkraft */
    backdrop-filter: blur(5px); /* Weicher Unschärfe-Effekt */

}
/*body.dark-mode header.bg-light {
    background-color: #212529;
    color: #ffffff;
}*/

header.pic {
    background: center/cover no-repeat;
   
    position: relative;
    padding: 100px 0; /* Größere Höhe */
	
}

header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(87, 84, 78, 0.1); /* Dunkler Overlay-Effekt */
	
}

header .container {
    position: relative;
    z-index: 1; /* Stellt sicher, dass der Text über dem Overlay liegt */
	
}


.header-section {
	background: center/cover no-repeat;
    position: relative;
    text-align: text-left !important;

    background-size: cover;
    padding: 120px 0; /* Größerer Abstand nach oben */

	
}



.header-section .container {
    position: relative;
    z-index: 2;
    max-width: 800px;


}

.header-section h1 {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 20px;
	
}

.header-section p {
    font-size: 1.25rem;
    font-weight: 300;
}

/*Kästchen*/
.bg-light1 {
    border-radius: 10px; /* Abgerundete Ecken */
    padding: 1.5rem; /* Innenabstand für besseren Lesefluss */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
}

body.dark-mode .bg-light1 {
    background-color: #eee6dc  !important; /* Heller Hintergrund für Kästchen */
    color: #212529 !important; /* Feste Textfarbe, bleibt im Dark Mode dunkel */
    border-radius: 10px; /* Abgerundete Ecken */
    padding: 1.5rem; /* Innenabstand für besseren Lesefluss */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
}
/*main section styling*/

.full-width-section {
    width: 100vw; /* Setzt die Breite auf 100% der Viewport-Breite */
    height: auto;
    background: url('pics/orange_hintergrund.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    left: 50%; /* Verschiebt das Element nach links */
    right: 50%; /* Verschiebt das Element nach rechts */
    margin-left: -50vw; /* Zieht die Hälfte der Viewport-Breite ab */
    margin-right: -50vw; /* Zieht die Hälfte der Viewport-Breite ab */
    padding-left: 0 !important;
    padding-right: 0 !important;
	padding-bottom: 0; /* Automatisch anpassen */
}
/* Bei Bildschirmgrößen unter 768px */
@media (max-width: 768px) {
    .full-width-section {
        width: 100%; /* Setzt die Breite auf 100% */
        left: 0; /* Entfernt das Verschieben nach links */
        right: 0; /* Entfernt das Verschieben nach rechts */
        margin-left: 0; /* Setzt den negativen Margin zurück */
        margin-right: 0; /* Setzt den negativen Margin zurück */
    }
}

section .card-title-main {
	color: #ffffff;
}

section .card-text-main {
	color: #ffffff;
}
/* Dropdown-Menü für Untermenüs */


.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%; /* Zeigt das Untermenü rechts neben dem Hauptmenü an */
    margin-top: -1px;
    border-radius: 0.25rem;
}

/* Hover-Effekt für Untermenüs */
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

/*Slider Effekte */
.carousel-item img {
    max-width: 80%;  /* Bild wird auf maximal 80% der Containerbreite verkleinert */
    height: auto;  /* Beibehaltung des Seitenverhältnisses */
    display: block;  /* Stellt sicher, dass das Bild als Blockelement behandelt wird */
    margin: 0 auto;  /* Zentriert das Bild */
}
.carousel-caption {
    background-color: rgba(0, 0, 0, 0.6); /* Schwarzer Hintergrund mit 60% Transparenz */
    border-radius: 10px; /* Abgerundete Ecken */
    padding: 15px 20px; /* Innenabstand für ein schönes Layout */
    color: #fff; /* Weiße Schrift */
    display: inline-block; /* Beschränkt das Kästchen auf die Größe des Inhalts */
    max-width: 80%; /* Optional: Beschränkt die Breite des Kästchens */
    text-align: center; /* Zentriert den Text im Kästchen */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: orange; /* Orange Hintergrundfarbe */
    border-radius: 50%; /* Runde Buttons */
    padding: 10px; /* Größerer Klickbereich */
}
#start {
    position: relative;
    height: 100vh; /* Die Sektion nimmt die volle Höhe des Viewports ein */
	background: url('pics/home_video.mp4') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 1;
}

#background-video {
    position: absolute; /* Das Video wird hinter den Inhalt positioniert */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Das Video deckt die gesamte Fläche ab, ohne das Seitenverhältnis zu verzerren */
    z-index: -1; /* Das Video bleibt im Hintergrund */
}

.content {
    position: relative; /* Der Inhalt bleibt sichtbar und wird über das Video gelegt */
    /*color: white;  Weißer Text für guten Kontrast */
    z-index: 2; /* Der Inhalt wird über dem Video angezeigt */
    padding: 20px; /* Etwas Innenabstand für den Inhalt */
    text-align: center; /* Zentriert den Text */
}
#start::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
}
/* Start-Sektion */
/*
#start {
    position: relative;
    height: 100vh;
    background-image: url('pics/png/vds_logo_sign.png');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}
#start::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
}
#start .content {
    position: relative;
    z-index: 3;
}
*/
/* Footer Styling */
.footer {
    background-color: #eee6dc;
    padding: 20px 0;
}

.footer h5 {
    font-weight: bold;
}
.dark-mode footer h5 {
    color: #212529;
}
.dark-mode footer p {
    color: #212529;
}
.footer ul {
    padding: 0;
}

.footer ul li {
    list-style: none;
}

.footer ul li a {
    text-decoration: none;
    color: #333;
}

.footer ul li a:hover {
    text-decoration: underline;
}

.footer p {
    margin: 0;
}

.footer .text-muted {
    font-size: 14px;
}

.footer  a i {
    color: #333;
    transition: color 0.3s;
}

.footer a i:hover {
    color: #f7931e; /* Orange für Hover */
}

.downloads ul {
    padding: 0;
}

.dark-mode .downloads ul {
    color: white; /* Textfarbe für die Liste im Dark Mode */
}

.downloads ul li {
    list-style: none;
}

.downloads ul li a {
    text-decoration: none;
    color: #333; /* Standardfarbe für Links */
}

.dark-mode .downloads ul li a {
    color: white; /* Weiß für Links im Dark Mode */
}

.downloads ul li a:hover {
    text-decoration: underline;
	color: #f7931e;
}

.downloads p {
    margin: 0;
}

.downloads .text-muted {
    font-size: 14px;
}

.downloads a i {
    color: #333;
    transition: color 0.3s;
}

.dark-mode .downloads a i {
    color: white; /* Weiß für Icons im Dark Mode */
}

.downloads a i:hover {
    color: #f7931e; /* Orange für Hover */
}

/*gifs styling*/
      .card-link {
        text-decoration: none;
        color: inherit;
    }

    .card-link:hover .card {
        transform: scale(1.05);
        transition: 0.3s;
    }

    .gif-container {
        position: relative;
        width: 100%;
        height: auto;
    }

    .gif-container img {
        width: 100%;
        max-height: 200px;
        transition: opacity 0.3s ease-in-out;
        display: block;
    }

    .gif-container-calc-color-select img {
        max-height: 150px;
		padding-top: 10px;
		padding-bottom: 10px;
    }

    .gif-container .hover-gif {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
    }

    .gif-container:hover .static-gif {
        opacity: 0;
    }

    .gif-container:hover .hover-gif {
        opacity: 1;
    }
	
	 /* Dark Mode Logik für Produktübersicht*/
   
	#extraBG .light-modeGIF {
		opacity: 1;
		pointer-events: auto;
	}

	#extraBG .dark-modeGIF {
		opacity: 0;
		pointer-events: none;
	}

	body.dark-mode #extraBG .light-modeGIF {
		opacity: 0;
		pointer-events: none;
	}

	body.dark-mode #extraBG .dark-modeGIF {
		opacity: 1;
		pointer-events: auto;
	}

		
		
	/* Für kleine Bildschirme */
@media (max-width: 768px) {
    .gif-container {
        position: relative;
    }

    .hover-gif {
        transition: transform 0.3s ease-in-out;
    }
}

@media (prefers-color-scheme: dark) {
    .light-mode {
        display: none;
    }
    .dark-mode {
        display: block;
    }
}

/*main---------------------------------------------------------------------------------------------------------------*/
.card-img-bottom {
    max-height: 150px;
    object-fit: cover;
}
 #extraBG1{
	
	background: #f59900;
	color: white;
	
   
		
}
body.dark-mode #extraBG1{
	background-image: url("pics/deckung_hintergrund_dark.jpg");
	 background-size: cover;
		
}

.card-project {
	color: white;
	background-color: transparent; border: 2px solid white;
    border-radius: 40px; /* Runde Ecken */
    margin: 5px; /* Abstand von anderen Karten */
	

    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 20px;
}

.custom-card {
   
      border-radius: 10px;
      background-color: white;
      padding: 1rem;
      max-width: 1000px;
      margin: 3rem auto;
    }
	.custom-title {
      color: #ff8000;
      font-weight: 700;
      font-size: 1.5rem;
    }

    .sub-title {
      color: #f18700;
      font-weight: 600;
      margin-bottom: 1rem;
    }
/*produkte-----------------------------------------------------------------------------------------------------------*/
 #extraBG{

	background-image: url("pics/orange_hintergrund_d.png");
    display: flex;
		
}
body.dark-mode #extraBG{
	background-image: url("pics/deckung_hintergrund_dark.jpg");
		
}
body.dark-mode .hover-gif {
    content: attr(data-dark);
}

/* Abgerundete Ecken für die Karten */
.card-products {
	color: white;
	background-color: transparent; border: 2px solid white;
    border-radius: 40px; /* Runde Ecken */
    margin: 5px; /* Abstand von anderen Karten */
}



/*-------unterproduktseiten---------*/

.container_my {
    display: grid;
    grid-template-columns: 3fr 3fr 3fr ;
    gap: 0px;
    padding: 10px;
    padding-bottom: 50px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
	/*min-height: 800px;*/
	
	
}

.features{
font-size: 1.2rem;
}
.info{
font-size: 1.2rem;
padding:10px;
}
.color-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}



.color-box:hover {
    transform: scale(1.1);
}

.image-container {
    margin-top: 20px;
}

  .color-box {
    width: 40px;
    height: 40px;
    display: inline-block;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
    margin-right: 5px;
	padding:20px;
}

.selected-color {
        border: 3px solid #FFA733; /* Orange Umrandung ausgewählte farbbox*/
    }
        .colors {
            display: flex;
            gap: 10px;
            margin: 10px 0;
        }

        .color-schwarz { background-color: rgb(45, 48, 51); }
        .color-schiefergrau { background-color: rgb(87, 84, 78); }
        .color-dunkelrot { background-color: rgb(135, 52, 39); }
		.color-graphit { background-color: rgb(88, 88, 86); }
		.color-hellrot { background-color: rgb(220, 111, 91); } /*terracotta*/
		.color-braun { background-color: rgb(147, 108, 77); }
		

#color-name {
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: capitalize;
}

/* Schiefergrau mit Bild */
.color-schiefergrau {
    background-image: url('pics/schiefergrau.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-width: 40px;
    min-height: 40px;
    background-color: #6d6c6c; /* Fallback-Farbe */
}
.invisible{
	display: none;
}

/* Sicherstellen, dass das Bild auch auf kleinen Bildschirmen korrekt dargestellt wird */
@media (max-width: 768px) {
    .color-box {
        width: 35px; 
        height: 35px;
    }
    .color-schiefergrau {
        background-size: contain; /* Verhindert, dass das Bild auf kleinen Displays zu stark gezoomt wird */
    }
	.product-image img {
        max-width: 90%;
        height: auto;
    }
	.container_my {
        display: flex; /* Flexbox für kleinere Bildschirme */
        flex-direction: column; /* Oder eine andere Richtung, je nach Bedarf */
        width: 100%;
        padding: 20px;
        overflow: visible; /* Falls Bilder abgeschnitten werden */
    }

}


	
	.product-container {
 
    align-items: center;
    gap: 10px; /* Abstand zwischen Auswahl und Bild */
}

.product-options {
    display: flex;
    flex-direction: column;
    gap: 0px; /* Abstand zwischen Buttons */
}

.product-image {
        display: flex;
        flex-wrap: wrap;
        
        justify-content: center;
    }
.product-image img {
        max-width: 100%;
        max-height: 365px;
        object-fit: contain; /* Verhindert Verzerrung */
        display: block;
        margin: auto;
    }
.image-placeholder {
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        color: #FF6600;
        margin-top: 20px;
    }
	

.links {
    display: flex;
    flex-direction: column; /* Stapelt Buttons untereinander */
    align-items: flex-start; /* Links ausrichten */
     /* Abstand zwischen den Buttons */
    
}

.links h3 {
    margin-bottom: 10px; /* Abstand unter der Überschrift */
    font-size: 1.2rem;
    font-weight: bold;
}

.icon-link-bauspot {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url('./pics/png/BFBS_White-Gray-Circle.svg');
	background-size: cover;
	background-repeat: no-repeat;
	transition: background-image 0.3s ease;
}

.icon-link-bauspot:hover {
	background-image: url('./pics/png/BFBS_White-Orange-Circle.svg');
}

.div-link-bauspot {
	display: flex;
	margin-left: 115px;
	margin-top: -22px;
}

@keyframes flash {
  0%   { background-color: none; }
  100%  { background-color: #ffff00; }
}

.flash {
  animation: flash 1.5s ease-in-out;
}

/*.div-link-bauspot:hover {
	background-image: url('./pics/png/BFBS_White-Orange-Circle-small.png');
}*/