.sz-kacheln { padding-block: var(--sz-raum-8); }
.sz-kacheln__rahmen { display: grid; gap: var(--sz-raum-6); }
.sz-kacheln__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sz-raum-4); grid-template-columns: 1fr; }
.sz-kacheln__karte {
	position: relative; display: flex; flex-direction: column;
	background: var(--sz-papier); border: 1px solid var(--sz-linie); border-radius: var(--sz-rund-m); overflow: hidden;
}
.sz-hell .sz-kacheln__karte, .sz-grund--hell .sz-kacheln__karte { border-color: transparent; }
.sz-kacheln__bild { inline-size: 100%; aspect-ratio: var(--sz-bild-karte); object-fit: cover; background: var(--sz-hell); }
.sz-kacheln__text { display: grid; gap: var(--sz-raum-2); padding: var(--sz-raum-5); flex: 1; align-content: start; }
.sz-kacheln__merkmal { font-size: var(--sz-text-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--sz-orange-text); }
.sz-kacheln__titel { font-size: var(--sz-text-l); }
.sz-kacheln__link { color: var(--sz-blau); text-decoration: none; }
.sz-kacheln__link::after { content: ""; position: absolute; inset: 0; }
.sz-kacheln__beschreibung { color: var(--sz-tinte-leise); font-size: var(--sz-text-s); }
.sz-kacheln__pfeil { color: var(--sz-orange-text); margin-block-start: auto; padding-block-start: var(--sz-raum-2); }
.sz-kacheln__pfeil svg { inline-size: 2.4rem; block-size: 2.4rem; transition: transform .15s ease; }
.sz-kacheln__karte--link:hover { border-color: var(--sz-blau); }
.sz-kacheln__karte--link:hover .sz-kacheln__pfeil svg { transform: translateX(4px); }
.sz-kacheln__karte--link:has(.sz-kacheln__link:focus-visible) { outline: 3px solid var(--sz-blau); outline-offset: 2px; }
.sz-kacheln__link:focus-visible { outline: none; }
.sz-kacheln[data-variante="wege"] .sz-kacheln__karte { border-block-start: 4px solid var(--sz-orange); }
.sz-kacheln__nr { font-size: var(--sz-text-xl); font-weight: 700; color: var(--sz-orange-text); } /* 5,8 zu 1, vorher Blau mit Deckkraft 2,1 zu 1 */
.sz-grund--blau .sz-kacheln__nr { color: var(--sz-orange); }
.sz-grund--blau .sz-kacheln__karte { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .2); }
.sz-grund--blau .sz-kacheln__link { color: var(--sz-invers); }
.sz-grund--blau .sz-kacheln__beschreibung { color: var(--sz-invers-leise); }
@media (min-width: 40rem) { .sz-kacheln__liste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .sz-kacheln__liste { grid-template-columns: repeat(var(--sz-spalten, 3), 1fr); } }

/* Kompakt (Produktübersicht, Ben 28.09.2026): flachere Bilder, damit die Vergleichstabelle darunter noch auf den Bildschirm reicht. */
.sz-kacheln[data-kompakt] .sz-kacheln__bild { aspect-ratio: 16 / 9; }
.sz-kacheln[data-kompakt] .sz-kacheln__rahmen { padding-block: var(--sz-raum-7); }
.sz-kacheln__nachtext { margin-block-start: var(--sz-raum-5); max-inline-size: 64ch; }