legen, sonst nichts:
1 Bild → ruhiges Standbild (keine Animation)
2–8 Bild → automatische Überblendung, jedes Bild gleich lang sichtbar
Die Anzahl erkennt das CSS selbst (per :has), Anzeigedauer je Bild = --takt.
Bei "Bewegung reduzieren" (Systemeinstellung) steht nur das erste Bild.
MEHR ALS 8 BILDER: unten einen weiteren Block nach demselben Muster ergänzen
(Anzahl-Erkennung + Keyframe wechselN mit SLOT = 100/N). Ganz ohne Obergrenze
geht es in reinem CSS nicht, weil die Überblend-Zeiten die Anzahl kennen müssen. */
.wechsel { --takt: 6s; position: relative; margin: 0; }
.wechsel img { width: 100%; height: auto; border-radius: 16px; border: 4px solid #fff; box-shadow: 0 4px 14px rgba(30,60,35,.2); display: block; }
/* jedes weitere Bild deckungsgleich über das erste legen (erstes bleibt im Fluss und gibt die Höhe vor) */
.wechsel img + img { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0; }
/* Optionale Beschriftung: je Bild eine (in Bild-Reihenfolge).
Sie liegt als Balken unten im Bild und blendet synchron mit den Bildern um.
WARUM KEIN figcaption: HTML erlaubt je nur EINE ; mehrere
sind ein Validierungsfehler (W3C-Pruefung am 03.10.2026). Bei nur einem Bild
darf es weiterhin eine sein, beide Formen sind hier beruecksichtigt. */
.wechsel :is(figcaption, .bildtext) {
position: absolute; left: 4px; right: 4px; bottom: 4px; margin: 0;
padding: .5rem 1rem; background: rgba(36, 81, 44, .85); color: #fff;
font-weight: 600; font-size: .95rem; border-radius: 0 0 12px 12px; opacity: 0;
}
/* gemeinsame Animationsbasis – gilt auch fuer die Beschriftungen (figcaption) */
.wechsel :is(img, figcaption, .bildtext) { animation-duration: var(--total); animation-iteration-count: infinite; animation-timing-function: ease; }
/* Startversatz je Position (Bild ODER Beschriftung, jeweils nach eigenem Typ gezaehlt) */
.wechsel :is(img, figcaption, .bildtext):nth-of-type(1) { animation-delay: calc(0 * var(--takt)); }
.wechsel :is(img, figcaption, .bildtext):nth-of-type(2) { animation-delay: calc(1 * var(--takt)); }
.wechsel :is(img, figcaption, .bildtext):nth-of-type(3) { animation-delay: calc(2 * var(--takt)); }
.wechsel :is(img, figcaption, .bildtext):nth-of-type(4) { animation-delay: calc(3 * var(--takt)); }
.wechsel :is(img, figcaption, .bildtext):nth-of-type(5) { animation-delay: calc(4 * var(--takt)); }
.wechsel :is(img, figcaption, .bildtext):nth-of-type(6) { animation-delay: calc(5 * var(--takt)); }
.wechsel :is(img, figcaption, .bildtext):nth-of-type(7) { animation-delay: calc(6 * var(--takt)); }
.wechsel :is(img, figcaption, .bildtext):nth-of-type(8) { animation-delay: calc(7 * var(--takt)); }
.wechsel:hover :is(img, figcaption) { animation-play-state: paused; }
/* Anzahl-Erkennung: Gesamtdauer (--total) + passendes Keyframe je Bildzahl */
.wechsel:not(:has(img:nth-of-type(2))) :is(img, figcaption) { animation: none; } /* 1 Bild: Standbild */
.wechsel:not(:has(img:nth-of-type(2))) :is(figcaption, .bildtext) { opacity: 1; } /* einzelne Beschriftung fest sichtbar */
.wechsel:has(img:nth-of-type(2)):not(:has(img:nth-of-type(3))) { --total: calc(2 * var(--takt)); }
.wechsel:has(img:nth-of-type(2)):not(:has(img:nth-of-type(3))) :is(img, figcaption) { animation-name: wechsel2; }
.wechsel:has(img:nth-of-type(3)):not(:has(img:nth-of-type(4))) { --total: calc(3 * var(--takt)); }
.wechsel:has(img:nth-of-type(3)):not(:has(img:nth-of-type(4))) :is(img, figcaption) { animation-name: wechsel3; }
.wechsel:has(img:nth-of-type(4)):not(:has(img:nth-of-type(5))) { --total: calc(4 * var(--takt)); }
.wechsel:has(img:nth-of-type(4)):not(:has(img:nth-of-type(5))) :is(img, figcaption) { animation-name: wechsel4; }
.wechsel:has(img:nth-of-type(5)):not(:has(img:nth-of-type(6))) { --total: calc(5 * var(--takt)); }
.wechsel:has(img:nth-of-type(5)):not(:has(img:nth-of-type(6))) :is(img, figcaption) { animation-name: wechsel5; }
.wechsel:has(img:nth-of-type(6)):not(:has(img:nth-of-type(7))) { --total: calc(6 * var(--takt)); }
.wechsel:has(img:nth-of-type(6)):not(:has(img:nth-of-type(7))) :is(img, figcaption) { animation-name: wechsel6; }
.wechsel:has(img:nth-of-type(7)):not(:has(img:nth-of-type(8))) { --total: calc(7 * var(--takt)); }
.wechsel:has(img:nth-of-type(7)):not(:has(img:nth-of-type(8))) :is(img, figcaption) { animation-name: wechsel7; }
.wechsel:has(img:nth-of-type(8)) { --total: calc(8 * var(--takt)); }
.wechsel:has(img:nth-of-type(8)) :is(img, figcaption) { animation-name: wechsel8; }
/* Jedes Bild ist 1/Anzahl der Zeit sichtbar, dann weiche Überblendung.
Aufbau: sichtbar bis SLOT%, ausblenden (~4%), unsichtbar, am Ende wieder ein.
SLOT = 100/Anzahl. */
@keyframes wechsel2 { 0%{opacity:1;z-index:1} 50%{opacity:1} 54%,96%{opacity:0;z-index:0} 100%{opacity:1;z-index:1} }
@keyframes wechsel3 { 0%{opacity:1;z-index:1} 33.33%{opacity:1} 37.33%,96%{opacity:0;z-index:0} 100%{opacity:1;z-index:1} }
@keyframes wechsel4 { 0%{opacity:1;z-index:1} 25%{opacity:1} 29%,96%{opacity:0;z-index:0} 100%{opacity:1;z-index:1} }
@keyframes wechsel5 { 0%{opacity:1;z-index:1} 20%{opacity:1} 24%,96%{opacity:0;z-index:0} 100%{opacity:1;z-index:1} }
@keyframes wechsel6 { 0%{opacity:1;z-index:1} 16.66%{opacity:1} 20.66%,96%{opacity:0;z-index:0} 100%{opacity:1;z-index:1} }
@keyframes wechsel7 { 0%{opacity:1;z-index:1} 14.28%{opacity:1} 18.28%,96%{opacity:0;z-index:0} 100%{opacity:1;z-index:1} }
@keyframes wechsel8 { 0%{opacity:1;z-index:1} 12.5%{opacity:1} 16.5%,96%{opacity:0;z-index:0} 100%{opacity:1;z-index:1} }
@media (prefers-reduced-motion: reduce) {
.wechsel :is(img, figcaption, .bildtext) { animation: none !important; }
.wechsel img + img { opacity: 0; }
.wechsel :is(figcaption, .bildtext) { opacity: 0; }
.wechsel :is(figcaption, .bildtext):first-of-type { opacity: 1; } /* erste Beschriftung fest sichtbar */
}
/* Nur auf 21-kueche.html: bläulicher Kasten zum Thema Wasser/Getränke */
.wasser { background: linear-gradient(135deg, #e8f4fb, #f0f7ee); border-radius: 16px; padding: 1.2rem 1.5rem; margin: 1.2rem 0; border: 2px solid #9cc7e0; }
/* --- 7. Fußzeile -------------------------------------------------------- */
footer { background: var(--gruen-tief); color: #d8ecd8; }
.fuss { max-width: 1080px; margin: 0 auto; padding: 0.9rem 1rem; display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
footer a { color: #fff; }
/* --- 8. Anpassung an kleine Bildschirme --------------------------------- */
@media (max-width: 900px) { .raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px) {
.zweispaltig { grid-template-columns: 1fr; }
.galerie { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) { .willkommen, .formwahl { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .vorstellung, .text-objekt { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .daten { grid-template-columns: 1fr; gap: 0; } }
@media (max-width: 500px) { .galerie { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .raster { grid-template-columns: 1fr; } }
/* --- 9. Druckansicht (einheitlich für alle Seiten) ---------------------- */
/* Kopf, Navigation, Brotkrumen, Sprungnav, Knöpfe und Fußzeile raus –
auf Papier zählt nur der Inhalt, schlicht und sparsam. */
@media print {
body { background: #fff; color: #000; font-size: 12pt; }
header, nav.haupt, .brotkrumen, .sprungnav, footer, .skip-link, .knopf, .zurueck { display: none !important; }
.inhalt { max-width: none; padding: 0; }
.kernsatz, .hinweis, .karte, .block, .linkkarte, .haftung, .ziel { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
.skizze img, .galerie img, .objektkarte img, .wechsel img { border: 1px solid #999; box-shadow: none; }
a { color: #000; }
h1, h2, h3 { color: #000; }
/* Externe Links im Fließtext bekommen auf Papier die Adresse dazu: Ein Pfeil
nützt auf dem Ausdruck nichts, die Adresse schon — so geht beim Drucken
eines Textes keine Information verloren. Gilt für alle Links mit
target="_blank", das sind genau die fremden. */
a[target="_blank"]::after { content: " (" attr(href) ")"; font-weight: 400; font-size: 10pt; }
/* AUSNAHME, und zwar mit Absicht: Auf der Linkseite bleiben die Adressen weg.
Dort besteht die Seite nur aus Links; ausgeschrieben hinter jedem der 37
Titel würde das die Seite sprengen, und gedruckt nützen sie dort nichts —
die Links sollen angeklickt werden. Der Pfeil bleibt aber stehen, damit
auch auf Papier erkennbar ist, dass es nach draußen geht; nur die Farbe
wird schwarz. Die Regel ist spezifischer als die obige und gewinnt,
deshalb erscheint hier keine Adresse. */
.linkkarte a.titel::after { color: #000; }
}