/* ==========================================================================
   Layout: Container + 12-Spalten-Grid (mobile-first, kein Float)
   Unter 48em: eine Spalte, alle .cf-col stapeln sich.
   Ab 48em:    12 Spalten, .cf-col--span-1 bis .cf-col--span-12.
   Keine Farben in diesem File, nur Tokens aus variables.css.
   ========================================================================== */

/* Container */
.cf-container {
	width: 100%;
	max-width: var(--cf-container-max);
	margin-inline: auto;
	padding-inline: var(--cf-container-padding);
}

.cf-container--narrow { max-width: var(--cf-container-narrow); }
.cf-container--fluid  { max-width: none; }

/* Grid: mobil eine Spalte */
.cf-grid {
	--cf-grid-gap-x: var(--cf-gap-x);
	--cf-grid-gap-y: var(--cf-gap-y);

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: var(--cf-grid-gap-x);
	row-gap: var(--cf-grid-gap-y);
}

.cf-col { min-width: 0; }

/* Abstände: beide Richtungen */
.cf-grid--gap-none { --cf-grid-gap-x: var(--cf-space-0); --cf-grid-gap-y: var(--cf-space-0); }
.cf-grid--gap-sm   { --cf-grid-gap-x: var(--cf-space-2); --cf-grid-gap-y: var(--cf-space-2); }
.cf-grid--gap-md   { --cf-grid-gap-x: var(--cf-space-4); --cf-grid-gap-y: var(--cf-space-4); }
.cf-grid--gap-lg   { --cf-grid-gap-x: var(--cf-space-8); --cf-grid-gap-y: var(--cf-space-8); }

/* Abstände: nur horizontal */
.cf-grid--gap-x-none { --cf-grid-gap-x: var(--cf-space-0); }
.cf-grid--gap-x-sm   { --cf-grid-gap-x: var(--cf-space-2); }
.cf-grid--gap-x-md   { --cf-grid-gap-x: var(--cf-space-4); }
.cf-grid--gap-x-lg   { --cf-grid-gap-x: var(--cf-space-8); }

/* Abstände: nur vertikal */
.cf-grid--gap-y-none { --cf-grid-gap-y: var(--cf-space-0); }
.cf-grid--gap-y-sm   { --cf-grid-gap-y: var(--cf-space-2); }
.cf-grid--gap-y-md   { --cf-grid-gap-y: var(--cf-space-4); }
.cf-grid--gap-y-lg   { --cf-grid-gap-y: var(--cf-space-8); }

/* Ab mittlerer Breite: 12 Spalten */
@media (min-width: 48em) {
	.cf-grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	/* Ohne Span-Klasse: volle Breite */
	.cf-col { grid-column: span 12; }

	.cf-col--span-1  { grid-column: span 1; }
	.cf-col--span-2  { grid-column: span 2; }
	.cf-col--span-3  { grid-column: span 3; }
	.cf-col--span-4  { grid-column: span 4; }
	.cf-col--span-5  { grid-column: span 5; }
	.cf-col--span-6  { grid-column: span 6; }
	.cf-col--span-7  { grid-column: span 7; }
	.cf-col--span-8  { grid-column: span 8; }
	.cf-col--span-9  { grid-column: span 9; }
	.cf-col--span-10 { grid-column: span 10; }
	.cf-col--span-11 { grid-column: span 11; }
	.cf-col--span-12 { grid-column: span 12; }
}

/* Optionale Box, um Spalten sichtbar zu machen (nur Tokens) */
.cf-box {
	padding: var(--cf-space-4);
	background: var(--cf-color-surface);
	border: 1px solid var(--cf-color-border);
	border-radius: var(--cf-radius);
}