/* ============================================================ GÄRTNEREI HOHN — BEWEGUNG & STORYTELLING ------------------------------------------------------------ REGEL: Jeder Effekt hier respektiert prefers-reduced-motion. Wer Bewegung abgestellt hat, sieht den Endzustand — nie nichts. Das A11y-Widget schaltet .no-motion am , das gilt zusätzlich. ============================================================ */ /* ============================================================ 1 · SCROLL-REVEAL ============================================================ */ .reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s cubic-bezier(.22,.72,.28,1), transform .9s cubic-bezier(.22,.72,.28,1); will-change: opacity, transform; } .reveal.sichtbar { opacity: 1; transform: none; } .reveal[data-verzug="1"] { transition-delay: .08s; } .reveal[data-verzug="2"] { transition-delay: .16s; } .reveal[data-verzug="3"] { transition-delay: .24s; } .reveal[data-verzug="4"] { transition-delay: .32s; } .reveal[data-verzug="5"] { transition-delay: .40s; } /* Bild schiebt sich auf (Vorhang) */ .reveal-bild { position: relative; overflow: hidden; } .reveal-bild img { transform: scale(1.12); transition: transform 1.6s cubic-bezier(.2,.7,.25,1); } .reveal-bild::after { content: ""; position: absolute; inset: 0; background: var(--hohn-gruen); transform: scaleX(1); transform-origin: right; transition: transform 1.1s cubic-bezier(.75,0,.2,1); } .reveal-bild.sichtbar img { transform: scale(1); } .reveal-bild.sichtbar::after { transform: scaleX(0); } .kein-js .reveal { opacity: 1; transform: none; } .kein-js .reveal-bild::after{ transform: scaleX(0); } .kein-js .reveal-bild img { transform: none; } /* ============================================================ 2 · BÜHNE — Vollbild, Drohnenvideo ============================================================ */ .buehne-voll { position: relative; min-height: 100svh; display: grid; place-items: end start; overflow: hidden; padding: 0 0 clamp(3rem, 8vh, 7rem); background: var(--hohn-gruen-nacht); } /* ------------------------------------------------------------ 2a · DIE RÖHRE — Einschalten wie bei einem alten Fernseher 1. Schwarz. Lichtpunkt in der Mitte. 2. Der Punkt zieht sich zur waagerechten Linie auf. 3. Die Linie hält kurz. Das ist der Moment, der es echt macht. 4. Sie klappt senkrecht auf, überschwingt, pendelt aus. 5. Kurzer Helligkeitsblitz, dann steht das Bild. ------------------------------------------------------------ */ .buehne-voll__roehre { position: absolute; inset: 0; z-index: 0; overflow: hidden; transform-origin: center center; will-change: transform, filter, opacity; } .buehne-voll.roehre-bereit .buehne-voll__roehre { opacity: 0; } .buehne-voll.roehre-an .buehne-voll__roehre { animation: roehre-einschalten 1.5s cubic-bezier(.2,.8,.25,1) forwards; } @keyframes roehre-einschalten { 0% { transform: scale3d(.001, .0015, 1); filter: brightness(9) contrast(.3) saturate(0); opacity: 0; } 6% { transform: scale3d(.001, .0015, 1); filter: brightness(9) contrast(.3) saturate(0); opacity: 1; } 20% { transform: scale3d(1, .0015, 1); filter: brightness(9) contrast(.4) saturate(.2); opacity: 1; } 34% { transform: scale3d(1, .003, 1); filter: brightness(8) contrast(.5) saturate(.4); } 58% { transform: scale3d(1, 1.055, 1); filter: brightness(2.4) contrast(1.25) saturate(1.1); } 72% { transform: scale3d(1, .975, 1); filter: brightness(1.35) contrast(1.08); } 86% { transform: scale3d(1, 1.012, 1); filter: brightness(1.08); } 100% { transform: none; filter: none; opacity: 1; } } /* Der Lichtstrich, der beim Aufklappen mitleuchtet und verglüht */ .buehne-voll__strich { position: absolute; z-index: 3; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%) scaleX(0); background: #fff; box-shadow: 0 0 24px 6px rgba(255,255,255,.9), 0 0 60px 18px rgba(255,255,255,.45); opacity: 0; pointer-events: none; } .buehne-voll.roehre-an .buehne-voll__strich { animation: strich-glut 1.5s cubic-bezier(.2,.8,.25,1) forwards; } @keyframes strich-glut { 0% { transform: translateY(-50%) scaleX(0); opacity: 0; } 6% { transform: translateY(-50%) scaleX(.012); opacity: 1; } 20% { transform: translateY(-50%) scaleX(1); opacity: 1; } 40% { transform: translateY(-50%) scaleX(1); opacity: .95; } 62% { transform: translateY(-50%) scaleX(1); opacity: .25; } 100% { transform: translateY(-50%) scaleX(1); opacity: 0; } } .buehne-voll__medium { position: absolute; inset: 0; z-index: 1; } .buehne-voll__medium img, .buehne-voll__medium video { width: 100%; height: 100%; object-fit: cover; } .buehne-voll__poster { position: absolute; inset: 0; z-index: 0; transition: opacity .8s ease; } .buehne-voll.video-laeuft .buehne-voll__poster { opacity: 0; } /* Das Standbild MUSS formatfüllend sein — genau wie das Video darunter. Ohne diese drei Eigenschaften nimmt das Bild seine Originalgröße (1920 × 1080) und sitzt oben links in der Bühne. Rechts und unten bleibt dann der dunkle Hintergrund stehen. Genau das war zu sehen. */ .buehne-voll__poster img { width: 100%; height: 100%; object-fit: cover; object-position: center center; transform: scale(1.04); animation: kenburns 30s ease-in-out infinite alternate; } @keyframes kenburns { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); } } /* Schleier liegt ÜBER der Röhre, damit er nicht mit aufklappt */ .buehne-voll__schleier { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(28,38,33,.55) 0%, rgba(28,38,33,.10) 32%, rgba(28,38,33,.86) 78%, rgba(28,38,33,.96) 100%), linear-gradient(90deg, rgba(28,38,33,.55) 0%, transparent 60%); opacity: 0; transition: opacity .8s ease .5s; } .buehne-voll.geladen .buehne-voll__schleier { opacity: 1; } .buehne-voll__innen { position: relative; z-index: 4; width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--rand); color: #fff; } /* Erste Zeile darf NICHT umbrechen */ .buehne-voll h1 { color: #fff; max-width: none; } .buehne-voll h1 .zeile-maske > span { white-space: nowrap; } .buehne-voll .claim { color: rgba(255,255,255,.85); } .buehne-voll p.blei { color: rgba(255,255,255,.9); max-width: 46ch; } @media (max-width: 720px) { .buehne-voll h1 .zeile-maske > span { white-space: normal; } } /* Text erscheint erst, wenn die Röhre offen ist */ .buehne-voll .claim, .buehne-voll .knopfreihe, .buehne-voll p.blei, .buehne-voll .scroll-hinweis { opacity: 0; transition: opacity .7s ease .15s; } .buehne-voll.geladen .claim, .buehne-voll.geladen .knopfreihe, .buehne-voll.geladen p.blei { opacity: 1; } .buehne-voll.geladen .scroll-hinweis { opacity: .8; } /* Text zeilenweise aufdecken */ .zeile-maske { display: block; overflow: hidden; } .zeile-maske > span { display: block; transform: translateY(105%); transition: transform 1.1s cubic-bezier(.2,.7,.25,1); } .buehne-voll.geladen .zeile-maske > span { transform: none; } .buehne-voll.geladen .zeile-maske:nth-of-type(2) > span { transition-delay: .12s; } /* Scroll-Hinweis */ .scroll-hinweis { position: absolute; z-index: 4; left: 50%; bottom: 1.6rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .6rem; color: rgba(255,255,255,.85); font-size: var(--fs-mikro); letter-spacing: var(--sperr-weit); text-transform: uppercase; font-weight: 700; } .scroll-hinweis span { display: block; width: 1px; height: 42px; background: linear-gradient(180deg, rgba(255,255,255,.9), transparent); animation: tropfen 2.2s ease-in-out infinite; } @keyframes tropfen { 0%, 100% { transform: scaleY(.35); transform-origin: top; opacity: .4; } 50% { transform: scaleY(1); transform-origin: top; opacity: 1; } } /* ============================================================ 3 · ZAHLEN, DIE HOCHZÄHLEN ============================================================ */ .fakt__zahl { font-variant-numeric: tabular-nums; } .fakt { position: relative; } .fakt::after { content: ""; position: absolute; right: -.75rem; top: 15%; bottom: 15%; width: 1px; background: var(--hohn-sand-tief); } .fakt:last-child::after { display: none; } /* ============================================================ 4 · PARALLAX-BAND ============================================================ */ .band { position: relative; min-height: clamp(340px, 58vh, 620px); display: grid; place-items: center; overflow: hidden; color: #fff; } .band__bild { position: absolute; inset: -12% 0; z-index: 0; } .band__bild img { width: 100%; height: 100%; object-fit: cover; will-change: transform; } /* Der Schleier war zu dünn. Nachgerechnet für den ungünstigsten Fall (ein rein weißes Foto darunter): bei 55 % Deckung erreicht selbst weißer Text nur 3,61:1 — durchgefallen. Bei 78/82 % sind es 7,6 bis 8,7:1, die Dachzeile schafft 4,7:1. Damit hält die Lesbarkeit auch dann, wenn ein Bild ausgetauscht wird. */ .band__schleier { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(28,38,33,.82), rgba(28,38,33,.78)); } .band__innen { position: relative; z-index: 2; text-align: center; max-width: 46rem; padding-inline: var(--rand); } .band h2 { color: #fff; } .band p { color: rgba(255,255,255,.9); margin-inline: auto; } .band .dach { color: var(--hohn-erde-licht); } /* gemessen 4,66:1 auf dem Schleier */ /* ============================================================ 5 · LAUFBAND botanischer Namen ============================================================ */ .laufband { overflow: hidden; border-block: 1px solid var(--hohn-linie); padding-block: 1.4rem; background: var(--hohn-weiss); --tempo-lauf: 46s; } .laufband__spur { display: flex; width: max-content; animation: laufen var(--tempo-lauf) linear infinite; } .laufband:hover .laufband__spur { animation-play-state: paused; } .laufband__spur span { display: inline-flex; align-items: center; gap: 2.5rem; padding-inline: 1.25rem; font-size: var(--fs-klein); letter-spacing: var(--sperr-weit); text-transform: uppercase; color: var(--hohn-grau); font-weight: 600; font-style: italic; white-space: nowrap; } .laufband__spur span::after { content: "·"; color: var(--hohn-erde); font-style: normal; font-size: 1.2em; font-weight: 800; } @keyframes laufen { to { transform: translateX(-50%); } } /* ============================================================ 6 · KLEBENDE STORY Das Bild bleibt stehen, bis der GANZE Zeitstrahl durch ist. Dafür braucht das Grid-Item die volle Spaltenhöhe (stretch) und das sticky-Element muss ein KIND davon sein. Mit align-items:start war das Item nur bildhoch — dann hat sticky nichts, woran es kleben kann. Genau das war der Fehler. ============================================================ */ .story { display: grid; grid-template-columns: 1fr 1fr; gap: var(--luft-s); align-items: stretch; } .story__spalte { position: relative; height: 100%; } .story__bilder { position: sticky; top: 7rem; aspect-ratio: 4/5; overflow: hidden; background: var(--hohn-sand); box-shadow: var(--shadow); } .story__bilder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity .9s ease, transform 2s ease; } .story__bilder img.aktiv { opacity: 1; transform: scale(1); } /* Freisteller im Zeitstrahl: eingepasst statt beschnitten */ .story__bilder img.frei { object-fit: contain; padding: 8%; background: none; } .story__marke { position: absolute; z-index: 2; left: 0; bottom: 0; background: var(--hohn-gruen); color: #fff; padding: .75rem 1.5rem; font-size: var(--fs-klein); font-weight: 700; letter-spacing: var(--sperr-weit); } .story__schritt { padding-block: clamp(3rem, 10vh, 7rem); border-left: 1px solid var(--hohn-linie); padding-left: 2.25rem; position: relative; opacity: .38; transition: opacity .6s ease; } .story__schritt.aktiv { opacity: 1; } .story__schritt::before { content: ""; position: absolute; left: -7px; top: clamp(3rem, 10vh, 7rem); width: 13px; height: 13px; border-radius: 50%; background: var(--hohn-weiss); border: 2px solid var(--hohn-linie); transition: all .5s ease; } .story__schritt.aktiv::before { background: var(--hohn-erde); border-color: var(--hohn-erde); box-shadow: 0 0 0 5px rgba(176,80,55,.16); } .story__jahr { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 200; color: var(--hohn-gruen); letter-spacing: var(--sperr-eng); line-height: 1; } /* ============================================================ 7 · MOSAIK ============================================================ */ .mosaik { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(120px, 15vw, 200px); gap: 8px; margin-top: var(--luft-s); } .mosaik figure { position: relative; overflow: hidden; margin: 0; background: var(--hohn-gruen-nacht); } .mosaik img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.3,1); } .mosaik figure:hover img { transform: scale(1.07); } .mosaik figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: 1.5rem 1.25rem .9rem; background: linear-gradient(transparent, rgba(28,38,33,.9)); color: #fff; font-size: var(--fs-mikro); letter-spacing: var(--sperr-mittel); text-transform: uppercase; font-weight: 700; } .m-gross { grid-column: span 2; grid-row: span 2; } .m-breit { grid-column: span 2; } .m-hoch { grid-row: span 2; } /* ============================================================ 8 · FREISTELLER-REGAL Alle Motive haben einen echten Alpha-Kanal. ============================================================ */ .regal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hohn-linie); margin-top: var(--luft-s); border: 1px solid var(--hohn-linie); } .regal figure { margin: 0; background: var(--hohn-weiss); aspect-ratio: 4/5; display: grid; place-items: center; padding: 2rem 1.25rem 4.25rem; position: relative; overflow: hidden; } .regal figure::before { content: ""; position: absolute; inset: auto 0 0 0; height: 0; background: var(--hohn-sand); transition: height .55s cubic-bezier(.22,.72,.28,1); } .regal figure:hover::before, .regal figure:focus-within::before { height: 100%; } .regal img { position: relative; z-index: 1; max-height: 100%; width: auto; background: none; transition: transform .7s cubic-bezier(.2,.7,.3,1); filter: drop-shadow(0 8px 18px rgba(28,34,31,.14)); } .regal figure:hover img { transform: scale(1.06) translateY(-6px); } .regal figcaption { position: absolute; z-index: 2; inset-inline: 0; bottom: 0; padding: 1.1rem .75rem 1.4rem; text-align: center; font-size: var(--fs-mikro); font-style: italic; letter-spacing: var(--sperr-eng); color: var(--hohn-grau); border-top: 1px solid var(--hohn-linie); background: var(--hohn-weiss); transition: color .4s ease, background .4s ease, border-color .4s ease; } .regal figure:hover figcaption { color: var(--hohn-gruen); background: transparent; border-color: transparent; } /* Alpha-Bilder dürfen NIE den Sand-Platzhalter erben */ img[src*="fs-"], .regal img, .marke img, .fuss__logo, .story__bilder img.frei { background: none !important; } /* ============================================================ 9 · TEAM-BAND ============================================================ */ .team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: var(--luft-s); } .team__karte { position: relative; overflow: hidden; aspect-ratio: 3/4; background: var(--hohn-gruen-nacht); } .team__karte img { width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: transform 1.2s cubic-bezier(.2,.7,.3,1), opacity .5s; } .team__karte:hover img { transform: scale(1.05); opacity: 1; } .team__text { position: absolute; inset-inline: 0; bottom: 0; padding: 2rem 1.5rem 1.5rem; background: linear-gradient(transparent, rgba(28,38,33,.94)); color: #fff; } .team__name { font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--sperr-eng); display: block; } .team__rolle { display: block; font-size: var(--fs-mikro); letter-spacing: var(--sperr-weit); text-transform: uppercase; color: var(--hohn-erde-hell); margin-top: .35rem; font-weight: 700; } .team__satz { font-size: var(--fs-klein); color: rgba(255,255,255,.85); margin-top: .75rem; font-weight: 300; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s ease, opacity .5s ease, margin .5s ease; } .team__karte:hover .team__satz, .team__karte:focus-within .team__satz { max-height: 8rem; opacity: 1; } /* ============================================================ 10 · SPLIT ============================================================ */ .split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; } .split__bild { position: relative; overflow: hidden; min-height: 420px; } .split__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .split__text { padding: var(--luft) var(--rand); display: flex; flex-direction: column; justify-content: center; } .split--gruen .split__text { background: var(--hohn-gruen); color: #fff; } .split--gruen h2, .split--gruen h3 { color: #fff; } .split--gruen .blei { color: rgba(255,255,255,.85); } .split--gruen .dach { color: var(--hohn-erde-licht); } /* erde-hell war hier 3,20:1 */ .split__text.flaeche-sand { background: var(--hohn-sand); } .split__text.flaeche-sand h2 { color: var(--hohn-gruen); } .split__text.flaeche-sand .dach { color: var(--hohn-erde); } .split__text.flaeche-sand .blei { color: var(--hohn-grau); } /* ============================================================ 11 · KACHEL-VERFEINERUNG ============================================================ */ .kachel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(28,38,33,.15)); opacity: 0; transition: opacity var(--tempo); } .kachel:hover::after, .kachel:focus-visible::after { opacity: 1; } .kachel__pfeil { position: absolute; z-index: 2; right: 1.25rem; top: 1.25rem; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.5); display: grid; place-items: center; color: #fff; opacity: 0; transform: translate(-6px, 6px); transition: all var(--tempo); } .kachel:hover .kachel__pfeil, .kachel:focus-visible .kachel__pfeil { opacity: 1; transform: none; } /* ============================================================ 12 · SIEGEL ============================================================ */ .siegel span { transition: transform .5s cubic-bezier(.2,.7,.3,1), background .3s, color .3s; } .siegel span:hover { background: var(--hohn-gruen); color: #fff; transform: translateY(-3px); } /* ============================================================ 13 · FÜR HÄNDLER — Bildstreifen ============================================================ */ .haendler-bilder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: var(--luft-s); } .haendler-bild { margin: 0; position: relative; overflow: hidden; aspect-ratio: 4/3; background: var(--hohn-gruen-nacht); } .haendler-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.3,1); } .haendler-bild:hover img { transform: scale(1.06); } .haendler-bild figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: 2rem 1.25rem .9rem; background: linear-gradient(transparent, rgba(28,38,33,.92)); color: #fff; font-size: var(--fs-mikro); letter-spacing: var(--sperr-mittel); text-transform: uppercase; font-weight: 700; } /* ============================================================ 14 · NACH-OBEN-KNOPF ------------------------------------------------------------ Die vier schwebenden Elemente brauchen jedes seinen eigenen Platz. Vorher lagen Nach-oben-Knopf und Consent-Knopf beide links unten — sie deckten sich gegenseitig zu. links Mitte Barrierefreiheits-Widget links unten Consent (Datenschutz-Einstellungen) rechts unten Chat-Bubble (96 px, kommt erst nach Consent) rechts unten Nach-oben — rückt hoch, sobald der Chat da ist Das Hochrücken macht .chat-an, gesetzt von 04-service-tool.js. ============================================================ */ .hoch { position: fixed; z-index: 70; right: 1.5rem; bottom: 1.5rem; left: auto; width: 48px; height: 48px; display: grid; place-items: center; background: var(--hohn-gruen); color: #fff; border: 1.5px solid var(--hohn-gruen); border-radius: var(--radius); cursor: pointer; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .35s ease, transform .35s ease, visibility .35s, background .25s ease, color .25s ease; } .hoch.sichtbar { opacity: 1; visibility: visible; transform: none; } .hoch:hover, .hoch:focus-visible { background: #fff; color: var(--hohn-gruen); } .hoch svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; } /* Chat geladen? Dann sitzt unten rechts die 96-px-Bubble. Der Nach-oben-Knopf rückt darüber, statt sie zu verdecken. */ .chat-an .hoch { bottom: 7.5rem; } @media (max-width: 640px) { .hoch { right: 1rem; bottom: 1rem; width: 44px; height: 44px; } .chat-an .hoch { bottom: 7rem; } } /* ============================================================ MOBIL ============================================================ */ @media (max-width: 1024px) { .story { grid-template-columns: 1fr; } .story__spalte { height: auto; } .story__bilder { position: relative; top: auto; aspect-ratio: 16/10; } .split { grid-template-columns: 1fr; } .split__bild { min-height: 300px; order: 1; } .split__text { order: 2; } .team { grid-template-columns: 1fr; } .team__satz { max-height: 8rem; opacity: 1; } .regal { grid-template-columns: repeat(3, 1fr); } .mosaik { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 42vw; } .m-gross, .m-breit { grid-column: span 2; } .m-gross, .m-hoch { grid-row: span 1; } .haendler-bilder{ grid-template-columns: 1fr; } .buehne-voll { min-height: 92svh; } .fakt::after { display: none; } } @media (max-width: 640px) { .regal { grid-template-columns: repeat(2, 1fr); } .mosaik { grid-template-columns: 1fr; grid-auto-rows: 62vw; } .m-gross, .m-breit, .m-hoch { grid-column: span 1; grid-row: span 1; } } /* ============================================================ ⛔ BEWEGUNG AUS — greift über alles oben Systemeinstellung ODER A11y-Widget (html.no-motion) ODER kein JS. Jeder Effekt endet im sichtbaren Endzustand. Nichts verschwindet. ============================================================ */ /* ============================================================ AUF DEM HANDY ------------------------------------------------------------ ⛔ KEINE GERÄTEERKENNUNG ÜBER DEN USER-AGENT. Frederic hatte vorgeschlagen, am Server zu prüfen, ob ein Handy oder ein Desktop anfragt, und zwei Fassungen zu liefern. Das ist der falsche Hebel: · Google indexiert seit Jahren die MOBILE Fassung. Zwei Fassungen heißt: Cloaking-Verdacht und Duplicate Content. · Ein Tablet, ein Touch-Laptop, ein Handy im Querformat, ein Desktopfenster auf 320 px — der User-Agent sagt über keinen davon die Wahrheit. · Jede Änderung müsste zweimal gepflegt werden. Wir fragen stattdessen das, was wirklich zählt: max-width -> wie viel Platz ist da? pointer: coarse -> wird mit dem Finger bedient? EINE Fassung, EINE URL, EINE Wahrheit für Google. ------------------------------------------------------------ WAS BLEIBT UND WAS GEHT Es wird NICHT alles abgeschaltet. Die sanften Einblendungen kosten nichts und stören das Layout nicht — die bleiben. Weg müssen die Bewegungen, die a) beim Scrollen gerechnet werden (Parallax) — sie ruckeln auf dem Handy und kosten Akku, und b) das Layout verschieben oder überlagern — auf 360 px Breite hat man dafür keinen Platz. ============================================================ */ @media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) { /* 1 · Parallax raus. Das ist eine Rechnung bei JEDEM Scroll-Pixel. Auf einem Handy ist das der teuerste Effekt der ganzen Seite — und der unsichtbarste, weil man ohnehin nur einen Ausschnitt sieht. Das JS schaltet ihn zusätzlich ab; das hier ist das Sicherheitsnetz. */ [data-parallax], .parallax { transform: none !important; } /* 2 · Die Röhren-Animation der Bühne. Sie arbeitet mit `filter` und großflächigen Transformationen — auf dem Handy das, was den ersten Eindruck ruckeln lässt. Das Standbild ist sofort da und sieht genauso gut aus. */ .buehne-voll__roehre { animation: none !important; transform: none !important; filter: none !important; opacity: 1 !important; } .buehne-voll__strich { animation: none !important; opacity: 0 !important; } /* 3 · Ken-Burns auf Bildern. Ein langsam zoomendes Bild auf einem kleinen Schirm ist kein Effekt, sondern Unschärfe. */ .reveal-bild img, .band__bild img, .story__bilder img { transform: none !important; } /* 4 · Das Laufband. Eine Endlos-Animation, die auch dann rechnet, wenn niemand hinsieht — auf dem Handy heißt das: Akku. */ .laufband__spur { animation-duration: 60s; } /* ✅ WAS BLEIBT: `.reveal` (das sanfte Einblenden beim Hochscrollen). Es verschiebt nichts, kostet fast nichts und macht die Seite lebendig. Genau die Sorte Animation, die Frederic behalten wollte. */ } /* Sparmodus. Wer „Datensparmodus" eingeschaltet hat, sagt damit: Ich zahle für jedes Megabyte. Das respektieren wir — auch beim Video (siehe 03-effekte.js). */ html.sparmodus .laufband__spur { animation: none !important; } html.sparmodus .buehne-voll__roehre { animation: none !important; filter: none !important; transform: none !important; opacity: 1 !important; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } .reveal-bild::after { transform: scaleX(0) !important; } .reveal-bild img { transform: none !important; } .buehne-voll__roehre{ animation: none !important; transform: none !important; filter: none !important; opacity: 1 !important; } .buehne-voll__strich{ animation: none !important; opacity: 0 !important; } .buehne-voll__schleier { opacity: 1 !important; } .buehne-voll .claim, .buehne-voll .knopfreihe, .buehne-voll p.blei, .buehne-voll .scroll-hinweis { opacity: 1 !important; } .buehne-voll__poster img, .buehne-voll__medium img, .buehne-voll__medium video { animation: none !important; transform: none !important; } .zeile-maske > span { transform: none !important; } .scroll-hinweis span{ animation: none !important; transform: scaleY(1) !important; } .laufband__spur { animation: none !important; } .story__bilder img { transform: none !important; } .story__schritt { opacity: 1 !important; } .team__satz { max-height: 8rem !important; opacity: 1 !important; } .band__bild img { transform: none !important; } } html.no-motion .reveal { opacity: 1 !important; transform: none !important; } html.no-motion .reveal-bild::after { transform: scaleX(0) !important; } html.no-motion .reveal-bild img { transform: none !important; } html.no-motion .buehne-voll__roehre { animation: none !important; transform: none !important; filter: none !important; opacity: 1 !important; } html.no-motion .buehne-voll__strich { animation: none !important; opacity: 0 !important; } html.no-motion .buehne-voll__schleier { opacity: 1 !important; } html.no-motion .buehne-voll .claim, html.no-motion .buehne-voll .knopfreihe, html.no-motion .buehne-voll p.blei, html.no-motion .buehne-voll .scroll-hinweis { opacity: 1 !important; } html.no-motion .buehne-voll__poster img, html.no-motion .buehne-voll__medium video { animation: none !important; transform: none !important; } html.no-motion .zeile-maske > span { transform: none !important; } html.no-motion .scroll-hinweis span { animation: none !important; transform: scaleY(1) !important; } html.no-motion .laufband__spur { animation: none !important; } html.no-motion .story__schritt { opacity: 1 !important; } html.no-motion .team__satz { max-height: 8rem !important; opacity: 1 !important; } .kein-js .buehne-voll__roehre { opacity: 1 !important; } .kein-js .buehne-voll__schleier { opacity: 1 !important; } .kein-js .buehne-voll .claim, .kein-js .buehne-voll .knopfreihe, .kein-js .buehne-voll p.blei, .kein-js .buehne-voll .scroll-hinweis { opacity: 1 !important; } .kein-js .zeile-maske > span { transform: none !important; }