h2 {
    font-size: 80px;
}

.h2_description {
    font-weight: 600 !important;
}

h3 {
    font-size: 24px;
}

h4 {
    font-weight: normal !important;
    padding-bottom: 0px !important;
}

/* ------------------------------------------------------------------------------------ 
   ______ ____  ____   ______ ____   ___     __  ___ ______ 
  /_  __// __ \/ __ \ / ____// __ \ /   |   /  |/  // ____/ 
   / /  / / / / /_/ // /_   / /_/ // /| |  / /|_/ // __/    
  / /  / /_/ / ____// __/  / _, _// ___ | / /  / // /___    
 /_/   \____/_/    /_/    /_/ |_|/_/  |_|/_/  /_//_____/    
                                                            
/* ------------------------------------------------------------------------------------ */

#top_frame {
    height: 700px !important;
    min-height: 700px !important;
    max-height: 700px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    position: relative !important; 
}

#top_frame .main-wrapper {
    height: 700px !important;
    min-height: 700px !important;
    max-height: 700px !important;
}

#top_frame .top_frame_container {
    display: flex !important;
    flex-direction: row !important; 
    align-items: center !important; 
    justify-content: flex-start !important; 
    height: 100% !important;
    padding-top: 120px !important;
    margin-top: 0 !important;
}

.top_frame_iconbox {
    width: 210px;
    height: 210px;
    min-width: 210px; 
    background-color: var(--unit_druck);
    margin-right: 25px; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.top_frame_iconbox img {
    width: 210px; 
    height: auto;
}

.top_frame_textcontent {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bread_crumb_navigation {
    position: absolute;
    bottom: 50px;
    left: 0;
    font-family: 'Unageo', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 100%;
    color: white;
    z-index: 20;
}

.bread_crumb_navigation a {
    color: white;
    text-decoration: underline;
    text-transform: uppercase;
    transition: text-decoration 0.2s ease;
}

.bread_crumb_navigation a:hover {
    text-decoration: none;
}

.bread_crumb_separator {
    margin: 0 8px;
    text-decoration: none !important;
}

.bread_crumb_navigation span.current {
    text-decoration: none;
    text-transform: uppercase;
    opacity: 0.8;
}


/* ------------------------------------------------------------------------------------ 
   ______ ____   _   __ ______ ______ _   __ ______ ______ ____   ___     __  ___ ______ 
  / ____// __ \ / | / //_  __// ____// | / //_  __// ____// __ \ /   |   /  |/  // ____/ 
 / /    / / / //  |/ /  / /  / __/  /  |/ /  / /  / __/  / /_/ // /| |  / /|_/ // __/    
/ /___ / /_/ // /|  /  / /  / /___ / /|  /  / /  / /    / _, _// ___ | / /  / // /___    
\____/ \____//_/ |_/  /_/  /_____//_/ |_/  /_/  /_/    /_/ |_|/_/  |_|/_/  |_/ /_____/    
                                                                                        
/* ------------------------------------------------------------------------------------ */

#content_frame {
    background-color: var(--infinite_gray_light) !important;
    background-image: none !important; 
    background-size: auto !important;
    width: 100%;
    position: relative;
	overflow: visible !important;
    padding: 0 !important;
}

#content_frame::before {
   background-image: none !important;    
  width: 100%;
  height: 100%;
}

/* NEU: Das Detail-Layout-System */
.detail_layout_wrapper {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    width: 100%;
}

.product_sidebar {
    flex: 0 0 calc((100% - (3 * 28px)) / 4);
    background-color: var(--unit_druck);
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box !important;
}

.product_detail_content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product_grid_row {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    width: 100%;
}

.product_image_box, 
.product_text_box {
    flex: 0 0 calc((100% - (2 * 28px)) / 3);
    box-sizing: border-box;
}

.flex_box_4col_product_headline {
    font-family: 'Unageo';
    font-weight: bold;
    font-size: 24px;
    line-height: 110%;
    color: white;
    margin-bottom: 22px;
    text-transform: uppercase;
}

.product_sidebar_list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product_sidebar_list a {
    font-weight: 300;
    line-height: 140%;
    color: white;
    text-decoration: none;
    transition: font-weight 0.2s ease;
}

.product_sidebar_list a:hover {
    font-weight: bold;
}

.product_sidebar_list a.active {
    font-weight: bold;
}

.product_image_box img {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
	transition: box-shadow 0.3s ease-in-out;
}

.product_image_box img:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.product_text_box {
    color: var(--infinite_gray_dark) !important;
}

