/** * vomautor - Bewegung und Spielereien. * * Aufbau: * 1. Ruhige Grundgestalt: Setzkasten-Buchstaben (Fehlerseite), * Lesezeichen am Bücherstapel (alter Kopf-Typ „hero“). So sieht die Seite ohne Bewegung aus - vollständig und * lesbar, auch ohne JavaScript und im Bearbeitungsmodus. * 2. Bewegung: nur innerhalb von @media (prefers-reduced-motion:no-preference) * und nur, wenn das Darstellungs-Menü nicht auf „Reduziert“ steht * (html[data-vma-bewegung="aus"]). Die Stufe aus dem Backend steht als * Klasse am body: vma-fx-voll, vma-fx-dezent, vma-fx-aus, dazu je eine * Klasse pro eingeschalteter Spielerei (vma-fx-buch, vma-fx-beleg ...). * * Bewegt werden nur transform-Eigenschaften (translate, scale, rotate), * opacity und clip-path - nichts davon löst ein neues Layout aus. * Die Bilder kommen vom Schreibtisch: Buchdeckel, Lesebändchen, Regal, Beleg, * Stempel, Randnotizen, die sich schreiben, Textmarker, Polaroids. */ /* ================================================================ 1. Grundgestalt */ /* Elemente, die von der Seite hereinkommen, dürfen kein waagerechtes Scrollen auslösen. clip statt hidden: kein eigener Scrollbereich, sticky bleibt intakt. */ .inhalt{overflow-x:clip} /* ---------------------------------------------------- Setzkasten-Buchstaben */ .lettern{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none} .letter{position:absolute;left:var(--x);top:var(--y);font-family:var(--vma-schrift-titel);font-weight:700;font-size:calc(var(--g) * .72);line-height:1;transform:translate(calc(-50% + var(--dx, 0px)),calc(-50% + var(--dy, 0px))) rotate(var(--r));transition:transform .9s cubic-bezier(.2,.8,.2,1);user-select:none} .letter__innen{display:block} .letter--tinte{color:var(--vma-farbe-text);opacity:.3} .letter--indigo{color:var(--vma-farbe-primaer);opacity:.45} .letter--akzent{color:var(--vma-farbe-akzent);opacity:.85} .seitenkopf--fehler .seitenkopf__innen{position:relative;z-index:1} .seitenkopf--fehler{padding-bottom:clamp(6rem,4rem + 6vw,9rem)} /* --------------------------------------------- Lesezeichen am Bücherstapel */ .stapel{--ring-dicke:clamp(2.2rem,8vw,4.6rem)} .stapel__ring{border-width:var(--ring-dicke)} .stapel__bahn{position:absolute;inset:calc(6% + var(--ring-dicke) / 2) calc(2% + var(--ring-dicke) / 2) calc(4% + var(--ring-dicke) / 2) calc(8% + var(--ring-dicke) / 2);border-radius:50%;rotate:-28deg} .stapel__punkt{position:absolute;left:50%;top:0;width:calc(var(--ring-dicke) * .46);aspect-ratio:1/1;border-radius:50%;background:var(--vma-farbe-akzent);box-shadow:0 0 0 .3rem var(--vma-farbe-hintergrund);transform:translate(-50%,-50%)} /* --------------------------------------- Blätterbuch: weiches Überblenden Wenn nicht umgeblättert werden soll (Bewegung reduziert, Stufe „aus“, Spielerei abgeschaltet), springt die Seite nicht, sondern blendet kurz über - nur Deckkraft, keine Bewegung. */ .folio.ist-am-blenden .folio__bogen.ist-kommt{position:relative;z-index:3;animation:vma-blende-ein .32s ease both} /* ============================================================== 2. Bewegung */ @media (prefers-reduced-motion:no-preference){ /* ------------------------------------------- Kopf: Lesefortschritt Ein Bleistift zieht beim Lesen einen Graphitstrich unter dem Kopf. */ @supports (animation-timeline:scroll()){ :root:not([data-vma-bewegung="aus"]) .vma-fx-fortschritt:not(.vma-fx-aus) .kopf::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--vma-intern-graphit);opacity:.75;transform-origin:0 50%;scale:0 1;animation:vma-fortschritt linear both;animation-timeline:scroll(root)} :root:not([data-vma-bewegung="aus"]) .vma-fx-fortschritt:not(.vma-fx-aus) .kopf::before{content:"";position:absolute;left:0;right:0;bottom:-5px;height:.5rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 10'%3E%3Cpath d='M0 0h30v10H0z' fill='%23F2B544'/%3E%3Cpath d='M30 0l12 5-12 5z' fill='%23ECD3AE'/%3E%3Cpath d='M39 3.75L48 5l-9 1.25z' fill='%233A3F4B'/%3E%3C/svg%3E") no-repeat -2.4rem 50%/2.4rem .5rem;pointer-events:none;animation:vma-stiftspitze linear both;animation-timeline:scroll(root)} } /* ------------------------------------------- Hero: Auftritt beim Laden Der Titel bewegt sich nur, er blendet nicht ein - so bleibt er das größte Element ab dem ersten Bild (LCP). */ :root:not([data-vma-bewegung="aus"]) :is(.vma-fx-voll,.vma-fx-dezent) :is(.hero,.auftakt) .eyebrow{animation:vma-schreiben 1.1s steps(22,end) .15s both} :root:not([data-vma-bewegung="aus"]) :is(.vma-fx-voll,.vma-fx-dezent) :is(.hero,.auftakt) h1{animation:vma-anheben .9s cubic-bezier(.2,.7,.2,1) both} :root:not([data-vma-bewegung="aus"]) :is(.vma-fx-voll,.vma-fx-dezent) :is(.hero,.auftakt) .section-head__text{animation:vma-auftritt .9s cubic-bezier(.2,.7,.2,1) .15s both} :root:not([data-vma-bewegung="aus"]) :is(.vma-fx-voll,.vma-fx-dezent) :is(.hero,.auftakt) .knoepfe{animation:vma-auftritt .9s cubic-bezier(.2,.7,.2,1) .28s both} :root:not([data-vma-bewegung="aus"]) :is(.vma-fx-voll,.vma-fx-dezent) .hero__hinweis{animation:vma-auftritt .9s cubic-bezier(.2,.7,.2,1) .4s both} :root:not([data-vma-bewegung="aus"]) :is(.vma-fx-voll,.vma-fx-dezent) :is(.hero,.auftakt) h1 em, :root:not([data-vma-bewegung="aus"]) :is(.vma-fx-voll,.vma-fx-dezent) .vma-da h2 em{animation:vma-textmarker .9s cubic-bezier(.6,0,.2,1) .6s both} :root:not([data-vma-bewegung="aus"]) :is(.vma-fx-voll,.vma-fx-dezent) .vma-da .eyebrow{animation:vma-schreiben 1.1s steps(22,end) .2s both} /* ------------------------------------------- Setzkasten (Fehlerseite) */ :root:not([data-vma-bewegung="aus"]) :is(.vma-fx-voll,.vma-fx-dezent).vma-fx-lettern .lettern--gefallen .letter{animation:vma-fallen 1.1s cubic-bezier(.3,0,.3,1) calc(.2s + var(--n) * .09s) both} :root:not([data-vma-bewegung="aus"]) .vma-fx-voll.vma-fx-lettern .lettern--gefallen .letter__innen{animation:vma-wippen 3.2s ease-in-out calc(1.6s + var(--n) * .2s) infinite alternate} /* ------------------------------------------- Bücherstapel */ :root:not([data-vma-bewegung="aus"]) :is(.vma-fx-voll,.vma-fx-dezent).vma-fx-stapel .stapel{transform:perspective(900px) rotateX(var(--ky,0deg)) rotateY(var(--kx,0deg));transition:transform .6s cubic-bezier(.2,.8,.2,1)} :root:not([data-vma-bewegung="aus"]) .vma-fx-voll.vma-fx-stapel .buch{animation:vma-buch-schweben 5.5s ease-in-out infinite alternate} :root:not([data-vma-bewegung="aus"]) .vma-fx-voll.vma-fx-stapel .buch--indigo{animation-delay:-1.8s;animation-duration:6.2s} :root:not([data-vma-bewegung="aus"]) .vma-fx-voll.vma-fx-stapel .buch--papier{animation-delay:-3.6s;animation-duration:4.8s} :root:not([data-vma-bewegung="aus"]) .vma-fx-voll.vma-fx-stapel .stapel__bahn{animation:vma-umlauf 16s linear infinite} /* ------------------------------------------- Buch-Auftakt Der Deckel klappt einmal auf (auch bei „dezent“), das Lesebändchen pendelt nur bei „voll“. bewegung.js gibt ihm beim Scrollen Schwung. */ :root:not([data-vma-bewegung="aus"]) :is(.vma-fx-voll,.vma-fx-dezent).vma-fx-buch .buch-offen__deckel{display:grid;animation:vma-deckel 1.6s cubic-bezier(.55,.05,.25,1) .5s both} :root:not([data-vma-bewegung="aus"]) :is(.vma-fx-voll,.vma-fx-dezent).vma-fx-buch .buch-offen__deckel::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgb(255 255 255 / .1),transparent 40%);animation:vma-deckel-licht 1.6s cubic-bezier(.55,.05,.25,1) .5s both} :root:not([data-vma-bewegung="aus"]) .vma-fx-voll.vma-fx-buch .buch-offen__baendchen{animation:vma-pendel 4.8s ease-in-out infinite alternate} /* ------------------------------------------- Blätterbuch: Seite schlägt um Breit: Das rechte Blatt hebt sich am Falz, dreht sich über den Rücken und legt sich links ab - seine Rückseite ist die linke Seite der nächsten Doppelseite. Dazu wandert ein Schatten: auf dem Blatt selbst (es wölbt sich vom Licht weg), auf der freiwerdenden Seite (der Schatten des Blatts zieht sich zum Falz zurück) und auf der Seite, auf die es sich legt. Schmal: die ganze Seite schlägt um ihre linke Kante um. blaetterbuch.js setzt die Klassen; bei reduzierter Bewegung blendet es nur weich über (Abschnitt 1, unten). */ :root:not([data-vma-bewegung="aus"]) .folio{--vma-blaettern-dauer:1.15s;--vma-blaettern-kurve:cubic-bezier(.55,.06,.28,1)} :root:not([data-vma-bewegung="aus"]) .folio.ist-am-blaettern .folio__seite::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;opacity:0} @media (min-width:900px){ :root:not([data-vma-bewegung="aus"]) .folio.ist-am-blaettern .ist-geht .folio__seite{z-index:2} :root:not([data-vma-bewegung="aus"]) .folio.ist-am-blaettern .ist-kommt .folio__seite{z-index:1} :root:not([data-vma-bewegung="aus"]) .folio.ist-am-blaettern :is(.ist-geht--vor .buch-offen__seite--rechts,.ist-kommt--zurueck .buch-offen__seite--rechts){transform-origin:0 50%;backface-visibility:hidden} :root:not([data-vma-bewegung="aus"]) .folio.ist-am-blaettern :is(.ist-geht--zurueck .buch-offen__seite--links,.ist-kommt--vor .buch-offen__seite--links){transform-origin:100% 50%;backface-visibility:hidden} /* vorwärts */ :root:not([data-vma-bewegung="aus"]) .folio.ist-am-blaettern .ist-geht--vor .buch-offen__seite--rechts{z-index:4;animation:vma-blatt-weg-vor var(--vma-blaettern-dauer) var(--vma-blaettern-kurve) both} :root:not([data-vma-bewegung="aus"]) .folio.ist-am-blaettern .ist-geht--vor .buch-offen__seite--rechts::after{background:linear-gradient(90deg,rgb(60 35 10 / .05),rgb(60 35 10 / .45));animation:vma-blatt-dunkler var(--vma-blaettern-dauer) var(--vma-blaettern-kurve) both} :root:not([data-vma-bewegung="aus"]) .folio.ist-am-blaettern .ist-kommt--vor .buch-offen__seite--links{z-index:4;animation:vma-blatt-her-vor var(--vma-blaettern-dauer) var(--vma-blaettern-kurve) both} :root:not([data-vma-bewegung="aus"]) .folio.ist-am-blaettern .ist-kommt--vor .buch-offen__seite--links::after{background:linear-gradient(270deg,rgb(60 35 10 / .05),rgb(60 35 10 / .45));animation:vma-blatt-heller var(--vma-blaettern-dauer) var(--vma-blaettern-kurve) both} :root:not([data-vma-bewegung="aus"]) .folio.ist-am-blaettern .ist-kommt--vor .buch-offen__seite--rechts::after{background:linear-gradient(90deg,rgb(60 35 10 / .4),rgb(60 35 10 / .12) 40%,transparent 75%);transform-origin:0 50%;animation:vma-schatten-zurueckziehen var(--vma-blaettern-dauer) var(--vma-blaettern-kurve) both} :root:not([data-vma-bewegung="aus"]) .folio.ist-am-blaettern .ist-geht--vor .buch-offen__seite--links::after{background:linear-gradient(270deg,rgb(60 35 10 / .4),rgb(60 35 10 / .1) 45%,transparent 80%);transform-origin:100% 50%;animation:vma-schatten-zuziehen var(--vma-blaettern-dauer) var(--vma-blaettern-kurve) both} /* zurück (gespiegelt) */ :root:not([data-vma-bewegung="aus"]) .folio.ist-am-blaettern .ist-geht--zurueck .buch-offen__seite--links{z-index:4;animation:vma-blatt-weg-zurueck var(--vma-blaettern-dauer) var(--vma-blaettern-kurve) both} :root:not([data-vma-bewegung="aus"]) .folio.ist-am-blaettern .ist-geht--zurueck .buch-offen__seite--links::after{background:linear-gradient(270deg,rgb(60 35 10 / .05),rgb(60 35 10 / .45));animation:vma-blatt-dunkler var(--vma-blaettern-dauer) var(--vma-blaettern-kurve) both} :root:not([data-vma-bewegung="aus"]) .folio.ist-am-blaettern .ist-kommt--zurueck .buch-offen__seite--rechts{z-index:4;animation:vma-blatt-her-zurueck var(--vma-blaettern-dauer) var(--vma-blaettern-kurve) both} :root:not([data-vma-bewegung="aus"]) .folio.ist-am-blaettern .ist-kommt--zurueck .buch-offen__seite--rechts::after{background:linear-gradient(90deg,rgb(60 35 10 / .05),rgb(60 35 10 / .45));animation:vma-blatt-heller var(--vma-blaettern-dauer) var(--vma-blaettern-kurve) both} :root:not([data-vma-bewegung="aus"]) .folio.ist-am-blaettern .ist-kommt--zurueck .buch-offen__seite--links::after{background:linear-gradient(270deg,rgb(60 35 10 / .4),rgb(60 35 10 / .12) 40%,transparent 75%);transform-origin:100% 50%;animation:vma-schatten-zurueckziehen var(--vma-blaettern-dauer) var(--vma-blaettern-kurve) both} :root:not([data-vma-bewegung="aus"]) .folio.ist-am-blaettern .ist-geht--zurueck .buch-offen__seite--rechts::after{background:linear-gradient(90deg,rgb(60 35 10 / .4),rgb(60 35 10 / .1) 45%,transparent 80%);transform-origin:0 50%;animation:vma-schatten-zuziehen var(--vma-blaettern-dauer) var(--vma-blaettern-kurve) both} } @media (max-width:899px){ :root:not([data-vma-bewegung="aus"]) .folio.ist-am-blaettern :is(.ist-geht--vor,.ist-kommt--zurueck){position:relative;z-index:2;transform-origin:0 50%;backface-visibility:hidden} :root:not([data-vma-bewegung="aus"]) .folio.ist-am-blaettern .ist-geht--vor{animation:vma-seite-weg var(--vma-blaettern-dauer) var(--vma-blaettern-kurve) both} :root:not([data-vma-bewegung="aus"]) .folio.ist-am-blaettern .ist-kommt--zurueck{animation:vma-seite-weg var(--vma-blaettern-dauer) var(--vma-blaettern-kurve) reverse both} :root:not([data-vma-bewegung="aus"]) .folio.ist-am-blaettern :is(.ist-geht--vor,.ist-kommt--zurueck) .folio__seite::after{background:linear-gradient(90deg,rgb(60 35 10 / .05),rgb(60 35 10 / .5));animation:vma-blatt-dunkler var(--vma-blaettern-dauer) var(--vma-blaettern-kurve) both} :root:not([data-vma-bewegung="aus"]) .folio.ist-am-blaettern .ist-kommt--zurueck .folio__seite::after{animation-direction:reverse} :root:not([data-vma-bewegung="aus"]) .folio.ist-am-blaettern :is(.ist-kommt--vor,.ist-geht--zurueck) .folio__seite::after{background:linear-gradient(90deg,rgb(60 35 10 / .35),transparent 70%);transform-origin:0 50%;animation:vma-schatten-zurueckziehen var(--vma-blaettern-dauer) var(--vma-blaettern-kurve) both} :root:not([data-vma-bewegung="aus"]) .folio.ist-am-blaettern .ist-geht--zurueck .folio__seite::after{animation-direction:reverse} } /* Die Ecke der rechten Seite hebt sich einmal an - „hier kann man blättern“ */ :root:not([data-vma-bewegung="aus"]) .vma-fx-voll.vma-fx-blaettern .folio.ist-blaetterbar .ist-aktuell .buch-offen__seite--rechts .buch-offen__ecke{animation:vma-ecke-heben 1.4s ease-in-out 2.6s 2 alternate} /* ------------------------------------------- Lesezeichen rutschen aus dem Buch */ :root:not([data-vma-bewegung="aus"]) .vma-fx-einblenden .vma-warten[data-vma-ein="faellt"]{translate:0 -105%} :root:not([data-vma-bewegung="aus"]) .vma-fx-einblenden .vma-da[data-vma-ein="faellt"]{transition:translate .75s cubic-bezier(.3,1.35,.5,1) var(--vma-verz,0s)} /* Handy: Die Lesezeichen liegen waagerecht und gleiten aus dem Buchschnitt */ @media (max-width:599px){ :root:not([data-vma-bewegung="aus"]) .vma-fx-einblenden .vma-warten[data-vma-ein="faellt"]{translate:-105% 0} } /* ------------------------------------------- Kassenbon druckt */ :root:not([data-vma-bewegung="aus"]) .vma-fx-beleg .vma-warten[data-vma-ein="beleg"] .beleg__papier{translate:0 calc(-100% - 1.5rem)} :root:not([data-vma-bewegung="aus"]) .vma-fx-beleg .vma-da[data-vma-ein="beleg"] .beleg__papier{transition:translate 2.4s steps(20,end) .35s} /* ------------------------------------------- Ex-libris-Stempel */ :root:not([data-vma-bewegung="aus"]) .vma-fx-stempel .vma-warten[data-vma-ein="stempel"]{opacity:0;scale:1.8} :root:not([data-vma-bewegung="aus"]) .vma-fx-stempel .vma-da[data-vma-ein="stempel"]{animation:vma-stempeln .65s cubic-bezier(.2,.9,.3,1.2) .3s both} /* ------------------------------------------- Einblenden beim Scrollen bewegung.js markiert nur Elemente, die beim Laden noch unterhalb des sichtbaren Bereichs liegen - nichts flackert, nichts bleibt versteckt, wenn das Skript fehlt. */ :root:not([data-vma-bewegung="aus"]) .vma-fx-einblenden .vma-warten[data-vma-ein="blende"]{opacity:0;translate:0 1.75rem} :root:not([data-vma-bewegung="aus"]) .vma-fx-einblenden .vma-warten[data-vma-ein="links"]{opacity:0;translate:-2.5rem 0} :root:not([data-vma-bewegung="aus"]) .vma-fx-einblenden .vma-warten[data-vma-ein="rechts"]{opacity:0;translate:2.5rem 0} :root:not([data-vma-bewegung="aus"]) .vma-fx-einblenden .vma-warten[data-vma-ein="bild"]{opacity:0;translate:0 -1.5rem;scale:1.04} :root:not([data-vma-bewegung="aus"]) .vma-fx-einblenden .vma-da[data-vma-ein]{transition:opacity .7s ease var(--vma-verz,0s),translate .9s cubic-bezier(.2,.7,.2,1) var(--vma-verz,0s),scale .9s cubic-bezier(.3,1.4,.5,1) var(--vma-verz,0s)} /* ------------------------------------------- Kleine Reaktionen */ /* Werkkarte: das Buch öffnet sich einen Spalt */ :root:not([data-vma-bewegung="aus"]) :is(.vma-fx-voll,.vma-fx-dezent) .plugin-ausgabe:not(.plugin-ausgabe--regal) .vma-cover{transform-origin:0 50%;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease} :root:not([data-vma-bewegung="aus"]) :is(.vma-fx-voll,.vma-fx-dezent) .plugin-ausgabe:not(.plugin-ausgabe--regal) .vma-werkkarte:hover .vma-cover{transform:perspective(900px) rotateY(-16deg) translateY(-4px)} /* Karten heben sich leicht */ :root:not([data-vma-bewegung="aus"]) :is(.vma-fx-voll,.vma-fx-dezent) :is(.kachel,.preiskarte,.kontaktkarte){transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease} :root:not([data-vma-bewegung="aus"]) :is(.vma-fx-voll,.vma-fx-dezent) :is(.kachel,.preiskarte,.kontaktkarte):hover{transform:translateY(-4px);box-shadow:var(--vma-schatten)} } @media (min-width:600px){ .letter{font-size:var(--g)} } /* ================================================================ Keyframes */ @keyframes vma-auftritt{from{opacity:0;translate:0 1.5rem}to{opacity:1;translate:0 0}} @keyframes vma-anheben{from{translate:0 1.25rem}to{translate:0 0}} @keyframes vma-textmarker{from{background-size:0% 100%}to{background-size:100% 100%}} @keyframes vma-schreiben{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% 0 -20% 0)}} @keyframes vma-fallen{0%{translate:0 -70vh;rotate:-90deg;opacity:0}60%{translate:0 .4rem}80%{translate:0 -.6rem}100%{translate:0 0;rotate:0deg}} @keyframes vma-wippen{from{scale:1}to{scale:1.06}} @keyframes vma-buch-schweben{from{translate:0 0}to{translate:0 -.7rem}} @keyframes vma-umlauf{to{rotate:332deg}} @keyframes vma-deckel{from{transform:rotateY(0deg)}to{transform:rotateY(-180deg)}} @keyframes vma-deckel-licht{from{opacity:0}50%{opacity:1}to{opacity:0}} @keyframes vma-pendel{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}} @keyframes vma-stempeln{0%{opacity:0;scale:1.8}55%{opacity:1;scale:.93}75%{scale:1.03}100%{opacity:1;scale:1}} @keyframes vma-blatt-weg-vor{0%{transform:perspective(2200px) rotateY(0deg)}12%{transform:perspective(2200px) rotateY(-9deg) translateZ(4px)}100%{transform:perspective(2200px) rotateY(-180deg)}} @keyframes vma-blatt-her-vor{0%{transform:perspective(2200px) rotateY(180deg)}12%{transform:perspective(2200px) rotateY(171deg) translateZ(4px)}100%{transform:perspective(2200px) rotateY(0deg)}} @keyframes vma-blatt-weg-zurueck{0%{transform:perspective(2200px) rotateY(0deg)}12%{transform:perspective(2200px) rotateY(9deg) translateZ(4px)}100%{transform:perspective(2200px) rotateY(180deg)}} @keyframes vma-blatt-her-zurueck{0%{transform:perspective(2200px) rotateY(-180deg)}12%{transform:perspective(2200px) rotateY(-171deg) translateZ(4px)}100%{transform:perspective(2200px) rotateY(0deg)}} @keyframes vma-blatt-dunkler{0%{opacity:0}50%{opacity:1}100%{opacity:1}} @keyframes vma-blatt-heller{0%{opacity:1}50%{opacity:1}100%{opacity:0}} @keyframes vma-schatten-zurueckziehen{0%{opacity:.9;transform:scaleX(1)}55%{opacity:.6;transform:scaleX(.45)}100%{opacity:0;transform:scaleX(0)}} @keyframes vma-schatten-zuziehen{0%,45%{opacity:0;transform:scaleX(0)}100%{opacity:.75;transform:scaleX(1)}} @keyframes vma-seite-weg{0%{transform:perspective(1600px) rotateY(0deg)}12%{transform:perspective(1600px) rotateY(-8deg) translateZ(4px)}100%{transform:perspective(1600px) rotateY(-180deg)}} @keyframes vma-blende-ein{from{opacity:0}to{opacity:1}} @keyframes vma-ecke-heben{to{width:3.2rem;height:3.2rem}} @keyframes vma-fortschritt{to{scale:1 1}} @keyframes vma-stiftspitze{to{background-position:100% 50%}} /* ================================================================ Druck */ @media print{ .lettern,.stapel__bahn,.buch-offen__deckel,.buch-offen__baendchen{display:none} }