/*
 * „Urlaub bei uns für …“ (.ps-themen): Frage-Überschrift mit Zitierabsatz und Themen-Kacheln (.ps-thema).
 * Bei einer Kachelzahl, die die Spalten nicht füllt (z. B. sieben), steht die letzte Reihe mittig.
 */

.ps-start .ps-themen__kopf { display: grid; gap: 20px; max-width: 760px; }
.ps-start .ps-themen__kopf > .is-style-ps-dachzeile { margin-bottom: -2px; }

.ps-start .ps-themen__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin-top: 48px;
}
/* Zwei Spalten als 4er-Raster (je Kachel 2), damit eine einzelne letzte Kachel mittig stehen kann */
@media (min-width: 600px) and (max-width: 999.98px) {
	.ps-start .ps-themen__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ps-start .ps-themen__raster > .ps-thema { grid-column: span 2; }
	.ps-start .ps-themen__raster > .ps-thema:last-child:nth-child(2n+1) { grid-column: 2 / span 2; }
}
/* Drei Spalten als 6er-Raster (je Kachel 2); eine oder zwei Kacheln in der letzten Reihe mittig */
@media (min-width: 1000px) {
	.ps-start .ps-themen__raster { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.ps-start .ps-themen__raster > .ps-thema { grid-column: span 2; }
	.ps-start .ps-themen__raster > .ps-thema:last-child:nth-child(3n+1) { grid-column: 3 / span 2; }
	.ps-start .ps-themen__raster > .ps-thema:nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
}

.ps-start .ps-thema {
	position: relative;
	isolation: isolate;
	display: grid;
	gap: 12px;
	align-content: start;
	padding: 28px 26px 30px;
	background: var(--weiss);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-xs);
	transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ps-start .ps-thema:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.ps-start .ps-thema__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 6px;
	border-radius: var(--radius-pill);
	background: var(--tanne-50);
	color: var(--tanne-600);
	transition: background var(--dur-base), color var(--dur-base);
}
.ps-start .ps-thema:hover .ps-thema__icon { background: var(--sonne-100); color: var(--sonne-700); }
.ps-start .ps-thema h3 { font: 400 23px/1.25 var(--font-display); }
.ps-start .ps-thema h3 a { color: var(--text-strong); text-decoration: none; }
.ps-start .ps-thema h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ps-start .ps-thema h3 a::before { content: "→"; float: right; margin-left: 12px; color: var(--tanne-500); transition: transform var(--dur-base) var(--ease-out), color var(--dur-base); }
.ps-start .ps-thema:hover h3 a { color: var(--tanne-700); }
.ps-start .ps-thema:hover h3 a::before { transform: translateX(3px); color: var(--sonne-700); }
.ps-start .ps-thema p { font: 400 var(--fs-small)/1.6 var(--font-sans); color: var(--text-muted); }
.ps-start .ps-thema:focus-within { outline: 2px solid var(--sonne-500); outline-offset: 2px; }
.ps-start .ps-thema h3 a:focus-visible { outline: none; }