/* =========================================================
   KZC Grid- und Layoutsystem
   Breakpoints: 360 / 768 / 1024 / 1440 (mobile-first, min-width)
   Container-Max-Width: 1320px
   Kein Flex fürs Spalten-Grid, das übernimmt CSS Grid.
   ========================================================= */

:root {
	--kzc-container-max: 1320px;
	--kzc-gutter: 24px;
	--kzc-section-padding-x: 20px;
}

@media (min-width: 768px) {
	:root {
		--kzc-section-padding-x: 32px;
	}
}

@media (min-width: 1024px) {
	:root {
		--kzc-section-padding-x: 48px;
		--kzc-gutter: 32px;
	}
}

/* -----------------------------------------------------------
   Section-Wrapper, zwei Ebenen (Vorbild: Oneo centered-wrapper)
   .kzc-section       äußere Ebene: volle Breite, trägt Hintergrund
   .kzc-section-inner innere Ebene: Content-Breite
----------------------------------------------------------- */
.kzc-section {
	position: relative;
	width: 100%;
}

.kzc-section-inner {
	/* border-box: das Theme hat keinen globalen box-sizing-Reset, sonst
	   laeuft width:100% + padding-inline um 2x den Rand ueber den
	   Container hinaus (html { overflow-x: clip } kappt den Ueberhang
	   dann rechts sichtbar ab). Befund 09.09.2026. */
	box-sizing: border-box;
	width: 100%;
	max-width: var(--kzc-container-max);
	margin-inline: auto;
	padding-inline: var(--kzc-section-padding-x);
}

.kzc-section-inner.-fullwidth {
	max-width: none;
	padding-inline: 0;
}

.kzc-section-inner.-fullwidth-padded {
	max-width: none;
}

/* Hintergrundfarben fuer den Wrapper, bei Bedarf erweiterbar */
.kzc-section.-bg-offwhite {
	background-color: #F2F7FA;
}

.kzc-section.-bg-petrol {
	background-color: #1C6080;
	color: #fff;
}

/* -----------------------------------------------------------
   Grid: Spalten-Layout auf CSS-Grid-Basis
   .kzc-grid            Basis, 1 Spalte mobil
   .kzc-grid--cols-2/3/4 Spaltenzahl ab den jeweiligen Breakpoints
----------------------------------------------------------- */
.kzc-grid {
	display: grid;
	gap: var(--kzc-gutter);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.kzc-grid--cols-2,
	.kzc-grid--cols-3,
	.kzc-grid--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.kzc-grid--cols-2 {
		grid-template-columns: repeat(2, 1fr);
	}
	.kzc-grid--cols-3 {
		grid-template-columns: repeat(3, 1fr);
	}
	.kzc-grid--cols-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}


