/* =============================================================================
   BlickSpektrum – Layout: Container, Grundraster, Sektionsrhythmus
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container-wide);
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

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

.container--reading {
	max-width: var(--container-reading);
}

.site-main {
	display: block;
}

/* Intentionale Fußabstände VOR dem Footer, direkt am jeweils letzten
   Inhaltselement einer Seite (statt einem externen margin-top auf
   .site-footer). So bleibt z. B. der Übergang vom dunklen Newsletter-Band
   zum dunklen Footer nahtlos, während Listen-/Archivseiten, die mit
   normalem Inhalt enden, trotzdem ausreichend Luft vor dem Footer haben. */
.page-content-end {
	padding-bottom: var(--space-lg);
}

/* Redaktionelle Sektionen: gleichmäßiger vertikaler Rhythmus zwischen den
   Startseiten-Modulen sowie Archiv-/Einzelseiten-Blöcken. */
.section {
	padding-block: clamp(2.5rem, 1.9rem + 3vw, 3.75rem);
}

.section--tight {
	padding-block: var(--space-lg);
}

.section--alt {
	background-color: var(--color-surface-alt);
}

.section--stone {
	background-color: var(--color-surface-stone);
}

.section--white {
	background-color: var(--color-surface);
}

.section__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
	border-bottom: 2px solid var(--color-text);
	padding-bottom: var(--space-xs);
}

.section__title {
	font-size: var(--text-2xl);
	margin: 0;
}

/* Wrapper ausschließlich für „Empfehlungen der Redaktion“: zentrierte
   Überschrift zwischen zwei gleich breiten Linien statt der sonst üblichen
   .section__header-Unterstreichung. Bewusst ein eigener Wrapper statt
   Grid-Pseudoelementen direkt auf .section__title: die Überschrift bleibt
   dadurch ein echtes, eigenständig selektierbares Grid-Item (nicht nur ein
   anonymer Textknoten), wodurch sie bei wenig Platz kontrolliert umbrechen
   kann, statt beiden Linien jeglichen Raum wegzunehmen. Betrifft nur diese
   eine Sektion – alle anderen Sektionsüberschriften (Aktuell, Wirtschaft &
   Unternehmen, Technologie & Digital, Energie & Immobilien, Ratgeber,
   Freizeit) nutzen weiterhin .section__header/.section__title unverändert. */
.section-heading-rule {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: var(--space-md);
	margin-bottom: var(--space-md);
}

.section-heading-rule::before,
.section-heading-rule::after {
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background-color: var(--color-border-strong);
}

.section-heading-rule .section__title {
	min-width: 0;
	text-align: center;
	/* Rein optische Korrektur: Der Grid selbst bleibt exakt symmetrisch
	   (1fr auto 1fr, gleich breite Linien); das Auge nimmt die Überschrift
	   aufgrund der Interpunktion trotzdem als leicht rechtslastig wahr.
	   Kleiner Versatz nur auf den Text, nicht auf den Wrapper/die Spalten. */
	transform: translateX(-6px);
}

@media (max-width: 480px) {
	.section-heading-rule {
		column-gap: var(--space-sm);
	}

	/* Der "auto"-Grid-Track sizt sich standardmäßig nach dem max-content der
	   Überschrift; min-width:0 allein reicht nicht, um frühzeitig einen
	   Umbruch zu erzwingen, solange die Überschrift allein noch in die
	   Zeile passt. Ein prozentualer max-width löst hier nicht zuverlässig
	   auf, da die Breite des "auto"-Tracks selbst unbestimmt ist (%-Werte
	   brauchen eine definite Bezugsgröße) – daher eine an der Schriftgröße
	   orientierte ch-Obergrenze (kein fester Pixelwert), die einen Umbruch
	   erzwingt und beiden – weiterhin gleich breiten – Linien sichtbaren
	   Raum lässt, statt dass sie auf 0 zusammenschrumpfen. */
	.section-heading-rule .section__title {
		max-width: 18ch;
	}
}

.section__link {
	margin-bottom: 0.4em;
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: 600;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	text-decoration: none;
	color: var(--color-text);
	border-bottom: 1px solid var(--color-border-strong);
	padding-bottom: 0.15em;
}

.section__link:hover {
	color: var(--color-accent);
	border-bottom-color: var(--color-accent);
}

.section__link .icon {
	width: 0.9em;
	height: 0.9em;
}

.section__intro {
	max-width: var(--container-reading);
	color: var(--color-text-secondary);
	font-size: var(--text-md);
	margin-bottom: var(--space-md);
}

/* Kategorie-Kennzeichnung (Eyebrow), auf Karten, Artikeln und Sektionsköpfen. */
.eyebrow {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-accent);
	text-decoration: none;
}

.eyebrow:hover {
	color: var(--color-accent-dark);
}

/* Allgemeines Grid-Utility für Kartenraster mit responsiven Spaltenzahlen. */
.grid {
	display: grid;
	gap: var(--space-md);
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Passt sich der tatsächlichen Artikelzahl an: zwei Karten füllen die Zeile
   bewusst, statt eine leere dritte Spur zu hinterlassen (z. B. Freizeit bei
   geringem Artikelbestand). Die Spurbreite ist zusätzlich auf 440px gedeckelt
   und zentriert, damit eine einzelne Karte nicht monströs über die gesamte
   Containerbreite gezogen wird, sondern bewusst als Einzelstück wirkt. */
.grid--auto {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Einzelne Karte: bewusst gedeckelt und zentriert statt über die volle
   Containerbreite gezogen (bei zwei oder mehr Karten verteilt 1fr die
   Zeile korrekt, ohne dass diese Regel dort greift). */
.grid--auto:has(> :only-child) {
	max-width: 440px;
	margin-inline: auto;
}

@media (max-width: 1024px) {
	.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.grid--2,
	.grid--3,
	.grid--4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Sichtbarer Trenner zwischen redaktionellen Blöcken. */
.divider {
	border: 0;
	border-top: var(--border-width) solid var(--color-border);
	margin-block: var(--space-lg);
}