@charset "utf-8";
/* CSS Document */

/* ==========================================================================
   STRUKTUR: boxGroup1 bis boxGroup6
   Standard: Boxen NEBENEINANDER, max. 3 pro Reihe, automatischer Umbruch
   Mit zusätzlichem Modifier "stacked": alle Boxen UNTEREINANDER, volle Breite
   Voraussetzung: JS wrapt jedes h3(+h4)+p-Paar automatisch in .box-item
   ========================================================================== */

[class*="boxGroup"] {
	margin-top: -40px !important; /* Gap-Fix zur vorherigen Section */
}

[class*="boxGroup"] .text-component {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px 1%;
	align-items: stretch;
}

/* Breiten-Korrektur für Boxenanzahlen, die nicht glatt in 3er-Spalten passen */
.boxGroup1 .text-component {
	grid-template-columns: 1fr !important;
}

.boxGroup2 .text-component {
	grid-template-columns: repeat(2, 1fr) !important;
}

.boxGroup4 .text-component {
	grid-template-columns: repeat(4, 1fr) !important;
}

.boxGroup5 .text-component {
	grid-template-columns: repeat(5, 1fr) !important;
}

.stacked .text-component {
	grid-template-columns: 1fr !important;
}

[class*="boxGroup"] .text-component .box-item {
	display: flex;
	flex-direction: column;
}

[class*="boxGroup"] .text-component .box-item h3,
[class*="boxGroup"] .text-component .box-item h4,
[class*="boxGroup"] .text-component .box-item p {
	margin: 0 !important;
	padding-left: 15px;
	padding-right: 15px;
}

[class*="boxGroup"] .text-component .box-item h3 {
	padding-top: 15px;
	padding-bottom: 0;
	flex-shrink: 0;
	font-size: 1.5rem !important;
	line-height: 1.3em !important;
}

[class*="boxGroup"] .text-component .box-item h4 {
	padding-top: 8px;
	padding-bottom: 5px;
	flex-shrink: 0;
	font-size: 1.3rem !important;
	line-height: 1.3em !important;
}

[class*="boxGroup"] .text-component .box-item p {
	padding-top: 0;
	padding-bottom: 15px;
	flex: 1 1 auto;
}

[class*="boxGroup"] .text-component .box-item ul,
[class*="boxGroup"] .text-component .box-item ol {
	margin: 0 !important;
	padding-top: 0;
	padding-bottom: 15px;
	padding-left: 40px !important;
	padding-right: 15px;
	flex: 1 1 auto;
}

[class*="boxGroup"] .text-component .box-item h3 + ul,
[class*="boxGroup"] .text-component .box-item h3 + ol {
	margin-top: 8px !important;
}

[class*="boxGroup"] .text-component .box-item ul > li::before {
	background-color: currentColor !important;
}


/* ==========================================================================
   FARBE/REIHENFOLGE: pos{Position}-{Farbname}
   Position = welcher .box-item (1.-6. Box im Text, in Reihenfolge)
   Gilt für h3, h4, p, ul, ol, li
   ========================================================================== */

/* --- burgundy: #a32020, weißer Text --- */
.pos1-burgundy .text-component > .box-item:nth-child(1),
.pos2-burgundy .text-component > .box-item:nth-child(2),
.pos3-burgundy .text-component > .box-item:nth-child(3),
.pos4-burgundy .text-component > .box-item:nth-child(4),
.pos5-burgundy .text-component > .box-item:nth-child(5),
.pos6-burgundy .text-component > .box-item:nth-child(6) {
	background-color: #a32020;
}
.pos1-burgundy .text-component > .box-item:nth-child(1) :is(h3, h4, p, ul, ol, li),
.pos2-burgundy .text-component > .box-item:nth-child(2) :is(h3, h4, p, ul, ol, li),
.pos3-burgundy .text-component > .box-item:nth-child(3) :is(h3, h4, p, ul, ol, li),
.pos4-burgundy .text-component > .box-item:nth-child(4) :is(h3, h4, p, ul, ol, li),
.pos5-burgundy .text-component > .box-item:nth-child(5) :is(h3, h4, p, ul, ol, li),
.pos6-burgundy .text-component > .box-item:nth-child(6) :is(h3, h4, p, ul, ol, li) {
	color: #ffffff !important;
}

