@import url("/assets/fonts/fonts.css"); 
:root {

    /* Farben */
  --wzw-primary-color: rgba(47, 51, 76, 1);
  --wzw-primary-color-light: rgba(47, 51, 76, 0.8);
  /* --wzw-secondary-color: rgba(184, 75, 51, 1);*/
  --wzw-secondary-color: rgba(255, 102, 69, 1);
  --wzw-secondary-color-light: rgba(255, 102, 69, 1);
  --wzw-bg-light: #f8f9fa; /* Sehr heller Hintergrund, oft für Sektionen */
  --wzw-bg-dark: rgba(47, 51, 76, 1);  
  --wzw-bg-darker: rgba(33, 35, 47, 1);
  --wzw-bg-white: #fff;
  --wzw-white: #fff;
  --wzw-bg-black: #000;
  --wzw-black: #000;
  --wzw-beige: rgba(247, 245, 241, 1);
  --wzw-bg-beige: rgba(247, 245, 241, 1);
  --wzw-bg-beige-dark: rgba(228, 222, 211, 1);
  --wzw-beige-dark: rgba(228, 222, 211, 1);
  --wzw-grey: rgba(51, 51, 51, 1);
  --wzw-bg-grey: rgba(51, 51, 51, 1);

    /* Fonts */


--wzw-font-family-base: 'VisbyCF-Regular', sans-serif; 
--wzw-font-family-headings: 'VisbyCF-Bold', sans-serif; 
--wzw-font-demi-bold: 'VisbyCF-DemiBold';


}
  
  
* {
        box-sizing: border-box;
    }

    body {
        background-color:var(--wzw-white);
        font-family: var(--wzw-font-family-base);
    }

    a {
	color: var(--bs-body-color);
    }

    .container-blue a {
	color: var(--wzw-white);
    }
/* buttons */

.button-orange {
border-radius: 30px;
padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;
padding-left: 16px;
gap: 10px;
background-color: var(--wzw-secondary-color-light);
color: var(--wzw-bg-white);
font-weight: 600;
}

.button-orange:hover, .button-orange:focus {
border-radius: 30px;
padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;
padding-left: 16px;
gap: 10px;
background-color: var(--wzw-secondary-color-light) !important;
color: var(--wzw-bg-white);
}

/*colors und background-colors*/

.color-orange {
    color: var(--wzw-secondary-color-light) !important;
}

.color-blue {
    color:var(--wzw-primary-color) !important;
}
.color-beige {
color: var(--wzw-beige) !important;
}
.color-black {
color: var(--wzw-black) !important;
}

.color-white {
color: var(--wzw-white) !important;
}

.color-beige-dark {
color: var(--wzw-bg-beige-dark) !important;
}



.bg-color-beige-dark {
background-color: var(--wzw-bg-beige-dark);
}


.color-bg-orange {
    background-color: var(--wzw-secondary-color-light) !important;
}

.color-bg-blue {
    background-color:var(--wzw-primary-color);
}
.color-bg-beige {
background-color: var(--wzw-bg-beige);
}

.color-bg-white{
   background-color: var(--wzw-bg-white); 
}

.link-orange {
   color: var(--wzw-secondary-color-light); 
}

.link-blue {
   color:var(--wzw-primary-color);
}

.link-beige {
   color: var(--wzw-bg-beige-dark);
}

.color-grey{
    color: var(--wzw-grey);
}

.color-split{

background: #F7F5F1;
background: linear-gradient(0deg, rgba(247, 245, 241, 1) 60%, rgba(255, 255, 255, 1) 60%);

}

.button-white {
border-radius: 30px;
padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;
padding-left: 16px;
gap: 10px;
background-color: var(--wzw-bg-white);
color: var(--wzw-bg-black);
font-weight: 500;
}

.button-white:hover, .button-white:focus {
border-radius: 30px;
padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;
padding-left: 16px;
gap: 10px;
background-color: var(--wzw-bg-white);
color: var(--wzw-secondary-color);
}







 h1 ,h2, h3, h4, h5, h6 {
    font-family: var(--wzw-font-family-headings);
    letter-spacing: 0.1em;
    
 }       

.font-bold {
    font-family: var(--wzw-font-family-headings);

}

.font-demi-bold {
    font-family: var(--wzw-font-demi-bold);
}


/*card styles*/

.card-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: stretch;


}

.card-box h2 {
    font-size: 20px;
    line-height: 24px;
    
}

.box-icon {

    margin: 15px;
border: 0px solid red;
}

.box-icon-table{
    max-width: 50px;
    border: 0px solid red;
}


.code-red{
    border: 1px solid red;
}

.code-green {
    border: 1px solid greenyellow;
    
}

.code-blue {
    border: 1px solid rgb(17, 141, 213);
    
}

.new-signal{
    
    display: block;
    margin-bottom: 20px;
    margin-left: 40px;
    background-color: #faa894;
    padding: 10px;
    border-radius: 10px;
}

.signal-title {
    
    color: var(--wzw-black);
    font-size: 16px;
    padding: 0px !important;
}
.signal-number {
     color: var(--wzw-black);
     font-size: 18px;
     padding: 0px !important;
}

.signal-number::before {
    content: "+";
     color: var(--wzw-black);
     font-size: 18px;
}

.signal-number::after {
    content: " / letzte Woche";
     color: var(--wzw-black);
     font-size: 12px;
}


.preis_small{
    font-weight: 900;
}

.ansprechpartner_small{
     font-weight: 900;
}

.mw-50{
    max-width: 50%;
}

