@charset "utf-8";

/* --- 1. SCHRIFTARTEN --- */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: url('../fonts/open-sans-v34-latin-300.eot'); src: local(''), url('../fonts/open-sans-v34-latin-300.eot?#iefix') format('embedded-opentype'), url('../fonts/open-sans-v34-latin-300.woff2') format('woff2'), url('../fonts/open-sans-v34-latin-300.woff') format('woff'), url('../fonts/open-sans-v34-latin-300.ttf') format('truetype'), url('../fonts/open-sans-v34-latin-300.svg#OpenSans') format('svg'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('../fonts/open-sans-v34-latin-regular.eot'); src: local(''), url('../fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), url('../fonts/open-sans-v34-latin-regular.woff') format('woff'), url('../fonts/open-sans-v34-latin-regular.ttf') format('truetype'), url('../fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url('../fonts/open-sans-v34-latin-600.eot'); src: local(''), url('../fonts/open-sans-v34-latin-600.eot?#iefix') format('embedded-opentype'), url('../fonts/open-sans-v34-latin-600.woff2') format('woff2'), url('../fonts/open-sans-v34-latin-600.woff') format('woff'), url('../fonts/open-sans-v34-latin-600.ttf') format('truetype'), url('../fonts/open-sans-v34-latin-600.svg#OpenSans') format('svg'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url('../fonts/open-sans-v34-latin-700.eot'); src: local(''), url('../fonts/open-sans-v34-latin-700.eot?#iefix') format('embedded-opentype'), url('../fonts/open-sans-v34-latin-700.woff2') format('woff2'), url('../fonts/open-sans-v34-latin-700.woff') format('woff'), url('../fonts/open-sans-v34-latin-700.ttf') format('truetype'), url('../fonts/open-sans-v34-latin-700.svg#OpenSans') format('svg'); }

/* --- 2. GRUNDSTRUKTUR --- */
* { box-sizing: border-box; } 
body { font-family: 'Open Sans', sans-serif, 'Verdana', sans-serif; margin: 0; font-size: 16px; overflow-x: hidden; } 
img { border: none; max-width: 100%; height: auto; } 
.clear { clear: both; margin: 0; padding: 0; height: 0; }
.punktlinie { margin: 15px 0 30px 0; border-top: 1px dotted #CDCBCC; clear: both; }
.text_normal { font-size: 16px; line-height: 1.6; } 

/* --- 3. SEITENLEISTE (70/30) --- */
.content-wrapper { display: flex; gap: 80px; justify-content: space-between; align-items: flex-start; }
.main-content { width: 65%; } 
.sidebar { width: 30%; }
.sidebar-logos-top { text-align: center !important; margin-bottom: 50px !important; margin-top: 20px !important; }
.sidebar-top-img-full { width: 100% !important; max-width: 100% !important; height: auto !important; display: block !important; margin: 0 auto 30px auto !important; }
.sidebar-top-img-small { max-width: 150px !important; height: auto !important; display: block !important; margin: 0 auto 30px auto !important; object-fit: contain !important; }

.sidebar-promo { text-align: center !important; padding: 40px 20px !important; background: #ffffff !important; border: 1px solid #017dc7 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; border-radius: 4px !important; margin-bottom: 50px !important; }
.sidebar-promo img { max-width: 150px !important; margin: 0 auto 25px auto !important; display: block !important; }
.promo-button-blue { display: inline-block !important; margin-top: 25px !important; background-color: #017dc7 !important; color: #ffffff !important; padding: 12px 25px !important; text-decoration: none !important; font-weight: bold !important; border-radius: 3px !important; font-size: 14px !important; border: none !important; }
.promo-button-blue:hover { background-color: #01629c !important; }

/* --- 4. HEADER & TOP --- */
#zeile1 { background-color: #A7253C; background-image: url(../images/hg_bb_rot.png); background-repeat: repeat-x; min-height: 44px; width: 100%; }
#top_bar_1400 { max-width: 1400px; width: 100%; margin: 0 auto; padding: 12px 15px; color: #FFF; font-size: 13px; display: flex; justify-content: flex-end; align-items: center; }
#top_bar_1400 a { color: #FFF; text-decoration: none; padding: 0 5px; }

#zeile2_bg { 
    background-color: #434042; 
    background-image: url(../images/hg_bb_dunklesgrau.png); 
    background-repeat: repeat-x; 
    height: 85px; 
    position: sticky; /* Geändert: Heftet das Element an */
    top: 0;           /* Abstand zum oberen Rand beim Scrollen */
    z-index: 9999;    /* Erhöht, damit das Menü immer über Bildern und Texten liegt */
}
#header_1400 { max-width: 1400px; width: 100%; margin: 0 auto; height: 85px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; }
#logo { width: 300px; flex-shrink: 0; height: 85px; display: flex; align-items: center; }

/* --- 5. NAVIGATION --- */
#menu-toggle { display: none; font-size: 42px; background: none; border: none; color: #FFFFFF; cursor: pointer; }
#main-nav { margin-left: 50px; flex-grow: 1; height: 85px; display: flex; align-items: center; }
#main-nav ul { margin: 0; padding: 0; list-style: none; display: flex; width: 100%; height: 100%; }
#main-nav li { position: relative; display: flex; align-items: center; justify-content: center; flex: 1; list-style: none; }
#main-nav > ul > li > a { display: block; color: #000; text-decoration: none; font-size: 16px; padding: 8px 0; border-right: 1px solid #000; width: 100%; text-align: center; }
#main-nav > ul > li:last-child > a { border-right: none; }

#main-nav ul li ul { position: absolute; visibility: hidden; background: #992237; width: 250px; top: 85px; left: 0; padding: 0; margin: 0; z-index: 1001; box-shadow: 0px 5px 10px rgba(0,0,0,0.3); flex-direction: column; height: auto; }
#main-nav ul li:hover > ul { visibility: visible; }
#main-nav ul li ul li a { display: block; color: #FFFFFF !important; border-bottom: 1px solid rgba(255,255,255,0.3); padding: 12px 15px; text-align: left; font-size: 15px; text-decoration: none; width: 100%; }

/* --- 6. MARKETING & STARTSEITENBOXEN --- */
#startseite_marketing_bg { background-color: #f4f4f4; padding: 30px 0; border-bottom: 1px solid #ddd; }
#startboxen_container { max-width: 1400px; margin: 0 auto; display: flex; padding: 0 15px; gap: 20px; }
.startseite-box { background: transparent; border: 1px solid #ccc; padding: 25px; flex: 1; display: flex; flex-direction: column; }
.startseite-box h2 { font-size: 18px; color: #A7253C; margin: 0 0 20px 0; min-height: 45px; }

/* --- 7. INHALT --- */
#inhalt_1400 { max-width: 1400px; margin: 0 auto; padding: 30px 15px; min-height: 400px; }
#inhalt_1400 h1 { font-size: 24px; color: #A7253C; margin-bottom: 20px; clear: both; }
.prod2_links, .prod2_rechts { float: left; width: 48%; margin-right: 4%; margin-bottom: 20px; }
.prod2_rechts { margin-right: 0; }
.prod3_links { float: left; width: 31%; margin-right: 3.5%; margin-bottom: 20px; }
.prod3_rechts { float: left; width: 31%; margin-bottom: 20px; }
.bild_gross { width: 100%; height: auto; display: block; margin-bottom: 10px; }

/* --- 8. FOOTER --- */
#footer_breit { background: #2F2D2E; color: #FFF; padding: 40px 0; }
#footer_1400 { max-width: 1400px; width: 100%; margin: 0 auto; display: flex; justify-content: space-between; padding: 0 15px; flex-wrap: wrap; }
#footer_1400 .links, #footer_1400 .mitte, #footer_1400 .rechts { width: 32%; }
.footer-contact, .footer-contact a { color: #FFFFFF !important; text-decoration: underline !important; }

#footer_1400 .mitte p { margin: 0 !important; padding: 0 !important; }
#footer_1400 .mitte a { display: block !important; color: #ffffff !important; text-decoration: none !important; padding: 10px 15px !important; background-color: transparent !important; border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; transition: background-color 0.3s ease !important; }
#footer_1400 .mitte a:first-child { border-top: 1px solid rgba(255, 255, 255, 0.2) !important; }
#footer_1400 .mitte a:hover { background-color: rgba(255, 255, 255, 0.15) !important; }

/* --- 9. BREAKPOINTS (MOBIL-FIX) --- */
@media (max-width: 900px) {
    .hide-mobile { display: none !important; } 
    #top_bar_1400 { justify-content: center !important; text-align: center !important; }
    #slider_container_breit { display: none !important; } 
    
    #header_1400 { padding: 0 15px; height: 85px; display: flex !important; justify-content: space-between !important; align-items: center !important; }
    #logo { order: 2; width: auto; }
    #menu-toggle { display: block !important; order: 1; color: #FFFFFF; font-size: 42px; z-index: 1100; }
    
    #main-nav { display: none; width: 100%; position: absolute; top: 85px; left: 0; background: #434042 !important; z-index: 1000; height: auto; border-top: 2px solid #A7253C; margin-left: 0; }
    #main-nav.open { display: block; }
    #main-nav ul { flex-direction: column !important; display: block !important; width: 100% !important; height: auto !important; }
    #main-nav li { display: block !important; width: 100% !important; height: auto !important; position: relative !important; }
    #main-nav > ul > li > a { text-align: left !important; padding: 15px 20px !important; border-right: none !important; border-bottom: 1px solid #5a5658 !important; color: #FFF !important; display: block !important; width: 100% !important; }
    
    /* Untermenü Handy: Position statisch unter dem Hauptpunkt */
    #main-nav ul li ul { position: static !important; visibility: visible !important; display: block !important; width: 100% !important; background: #992237 !important; max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out; box-shadow: none !important; }
    #main-nav li.open-sub > ul { max-height: 2000px !important; }
    #main-nav ul li ul li a { color: #FFF !important; padding-left: 40px !important; background: transparent !important; }

    .content-wrapper { flex-direction: column; gap: 40px; }
    .main-content, .sidebar { width: 100% !important; }
    .sidebar { margin-top: 30px; }
    #startboxen_container { flex-direction: column !important; gap: 20px !important; }
    .startseite-box { width: 100% !important; margin-bottom: 20px !important; }

    .prod2_links, .prod2_rechts, .prod3_links, .prod3_rechts { float: none !important; width: 100% !important; margin-right: 0 !important; display: block !important; }
    #inhalt_1400 .bild_rechts, #inhalt_1400 .bild_links { float: none !important; margin: 0 auto 15px auto !important; display: block !important; width: 100% !important; }

    #footer_1400 { flex-direction: column !important; text-align: center !important; gap: 40px; }
    #footer_1400 .links, #footer_1400 .mitte, #footer_1400 .rechts { width: 100% !important; display: block !important; margin-bottom: 20px; }
    #footer_1400 .rechts img { margin: 0 auto; display: block; max-width: 200px; }
}