/* --- rose: #d93954, weißer Text --- */
.pos1-rose .text-component > .box-item:nth-child(1),
.pos2-rose .text-component > .box-item:nth-child(2),
.pos3-rose .text-component > .box-item:nth-child(3),
.pos4-rose .text-component > .box-item:nth-child(4),
.pos5-rose .text-component > .box-item:nth-child(5),
.pos6-rose .text-component > .box-item:nth-child(6) {
	background-color: #d93954;
}
.pos1-rose .text-component > .box-item:nth-child(1) :is(h3, h4, p, ul, ol, li),
.pos2-rose .text-component > .box-item:nth-child(2) :is(h3, h4, p, ul, ol, li),
.pos3-rose .text-component > .box-item:nth-child(3) :is(h3, h4, p, ul, ol, li),
.pos4-rose .text-component > .box-item:nth-child(4) :is(h3, h4, p, ul, ol, li),
.pos5-rose .text-component > .box-item:nth-child(5) :is(h3, h4, p, ul, ol, li),
.pos6-rose .text-component > .box-item:nth-child(6) :is(h3, h4, p, ul, ol, li) {
	color: #ffffff !important;
}

/* --- grey: #6F6F6F, weißer Text --- */
.pos1-grey .text-component > .box-item:nth-child(1),
.pos2-grey .text-component > .box-item:nth-child(2),
.pos3-grey .text-component > .box-item:nth-child(3),
.pos4-grey .text-component > .box-item:nth-child(4),
.pos5-grey .text-component > .box-item:nth-child(5),
.pos6-grey .text-component > .box-item:nth-child(6) {
	background-color: #6F6F6F;
}
.pos1-grey .text-component > .box-item:nth-child(1) :is(h3, h4, p, ul, ol, li),
.pos2-grey .text-component > .box-item:nth-child(2) :is(h3, h4, p, ul, ol, li),
.pos3-grey .text-component > .box-item:nth-child(3) :is(h3, h4, p, ul, ol, li),
.pos4-grey .text-component > .box-item:nth-child(4) :is(h3, h4, p, ul, ol, li),
.pos5-grey .text-component > .box-item:nth-child(5) :is(h3, h4, p, ul, ol, li),
.pos6-grey .text-component > .box-item:nth-child(6) :is(h3, h4, p, ul, ol, li) {
	color: #ffffff !important;
}

/* --- lightrose: #f1bac3, dunkler Text --- */
.pos1-lightrose .text-component > .box-item:nth-child(1),
.pos2-lightrose .text-component > .box-item:nth-child(2),
.pos3-lightrose .text-component > .box-item:nth-child(3),
.pos4-lightrose .text-component > .box-item:nth-child(4),
.pos5-lightrose .text-component > .box-item:nth-child(5),
.pos6-lightrose .text-component > .box-item:nth-child(6) {
	background-color: #f1bac3;
}
.pos1-lightrose .text-component > .box-item:nth-child(1) :is(h3, h4, p, ul, ol, li),
.pos2-lightrose .text-component > .box-item:nth-child(2) :is(h3, h4, p, ul, ol, li),
.pos3-lightrose .text-component > .box-item:nth-child(3) :is(h3, h4, p, ul, ol, li),
.pos4-lightrose .text-component > .box-item:nth-child(4) :is(h3, h4, p, ul, ol, li),
.pos5-lightrose .text-component > .box-item:nth-child(5) :is(h3, h4, p, ul, ol, li),
.pos6-lightrose .text-component > .box-item:nth-child(6) :is(h3, h4, p, ul, ol, li) {
	color: #2d2d2d !important;
}

/* --- middlegrey: #464646, weißer Text --- */
.pos1-middlegrey .text-component > .box-item:nth-child(1),
.pos2-middlegrey .text-component > .box-item:nth-child(2),
.pos3-middlegrey .text-component > .box-item:nth-child(3),
.pos4-middlegrey .text-component > .box-item:nth-child(4),
.pos5-middlegrey .text-component > .box-item:nth-child(5),
.pos6-middlegrey .text-component > .box-item:nth-child(6) {
	background-color: #464646;
}
.pos1-middlegrey .text-component > .box-item:nth-child(1) :is(h3, h4, p, ul, ol, li),
.pos2-middlegrey .text-component > .box-item:nth-child(2) :is(h3, h4, p, ul, ol, li),
.pos3-middlegrey .text-component > .box-item:nth-child(3) :is(h3, h4, p, ul, ol, li),
.pos4-middlegrey .text-component > .box-item:nth-child(4) :is(h3, h4, p, ul, ol, li),
.pos5-middlegrey .text-component > .box-item:nth-child(5) :is(h3, h4, p, ul, ol, li),
.pos6-middlegrey .text-component > .box-item:nth-child(6) :is(h3, h4, p, ul, ol, li) {
	color: #ffffff !important;
}

