/* Baukasten: Must-have-Bewegungen mit Varianten Einbinden: bewegung.css + presets.js + bewegung.js, dann . Jede Bewegung liest ihre Werte aus den Tempo-Token. Die Branche setzt Tempo und Varianten (presets.js). Ohne JavaScript bleibt alles sichtbar, weil die Ausgangszustände erst mit .b-js greifen. */ /* ---------- Tempo-Token (M-00) ---------- */ :root { --b-dauer: .8s; /* Auftritte */ --b-kurve: cubic-bezier(.16, 1, .3, 1); --b-weg: 24px; /* Strecke beim Aufsteigen */ --b-versatz: .08s; /* Staffel zwischen Geschwistern */ --b-hover: .4s; --b-hover-kurve: cubic-bezier(.3, 1, .3, 1); --b-feder: cubic-bezier(.34, 1.56, .64, 1); --b-parallax: 0%; /* 0 = aus */ --b-akzent: currentColor; } [data-tempo="ruhig"] { --b-dauer: .5s; --b-weg: 10px; --b-versatz: .04s; --b-hover: .25s; --b-kurve: cubic-bezier(.2, 0, 0, 1); --b-hover-kurve: cubic-bezier(.2, 0, 0, 1); } [data-tempo="klar"] { --b-dauer: .6s; --b-weg: 16px; --b-versatz: .06s; --b-hover: .3s; } [data-tempo="warm"] { --b-dauer: 1.1s; --b-weg: 28px; --b-versatz: .1s; --b-hover: .5s; } [data-tempo="edel"] { --b-dauer: 1.5s; --b-weg: 20px; --b-versatz: .12s; --b-hover: .7s; --b-kurve: cubic-bezier(.22, 1, .36, 1); } [data-tempo="dynamisch"] { --b-dauer: .9s; --b-weg: 40px; --b-versatz: .06s; --b-hover: .45s; --b-kurve: cubic-bezier(.19, 1, .22, 1); } /* ---------- M-01 Auftritt beim Hereinscrollen (AF-03, AF-04) ---------- */ .b-js [data-auftritt] { transition: opacity var(--b-dauer) var(--b-kurve), transform var(--b-dauer) var(--b-kurve), filter calc(var(--b-dauer) * 1.4) var(--b-kurve); transition-delay: calc(var(--i, 0) * var(--b-versatz)); } .b-js [data-auftritt="steigen"]:not(.ist-da) { opacity: 0; transform: translateY(var(--b-weg)); } .b-js [data-auftritt="unschaerfe"]:not(.ist-da) { opacity: 0; transform: translateY(calc(var(--b-weg) * .6)) scale(.975); filter: blur(8px); } .b-js [data-auftritt="zoom"] { overflow: hidden; } .b-js [data-auftritt="zoom"] > :is(img, video, picture) { transition: transform calc(var(--b-dauer) * 1.4) var(--b-kurve); display: block; } .b-js [data-auftritt="zoom"]:not(.ist-da) { opacity: 0; } .b-js [data-auftritt="zoom"]:not(.ist-da) > :is(img, video, picture) { transform: scale(1.08); } /* maske und federn: bewegung.js zerlegt den Text in Wörter */ .b-wort { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; } .b-wort > span { display: inline-block; transition: transform var(--b-dauer) var(--b-kurve); transition-delay: calc(var(--w, 0) * var(--b-versatz) * .4 + var(--i, 0) * var(--b-versatz)); } .b-js [data-auftritt="maske"]:not(.ist-da) .b-wort > span { transform: translateY(110%); } [data-auftritt="federn"] .b-wort > span { transition-timing-function: var(--b-feder); transform-origin: left bottom; } .b-js [data-auftritt="federn"]:not(.ist-da) .b-wort > span { transform: translateY(115%) rotate(6deg); } .b-js [data-auftritt="maske"], .b-js [data-auftritt="federn"] { transition: none; } /* ---------- M-02 Linie zeichnet sich (AF-10) ---------- */ .b-js [data-linie] { transition: transform calc(var(--b-dauer) * 1.6) var(--b-kurve); transition-delay: calc(var(--i, 0) * var(--b-versatz)); } .b-js [data-linie="waagrecht"]:not(.ist-da) { transform: scaleX(0); transform-origin: left center; } .b-js [data-linie="senkrecht"]:not(.ist-da) { transform: scaleY(0); transform-origin: center top; } .b-js [data-linie="mitte"]:not(.ist-da) { transform: scaleX(0); transform-origin: center; } /* kritzel: SVG-Pfade, Länge setzt bewegung.js */ [data-linie="kritzel"] path { stroke-dasharray: var(--laenge, 1000); transition: stroke-dashoffset calc(var(--b-dauer) * 2) var(--b-kurve); } .b-js [data-linie="kritzel"]:not(.ist-da) path { stroke-dashoffset: var(--laenge, 1000); } /* ---------- M-03 Leiste reagiert auf Scroll (AF-11) ---------- */ [data-leiste] { transition: transform var(--b-hover) var(--b-kurve), background-color var(--b-hover), color var(--b-hover), box-shadow var(--b-hover); } [data-leiste~="verstecken"][data-richtung="runter"]:not(:focus-within) { transform: translateY(calc(-100% - 16px)); } [data-leiste~="schrumpfen"][data-richtung="runter"] { transform: scale(.94); } [data-leiste~="kontur"]:not([data-oben]) { box-shadow: 0 1px 0 rgb(0 0 0 / .12); } [data-leiste~="farbe"][data-farbe="dunkel"] { color: #fff; } /* ---------- M-04 Link-Hover (AF-14) ---------- */ [data-link="wisch"] { text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat right bottom / 0 1px; transition: background-size var(--b-hover) var(--b-hover-kurve); } [data-link="wisch"]:is(:hover, :focus-visible) { background-position-x: left; background-size: 100% 1px; } /* rollen ohne zweites Element: die Kopie ist der Textschatten (A-117) */ /* bewegung.js legt den Text in .b-zeile > span, die Zeile schneidet ab */ .b-zeile { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: 1.25; padding-bottom: .08em; margin-bottom: -.08em; } .b-zeile > span { display: inline-block; position: relative; } [data-link="rollen"] { text-decoration: none; } [data-link="rollen"] .b-zeile > span { text-shadow: 0 1.25em currentColor; transition: transform var(--b-hover) var(--b-hover-kurve); } [data-link="rollen"]:is(:hover, :focus-visible) .b-zeile > span { transform: translateY(-1.25em); } [data-link="pfeil"] { text-decoration: none; } [data-link="pfeil"]::after { content: "↗"; display: inline-block; margin-left: .25em; transition: transform var(--b-hover) var(--b-hover-kurve); } [data-link="pfeil"]:is(:hover, :focus-visible)::after { transform: translate(3px, -3px); } [data-link="klammer"] { text-decoration: none; } [data-link="klammer"]::before { content: "["; display: inline-block; margin-right: .3em; transition: transform var(--b-hover) var(--b-hover-kurve); } [data-link="klammer"]::after { content: "]"; display: inline-block; margin-left: .3em; transition: transform var(--b-hover) var(--b-hover-kurve); } [data-link="klammer"]:is(:hover, :focus-visible)::before { transform: translateX(4px); } [data-link="klammer"]:is(:hover, :focus-visible)::after { transform: translateX(-4px); } /* ---------- M-05 Knopf-Hover (AF-14, kippen AF-04) ---------- */ [data-knopf] { position: relative; isolation: isolate; overflow: hidden; cursor: pointer; --k-grund: #111; --k-text: #fff; --k-hover-grund: #fff; --k-hover-text: #111; background: var(--k-grund); color: var(--k-text); border: 1px solid var(--k-grund); transition: background-color var(--b-hover) var(--b-hover-kurve), color var(--b-hover) var(--b-hover-kurve); } [data-knopf="invert"]:is(:hover, :focus-visible) { background: var(--k-hover-grund); color: var(--k-hover-text); } [data-knopf="kreis"]::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 110%; aspect-ratio: 1; border-radius: 50%; background: var(--k-hover-grund); transform: translate(-50%, -50%) scale(0); transition: transform var(--b-hover) var(--b-hover-kurve); } [data-knopf="kreis"]:is(:hover, :focus-visible) { color: var(--k-hover-text); } [data-knopf="kreis"]:is(:hover, :focus-visible)::before { transform: translate(-50%, -50%) scale(1); } /* pille: Fläche steigt als Ellipse von unten, Text rollt gegen seine Kopie (A-352, CK) */ [data-knopf="pille"]::before { content: ""; position: absolute; z-index: -1; left: -25%; top: 0; width: 150%; height: 150%; border-radius: 50%; background: var(--k-hover-grund); transform: translateY(70%) scale(0); transform-origin: 50% 100%; transition: transform calc(var(--b-hover) * 1.2) var(--b-hover-kurve); } [data-knopf="pille"]:is(:hover, :focus-visible)::before { transform: translateY(-15%) scale(1); } [data-knopf="pille"]:is(:hover, :focus-visible) { color: var(--k-hover-text); } [data-knopf="pille"] .b-zeile > span { text-shadow: 0 1.25em currentColor; transition: transform calc(var(--b-hover) * .75) var(--b-hover-kurve); } [data-knopf="pille"]:is(:hover, :focus-visible) .b-zeile > span { transform: translateY(-1.25em); } [data-knopf="kippen"] .b-zeile > span { transition: transform var(--b-hover) var(--b-feder); } [data-knopf="kippen"] .b-zeile > span::after { content: attr(data-text); content: attr(data-text) / ""; position: absolute; left: 0; top: calc(100% + .08em); transform-origin: left top; transform: rotate(12deg); transition: transform var(--b-hover) var(--b-feder); } [data-knopf="kippen"]:is(:hover, :focus-visible) .b-zeile > span { transform: translateY(calc(-100% - .08em)); } [data-knopf="kippen"]:is(:hover, :focus-visible) .b-zeile > span::after { transform: rotate(0); } [data-knopf="pfeil"] .b-pfeil { display: inline-grid; overflow: hidden; margin-left: .5em; vertical-align: middle; } [data-knopf="pfeil"] .b-pfeil::before, [data-knopf="pfeil"] .b-pfeil::after { content: "→"; grid-area: 1 / 1; transition: transform var(--b-hover) var(--b-hover-kurve); } [data-knopf="pfeil"] .b-pfeil::after { transform: translateX(-150%); } [data-knopf="pfeil"]:is(:hover, :focus-visible) .b-pfeil::before { transform: translateX(150%); } [data-knopf="pfeil"]:is(:hover, :focus-visible) .b-pfeil::after { transform: translateX(0); } /* ---------- M-06 Karten- und Bild-Hover (AF-15) ---------- */ [data-karte] { position: relative; display: block; } [data-karte="zoom"], [data-karte="glas"], [data-karten="zurueck"] [data-karte] { overflow: hidden; } [data-karte="zoom"] :is(img, video), [data-karte="glas"] :is(img, video) { border-radius: inherit; } [data-karte] :is(img, video) { display: block; transition: transform calc(var(--b-hover) * 2) var(--b-kurve), filter var(--b-hover); } [data-karte="zoom"]:is(:hover, :focus-within) :is(img, video) { transform: scale(1.04); } /* passepartout: der Rahmen zieht sich ums Bild ein, das Bild wächst dagegen (A-317) */ [data-karte="passepartout"] :is(img, video) { clip-path: inset(0 round var(--radius, 0px)); transition: transform calc(var(--b-hover) * 1.3) var(--b-hover-kurve), clip-path calc(var(--b-hover) * 1.3) var(--b-hover-kurve); } [data-karte="passepartout"]:is(:hover, :focus-within) :is(img, video) { transform: scale(1.06); clip-path: inset(10px round var(--radius, 0px)); } [data-karte]:not([data-karte="glas"]) .b-glas { display: block; padding-top: .5em; } [data-karte="glas"] .b-glas { position: absolute; left: 12px; bottom: 12px; padding: .6em .9em; border-radius: 10px; background: rgb(0 0 0 / .25); color: #fff; backdrop-filter: blur(16px); opacity: 0; transform: translate(16px, 16px); transition: opacity var(--b-hover), transform calc(var(--b-hover) * 1.5) var(--b-kurve); } [data-karte="glas"]:is(:hover, :focus-within) .b-glas { opacity: 1; transform: none; } [data-karte="glas"]:is(:hover, :focus-within) :is(img, video) { transform: scale(1.03); } /* schatten: Karte springt nach rechts oben, harter Schatten ohne Unschärfe bleibt stehen (A-357, AGV) */ [data-karte="schatten"] { background: var(--karte-grund, #fff); padding: 10px; transition: transform var(--b-hover) var(--b-hover-kurve), box-shadow var(--b-hover) var(--b-hover-kurve); box-shadow: 0 0 0 var(--karte-schatten, #a3bc4b); } [data-karte="schatten"]:is(:hover, :focus-within) { transform: translate(8px, -8px); box-shadow: -8px 8px 0 var(--karte-schatten, #a3bc4b); } [data-karte="schatten"] :is(img, video) { border-radius: calc(var(--radius, 0px) * .6); } /* zurück: die anderen Karten der Gruppe treten zurück (A-301) */ [data-karten="zurueck"] [data-karte] { transition: opacity var(--b-hover), filter var(--b-hover); } [data-karten="zurueck"]:has([data-karte]:is(:hover, :focus-within)) [data-karte]:not(:hover, :focus-within) { opacity: .45; filter: grayscale(1); } [data-karten="zurueck"] [data-karte]:is(:hover, :focus-within) :is(img, video) { transform: scale(1.03); } /* ---------- M-07 Aufklappen und Modal (AF-20) ---------- */ .b-klapp { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--b-dauer) var(--b-kurve); } .b-klapp > * { overflow: hidden; } [aria-expanded="true"] + .b-klapp { grid-template-rows: 1fr; } dialog[data-modal] { border: 0; padding: 0; max-width: min(640px, calc(100vw - 32px)); opacity: 0; transition: opacity var(--b-hover), transform var(--b-dauer) var(--b-kurve), filter var(--b-dauer), overlay var(--b-dauer) allow-discrete, display var(--b-dauer) allow-discrete; } dialog[data-modal]::backdrop { background: rgb(0 0 0 / 0); transition: background-color var(--b-hover), backdrop-filter var(--b-hover), overlay var(--b-dauer) allow-discrete, display var(--b-dauer) allow-discrete; } dialog[data-modal][open] { opacity: 1; transform: none; filter: none; } dialog[data-modal][open]::backdrop { background: rgb(0 0 0 / .5); } dialog[data-modal="gleiten"] { transform: translateY(-1em); } dialog[data-modal="unschaerfe"] { transform: translateY(20px); filter: blur(12px); } dialog[data-modal="unschaerfe"][open]::backdrop { backdrop-filter: blur(8px); } dialog[data-modal="kippen"] { transform: scale(.6) rotate(5deg); transition-timing-function: ease, cubic-bezier(.7, 0, .3, 1); } @starting-style { dialog[data-modal][open] { opacity: 0; } dialog[data-modal="gleiten"][open] { transform: translateY(-1em); } dialog[data-modal="unschaerfe"][open] { transform: translateY(20px); filter: blur(12px); } dialog[data-modal="kippen"][open] { transform: scale(.6) rotate(5deg); } dialog[data-modal][open]::backdrop { background: rgb(0 0 0 / 0); } } /* ---------- M-08 Seitenwechsel als Blende (A-028) ---------- Für mehrseitige Seiten: diese Regel in die eigene CSS kopieren (sie lässt sich nicht an ein Attribut binden). @view-transition { navigation: auto; } ::view-transition-old(root) { animation: .15s ease-out both b-aus; } ::view-transition-new(root) { animation: .2s ease-in .15s both b-ein; } */ @keyframes b-aus { to { opacity: 0; } } @keyframes b-ein { from { opacity: 0; } } /* ---------- M-09 Parallax per Scroll-Timeline (AF-08) ---------- */ [data-parallax] { overflow: hidden; } @supports (animation-timeline: view()) { [data-parallax] > :is(img, video) { display: block; width: 100%; height: calc(100% + 2 * var(--b-parallax)); object-fit: cover; animation: b-parallax linear both; animation-timeline: view(); } } @keyframes b-parallax { from { transform: translateY(calc(-1 * var(--b-parallax))); } to { transform: translateY(var(--b-parallax)); } } /* ---------- M-10 Mobiles Menü (AF-19) ---------- */ [data-menue] { position: fixed; inset: 0; z-index: 50; display: grid; align-content: center; padding: 24px; background: var(--menue-grund, #111); color: var(--menue-text, #fff); visibility: hidden; transition: visibility 0s linear var(--b-dauer), opacity var(--b-hover), clip-path var(--b-dauer) var(--b-kurve), transform var(--b-dauer) var(--b-kurve); } [data-menue].ist-offen { visibility: visible; transition-delay: 0s; } [data-menue="blende"] { opacity: 0; } [data-menue="blende"].ist-offen { opacity: 1; } [data-menue="ecke"] { clip-path: circle(0 at calc(100% - 40px) 40px); } [data-menue="ecke"].ist-offen { clip-path: circle(150% at calc(100% - 40px) 40px); } [data-menue="seite"] { transform: translateX(100%); } [data-menue="seite"].ist-offen { transform: none; } [data-menue] li { opacity: 0; transform: translateY(var(--b-weg)); transition: opacity var(--b-hover), transform var(--b-dauer) var(--b-kurve); } [data-menue].ist-offen li { opacity: 1; transform: none; transition-delay: calc(.15s + var(--i, 0) * var(--b-versatz)); } /* ---------- M-11 Hero-Bild bewegt sich einmal (AF-28) ---------- */ [data-kenburns] { overflow: hidden; } [data-kenburns] > :is(img, picture) { display: block; animation: b-kenburns 20s linear forwards; } @keyframes b-kenburns { from { transform: scale(1); } to { transform: scale(var(--kenburns, 1.12)); } } /* ---------- M-12 Kleine Lebenszeichen (AF-22) ---------- */ .b-scrollhinweis { display: block; width: 1px; height: 48px; background: currentColor; animation: b-atmen 2s ease-in-out infinite; } @keyframes b-atmen { 0%, 100% { opacity: .2; } 50% { opacity: .7; } } [data-drehen="pause"] { display: inline-block; animation: b-drehen 4.5s ease-out infinite; } @keyframes b-drehen { 0% { transform: rotate(0); } 5.56%, 8.89% { transform: rotate(90deg); } 12.22%, 100% { transform: rotate(180deg); } } /* ---------- Ruhige Fassung ---------- */ @media (prefers-reduced-motion: reduce) { .b-js [data-auftritt], .b-js [data-auftritt] *, .b-js [data-linie], .b-js [data-linie] path { opacity: 1 !important; transform: none !important; filter: none !important; stroke-dashoffset: 0 !important; transition: none !important; } [data-leiste], [data-karte] *, [data-link] *, [data-knopf] *, [data-menue], [data-menue] li, dialog[data-modal] { transition-duration: .01s !important; transition-delay: 0s !important; } [data-leiste][data-richtung="runter"] { transform: none; } [data-parallax] > *, [data-kenburns] > *, .b-scrollhinweis, [data-drehen] { animation: none !important; } [data-karte] :is(img, video), [data-karte="schatten"] { transform: none !important; } }