/* Karten passen in das freie Browserfenster. Mindesthöhen dürfen mit Inhalt wachsen:
   bei Zoom oder langen Texten bleibt die ganze Karte im normalen Dokumentfluss. */
html.katalog-bildkarten {
    --karten-fenster: max(320px, calc(100svh - var(--karten-kopf, 54px)));
    scroll-padding-top: var(--karten-kopf, 54px);
    scroll-snap-type: y proximity;
}
.katalog-bildkarten [data-katalog-karte] {
    min-height: var(--karten-fenster);
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    scroll-margin-top: 0;
}
/* Reveal-Translation verschiebt sonst den Einrastpunkt während der Annäherung. */
.katalog-bildkarten [data-katalog-karte].reveal { transform: none; }
.katalog-bildkarten .st-hero[data-katalog-karte] { display: grid; grid-template-rows: minmax(240px, 1fr) auto; }
.katalog-bildkarten .st-hero.ohne-bild[data-katalog-karte] { grid-template-rows: auto; }
.katalog-bildkarten [data-katalog-karte] .st-hero-medium { aspect-ratio: auto; max-height: none; min-height: 240px; }
.katalog-bildkarten .st-welt[data-katalog-karte] { grid-template-rows: minmax(0, 1fr) auto; }
.katalog-bildkarten [data-katalog-karte] .st-welt-bild { position: relative; min-height: 320px; }
.katalog-bildkarten [data-katalog-karte] .st-welt-bild > img { position: absolute; inset: 0; }
.katalog-bildkarten [data-katalog-karte] .st-welt-text { padding: clamp(24px, 4vh, 56px) clamp(24px, 4vw, 56px); }
.katalog-bildkarten .st-haus[data-katalog-karte] { display: grid; grid-template-rows: minmax(240px, 1fr) auto; }
.katalog-bildkarten [data-katalog-karte] .st-haus-bild { position: relative; aspect-ratio: auto; max-height: none; }
.katalog-bildkarten [data-katalog-karte] .st-haus-bild img { position: absolute; inset: 0; }
.katalog-bildkarten .stella-split[data-katalog-karte] .stella-editorial-image { position: relative; min-height: 320px; }
.katalog-bildkarten .stella-split[data-katalog-karte] .stella-editorial-image img { position: absolute; inset: 0; height: 100%; }
@media (max-width: 900px) {
    .katalog-bildkarten [data-katalog-karte] .st-welt-bild,
    .katalog-bildkarten [data-katalog-karte] .st-hero-medium,
    .katalog-bildkarten [data-katalog-karte] .st-haus-bild { min-height: clamp(240px, 45svh, 540px); }
}
@media (prefers-reduced-motion: reduce) {
    html.katalog-bildkarten { scroll-snap-type: none; scroll-behavior: auto; }
}
/* Der Abstand sitzt am Scrollcontainer, auch bei Marken mit eigenen Ankerregeln. */
html.katalog-bildkarten [data-katalog-karte][id] { scroll-margin-top: 0; }
@media (max-width: 900px) {
    .katalog-bildkarten .st-welt[data-katalog-karte] { grid-template-rows: auto; }
    .katalog-bildkarten [data-katalog-karte] .st-welt-bild { width: 100%; min-width: 0; aspect-ratio: auto; }
}
.katalog-bildkarten [data-katalog-karte] .st-produkt-text { overflow-wrap: anywhere; }