/* --- darkgrey: #2d2d2d, weißer Text --- */
.pos1-darkgrey .text-component > .box-item:nth-child(1),
.pos2-darkgrey .text-component > .box-item:nth-child(2),
.pos3-darkgrey .text-component > .box-item:nth-child(3),
.pos4-darkgrey .text-component > .box-item:nth-child(4),
.pos5-darkgrey .text-component > .box-item:nth-child(5),
.pos6-darkgrey .text-component > .box-item:nth-child(6) {
	background-color: #2d2d2d;
}
.pos1-darkgrey .text-component > .box-item:nth-child(1) :is(h3, h4, p, ul, ol, li),
.pos2-darkgrey .text-component > .box-item:nth-child(2) :is(h3, h4, p, ul, ol, li),
.pos3-darkgrey .text-component > .box-item:nth-child(3) :is(h3, h4, p, ul, ol, li),
.pos4-darkgrey .text-component > .box-item:nth-child(4) :is(h3, h4, p, ul, ol, li),
.pos5-darkgrey .text-component > .box-item:nth-child(5) :is(h3, h4, p, ul, ol, li),
.pos6-darkgrey .text-component > .box-item:nth-child(6) :is(h3, h4, p, ul, ol, li) {
	color: #ffffff !important;
}

/* --- white: #ffffff, dunkler Text --- */
.pos1-white .text-component > .box-item:nth-child(1),
.pos2-white .text-component > .box-item:nth-child(2),
.pos3-white .text-component > .box-item:nth-child(3),
.pos4-white .text-component > .box-item:nth-child(4),
.pos5-white .text-component > .box-item:nth-child(5),
.pos6-white .text-component > .box-item:nth-child(6) {
	background-color: #ffffff;
}
.pos1-white .text-component > .box-item:nth-child(1) :is(h3, h4, p, ul, ol, li),
.pos2-white .text-component > .box-item:nth-child(2) :is(h3, h4, p, ul, ol, li),
.pos3-white .text-component > .box-item:nth-child(3) :is(h3, h4, p, ul, ol, li),
.pos4-white .text-component > .box-item:nth-child(4) :is(h3, h4, p, ul, ol, li),
.pos5-white .text-component > .box-item:nth-child(5) :is(h3, h4, p, ul, ol, li),
.pos6-white .text-component > .box-item:nth-child(6) :is(h3, h4, p, ul, ol, li) {
	color: #2d2d2d !important;
}

/* --- lightgrey: #f2f2f2, dunkler Text --- */
.pos1-lightgrey .text-component > .box-item:nth-child(1),
.pos2-lightgrey .text-component > .box-item:nth-child(2),
.pos3-lightgrey .text-component > .box-item:nth-child(3),
.pos4-lightgrey .text-component > .box-item:nth-child(4),
.pos5-lightgrey .text-component > .box-item:nth-child(5),
.pos6-lightgrey .text-component > .box-item:nth-child(6) {
	background-color: #f2f2f2;
}
.pos1-lightgrey .text-component > .box-item:nth-child(1) :is(h3, h4, p, ul, ol, li),
.pos2-lightgrey .text-component > .box-item:nth-child(2) :is(h3, h4, p, ul, ol, li),
.pos3-lightgrey .text-component > .box-item:nth-child(3) :is(h3, h4, p, ul, ol, li),
.pos4-lightgrey .text-component > .box-item:nth-child(4) :is(h3, h4, p, ul, ol, li),
.pos5-lightgrey .text-component > .box-item:nth-child(5) :is(h3, h4, p, ul, ol, li),
.pos6-lightgrey .text-component > .box-item:nth-child(6) :is(h3, h4, p, ul, ol, li) {
	color: #2d2d2d !important;
}

/* --- black: #000000, weißer Text --- */
.pos1-black .text-component > .box-item:nth-child(1),
.pos2-black .text-component > .box-item:nth-child(2),
.pos3-black .text-component > .box-item:nth-child(3),
.pos4-black .text-component > .box-item:nth-child(4),
.pos5-black .text-component > .box-item:nth-child(5),
.pos6-black .text-component > .box-item:nth-child(6) {
	background-color: #000000;
}
.pos1-black .text-component > .box-item:nth-child(1) :is(h3, h4, p, ul, ol, li),
.pos2-black .text-component > .box-item:nth-child(2) :is(h3, h4, p, ul, ol, li),
.pos3-black .text-component > .box-item:nth-child(3) :is(h3, h4, p, ul, ol, li),
.pos4-black .text-component > .box-item:nth-child(4) :is(h3, h4, p, ul, ol, li),
.pos5-black .text-component > .box-item:nth-child(5) :is(h3, h4, p, ul, ol, li),
.pos6-black .text-component > .box-item:nth-child(6) :is(h3, h4, p, ul, ol, li) {
	color: #ffffff !important;
}


/* ==========================================================================
   MOBILE RESPONSIVE
   ============================================================================ */

@media screen and (max-width: 767px) {
	[class*="boxGroup"] {
		margin-top: 0 !important;
	}
	[class*="boxGroup"] .text-component {
		grid-template-columns: 1fr !important;
	}
}