--fp Ausschnitt Desktop (object-position / background-position)
--fp-t Ausschnitt Tablet 769–1100 px (optional, sonst --fp)
--fp-m Ausschnitt Mobil bis 768 px (optional, sonst --fp)
Erster Wert = horizontal, zweiter = vertikal. Bei Hochkant-Fotos in
breiten Flächen entscheidet der zweite Wert, welche Höhe zu sehen ist.
========================================================================== */
.fp { object-position: var(--fp, 50% 50%) !important; }
.fp-bg { background-position: var(--fp, 50% 50%) !important; }
@media (min-width: 769px) and (max-width: 1100px) {
.fp { object-position: var(--fp-t, var(--fp, 50% 50%)) !important; }
.fp-bg { background-position: var(--fp-t, var(--fp, 50% 50%)) !important; }
}
@media (max-width: 768px) {
.fp { object-position: var(--fp-m, var(--fp, 50% 50%)) !important; }
.fp-bg { background-position: var(--fp-m, var(--fp, 50% 50%)) !important; }
}
/* --------------------------------------------------------------------------
KI-Hinweis — für Bilder, die (noch) KI-generiert sind.
Der Container des Bildes bekommt .ki-bild, darin steht
KI-generiert
Varianten: .ki-hinweis--oben, .ki-hinweis--links
-------------------------------------------------------------------------- */
.ki-bild { position: relative; }
.ki-hinweis {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 4;
padding: 3px 9px;
border-radius: 999px;
background: rgba(26, 20, 20, 0.72);
color: #fff;
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
line-height: 1.35;
letter-spacing: 0.02em;
white-space: nowrap;
pointer-events: none;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.ki-hinweis--oben { top: 10px; bottom: auto; }
.ki-hinweis--links { left: 10px; right: auto; }
/* --------------------------------------------------------------------------
Foto-Collage für Hero-Bereiche („Hero-Bild zusammenstellen")
Mehrere Hochkant-Fotos nebeneinander, mobil nur das erste.
…
Liegt absolut im Hero (der Hero braucht position: relative). Der Verlauf
für die Lesbarkeit des Textes kommt über ::after; .foto-collage--ohne-verlauf
schaltet ihn ab, wenn der Hero schon einen eigenen hat.
-------------------------------------------------------------------------- */
.foto-collage {
position: absolute;
inset: 0;
z-index: 0;
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: 3px;
background: var(--rp-tiefschwarz);
overflow: hidden;
}
.foto-collage img {
display: block;
width: 100%;
height: 100%;
min-width: 0;
object-fit: cover;
}
.foto-collage::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(20, 16, 15, 0.55) 0%, rgba(20, 16, 15, 0.15) 30%, rgba(20, 16, 15, 0.85) 100%);
}
.foto-collage--ohne-verlauf::after { content: none; }
@media (min-width: 769px) and (max-width: 1100px) {
.foto-collage img:nth-child(n+4) { display: none; }
}
@media (max-width: 768px) {
.foto-collage { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 100%; }
.foto-collage img:not(:first-child) { display: none; }
}
/* --------------------------------------------------------------------------
Mobil: Fotos wechseln sich ab (.foto-collage--wechsel, seit 16.10.2026)
Statt nur des ersten Fotos blendet die Collage auf dem Handy alle Fotos
nacheinander über (je 6 s, 1 s Überblendung, leichter Zoom). Das neue Foto
blendet über dem stehenden alten ein (z-index), so wird es dazwischen nicht
dunkel; der Verlauf für den Text liegt darüber.
Reihenfolge: --i am Bild (0 = Startbild), sonst die Reihenfolge im HTML.
data-start markiert das Startbild für „Bewegung reduzieren" (dann steht
nur dieses Bild, ohne Wechsel). Ausschnitt je Bild wie immer mit --fp-m.
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
.foto-collage--wechsel { display: block; }
.foto-collage--wechsel img {
position: absolute; inset: 0; width: 100%; height: 100%;
display: block !important; opacity: 0;
animation: foto-wechsel-4 24s linear infinite backwards;
animation-delay: calc(var(--i, 0) * 6s - 1s);
}
.foto-collage--wechsel::after { z-index: 3; }
.foto-collage--wechsel img:nth-child(1) { --i: 0; }
.foto-collage--wechsel img:nth-child(2) { --i: 1; }
.foto-collage--wechsel img:nth-child(3) { --i: 2; }
.foto-collage--wechsel img:nth-child(4) { --i: 3; }
.foto-collage--wechsel img:nth-child(5) { --i: 4; }
.foto-collage--wechsel img:nth-child(6) { --i: 5; }
.foto-collage--wechsel img:first-child:nth-last-child(3),
.foto-collage--wechsel img:first-child:nth-last-child(3) ~ img { animation-name: foto-wechsel-3; animation-duration: 18s; }
.foto-collage--wechsel img:first-child:nth-last-child(5),
.foto-collage--wechsel img:first-child:nth-last-child(5) ~ img { animation-name: foto-wechsel-5; animation-duration: 30s; }
.foto-collage--wechsel img:first-child:nth-last-child(6),
.foto-collage--wechsel img:first-child:nth-last-child(6) ~ img { animation-name: foto-wechsel-6; animation-duration: 36s; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
.foto-collage--wechsel img { animation: none; }
.foto-collage--wechsel img:first-child,
.foto-collage--wechsel img[data-start] { opacity: 1; }
.foto-collage--wechsel:has(img[data-start]) img:first-child:not([data-start]) { opacity: 0; }
}
/* Je Foto: 1 s einblenden (oben), 6 s stehen, dann aus, sobald das nächste
ganz da ist. Prozente = Sekunden / (Anzahl Fotos × 6 s). */
@keyframes foto-wechsel-3 {
0% { opacity: 0; scale: 1.06; z-index: 2; }
5.5556% { opacity: 1; z-index: 2; }
5.5656% { z-index: 1; }
38.8889% { opacity: 1; scale: 1; }
38.8989% { opacity: 0; }
100% { opacity: 0; scale: 1; z-index: 1; }
}
@keyframes foto-wechsel-4 {
0% { opacity: 0; scale: 1.06; z-index: 2; }
4.1667% { opacity: 1; z-index: 2; }
4.1767% { z-index: 1; }
29.1667% { opacity: 1; scale: 1; }
29.1767% { opacity: 0; }
100% { opacity: 0; scale: 1; z-index: 1; }
}
@keyframes foto-wechsel-5 {
0% { opacity: 0; scale: 1.06; z-index: 2; }
3.3333% { opacity: 1; z-index: 2; }
3.3433% { z-index: 1; }
23.3333% { opacity: 1; scale: 1; }
23.3433% { opacity: 0; }
100% { opacity: 0; scale: 1; z-index: 1; }
}
@keyframes foto-wechsel-6 {
0% { opacity: 0; scale: 1.06; z-index: 2; }
2.7778% { opacity: 1; z-index: 2; }
2.7878% { z-index: 1; }
19.4444% { opacity: 1; scale: 1; }
19.4544% { opacity: 0; }
100% { opacity: 0; scale: 1; z-index: 1; }
}