:root {
    --gap: 1rem;
    --max-width: 1400px;
    --padding: 20px;
    --border-radius: 5px;
    --gray-100: #f5f5f5;
    --border-light: #ddd;
    --border-dark: #444;

    --col-span-20: 1 / span 1;
    --col-span-25: 1 / span 1;
    --col-span-33: 1 / span 2;
    --col-span-40: 1 / span 2;
    --col-span-50: 1 / span 3;
    --col-span-60: 1 / span 4;
    --col-span-66: 1 / span 4;
    --col-span-75: 1 / span 4;
    --col-span-100: 1 / span 6;
}

/* MAIN grid template */
.content-container {
    display: grid;
    gap: 1rem;
    max-width: 1400px;
    /* Sicherstellen, dass die maximale Breite eingehalten wird */
    /* margin: 0 auto 15 auto; */
    /* Zentrieren Sie den Container */
    overflow-x: hidden;
    /* Verhindert horizontales Scrollen */
}

.cc-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* Standard: 6 Spalten */
    gap: 1rem;
}

.cc-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-radius: 5px;
}

/* Stile für cc-col mit Style */
.cc-col.with-style {
    padding: 20px;
    background-color: var(--gray-100);
    border: 1px solid var(--border-light);
    margin-bottom: 15px;

}

.theme-dark .cc-col.with-style {
    background-color: transparent;
    border: 1px solid var(--border-dark);
}

/* blank Style */
.cc-col.blank-style {
    padding: 0px;
    background-color: transparent;
    border: 1px solid var(--border-light);
}

/* Stile für cc-col ohne Style */
.cc-col.without-style {
    padding: 0;
    background-color: transparent;
    /* Keine Hintergrundfarbe */
    border: none;
    /* Kein Rahmen */
}

.cc-col-20 {
    grid-column: span 1;
}

.cc-col-25 {
    grid-column: span 1;
}

.cc-col-33 {
    grid-column: span 2;
}

.cc-col-30 {
    grid-column: span 2;
}

.cc-col-40 {
    grid-column: span 2;
}

.cc-col-50 {
    grid-column: span 3;
}

.cc-col-60 {
    grid-column: span 4;
}

.cc-col-60.cc-right {
    grid-column: 3 / span 4;
}

.cc-col-66 {
    grid-column: span 4;
}

.cc-col-75 {
    grid-column: span 4;
}

.cc-col-100 {
    grid-column: span 6;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .cc-row {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 2 Spalten bei größeren Bildschirmen */
    .cc-col-20 {
        grid-column: span 1;
    }

    .cc-col-25 {
        grid-column: span 1;
    }

    .cc-col-30 {
        grid-column: span 2;
    }

    .cc-col-33 {
        grid-column: span 2;
    }

    .cc-col-40 {
        grid-column: span 2;
    }

    .cc-col-50 {
        grid-column: span 2;
    }

    .cc-col-60 {
        grid-column: span 3;
    }

    .cc-col-66 {
        grid-column: span 3;
    }

    .cc-col-75 {
        grid-column: span 4;
    }

    .cc-col-100 {
        grid-column: span 4;
    }
}

@media (max-width: 768px) {
    .cc-col-30 {
        grid-column: span 1;
    }

    .cc-col-33 {
        grid-column: span 1;
    }

    .cc-col-60 {
        grid-column: span 2;
    }

    .cc-col-66 {
        grid-column: span 2;
    }

    .cc-col-75 {
        grid-column: span 2;
    }

    .cc-col-100 {
        grid-column: span 2;
    }
}

@media (max-width: 480px) {
    .cc-row {
        grid-template-columns: 1fr;
    }

    /* 1 Spalte bei kleinen Bildschirmen */
    .cc-col-20,
    .cc-col-25,
    .cc-col-3,
    .cc-col-33,
    .cc-col-40,
    .cc-col-50,
    .cc-col-60,
    .cc-col-66,
    .cc-col-75,
    .cc-col-100 {
        grid-column: span 1;
    }
}

/* Config Single Content-Block Element in Grid Columns Start */
.content-block {
    background-color: var(--gray-100);
    border: 1px solid var(--border-light);
    border-radius: 5px;
    padding: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.theme-dark .content-block,
.theme-dark .content-block-banner {
    background-color: transparent;
    border: 1px solid var(--border-dark);

}

.content-block-blank {
    border-radius: 5px;
    border: 1px solid var(--border-light);
    padding: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.theme-dark .content-block-blank {
    border-radius: 5px;
    border: 1px solid var(--border-dark);
    padding: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.content-block-blank-hover:hover {
    background-color: var(--gray-100);
}
.theme-dark .content-block-blank-hover:hover {
    background-color: var(--gray-800);
}


/* Config Single Content-Block Element in Grid Columns Start */
/* NEW Formatting of single container box - End */

/* Formatting of single container box - Start */
.content-container-box,
.theme-dark .content-container-box {
    border-radius: 5px;
}

.content-container-box.with-style {
    padding: clamp(5px, 10px, 15px);
    background-color: var(--gray-100);
    border: 1px solid var(--border-light);
}

.theme-dark .content-container-box.with-style {
    background-color: transparent;
    border: 1px solid var(--border-dark);
}

.content-container-box.without-style {
    padding: 0px;
    background-color: transparent;
    border: 1px solid var(--border-light);
}

.theme-dark .content-container-box.without-style {
    background-color: transparent;
    border: 1px solid var(--border-dark);
}


/* Formatting of single container box - End */



/* Generico Anpassungen - noch verschieben */
/* Generico Template Click to View - Start */
.ctv-header {
	background: var(--gray-100);
	padding: .5rem .6rem;
	/* border-bottom: 1px solid var(--border-light); */
	cursor:pointer;
	font-weight: 500;
	font-size: 1rem;
	/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
}




/* Abstand zum Icon */
.ctv-header i { 
	padding-right: 10px;
	font-size: .8rem;
}
.ctv-content {
padding:10px 20px !important;
background: var(--gray-100);
padding:5px;
}
.ctv-content ul,
.ctv-content li{
	font-size: .875rem;
	margin-bottom: 0px;
}

/* Hintergrundfarbe für den Darkmode anpassen*/
.theme-dark .ctv-header,
.theme-dark .ctv-content {
    background-color: #191A1E;
    border: none !important;
}
/* Generico Template Click to View - End */

/* Generico Template - Tabs - Start */
.custom-tab-container {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.theme-dark .custom-tab-container {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--border-dark);
}

.custom-tabs {
    display: flex;
    background-color: var(--gray-100)
}

.custom-tab {
    flex: 1;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    border: none;
    outline: none;
    transition: background-color 0.3s;
}

.custom-tab:hover {
    color: #fff;
    background-color: var(--primary-color-500);
}

.custom-tab.active {
    background-color: var(--primary-color-600);
    color: white;
    font-weight: bold;
}

.custom-tab-content {
    padding: 20px;
}

.custom-content {
    display: none;
}

.custom-content.active {
    display: block;
}

/* Generico Tabs - Start */