/* Themenbereiche (partials/themenbereiche.php)
   ========================================
   Kachel-Einstiege in die Kategorie-Archive. Genutzt von Startseite, Ratgeber-Hub und
   404-Seite -- deshalb eine eigene Datei und nicht archive.css: die Startseite laedt jene
   nicht, und eine Kopie in homepage.css waere ein zweiter Pflegeort fuer dasselbe Aussehen.
   Die Ueberschrift gehoert nicht hierher, sie traegt je Seite eine eigene Klasse. */

/* Bis zu fuenf Kacheln, deshalb ein Raster, das mit der Zahl umgehen kann, statt fester
   Spalten. */
.swk-ratgeber-topics {
	list-style: none;
	margin: 0 0 48px 0;
	padding: 0;
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.swk-ratgeber-topics {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 20px;
	}
}

.swk-ratgeber-topic {
	background: var(--swk-color-bg-white);
	border: 1px solid var(--swk-color-border);
	border-radius: var(--radius-md);
	padding: 24px;
}

.swk-ratgeber-topic-name {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 8px 0;
}

/* Linkfarbe und Unterstreichung nach der Konvention: terracotta, beim Hovern dunkler.
   Zustaende vollstaendig deklariert, sonst greift Kadences globale Regel. */
.swk-ratgeber-topic-name a {
	color: var(--swk-color-primary-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.swk-ratgeber-topic-name a:hover,
.swk-ratgeber-topic-name a:focus,
.swk-ratgeber-topic-name a:active {
	color: var(--swk-color-primary-darkest);
	background: none;
}

.swk-ratgeber-topic-desc {
	font-size: 17px;
	line-height: 1.5;
	color: var(--swk-color-text-card);
	margin: 0 0 8px 0;
}

.swk-ratgeber-topic-count {
	font-size: 15px;
	color: var(--swk-color-text-muted);
	margin: 0;
}

/* Symbol ueber der Ueberschrift, gleicher Abstand wie im Rest der Kachel. */
.swk-ratgeber-topic .swk-icon {
	display: block;
	margin-bottom: 8px;
}

/* Wegweiser-Form (Startseite, 404)
   ----------------------------------------
   Fuenf Streifen ueber die volle Breite statt eines Rasters. Grund ist gemessen und nicht
   Geschmack: Die fuenf Themennamen brauchen bei 18px zusammen rund 1390px, die Sektion hat
   1120px -- nebeneinander bricht immer mindestens einer um, und zwar je Kategorie
   unterschiedlich oft. Als Streifen steht jeder Name in einer Zeile, und die Klickflaeche
   geht ueber die ganze Breite, was der Zielgruppe ab 65 entgegenkommt.

   Der Ratgeber-Hub behaelt das Raster: Dort sucht jemand gezielt, die Kachel traegt die
   Bestandszahl und darf mehrzeilig sein. */
.swk-ratgeber-topics--wegweiser {
	gap: 12px;
}

@media (min-width: 700px) {
	.swk-ratgeber-topics--wegweiser {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

/* Icon links neben Namen und Satz, der Pfeil am rechten Rand. Als Grid und nicht als Flex:
   Das Icon soll neben beiden Zeilen stehen, nicht neben einer von beiden. */
.swk-ratgeber-topics--wegweiser .swk-ratgeber-topic {
	display: grid;
	grid-template-columns: 28px 1fr 10px;
	column-gap: 12px;
	row-gap: 2px;
	align-items: center;
	padding: 16px 24px;
}

.swk-ratgeber-topics--wegweiser .swk-ratgeber-topic .swk-icon {
	grid-column: 1;
	grid-row: 1 / span 2;
	margin-bottom: 0;
}

/* `nowrap` ist der Zweck dieser Form -- ohne ihn faellt der lange Name auf das Verhalten
   zurueck, gegen das die Streifen gebaut wurden. */
.swk-ratgeber-topics--wegweiser .swk-ratgeber-topic-name {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	font-size: 20px;
}

.swk-ratgeber-topics--wegweiser .swk-ratgeber-topic-name a {
	white-space: nowrap;
}

.swk-ratgeber-topics--wegweiser .swk-ratgeber-topic-desc {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
}

/* Chevron aus zwei Rahmenkanten statt eines Icons: Er ist Schmuck und traegt keine
   Bedeutung, deshalb `aria-hidden` von selbst -- ein ::after-Element liest kein Screenreader
   vor. */
.swk-ratgeber-topics--wegweiser .swk-ratgeber-topic::after {
	content: "";
	grid-column: 3;
	grid-row: 1 / span 2;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--swk-color-primary-dark);
	border-top: 2px solid var(--swk-color-primary-dark);
	transform: rotate(45deg);
}

/* Unter 700px stehen die Kacheln ohnehin einzeln. Dort ist die Breite knapp, deshalb faellt
   der Streifen auf den normalen Kachelaufbau zurueck: Icon oben, Name darunter, und der Name
   darf umbrechen -- bei 320px Bildschirmbreite passt kein langer Name in eine Zeile. */
@media (max-width: 699px) {
	.swk-ratgeber-topics--wegweiser .swk-ratgeber-topic {
		grid-template-columns: 1fr;
		padding: 20px;
	}

	.swk-ratgeber-topics--wegweiser .swk-ratgeber-topic .swk-icon {
		grid-column: 1;
		grid-row: auto;
		margin-bottom: 8px;
	}

	.swk-ratgeber-topics--wegweiser .swk-ratgeber-topic-name {
		grid-column: 1;
		grid-row: auto;
	}

	.swk-ratgeber-topics--wegweiser .swk-ratgeber-topic-name a {
		white-space: normal;
	}

	.swk-ratgeber-topics--wegweiser .swk-ratgeber-topic-desc {
		grid-column: 1;
		grid-row: auto;
		margin-top: 4px;
	}

	.swk-ratgeber-topics--wegweiser .swk-ratgeber-topic::after {
		display: none;
	}
}