.product_text_box h3 {
    color: var(--infinite_gray_dark) !important;
    margin-bottom: 15px;
}


/* ------------------------------------------------------------------------------------ 
   _____ ____   ______ ______ _____ ___    __    ______ ____   ___    __  ___ ______ 
  / ___// __ \ / ____// ____//_  _//   |  / /   / ____// __ \ /   |  /  |/  // ____/ 
  \__ \/ /_/ // __/  / /      / / / /| | / /   / __/  / /_/ // /| | / /|_/ // __/    
 ___/ / ____// /___ / /___  _/ / / ___ |/ /___/ /    / _, _// ___ |/ /  / // /___    
/____/_/    /_____/ \____/ /___//_/  |_/_____/_/    /_/ |_|/_/  |_/_/  /_//_____/    

/* ------------------------------------------------------------------------------------ */

/* SPECIAL FRAME Schriftgröße */

.special_frame p {
  font-size: 19px;
  line-height: 1.3;
}

/* Responsive Anpassung */

@media screen and (max-width: 1440px) {
    #top_frame,
    #top_frame .main-wrapper,
    #top_frame .top_frame_container {
        height: 45vw !important;
        min-height: auto !important; /* Wichtig, um die 580px zu lösen */
        max-height: none !important;
    }

    #top_frame .top_frame_container {
        padding-top: 80px !important; /* Weniger Abstand oben, da flacher */
    }

    h1 {
        font-size: 20px !important;
    }	

    h2 {
        font-size: 5vw !important;
    }	

	.h2_description {
		font-size: 20px !important;
		margin-top: 14px !important;
	}	
	
	h3 {
		font-size: 22px !important;
		margin-bottom: 18px !important;
	}
	
	.special_frame .flex_box_2col p {
        font-size: 17px !important;
    }
	
	.flex_box_4col_product_headline {
		font-size: 22px !important;
		margin-bottom: 14px !important;
	}
	
}

@media screen and (max-width: 1000px) {
    #top_frame,
    #top_frame .main-wrapper,
    #top_frame .top_frame_container {
        height: 60vw !important;
    }

    #top_frame .top_frame_container {
        padding-top: 100px !important; 
    }

    h1 {
        font-size: 17px !important;
		margin-bottom: 10px !important;
    }		

	.h2_description {
		font-size: 17px !important;
	}
	
	h3 {
		font-size: 20px !important;
		margin-bottom: 0px !important;
	}
	
	h4 {
		font-size: 27px !important;
	}
	
	.special_frame .flex_box_2col p {
        font-size: 16px !important;
    }
	
	.flex_box_4col_product_headline {
		font-size: 21px !important;
		margin-bottom: 10px !important;
	}
}

@media screen and (max-width: 600px) {
    #top_frame,
    #top_frame .main-wrapper,
    #top_frame .top_frame_container {
        height: 480px !important;
    }

    h1 {
        font-size: 14px !important;
		margin-bottom: 10px !important;
    }

    h2 {
        font-size: 10.5vw !important;
    }			

	.h2_description {
		font-size: 17px !important;
	}
	
	h3 {
		font-size: 20px !important;
	}
	
	h4 {
		font-size: 20px !important;
	}
	
	.special_frame .flex_box_2col p {
        font-size: 16px !important;
    }
	
	.spacing_70  { height: 30px !important; }
}

/* --- AB 1200 PX: 2 SPALTEN CONTENT (Alle Spalten inkl. Sidebar gleich groß) --- */
@media screen and (max-width: 1200px) {
    /* Sidebar (1/3) + Content (2/3) */
    .product_sidebar {
        flex: 0 0 calc((100% - (2 * 28px)) / 3) !important;
    }

    .product_grid_row > * { 
        flex: 0 0 calc((100% - 28px) / 2) !important; 
    }
}

/* --- AB 900 PX: 1 SPALTE CONTENT (Sidebar 50% | Content 50%) --- */
@media screen and (max-width: 900px) {
    .product_sidebar {
        flex: 0 0 calc((100% - 28px) / 2) !important;
		font-size: 19px;
    }

    .product_grid_row > * { 
        flex: 0 0 100% !important; 
    }
}

/* --- AB 500 PX: STACKED (Sidebar volle Breite | Content darunter volle Breite) --- */
@media screen and (max-width: 500px) {
    .detail_layout_wrapper {
        flex-direction: column !important;
        gap: 40px; /* Mehr Abstand zwischen Sidebar und Content auf Mobile */
    }

    .product_sidebar,
    .product_grid_row > * {
        flex: 0 0 100% !important;
        width: 100%;
    }
}