/* ============================================================================
teil-z7-angebote.css — die aktuellen Angebote als Karussell.
Anlass, Christopher am 03.10.2026 per Sprachnachricht:
„Fuer die aktuellen Angebote, da muss ein Bilderkarussell oder irgendein
moderner Slider oder Kacheln zum Grossklicken, dann nicht einfach der
Reihe nach runter skripten."
GEMESSEN am 03.10.2026 an der LAUFENDEN Seite, Fenster 1512x950:
/augenoptik/ #angebote 6840 px — 7,2 Bildschirme, fuenf Plakate
untereinander, jedes 694x982 px angezeigt.
/hoerakustik/ #angebote 4053 px.
Kein einziges Bild in beiden Abschnitten traegt srcset oder sizes
(0 von 9 nachgezaehlt). Darum wird das ![]()
hier unveraendert
durchgereicht und nicht neu gebaut — die Vorlage gibt den Rohtext aus
WordPress aus (wp_kses_post), es gibt nichts hinzuzufuegen und nichts
zu verlieren.
Die Plakate sind seine eigenen Kampagnenlayouts, 723x1024 px
(Verhaeltnis 0,706), 62-115 KiB. Auf /hoerakustik/ stehen daneben
722x1024, 893x1024 und 1020x816 — also auch ein Querformat.
Darum object-fit:contain und NIE ein Beschnitt: das Plakat IST das
Angebot, ein angeschnittener Preis ist ein falscher Preis.
KACHELBREITE, nachgerechnet 03.10.2026:
.bahn ist max-width:1560px MIT padding-inline:var(--gasse) (grund.css
Zeile 55). Bei voller Breite ist --gasse 56 px, die Spur also 1448 px
innen. Drei Kacheln mit zwei Luecken von 28 px:
(1448 - 56) / 3 = 464 px
Gedeckelt wird bei 430 px, damit bei 1448 px Spur eine vierte Kachel
104 px weit hereinschaut — das ist das Zeichen, dass es weitergeht.
Hoehe einer Kachel daraus: 430 / 0,706 = 609 px Plakat.
Unter 940 px zwei nebeneinander (gerechnet: 424 px bei 940 px Fenster),
unter 430 px eine. Kein Querscrollen der Seite: die Spur greift mit
negativem Rand genau um --gasse in die Gasse und holt sie als padding
zurueck.
NACHGEMESSEN am 03.10.2026 im Probelauf — die Vorlage mit dem ECHTEN
Seiteninhalt gerechnet, alle 23 Stilblaetter dieses Ordners geladen
(einschliesslich teil-z1 bis z8), Chromium:
1512x950 #angebote /augenoptik/ 6840 px -> 1177 px
#angebote /hoerakustik/ 4053 px -> 1200 px
Kachel 430 px, Plakat 428x606 px, 3,28 Kacheln sichtbar.
Die Hoerakustik liegt 23 px hoeher, weil ihre erste
Ueberschrift ueber drei Zeilen laeuft. Gegengerechnet: eine
Kachel auf 410 px haette beide unter 1150 gebracht, haette
aber seine Plakate kleiner gemacht — das wiegt schwerer.
375x812 Kachel 309 px, Plakat 309x435, Abschnitt 966 px,
document.scrollWidth 375 px = kein Querscrollen.
Gegengeprueft wird nach dem Deploy am laufenden Dienst.
KEIN Autoplay. Es sind Angebote, keine Diashow.
Der Name beginnt mit „z7", damit functions.php sie alphabetisch als letzte
der teil-*.css einbindet (functions.php Zeile 57-61, gelesen 03.10.2026).
Darum steht hier kein einziges !important.
========================================================================= */
/* ── Die Wiege ────────────────────────────────────────────────────────── */
.leistung .angebote{
--angebot-luft:clamp(14px,1.8vw,28px);
--angebot-breite:clamp(256px, calc((100% - 2 * var(--angebot-luft)) / 3), 430px);
--angebot-blick:34px; /* Blick auf die naechste Kachel, Handy */
}
/* Die Einstiegszeile ist die erste Ueberschrift des Angebotsthemas — auf
beiden Sammelseiten ein ganzer Satz („Hier finden Sie eine Uebersicht …"),
der ohne eigenen Rumpf dasteht. Als Ueberschrift ueber einem Karussell
waere er eine Stufe zu viel, als Zeile davor liest er sich wie gedacht. */
.leistung .angebote-einstieg{
max-width:68ch; margin:0 0 clamp(1.1rem,2.4vw,1.6rem);
font-size:clamp(1rem,1.35vw,1.14rem); line-height:1.6;
color:var(--text-leise); text-wrap:pretty;
}
/* ── Die Spur ─────────────────────────────────────────────────────────── */
.leistung .angebote-spur{
display:flex; align-items:stretch;
gap:var(--angebot-luft);
overflow-x:auto; overflow-y:hidden;
scroll-snap-type:x mandatory;
scroll-padding-inline:var(--gasse);
scroll-behavior:smooth;
/* Rand und Polster heben sich auf: die Spur reicht bis an den Fensterrand,
ohne die Seite breiter zu machen. */
margin-inline:calc(var(--gasse) * -1);
padding:10px var(--gasse) 14px;
overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch;
scrollbar-width:none; /* Pfeile und Punkte tragen die Bedienung */
-ms-overflow-style:none;
}
.leistung .angebote-spur::-webkit-scrollbar{ width:0; height:0 }
.leistung .angebote-spur:focus-visible{
outline:3px solid var(--blau-hell); outline-offset:3px; border-radius:var(--r-m);
}
/* ── Die Kachel ───────────────────────────────────────────────────────── */
/* ACHTUNG, Namensnachbar: .angebot gibt es schon — seiten.css Zeile 772, die
Kachel der eigenen Angebotsseite (vorlagen/angebote.php). Von dort kommt
padding:clamp(1.25rem,2.6vw,2.1rem) und gap:clamp(.7rem,1.3vw,1rem).
Gemessen am 03.10.2026 im Probelauf bei 1512 px: das Polster von 33,6 px
druckte das Plakat auf 361 statt 430 px Breite und auf 511 statt 609 px
Hoehe. Hier soll das Plakat bis an die Kachelkante laufen, das Polster
traegt allein der Fuss. Also beides zurueckgenommen. Kein !important
noetig: z7 laedt nach seiten.css, und (0,2,0) schlaegt (0,1,0).
Was von dort bleiben DARF und bleibt: transition, :hover/:focus-within mit
transform:translateY(-6px), Schatten und Randfarbe — ein Besitzer je
Wirkung ist besser als zwei, die sich ueberschreiben. Der Zweig fuer
reduzierte Bewegung ganz unten nimmt diesen Hub mit zurueck. */
.leistung .angebot{
flex:0 0 auto; width:var(--angebot-breite);
scroll-snap-align:center;
display:flex; flex-direction:column;
padding:0; gap:0;
border-radius:var(--r-l);
}
.leistung .angebot-weg{
display:block; position:relative; text-decoration:none; color:inherit;
}
.leistung .angebot-weg:focus-visible{
outline:3px solid var(--blau-hell); outline-offset:-3px;
}
.leistung .angebot-bild{
display:block; aspect-ratio:723 / 1024; /* das Hochformat seiner Plakate */
background:var(--creme-2);
}
.leistung .angebot-bild img{
display:block; width:100%; height:100%;
object-fit:contain; object-position:center;
/* kein border-radius, kein Schatten: die Kachel rundet schon, und ein
Schatten auf einem Plakat in einer Glaskachel ist ein Schatten zu viel */
}
/* „Gross ansehen" steht immer da, nicht erst beim Zeigen: auf dem Telefon
gibt es kein Zeigen. */
.leistung .angebot-lupe{
position:absolute; right:12px; bottom:12px;
display:inline-flex; align-items:center; gap:.45em;
padding:.42em .9em; border-radius:var(--r-rund);
background:rgba(255,255,255,.86);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
box-shadow:0 4px 16px rgba(19,55,109,.16);
font-size:.8rem; font-weight:800; color:var(--blau);
transition:transform .3s var(--weich), background .25s;
}
.leistung .angebot-lupe::before{
content:""; width:.82em; height:.82em; border-radius:var(--r-rund);
border:2px solid currentColor; flex:0 0 auto;
box-shadow:.52em .52em 0 -.34em currentColor; /* der Griff der Lupe */
}
.leistung .angebot-weg:hover .angebot-lupe,
.leistung .angebot-weg:focus-visible .angebot-lupe{
transform:translateY(-2px); background:var(--weiss);
}
/* Ein Anhang, der kein Bild ist. Gemessen 03.10.2026 auf /hoerakustik/:
— der Browser kann das
nicht zeichnen, dort stand ein kaputtes Bild. Jetzt steht da, was es ist. */
.leistung .angebot-datei{
display:flex; align-items:center; justify-content:center;
aspect-ratio:723 / 1024; margin:0; padding:clamp(1rem,3vw,1.8rem);
background:var(--creme-2); text-align:center;
}
.leistung .angebot-datei a{
font-weight:800; color:var(--blau); text-underline-offset:.22em;
text-decoration-thickness:1.5px;
text-decoration-color:color-mix(in oklab, var(--blau) 38%, transparent);
}
.leistung .angebot-datei a:hover{ text-decoration-color:var(--gold) }
.leistung .angebot-fuss{
display:flex; flex-direction:column; gap:.4rem;
padding:clamp(.85rem,1.8vw,1.15rem) clamp(.95rem,2vw,1.3rem) clamp(1rem,2vw,1.25rem);
}
.leistung .angebot-titel{
margin:0; font-weight:800; line-height:1.22;
font-size:clamp(1.02rem,1.35vw,1.18rem); color:var(--blau);
text-wrap:balance; overflow-wrap:break-word; hyphens:auto;
scroll-margin-top:calc(var(--kopf-unten) + var(--sprung-hoehe) + 12px);
}
.leistung .angebot-text{
font-size:clamp(.9rem,1.1vw,.95rem); line-height:1.55; color:var(--text-leise);
overflow-wrap:break-word; text-wrap:pretty;
}
.leistung .angebot-text > :first-child{ margin-top:0 }
.leistung .angebot-text > :last-child{ margin-bottom:0 }
.leistung .angebot-text p{ margin:0 0 .6em }
/* Die Emoji-Bildchen aus den uebernommenen Facebook-Texten: 16x16 px aus
static.xx.fbcdn.net, drei davon im Band „Winterzeit" (gemessen 03.10.2026).
Sie stehen mitten im Satz und duerfen keine Bildkachel werden. */
.leistung .angebot-text img{
display:inline; width:auto; height:1.05em; vertical-align:-.16em;
margin:0 .08em; border-radius:0; box-shadow:none;
}
/* Gekuerzt wird NUR, wenn das Skript laeuft: ohne Skript gibt es keinen
Leuchtkasten, in dem der Rest nachzulesen waere. Dann bleibt der ganze
Text stehen und die Kachel wird eben hoeher. */
.leistung .angebote-bereit .angebot-text{
max-height:3.1em; overflow:hidden;
}
/* ── Pfeile und Punkte ────────────────────────────────────────────────── */
.leistung .angebote-steuer{
display:flex; align-items:center; justify-content:center;
gap:clamp(.7rem,1.8vw,1.2rem);
margin-top:clamp(.9rem,2vw,1.3rem);
}
.leistung .angebote-pfeil{
flex:0 0 auto; width:44px; height:44px; padding:0;
display:inline-flex; align-items:center; justify-content:center;
border:1px solid var(--glas-rand); border-radius:var(--r-rund);
background:var(--glas);
-webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
box-shadow:var(--glas-schatten);
color:var(--blau); font:inherit; cursor:pointer;
transition:transform .3s var(--weich), box-shadow .3s var(--weich),
background .25s, opacity .25s;
}
.leistung .angebote-pfeil[hidden]{ display:none } /* ohne Skript kein toter Knopf */
.leistung .angebote-pfeil::before{
content:""; width:11px; height:11px;
border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor;
border-radius:2px;
}
.leistung .angebote-pfeil[data-schritt="-1"]::before{ transform:rotate(135deg); margin-left:4px }
.leistung .angebote-pfeil[data-schritt="1"]::before{ transform:rotate(-45deg); margin-right:4px }
.leistung .angebote-pfeil:hover:not(:disabled){
transform:translateY(-2px); background:var(--weiss);
box-shadow:0 12px 28px rgba(19,55,109,.14);
}
.leistung .angebote-pfeil:active:not(:disabled){ transform:translateY(0) }
.leistung .angebote-pfeil:disabled{ opacity:.34; cursor:default }
.leistung .angebote-pfeil:focus-visible{
outline:3px solid var(--blau-hell); outline-offset:2px;
}
.leistung .angebote-punkte{
display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
justify-content:center;
}
.leistung .angebote-punkt{
display:block; width:26px; height:16px; padding:6px 0;
background:none; text-decoration:none;
transition:transform .3s var(--weich);
}
.leistung .angebote-punkt::before{
content:""; display:block; height:4px; border-radius:var(--r-rund);
background:color-mix(in oklab, var(--blau) 24%, transparent);
transition:background .3s, height .3s var(--weich);
}
.leistung .angebote-punkt:hover::before{
background:color-mix(in oklab, var(--blau) 48%, transparent);
}
.leistung .angebote-punkt[aria-current="true"]::before{
background:linear-gradient(90deg,var(--gold),var(--gold-tief)); height:5px;
}
.leistung .angebote-punkt:focus-visible{
outline:3px solid var(--blau-hell); outline-offset:2px; border-radius:var(--r-s);
}
/* ── Der Leuchtkasten ─────────────────────────────────────────────────── */
/*