ul.check_list li::before {
    content: "";
    width: 25px;
    height: 25px;
    background-image: url("/media/checkmark.png");
    background-repeat: no-repeat;
    background-position: 50%;
    position: absolute;
    margin-left: -30px;
    margin-top: -2px;
    
}


.check_list {
      list-style: none;
      
} 


.referenzen_img{
    max-width: 100% !important;
}


			.open-card-left{
				position: absolute;
				bottom: -20px;
				right: 90%;
			  
			}

			.open-card-right{
				position: absolute;
				bottom: -20px;
				right: 0%;
			}
/*accordion*/

.accordion-pic{
  background-image: url("/media/infofy-screenshot.jpg");
  background-position: top left ;
  background-size: contain;
  background-repeat: no-repeat;
}

        .interactive-container {
            display: flex;
            gap: 20px; /* 20px Abstand zwischen den Panels, jetzt immer aktiv */
            width: 100%;
            max-width: 1100px;
            margin: 50px auto;
            height: 650px; /* Feste Höhe für den Container */
            background:var (-wzw-white);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
           overflow: hidden;/*   Verhindert, dass Inhalt überläuft */
            border-radius: 10px; /* Abgerundete Ecken für den Container */
        }

        .panel {
            position: relative;
            height: 100%;
            /* Padding wird jetzt von den inneren Sektionen gesteuert */
            color:var(--wzw-bg-white);
            cursor: pointer;
            transition: width 0.7s ease-in-out; /* Transition auf width belassen */
         overflow: hidden; /*    Verhindert Scrollbalken auf den Panels selbst */
            border-radius: 10px; /* Abgerundete Ecken für die Panels */
            display: flex; /* Panel wird zum Flex-Container */
            flex-direction: column; /* Inhalt vertikal stapeln */
        }

        .panel-content-initial, .panel-content-expanded {
            opacity: 0;
            transition: opacity 0.5s ease-in-out 0.2s;
            height: 100%; /* Ensure content takes full height */
       /*     overflow: hidden;  Verhindert alle Scrollbalken (horizontal und vertikal) für den Inhalt */
            display: flex; /* Muss auch flex sein, um innere Sektionen zu steuern */
            flex-direction: column;
        }

        /* --- Farben und Startzustand --- */
        .panel-blue { background-color:var(--wzw-primary-color); }
        .panel-orange { background-color: var(--wzw-secondary-color); }

        .interactive-container.initial-state .panel {
            width: calc((100% - 20px) / 2); /* Angepasste Breite: Hälfte des verfügbaren Platzes nach Abzug des Gaps */
        }
        .interactive-container.initial-state .panel-content-initial {
            opacity: 1;
        }
        .interactive-container.initial-state .panel-content-expanded,
        .interactive-container.initial-state .panel-tab-collapsed {
            display: none;
        }

        /* --- Stile für den aufgeklappten Zustand --- */
        .panel.expanded {
            width: calc(100% - 20px - 70px); /* Erweitertes Panel: Gesamtbreite des Containers - Gap - Breite des zugeklappten Panels */
            cursor: default;
        }
        .panel.expanded .panel-content-expanded {
            opacity: 1;
            display: flex; /* Muss flex bleiben, um die erweiterten Sektionen zu steuern */
        }
        .panel.expanded .panel-content-initial,
        .panel.expanded .panel-tab-collapsed {
            display: none;
        }
        
        /* --- Stile für den zugeklappten Reiter (Tab) --- */
        .panel.collapsed {
            width: 70px; /* Feste Breite für das zugeklappte Panel (ca. wie ein Tab im Bild) */
            padding: 0;
        }
        .panel.collapsed .panel-content-initial,
        .panel.collapsed .panel-content-expanded {
            display: none;
        }
        .panel.collapsed .panel-tab-collapsed { /* Sicherstellen, dass der Tab sichtbar ist, wenn zugeklappt */
            display: flex; 
        }

        .panel-tab-collapsed {
            display: flex;
            flex-direction: column; /* Icon und Text vertikal stapeln */
            align-items: center; /* Horizontale Zentrierung der Elemente im Tab */
            justify-content: space-between; /* Vertikale Zentrierung des gestapelten Inhalts */
            height: 100%;
            margin-top: 20px;
        }
        .panel-tab-collapsed .material-icons {
            margin-bottom: 10px; /* Abstand zwischen Icon und Text */
            transform: none; /* Icon sollte nicht gedreht sein, wenn der Elterncontainer Spalten-Flex ist */
        }
        /* Neue Klasse für den Text im zugeklappten Tab, um Rotation anzuwenden */
        .panel-tab-collapsed .tab-text {
            writing-mode: vertical-rl; /* Text vertikal ausrichten */
            transform: rotate(180deg);
            font-size: 1.5rem;
            font-weight: bold;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        /* NEUE STILE für die Aufteilung der initialen Panel-Inhalte */
        .panel-top-section {
            padding: 2rem 2.5rem; /* Padding für den oberen Bereich */
            flex-grow: 1; /* Nimmt den verbleibenden Platz ein */
            display: flex;
            flex-direction: column;
            justify-content: center; /* Inhalt vertikal zentrieren */
            align-items: flex-start; /* Inhalt links ausrichten */
        }

        .panel-bottom-section {
            background-color: var(--wzw-bg-darker); /* Dunklerer Hintergrund */
            width: 100%; /* Volle Breite des Panels */
            padding: 1.5rem 2.5rem; /* Padding für den unteren Bereich */
            border-radius: 0 0 10px 10px; /* Abgerundete Ecken nur unten */
            display: flex;
            flex-direction: column;
            justify-content: start; /* Inhalt vertikal zentrieren */
            align-items: flex-start; /* Inhalt links ausrichten */
            flex-shrink: 0; /* Verhindert, dass dieser Bereich schrumpft */
                min-height: 40%;
        }
        /* Spezifische Farben für die untere Sektion der orangefarbenen Tafel */
        .panel-orange .panel-bottom-section {
            background-color: var(--wzw-bg-darker) /* Eine dunklere Nuance von Orange */
        }

        /* NEUE STILE für die Aufteilung der erweiterten Panel-Inhalte */
            .panel-top-section-expanded {
                padding: 2rem 2.5rem;
                flex-grow: 1;
                display: flex
            ;
                flex-direction: row;
                justify-content: space-between;
                align-items: stretch;
                color:var(--wzw-bg-white);
                position: relative;
                gap: 20px;
              
            }

        .panel-bottom-section-expanded {
            width: 100%;
            padding: 1.5rem 2.5rem;
            border-radius: 0 0 10px 10px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start; /* Oben ausrichten */
            align-items: flex-start; /* Links ausrichten */
            flex-shrink: 0;
            color:var(--wzw-bg-white); /* Standardtextfarbe */
            min-height: 40%
        }

        /* Farbanpassungen für Adresslisten-Panel (aufgeklappt) */
        .panel-blue.expanded .panel-top-section-expanded {
            background-color: var(--wzw-bg-dark); /* Hauptfarbe des Panels */
        }
        .panel-blue.expanded .panel-bottom-section-expanded {
            background-color: var(--wzw-bg-darker); /* Dunklerer Ton für den Boden */
        }

        /* Farbanpassungen für Business Account-Panel (aufgeklappt) */
        .panel-orange.expanded .panel-top-section-expanded {
            background-color: var(--wzw-secondary-color); /* Hauptfarbe des Panels */
        }
        .panel-orange.expanded .panel-bottom-section-expanded {
            background-color: var(--wzw-bg-darker); /* Dunklerer Ton für den Boden */
        }

        /* Allgemeine Stile für den Inhalt */
        .icon-header {
            font-size: 40px;
            border: 2px solidvar(--wzw-bg-white);
            border-radius: 50%;
            padding: 10px;
            margin-bottom: 1rem; /* Beibehalten, kann angepasst werden */
        }

        .icon-arrows {
            font-size: 34px;
            padding: 10px;
            margin-bottom: 1rem; /* Beibehalten, kann angepasst werden */
        }


        .panel-top-section h3, .panel-top-section-expanded h3 { /* Spezifischer für H3 */
            font-weight: bold;
            margin-top: 0;
            margin-bottom: 1rem;
        }
        .panel-top-section p, .panel-top-section-expanded p {
             margin-bottom: 1rem;
        }
        .panel-top-section .btn, .panel-top-section-expanded .btn { /* Spezifischer für Button */
             margin-top: 0.5rem;
             margin-bottom: 0;
        }

        .panel-bottom-section h5, .panel-bottom-section-expanded h5 {
            margin-bottom: 0.5rem;
            font-weight: bold;
        }
        .panel-bottom-section ul, .panel-bottom-section-expanded ul {
            list-style: none;
            padding-left: 0;
            margin-bottom: 0;
        }
        .panel-bottom-section ul li::before, .panel-bottom-section-expanded ul li::before {
            content: '•';
            margin-right: 6px;
            font-weight: bold;
            font-size:20px;
            color: var(--wzw-secondary-color-light);
        }

        /* Spezifische Stile für den aufgeklappten Inhalt (Überschreibungen) */

        .search-field {
            border: 1px solid var(--wzw-secondary-color-light);
            border-radius: 5px;
            display: flex;
            justify-content: center;
            
        }

        .search-field input {
            background-color: var(--wzw-bg-beige);
        }

        .btn-search{
            background-color: var(--wzw-secondary-color-light);
            border-radius: 0px 5px 5px 0px;
            border: none;
            white-space: nowrap;
            font-weight: 600;
        }
        .btn-search:hover, .btn-search:focus{
            color: var(--wzw-white);
        }        

        .search-box {
            align-items: center;
        }

        .panel-content-expanded .search-box {
            background-color: var(--wzw-bg-white);
         
            color: var(--wzw-primary-color);
            padding: 15px;
            border-radius: 20px;

        }
        .panel-content-expanded .search-box input {
       
     
        }
        .panel-content-expanded .search-box input::placeholder {
            color:var(--wzw-primary-color-light); /* Angepasster Placeholder-Text */
        }
        .panel-content-expanded .search-box .btn-custom-orange {

            color:var(--wzw-bg-white);
        }
        .panel-content-expanded .search-box .btn-custom-orange:hover {

        }
        .panel-content-expanded .search-box .text-muted {
       
        }
        .panel-content-expanded .search-box h5 {

        }
        
        .video-placeholder {
            background-color: var(--wzw-bg-darker);
            width: 100%;
            height: 250px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            margin-bottom: 1rem;
            z-index: 100;
        }

        video{
            max-width: 100%;
            max-height: 200px;
        }

        .badge-qualitaets-tipp {
            position: absolute;
            top: 0px;
            right: 0px;
            background: rgba(44,62,80,1);
            color:var(--wzw-bg-white);
            padding: 5px 8px;
            border-radius: 50px  4px 50px 50px;
            font-size: 0.9rem;
            font-weight: bold;
            z-index: 10; /* Sicherstellen, dass der Badge sichtbar ist */
        }
        .profi-tipp-badge { /* Klasse für den PREIS-TIPP im blauen Panel */
            background-color: var(--wzw-secondary-color-light);
            color:var(--wzw-bg-white);
            padding: 5px 8px;
            border-radius: 4px 50px 50px 50px;
            font-size: 0.8rem;
            font-weight: bold;
            margin-top: -32px;
            margin-left: -40px;
            position: absolute;

        }

        /* Textfarbenanpassungen für aufgeklappte Bottom-Sektionen */
        .panel-bottom-section-expanded h6,
        .panel-bottom-section-expanded p.small {
            color:var(--wzw-bg-white) !important;
        }
        .panel-bottom-section-expanded .btn-outline-secondary {
            border-color:var(--wzw-bg-white) !important;
            color:var(--wzw-bg-white) !important;
        }
        .panel-bottom-section-expanded .btn-outline-secondary:hover {
            background-color:var(--wzw-bg-white) !important;
            
        }
        .panel-orange .panel-content-expanded .btn-light { /* For "Jetzt testen" button in expanded orange panel */
            background: transparent;
            border: 2px solidvar(--wzw-bg-white);
            color:var(--wzw-bg-white);
            font-weight: bold;
            border-radius: 8px;
            margin-top: 1rem; /* Add some space if needed */
        }
        .panel-orange .panel-content-expanded .btn-light:hover {
            background:var(--wzw-bg-white);
          
        }


        .panel-tab-icon-text-left{
            display: flex;
            flex-direction: column;
            align-items: center;

            
        }


        .panel-tab-icon-text-right{
            display: flex;
            flex-direction: column;
            align-items: center;

            
        }





/* accordion vertikal */
.wzw-accordion-item{
    background-color: transparent;
    border-bottom: 1px solid var(--wzw-bg-beige-dark);
    box-shadow: none;
    border-radius: 0px;
    border-top: 0px solid white;
    border-left: 0px solid white;
    border-right: 0px solid white;
}

.wzw-accordion-button  {
 background-color: transparent;
}

.wzw-accordion-button .collapsed {
 background-color: transparent;
 box-shadow: none;
 border-radius: 0px;
}

.accordion-button:not(.collapsed) {
 background-color: transparent;
 box-shadow: none;
 border-radius: 0px;
}

.wzw-accordion-body{

}


/*Tabs horizontal*/

 li.nav-item button.nav-link.active {
    background-color: var(--wzw-bg-beige-dark);
    color: var(--wzw-black);
    border-radius: 20px 20px 0px 0px ;
    margin-bottom: -3px;
    border: 0px;
}
 li.nav-item button.nav-link {
    background-color: var(--wzw-bg-beige);
    color: var(--wzw-black);
    border-radius: 20px 20px 0px 0px ;
     border: 0px;
}

.tab-pane.fade.show.active{
    
    border-radius: 0px 20px 20px 20px;
}


/*main layout*/


           .top-navbar {
            background-color: var( --wzw-bg-darker); /* Dunkelgrau aus dem Bild */
            color:var (-wzw-white);
            font-size: 0.9rem;
        }

         .top-navbar .nav-link {
            color: var(--wzw-bg-white);
            padding: 0.5rem 1rem;
            border-right: 1px solid rgba(255, 255, 255, 0.2);
            text-decoration: none;
        }
        .top-navbar .nav-link:last-child {
            border-right: none;
        }

       .main-navbar {
            background-color:var(--wzw-bg-beige); /* Hellgrau/Weißer Hintergrund für den Hauptbereich */
            padding: 1rem 0;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .navbar-brand span {
            color: var(--wzw-secondary-color-light); /* Orange für "Wer" */
            font-weight: bold;
            font-size: 1.5rem;
        }
        .navbar-brand .text-gray {
            color: #6c757d; /* Grau für "ZuWem by INFOFY" */
            font-size: 1rem;
            font-weight: normal;
        }
        .main-navbar .nav-link {
            color: var(--wzw-grey);
            font-weight: 500;
            margin-left: 1.5rem;
            padding-bottom: 0px;
            border-bottom: 1px solid transparent;
        }

        .main-navbar .nav-link:hover {
            border-bottom: 1px solid var(--wzw-secondary-color-light);
            padding-bottom: 0px;

        }

        .btn-business-account {
            background-color:var(--wzw-bg-beige-dark); /* Beige-grau aus dem Bild */
            color:var(--wzw-grey);
            border-radius: 20px;
            padding: 0.5rem 1.5rem;
            font-weight: 500;
            border: none; /* Remove default button border */
        }
        .btn-business-account:hover {
            background-color:var(--wzw-secondary-color-light);
            color: var(--wzw-white);}

 .nav-link-button{

          margin-left: 1.5rem;
        }

        .icon-collapsed{

            max-width: 46px;

        }

        /* Footer Styles are included here for consistent styling across the page */
        .site-footer {
            background-color: var(--wzw-bg-dark); /* Dunkelgrau wie im Header */
            color: var(--wzw-white);
            padding: 3rem 0 0rem;
            margin-top: auto; /* Push footer to the bottom */
        }
        .footer-logo {
            color: var(--wzw-secondary-color-light); /* Orange für "Wer" */
            font-weight: bold;
            font-size: 1.5rem;
        }
        .footer-logo-subtext {
            color: #ccc;
            font-size: 0.8rem;
        }
        .footer-section h5 {
            color: var(--wzw-secondary-color-light); /* Orange für Überschriften */
            margin-bottom: 1rem;
            font-weight: bold;
        }
        .footer-section ul {
            list-style: none;
            padding: 0;
        }
        .footer-section ul li {
            margin-bottom: 0.5rem;
        }
        .footer-section ul li a {
            color: var(--wzw-white);
            text-decoration: none;
            font-size: 0.9rem;
        }
        .footer-section ul li a:hover {
            color: var(--wzw-secondary-color-light);
        }
        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 1rem;
            margin-top: 2rem;
            font-size: 0.85rem;
            color: #aaa;
        }
        .footer-bottom a {
            color: #aaa;
            text-decoration: none;
            margin-left: 1rem;
        }
        .footer-bottom a:hover {
            color:var (-wzw-white);
        }

        .footer-bottom2{
            background-color:var(--wzw-bg-darker);
        }



.img-round{
    border-radius: 40px;
}     

.search-img{
    max-width: 100%;
}

.dark-full-container {
    background: linear-gradient(180deg, var(--wzw-bg-dark)  0%, var(--wzw-bg-darker) 100%);
    color: var(--wzw-bg-white);
}

.container-beige {
    background-color: var(--wzw-bg-beige);
    border-radius: 8px;
}

.container-blue-box {
    background-color: var(--wzw-primary-color);
    border-radius: 8px;
    color: var(--wzw-white);
    
}


.light-full-container {
    
    background-color: var(--wzw-bg-beige);
    
}

.white-container {
    
    background-color: var(--wzw-bg-white);
    border-radius: 10px;
}

.card-beige-dark{
    background-color: var(--wzw-bg-beige-dark);
    border-radius: 20px;
    

}

.card-beige-dark label{
    border: 0px solid red;
    padding-left: 5px;
    margin-top: 5px;

}

.card-beige-dark .form-check {
    border: 0px solid rgb(0, 255, 106);
    
    
}

.card-beige-dark hr {
    border: 2px solid var(--wzw-white);
    color: var(--wzw-white);
    
}


.ki-wrapper{

display: flex;
position: absolute;
right: 10px;
bottom: -60px;
}

.ki-img {
max-width: 120px;
}


.ki-wrapper-collapsed{

display: flex;
position: absolute;
right: 10px;
top: 330px;
}

.ki-img-collapsed {
max-width: 120px;
}


.nav-mobil-bottom{
display: none;
}  


.pyramid-container{
   margin-top: 130px; 
}

.pyramid-bg-img{
max-width: 100%;
}

.cent15{

    top:-20px;
    padding-left: 40px; 
   
}

.step-icons{
    max-width: 60px;
    padding-bottom: 10px;
}

.max-icon{
    max-width: 40px;
    display: block;
}


.card{
    width: 100%;
}


.bestellform{
    max-width: 80%;
    margin: auto;
}

.bestellform label {
    border: 0px solid red;
    min-width: 200px;
}

.form-hint {
    padding-left: 200px;
}

.list-none{
    list-style-type:none;
    }

.list-none-item{
    list-style-position: outside;
    padding: 8px 5px;
    margin-left: -34px;
    border-bottom: 1px solid var(--wzw-white);
   
}  

.hints {

    font-size: 12px
}

.hints a:link, .hints a:visited {

   color: var(--wzw-black);
}

.hints a:hover, .hints a:focus {

   color: var(--wzw-secondary-color);
}

.underlined:link, .underlined:visited {
    color: var(--wzw-black);
    border-bottom: 1px solid var(--wzw-black);
    text-decoration: none;
}

.underlined:hover, .underlined:focus {
    color: var(--wzw-secondary-color);
    border-bottom: 1px solid var(--wzw-secondary-color);
    text-decoration: none;
}

h1 {
    word-break: break-word;
}



/*Modal layout*/

.modal_bestellen {
          
    background-color:var(--wzw-primary-color);
    opacity: 0.9 ; 
  
}


 .modal-content, .modal-footer, .modal-body{
    background-color:#fff;
    
}
.modal-header {
 
  border-bottom: 0px;

}

 .modal-body{
    background-color:#fff !important;
    
}


.auswahl_listen_item{
    list-style: none;
    list-style-position: outside;
    margin-left: -30px;
}

.ansprechpartner .form-check-label{
  display: flex !important;
  align-items: baseline;

  width: 100%;
  padding-top: 10px;
}

.ansprechpartner .form-select-sm{
 margin: 0px 10px;   

 max-width: 200px;
}

.zusatz_listen_container .form-check-label{
    margin-left: 10px;
   padding-top: 10px;
}
.zusatz_listen_container .form-check-input{
    border: 1px solid rgb(0, 17, 255);
  
}

.zusatz_listen_container .ansprechpartner.form-check label.form-check-label {
  
    
}




 .orange-outline {
    border: 2px solid var(--wzw-secondary-color);
    border-radius: 50px;
    color: var(--wzw-black);
}


 .orange-outline-button {
    border: 2px solid var(--wzw-secondary-color);
    border-radius: 50px;
    color: var(--wzw-black);
    padding: 1em; 
    background-color: var(--wzw-white) !important;
}

.orange-outline-button:hover, .orange-outline-button:focus {
    border: 2px solid var(--wzw-secondary-color-light) !important;
    border-radius: 50px;
    color: var(--wzw-white);
    background-color: var(--wzw-secondary-color-light) !important;
}

.company_list{
    border-bottom: 1px solid var(--wzw-beige-dark);
    padding-top: 14px;
}
  
/*company profile*/

.container-blue-overlap{
   background-image: linear-gradient(var(--wzw-white) 80%, var(--wzw-primary-color) 80%);

}

.container-red-overlap{
   background-image: linear-gradient(var(--wzw-white) 20%, var(--wzw-secondary-color) 20%);

}

.container-blue{
    background: var(--wzw-primary-color);
    color: var(--wzw-white);
}

.company_name{
    text-transform: uppercase;
    color: var(--wzw-primary-color);
    border-bottom: 1px solid var(--wzw-beige-dark);
    padding-bottom: 20px;

}

.company_profile_head{


}

.company_key_data{
    background-color: var(--wzw-bg-beige-dark);
    border-radius: 8px;
    padding: 10px 20px;
}

.key_data_point{
    border-bottom: 1px solid var(--wzw-white);
    padding:5px;
    gap: 0.5em;
}

.key_data_name{
    color: var(--wzw-secondary-color);

}

.company_key_data img, .company_key_data_invers img{
    max-width: 24px;
 
}



.un-stretch{
     width: auto; 
     object-fit: contain;
}

.progress-bar{
    background-color: var(--wzw-secondary-color-light) !important;
}

.action-box {
     background-color:var(--wzw-bg-darker);
     border-radius: 12px;
}


.jobs_header{
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.jobs_item{
    border-bottom: 1px solid var(--wzw-white);
    padding-bottom: 5px;
}

.jobs_content{
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;

}

.company_history_item{
    border-bottom: 1px solid var(--wzw-beige-dark);
}

.toplist_item{
    border-bottom: 1px solid var(--wzw-beige-dark);
}

.btn-search{

    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 0px;
    border-top-right-radius: 8px;

}

.input-search{

    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 8px;
    border-top-right-radius: 0px;
    background-color: var(--wzw-bg-beige);
    color: var(--wzw-grey);

}




/*Select cards*/
 .card {
            width: 100%; 
            border-radius: 8px; /* Abgerundete Ecken */
            overflow: hidden; /* Stellt sicher, dass Inhalte innerhalb der Ecken bleiben */
           
        }
        .card-header {
            background-color: var(--wzw-primary-color); /* Hintergrundfarbe */
            color:var(--wzw-white);
            padding: 1rem 1.25rem;
            border-bottom: none; /* Keine untere Linie */
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .card-header h3 {
            margin-bottom: 0;
            font-weight: 600;
        }
        .accordion-item {
            border: none; /* Keine Ränder für Accordion-Items */
            background-color: var(--wzw-bg-beige); /* Hellerer Hintergrund für die Hauptkategorien */
        }
        .accordion-button {
            background-color: var(--wzw-bg-beige-dark);/* Hintergrund der Buttons */
            color: #333;
            font-weight: 500;
            padding: 0.75rem 1.25rem; /* Angepasstes Padding */
            border-radius: 0; /* Keine abgerundeten Ecken */
            border-bottom: 1px solid #e0e0e0; /* Trennlinie */
            display: flex; /* Flexbox für Text und Icon */
            align-items: center;
            justify-content: flex-start; /* Text links */
            position: relative; /* Für die Checkbox-Positionierung */
            flex-grow: 1; /* Button soll den verfügbaren Platz einnehmen */
        }
        .accordion-button:not(.collapsed) {
            background-color: var(--wzw-beige);/* Hintergrund, wenn geöffnet */
            color: #333;
     
        }

        .accordion-button:focus {
          
        }
        .accordion-button::after {
            /* Standard Bootstrap-Pfeil entfernen, da wir eigene Icons verwenden */
            display: none;
        }
        .accordion-button i.bi {
            transition: transform 0.2s ease-in-out; /* Übergang für Pfeil-Rotation */
            margin-right: 0.5rem; /* Abstand zum Text */
        }
        .accordion-button:not(.collapsed) i.bi.bi-chevron-right {
            transform: rotate(90deg); /* Pfeil drehen, wenn geöffnet */
        }
        .accordion-button.collapsed i.bi.bi-chevron-down {
            transform: rotate(0deg); /* Pfeil zurückdrehen, wenn geschlossen */
        }
        .accordion-button.collapsed i.bi.bi-chevron-right {
             transform: rotate(0deg); /* Sicherstellen, dass der Pfeil nach rechts zeigt, wenn geschlossen */
        }

        .accordion-header {
            display: flex; /* Macht den Header zu einer Flexbox */
            align-items: center;
            justify-content: space-between; /* Verteilt Button und Checkbox */
            background-color: var(--wzw-bg-beige-dark);
            border-bottom: 1px solid #e0e0e0;
        }

   

        .accordion-header:last-child {
             border-bottom: none; /* Keine Linie am letzten Header */
        }

        .accordion-header .form-check {
            margin-right: 1.25rem; /* Abstand der Checkbox vom rechten Rand */
            flex-shrink: 0; /* Verhindert, dass die Checkbox schrumpft */
        }

        .accordion-body {
            padding: 0; /* Kein Padding für den Body, da die Listengruppe eigenes Padding hat */
        }
        .list-group-item {
             background-color: var(--wzw-bg-beige); /* Hintergrund der Unterkategorien */
            border: none; /* Keine Ränder */
            padding: 0.5rem 1.25rem 0.5rem 2.5rem; /* Padding für Einrückung */
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #555;
            font-size: 0.95rem;
            border-bottom: 1px solid #eee; /* Leichte Trennlinie zwischen Unterpunkten */
        }
        .list-group-item:last-child {
            border-bottom: none; /* Keine Linie am letzten Element der Liste */
        }

        .form-check-input{
            width: 20px;
            height: 20px;
            border-radius: 0px;
        }
        .accordion-header .form-check {
            flex-shrink: 0;
            justify-content: center;
            display: flex;
            margin-right: 10px;
           
        }

        .form-check-input[type="checkbox"] {
        border-radius: 0em;
         border: 1px solid black;
        }


         .form-check-input:checked {
            background-color: transparent; /* Beispiel: Grün */
            border-color: transparent;  /* Rahmenfarbe anpassen */
            /* Farbe des Hakens ändern: stroke='%23000' für Schwarz */

            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ff5722' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
            border: 1px solid black;
        }

        .form-check-input[type="checkbox"]:indeterminate{
            background-color: #fff; 
        }


/*Select cards end*/





/*tabelle*/

 /* Custom styling for table rows in regular table view */
        .table-bordered > :not(caption) > * > * {
            border-width: 0 0 1px 0 !important; /* Only bottom border for cells */
            border-color: #e0e0e0; /* Light gray border */
        }
        .table-bordered {
            border: none !important; /* Remove outer table border */
        }
        .table-striped > tbody > tr:nth-of-type(odd) > * {
            background-color: rgba(0, 0, 0, 0.03); /* Light stripe for odd rows */
        }
        .table-striped > tbody > tr:nth-of-type(even) > * {
            background-color: #ffffff; /* White for even rows */
        }
        .table th, .table td {
            padding: 1rem; /* More padding for better spacing */
            vertical-align: middle; /* Vertically align content */
        }
        /* Hide default table-responsive behavior for stacking */
        .table-responsive-stack .table {
            width: 100%; /* Ensure table takes full width of its container */
            border-collapse: separate; /* Allows for rounded corners if needed */
            border-spacing: 0; /* Remove default spacing */
        }

        /* --- Mobile / Stacked View (col-based) --- */
        @media (max-width: 767.98px) { /* For extra small to small devices */
            .table-responsive-stack {
                border-radius: 0.5rem; /* Apply rounded corners to the container */
                overflow: hidden; /* Hide overflow for rounded corners */
            }
            .table-responsive-stack .card {
                margin-bottom: 0.5rem; /* Space between stacked "rows" */
                border: none; /* Remove default card border */
                border-bottom: 1px solid #e0e0e0; /* Add custom bottom border */
                border-radius: 0; /* Remove default card rounded corners */
            }
            .table-responsive-stack .card:last-child {
                border-bottom: none; /* No bottom border for the last card */
            }
            .table-responsive-stack .card-body {
                padding: 0.2rem;
            }
            .table-responsive-stack .card-title {
                font-weight: 600;
                color: #343a40;
                margin-bottom: 0.5rem;
                background-color: #f2f2f2;
                padding:4px;
            }
            .table-responsive-stack .col-6 {
                word-wrap: break-word; /* Prevent content overflow */
            }
             /* Ensure mobile button container is full width and centered */
            .mobile-button-container {
                width: 100%;
                text-align: center;
                margin-top: 1rem;
                margin-bottom: 1rem;
            }
            .mobile-button-container .custom-button {
                width: auto; /* Buttons can size naturally */
                padding: 0.75rem 1rem; /* Adjust padding for mobile buttons */
                font-size: 0.875rem; /* Smaller font size for mobile buttons */
            }
             /* Add vertical line between columns in mobile view */
            .mobile-value-col-divider:first-child {
                border-right: 1px solid #e0e0e0; /* Right border for the first column */
            }
             /* Vertically align feature and value on mobile */
            .feature-value-row {
                align-items: center;
            }



            .ki-wrapper{

            display: block;
            position: absolute;
            right: 10px;
            bottom: -50px;
     
            }

            .ki-img {
            max-width: 100px;
            }


            .ki-wrapper-collapsed{

            display: flex;
            position: absolute;
            right: 10px;
            margin-top: -50px !important;
            display: border-box;

            }

            .ki-img-collapsed {
                
            }


            .video-placeholder{
                margin-bottom: 180px;
      
            }

            .panel-content-initial .panel-bottom-section h3.color-orange.fs-5{
                padding-top:50px;
            }

            .pyramid-container{
            margin-top: 0px; 
            }

            .mw-50{
                max-width: 90%;
            }


            .color-split{

background: #F7F5F1;
background: linear-gradient(0deg, rgba(247, 245, 241, 1) 80%, rgba(255, 255, 255, 1) 80%);

}

            /*navbar mobil*/


            .main-navbar {
                background-color: var(--wzw-primary-color);
                color: var(--wzw-white);
 
       
            }

            .navbar-collapse {

           
                min-height: 60vh;
            }
            .navbar-toggler, .navbar-toggler-icon{
                color: var(--wzw-white) ;

            }

        .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='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;

            border: var(--wzw-white) solid 3px;
            border-radius: 5px;
            font-size: 24px;      
            }

           .nav-item .nav-link {
            color: var(--wzw-white);
            font-weight: 600;
            font-size: 22px;
             
           }



  

            .nav-mobil-bottom {
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                border: none; /* Debugrahmen entfernen */
                padding: 0;
                margin: 0;
                list-style: none;
                margin-top: 50px;

            }

            .nav-mobil-bottom .nav-item {
                width: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
            
                padding: 10px 0;
                box-sizing: border-box;

            }

            /* Link-Styling */
            .nav-mobil-bottom .nav-link {
                color: var(--wzw-white);
                font-weight: 600;
                font-size: 16px;
                text-decoration: none;
                width: 100%;

            }

            /* ungerade: text nach rechts */
            .nav-mobil-bottom .nav-item:nth-child(odd) .nav-link {
                text-align: right;
                padding-right: 10px;
                border-right: 1px solid white;
            }

            /* gerade: text nach links */
            .nav-mobil-bottom .nav-item:nth-child(even) .nav-link {
                text-align: left;
                padding-left: 0px;

                margin-left: 8px;
            }

            /* Optional: Abstand zwischen Zeilen bei mehreren Reihen */
            .nav-mobil-bottom .nav-item:nth-child(n+3) {

            }


            .mobil-distance{
                margin-top: 80px;
            
            }


            .cent15{

               display: flex;
               top:auto; 
               padding: 10px;
            }

            .ansprechpartner .form-check-label {

            flex-direction: column;
            }

            .zusatz_listen_container .form-check-label {

            max-width: 80%;
            }

            
            .bestellform  {

                max-width: 100%;
            }

            .bestellform label {
                border: 0px solid red;
                min-width: 0px;
            }
            .form-hint {
                padding-left:0px;
            }

        }





        /* Responsive adjustments for screens smaller than 992px (e.g., tablets and mobile) */
        @media (max-width: 992px) {
            .interactive-container {
                flex-direction: column; /* Panels stack vertically */
                height: auto; /* Allow height to adjust based on content */
                margin: 20px auto;
                gap: 20px; /* Keep vertical gap between stacked panels */
            }

            .panel {
                width: 100% !important; /* Take full width on smaller screens */
                height: auto; /* Allow height to adjust */
                min-height: 150px; /* Minimum height for visibility when collapsed */
                padding: 0; /* Padding wird von den inneren Sektionen gesteuert */
            }

            .interactive-container.initial-state .panel {
                width: 100%; /* In initial state, panels take full width */
            }

            .panel-top-section, .panel-top-section-expanded {
                padding: 1rem; /* Padding für Mobile anpassen */
                height: auto; /* Auto-Höhe auf Mobile */
            }
            .panel-bottom-section, .panel-bottom-section-expanded {
                padding: 1rem; /* Padding für Mobile anpassen */
                height: auto; /* Auto-Höhe auf Mobile */
            }

            .panel-tab-collapsed {
                flex-direction: row; /* Icon und text side-by-side */
                justify-content: flex-start; /* Align content to the start */
                align-items: center; /* Vertically align items */
                padding: 1rem;
                writing-mode: horizontal-tb; /* Horizontal text for tabs */
                transform: rotate(0deg); /* No rotation for the container */
            }

            .panel-tab-collapsed .material-icons {
                margin-right: 10px; /* Space between icon and text */
                margin-bottom: 0; /* Remove vertical margin */
                transform: rotate(0deg); /* Ensure icon is not rotated */
            }
            .panel-tab-collapsed .tab-text {
                writing-mode: horizontal-tb; /* Text horizontal */
                transform: rotate(0deg); /* No rotation for text */
                font-size: 1.2rem; /* Smaller font size for mobile tabs */
                letter-spacing: normal; /* Normal letter spacing */
            }

            .panel.collapsed {
                height: 80px; /* Fixed height for collapsed state on mobile */
                width: 100%;
            }
            .panel.expanded {
                width: 100%; /* Expanded panel takes full width */
                height: auto; /* Auto height when expanded */
            }
            .panel.expanded .panel-content-expanded {
                padding-top: 0; /* No extra padding for expanded content container */
            }

            .profi-tipp-badge {
            
            padding: 5px 8px;
            border-radius: 50px  4px 50px 50px;
            right:0px;
            margin-top:-16px;   
              
            position: absolute;
            }
	    
			.open-card-left{
                position: absolute;
                bottom: -5px;
                transform: rotate(90deg);
                right: -5px;
                right: 4%;
                margin: 0px;
                padding: 0px;
                
            }

            .open-card-right{
                position: absolute;
                bottom: -5px;
                transform: rotate(-90deg);
                right: 0%;
                margin: 0px;
                padding: 0px;
              
            }	    


/* buttons */

.button-orange {
border-radius: 30px;
padding-top: 4px;
padding-right: 8px;
padding-bottom: 4px;
padding-left: 8px;
gap: 10px;
background-color: var(--wzw-secondary-color-light);
color: var(--wzw-bg-black);
font-weight: 600;
}

.button-orange:hover, .button-orange:focus {
border-radius: 30px;
gap: 10px;
background-color: var(--wzw-secondary-color-light) !important;
color: var(--wzw-bg-white);
padding-top: 4px;
padding-right: 8px;
padding-bottom: 4px;
padding-left: 8px;
}

.button-orange-outline{
border-radius: 30px;
border: 1px solid var(--wzw-secondary-color)    
}

/* tablke icons mobile*/

.box-icon-table{
    max-height: 40px;
    border: 0px solid red;
}



            .ki-wrapper{

            display: block;
            position: absolute;
            right: 10px;
            bottom: -50px;
     
            }

            .ki-img {
            max-width: 100px;
            }


            .ki-wrapper-collapsed{

            display: flex;
            position: absolute;
            right: 10px;
            margin-top: -30px;
            }

            .ki-img-collapsed {
        
            }

            .video-placeholder{
                margin-bottom: 180px;
      
            }




        }
	
	.alert-wzw {
	    --bs-alert-color: var(--wzw-bg-white);
	    --bs-alert-bg: var(--wzw-secondary-color-light);
	    --bs-alert-border-color: var(--wzw-secondary-color);
	    --bs-alert-link-color: var(--wzw-bg-white);
	}