/* -----------------------------------------------------------
   RockSolid Columns (madeyourday/contao-rocksolid-columns, seit
   25.09.2026). Eigenes CSS statt des mitgelieferten columns.css
   (Floats, Prozent-Abstand, Breakpoints 900/599 desktop-first) –
   im Seitenlayout ist "CSS laden" (rs_columns_load_css) deshalb aus.

   Markup des Pakets: .rs-columns > .rs-column.-<media>-col-<Summe>-<Anteil>
   (z. B. "3-2" im Backend -> Spalten -large-col-5-3 / -large-col-5-2).
   Hier: Flexbox mit Token-Abstand, Breite = Anteil * (100% + gap) - gap.
     - unter 768px:  immer eine Spalte (das Feld "klein" wirkt bewusst
                     NICHT: leer erbt es sonst die grosse Aufteilung und
                     quetscht Mobil in zwei Spalten)
     - ab 768px:     Feld "mittel"
     - ab 1024px:    Feld "groß"
   Summen bis 6 wie im Original-CSS des Pakets.

   Vertikaler Rhythmus: Sektions-Inhaltselemente tragen ihr padding-block
   selbst (siehe CLAUDE.md). In Spalten wuerde das beim Stapeln doppelt
   (Element unten + naechstes Element oben), deshalb uebernimmt hier der
   Spalten-Container den Abstand und nullt ihn an den Elementen.
----------------------------------------------------------- */
.rs-columns {
	/* Spaltenabstand als Variable, weil die flex-basis-Formel unten ihn
	   mitrechnet: column-gap und Formel muessen immer denselben Wert
	   sehen (29.09.2026, fuer .kzc-columns-equal). */
	--kzc-rs-gap: var(--kzc-gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: var(--kzc-rs-gap);
	row-gap: var(--kzc-space-7);
	padding-block: var(--kzc-space-8);
}

.rs-column {
	box-sizing: border-box;
	flex: 0 0 100%;
	min-width: 0;
}

.rs-columns > .rs-column > * {
	padding-block: 0;
}

.rs-columns > .rs-column > * + * {
	margin-top: var(--kzc-space-6);
}

@media (min-width: 768px) {
	.rs-column {
		flex-basis: calc(var(--kzc-col-w, 1) * (100% + var(--kzc-rs-gap)) - var(--kzc-rs-gap));
	}
	.rs-column.-medium-col-1-1 { --kzc-col-w: 1.00000; }
	.rs-column.-medium-col-2-1 { --kzc-col-w: 0.50000; }
	.rs-column.-medium-col-2-2 { --kzc-col-w: 1.00000; }
	.rs-column.-medium-col-3-1 { --kzc-col-w: 0.33333; }
	.rs-column.-medium-col-3-2 { --kzc-col-w: 0.66667; }
	.rs-column.-medium-col-3-3 { --kzc-col-w: 1.00000; }
	.rs-column.-medium-col-4-1 { --kzc-col-w: 0.25000; }
	.rs-column.-medium-col-4-2 { --kzc-col-w: 0.50000; }
	.rs-column.-medium-col-4-3 { --kzc-col-w: 0.75000; }
	.rs-column.-medium-col-4-4 { --kzc-col-w: 1.00000; }
	.rs-column.-medium-col-5-1 { --kzc-col-w: 0.20000; }
	.rs-column.-medium-col-5-2 { --kzc-col-w: 0.40000; }
	.rs-column.-medium-col-5-3 { --kzc-col-w: 0.60000; }
	.rs-column.-medium-col-5-4 { --kzc-col-w: 0.80000; }
	.rs-column.-medium-col-5-5 { --kzc-col-w: 1.00000; }
	.rs-column.-medium-col-6-1 { --kzc-col-w: 0.16667; }
	.rs-column.-medium-col-6-2 { --kzc-col-w: 0.33333; }
	.rs-column.-medium-col-6-3 { --kzc-col-w: 0.50000; }
	.rs-column.-medium-col-6-4 { --kzc-col-w: 0.66667; }
	.rs-column.-medium-col-6-5 { --kzc-col-w: 0.83333; }
	.rs-column.-medium-col-6-6 { --kzc-col-w: 1.00000; }
}

@media (min-width: 1024px) {
	.rs-columns {
		--kzc-rs-gap: var(--kzc-space-8);
	}
	.rs-column.-large-col-1-1 { --kzc-col-w: 1.00000; }
	.rs-column.-large-col-2-1 { --kzc-col-w: 0.50000; }
	.rs-column.-large-col-2-2 { --kzc-col-w: 1.00000; }
	.rs-column.-large-col-3-1 { --kzc-col-w: 0.33333; }
	.rs-column.-large-col-3-2 { --kzc-col-w: 0.66667; }
	.rs-column.-large-col-3-3 { --kzc-col-w: 1.00000; }
	.rs-column.-large-col-4-1 { --kzc-col-w: 0.25000; }
	.rs-column.-large-col-4-2 { --kzc-col-w: 0.50000; }
	.rs-column.-large-col-4-3 { --kzc-col-w: 0.75000; }
	.rs-column.-large-col-4-4 { --kzc-col-w: 1.00000; }
	.rs-column.-large-col-5-1 { --kzc-col-w: 0.20000; }
	.rs-column.-large-col-5-2 { --kzc-col-w: 0.40000; }
	.rs-column.-large-col-5-3 { --kzc-col-w: 0.60000; }
	.rs-column.-large-col-5-4 { --kzc-col-w: 0.80000; }
	.rs-column.-large-col-5-5 { --kzc-col-w: 1.00000; }
	.rs-column.-large-col-6-1 { --kzc-col-w: 0.16667; }
	.rs-column.-large-col-6-2 { --kzc-col-w: 0.33333; }
	.rs-column.-large-col-6-3 { --kzc-col-w: 0.50000; }
	.rs-column.-large-col-6-4 { --kzc-col-w: 0.66667; }
	.rs-column.-large-col-6-5 { --kzc-col-w: 0.83333; }
	.rs-column.-large-col-6-6 { --kzc-col-w: 1.00000; }
}

/* Gleich hohe Spalten mit Karten-Abstand (29.09.2026): CSS-Klasse
   "kzc-columns-equal" am Element "Umschlag Anfang" (Backend: CSS-ID/
   Klasse). Fuer Karten-Reihen, die ueber Spalten verteilt sind, z. B.
   Preiskarte links + Checklisten-Karten rechts (Grundkurs "Kursdaten").
   Abstand wie im Karten-Raster (--kzc-space-5) statt des breiten
   Spaltenabstands, sonst zerfaellt die Reihe optisch in zwei Bloecke.
   Die Spalten strecken sich auf gleiche Hoehe, das Element darin
   fuellt die Spalte; wie weit sich dessen Karten mitstrecken, regelt
   das jeweilige Element in components.css. */
.rs-columns.kzc-columns-equal {
	--kzc-rs-gap: var(--kzc-space-5);
	align-items: stretch;
	/* gestapelt (unter 768px) derselbe Abstand wie im Karten-Raster */
	row-gap: var(--kzc-rs-gap);
}

.kzc-columns-equal > .rs-column {
	display: flex;
	flex-direction: column;
}

.kzc-columns-equal > .rs-column > * {
	flex: 1 1 auto;
}