:root {
            --brand-blue: #005a9c;        /* Hauptfarbe */
            --brand-green: #4ba53b;       /* Akzentfarbe */
            --brand-lightblue: #7fbce6;   /* Sekundärfarbe */
            --gray-soft: #f3f6fa;         /* Content-Hintergrund */
            --gray-dark: #333333;         /* Text */
        }

        body {
            font-family: 'Roboto', sans-serif;
            background: #ffffff;
            color: var(--gray-dark);
        }

        /* Sticky Header Wrapper */
        .sticky-header {
            position: sticky;
            top: 0;
            z-index: 9999;
        }

        /* TOPBAR */
        .topbar {
            background: var(--gray-soft);
            border-bottom: 1px solid #dce3eb;
            padding: 0.4rem 0;
        }

        .logo-text {
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--brand-blue);
            text-decoration: none;
        }

        .logo-sub {
            font-size: 0.8rem;
            color: #6b7280;
        }

        .topbar-link {
            color: var(--brand-blue);
            font-weight: 500;
            margin-left: 1rem;
            text-decoration: none;
        }

        .topbar-link:hover {
            color: var(--brand-green);
        }

        .search-box input {
            border-radius: 5px;
            padding-left: 12px;
            font-size: 0.85rem;
        }

        .cart-icon {
            position: relative;
        }

        .cart-icon .badge {
            position: absolute;
            top: -6px;
            right: -10px;
            font-size: 0.7rem;
        }

        /* MAIN NAVIGATION */
        .mainnav {
            background: var(--brand-blue);
        }

        .mainnav .nav-link {
            color: #fff !important;
            padding: 1rem 1.4rem;
            font-size: 1.05rem;
            font-weight: 500;
        }

        .mainnav .nav-link:hover {
            background: rgba(255,255,255,0.12);
            color: var(--brand-green) !important;
        }

        /* SLIDER */
        .carousel-item .carousel-caption {
			bottom: 16%;
        }

		.carousel-caption {
			background: rgba(0, 90, 156, 0.55);
			padding: 20px 25px;
			border-radius: 10px;
			display: block; /* wichtig, damit width greift */
			width: 600px;   /* feste Breite */
			max-width: 90%; /* falls Bildschirm kleiner ist */
			backdrop-filter: blur(2px);
		}

        .carousel-caption h1 {
            font-size: 2rem;
            font-weight: 700;
            text-shadow: 0 4px 12px rgba(0,0,0,0.4);
        }

        .carousel-caption p {
            font-size: 0.9rem;
            max-width: 600px;
            text-shadow: 0 3px 10px rgba(0,0,0,0.4);
        }

        #heroSlider .carousel-item {
            min-height: 450px; /* angepasst für 1000px Bilder */
        }

        #heroSlider .carousel-item img {
            height: 450px;
            width: 100%;
            object-fit: cover;
        }

        #sliderPauseBtn {
            bottom: 20px;
            right: 20px;
            z-index: 20;
        }

        /* SECTIONS */
        .section {
            padding: 3rem 0;
            background: var(--gray-soft);
        }

        .section-light {
            background: #ffffff;
        }

        .section-title {
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--brand-blue);
        }

        .feature-card,
        .product-card,
        .contact-card {
            background: #ffffff;
            border-radius: 10px;
            padding: 1.5rem;
            box-shadow: 0 4px 16px rgba(0,0,0,0.05);
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .feature-card i,
        .product-card i {
            font-size: 2rem;
            color: var(--brand-green);
        }

        .product-card-image,
        .media-thumb {
            background: #d8dde5;
            min-height: 160px;
            border-radius: 10px;
        }

        .media-thumb {
            position: relative;
        }

        .media-thumb .play-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2.5rem;
            color: var(--brand-green);
        }

        /* FOOTER */
        footer {
            background: var(--brand-blue);
            color: #ffffff;
            padding: 2rem 0;
        }

        footer a {
            color: #d1e7ff;
            text-decoration: none;
        }

        footer a:hover {
            color: #ffffff;
        }

        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.2);
            margin-top: 1rem;
            padding-top: 1rem;
            font-size: 0.85rem;
        }

		/* Buttons in Weber-Grün */
		.btn-primary {
			background: var(--brand-green);
			border-color: var(--brand-green);
			color: #ffffff;
		}
		
		.btn-primary:hover,
		.btn-primary:focus {
			background: var(--brand-blue);
			border-color: var(--brand-blue);
			color: #ffffff;
		}

		/* Slider-Texte nur auf Desktop anzeigen */
		@media (max-width: 767px) {
			#heroSlider .carousel-caption {
				display: none !important;
			}
		}

/* ============================================================
   HEADER – Mobile Umbau (Logo oben, Icons zentriert)
   ============================================================ */

@media (max-width: 767px) {

    /* Topbar-Container wird vertikal statt horizontal */
    .topbar .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
    }

    /* Logo */
    .topbar .logo-text {
        font-size: 1.4rem;
        white-space: nowrap;
    }

    /* Subline */
    .topbar .logo-sub {
        font-size: 0.85rem;
        margin-top: -4px;
    }

    /* Icons zentriert unter dem Logo */
    .topbar-icons {
        display: flex !important;
        justify-content: center !important;
        gap: 18px;
        width: 100%;
        margin-top: 6px;
    }

    /* Warenkorb-Badge fixieren */
    .topbar-icons .cart-icon {
        position: relative;
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .topbar-icons .badge {
        position: absolute;
        top: -6px;
        right: -6px;
        font-size: 0.7rem;
        padding: 3px 5px;
        border-radius: 50%;
    }
}