/*
 * „Was Sie bei uns erwartet“ (.ps-merkmale): 6 Kacheln (core/cover .ps-merkmal) mit gezeichnetem Icon,
 * Bild und Abdunklung erscheinen beim Darüberfahren; die ganze Kachel ist der Link des Titels.
 */

.ps-start .ps-merkmale { padding-bottom: var(--section-y); display: grid; gap: 28px; }

.ps-start .ps-merkmale__raster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--border-subtle);
	border-block: 1px solid var(--border-subtle);
}
@media (min-width: 900px) { .ps-start .ps-merkmale__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ps-start .ps-merkmale__raster { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.ps-start .ps-merkmal.wp-block-cover {
	position: relative;
	isolation: isolate;
	display: block;
	min-height: 200px;
	margin: 0;
	padding: 32px 22px 28px;
	overflow: hidden;
	background: var(--schnee);
	color: var(--text-strong);
}
.ps-start .ps-merkmal > .wp-block-cover__image-background {
	z-index: -1;
	opacity: 0;
	transform: scale(1.08);
	transition: opacity 500ms var(--ease-out), transform 1200ms var(--ease-out);
}
.ps-start .ps-merkmal > .wp-block-cover__background {
	z-index: -1;
	opacity: 0 !important;
	background-color: rgba(20, 38, 30, .62) !important;
	transition: opacity 500ms var(--ease-out);
}
.ps-start .ps-merkmal > .wp-block-cover__inner-container {
	position: static;
	z-index: auto;
	display: grid;
	gap: 12px;
	align-content: start;
	color: inherit;
}
.ps-start .ps-merkmal .ps-merkmal-icon { color: var(--tanne-600); transition: color 300ms; overflow: visible; }
.ps-start .ps-merkmal .ps-merkmal-icon--teich { overflow: hidden; }
.ps-start .ps-merkmal .ps-merkmal__titel { font: 400 23px/1.2 var(--font-display); color: var(--text-strong); transition: color 300ms; }
.ps-start .ps-merkmal__titel a { color: inherit; text-decoration: none; }
.ps-start .ps-merkmal__titel a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ps-start .ps-merkmal .ps-merkmal__text { font: 400 var(--fs-small)/1.6 var(--font-sans); color: var(--text-muted); transition: color 300ms; }

.ps-start .ps-merkmal:is(:hover, :focus-within) > .wp-block-cover__image-background { opacity: 1; transform: scale(1); }
.ps-start .ps-merkmal:is(:hover, :focus-within) > .wp-block-cover__background { opacity: 1 !important; }
.ps-start .ps-merkmal:is(:hover, :focus-within) :is(.ps-merkmal__titel, .ps-merkmal-icon) { color: var(--schnee); }
.ps-start .ps-merkmal:is(:hover, :focus-within) .ps-merkmal__text { color: var(--tanne-100); }
.ps-start .ps-merkmal__titel a:focus-visible { outline: none; }
.ps-start .ps-merkmal:focus-within { outline: 2px solid var(--sonne-500); outline-offset: -2px; }

/* Gezeichnete Icons: Linien zeichnen sich, sobald die Kacheln sichtbar werden */
.ps-merkmal-icon .ps-sonne { stroke: var(--sonne-500); }
.ps-js .ps-merkmal-icon .ps-z { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1400ms var(--ease-out); }
.ps-js .ps-merkmal-icon .ps-z2 { transition-delay: 200ms; }
.ps-js .ps-merkmal-icon .ps-z3 { transition-delay: 450ms; }
.ps-js .ps-merkmale.ist-gezeichnet .ps-merkmal-icon .ps-z { stroke-dashoffset: 0; }
.ps-js .ps-merkmal-icon .ps-pfad { opacity: 0; transition: opacity 900ms var(--ease-out); }
.ps-js .ps-merkmale.ist-gezeichnet .ps-merkmal-icon .ps-pfad { opacity: 1; }

.ps-merkmal-icon .ps-welle { animation: ps-welle 3.2s linear infinite; }
.ps-merkmal-icon .ps-welle--rueck { animation-duration: 4.6s; animation-direction: reverse; }
.ps-merkmal-icon .ps-dampf { animation: ps-dampf 2.8s ease-in-out infinite; }
.ps-merkmal-icon .ps-dampf2 { animation-delay: .9s; }
.ps-merkmal-icon .ps-dampf3 { animation-delay: 1.8s; }
.ps-merkmal-icon .ps-dreh { transform-origin: 38px 9px; animation: ps-dreh 9s linear infinite; }
.ps-merkmal-icon .ps-schweb { animation: ps-schweb 5s ease-in-out infinite; }
.ps-merkmal-icon .ps-wipp { animation: ps-wipp 2.4s ease-in-out infinite; }
.ps-merkmal-icon .ps-pfad { animation: ps-pfad 1.6s linear infinite; }
@keyframes ps-welle { to { transform: translateX(16px); } }
@keyframes ps-dampf { 0% { transform: translateY(3px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-5px); opacity: 0; } }
@keyframes ps-dreh { to { transform: rotate(360deg); } }
@keyframes ps-schweb { 0%, 100% { transform: translateY(1.5px); } 50% { transform: translateY(-1.5px); } }
@keyframes ps-wipp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes ps-pfad { to { stroke-dashoffset: -12; } }

@media (max-width: 599px) {
	.ps-start .ps-merkmal.wp-block-cover { min-height: 180px; padding: 24px 16px 22px; }
	.ps-start .ps-merkmal .ps-merkmal__titel { font-size: 20px; }
	.ps-start .ps-merkmal .ps-merkmal-icon { width: 44px; height: 44px; }
}