/* ========================================================================== pk-motion.css · Bewegung für krueger-design.com Stand 08.08.2026 -------------------------------------------------------------------------- Alles hängt an .pk-motion auf . Diese Klasse setzt pk-motion.js. Ohne JavaScript, bei "Bewegung reduzieren" oder wenn das Skript fehlt, bleibt die Seite exakt so wie vorher. Grundregel: Was ein Element versteckt, hängt immer am Attribut [data-rv]. Das Attribut setzt und entfernt das Skript. Fällt das Skript aus, ist nichts versteckt. Layout, Farben und Typografie bleiben im Ruhezustand unverändert. ========================================================================== */ html.pk-motion{ --pk-ease:cubic-bezier(.22,.61,.36,1); --pk-ease-out:cubic-bezier(.16,1,.3,1); --pk-spring:cubic-bezier(.34,1.5,.64,1); --pk-dur:.75s; } /* ========================================================================== 1 · Grundeffekt: Einblenden beim Scrollen ========================================================================== */ html.pk-motion [data-rv]{ opacity:0; transform:translateY(20px); transition:opacity var(--pk-dur) var(--pk-ease) var(--rv-d,0ms), transform var(--pk-dur) var(--pk-ease) var(--rv-d,0ms); } html.pk-motion [data-rv].rv-in{opacity:1;transform:none;} html.pk-motion [data-rv="left"]{transform:translateX(-18px);} html.pk-motion [data-rv="right"]{transform:translateX(18px);} html.pk-motion [data-rv="scale"]{transform:translateY(14px) scale(.985);} html.pk-motion [data-rv="fade"]{transform:none;} /* Bilder wischen von unten auf statt einzublenden */ html.pk-motion [data-rv="wipe"]{ opacity:1;transform:none; clip-path:inset(0 0 100% 0); transition:clip-path .95s var(--pk-ease-out) var(--rv-d,0ms); } html.pk-motion [data-rv="wipe"].rv-in{clip-path:inset(0 0 0 0);} /* ========================================================================== 2 · Überschriften Wort für Wort ========================================================================== */ html.pk-motion .pk-wm{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.14em; margin-bottom:-.14em; } html.pk-motion .pk-w{ display:inline-block; opacity:0; transform:translateY(1.05em) rotate(1.2deg); transition:opacity .6s ease var(--rv-d,0ms), transform .85s var(--pk-ease-out) var(--rv-d,0ms); } html.pk-motion .rv-in .pk-w{opacity:1;transform:none;} /* nach dem Lauf die Maske wieder öffnen, damit nichts beschnitten bleibt */ html.pk-motion .pk-typed-done .pk-wm{overflow:visible;padding-bottom:0;margin-bottom:0;} html.pk-motion .pk-typed-done .pk-w{opacity:1;transform:none;} /* Zitat auf der Startseite */ html.pk-motion .band blockquote .pk-q{ display:inline-block;opacity:0;transform:translateY(.45em); transition:opacity .5s ease var(--rv-d,0ms),transform .6s var(--pk-ease) var(--rv-d,0ms); } html.pk-motion .band blockquote.rv-in .pk-q{opacity:1;transform:none;} /* ========================================================================== 3 · Seitenübergang ========================================================================== */ html.pk-motion .pk-fade{ position:fixed;inset:0;z-index:9999;pointer-events:none; background:var(--bg,#081a12); opacity:1;transition:opacity .34s ease; } html.pk-motion .pk-fade::after{ content:'';position:absolute;left:50%;top:50%;width:15px;height:15px;margin:-7px 0 0 -7px; border-radius:50%;background:radial-gradient(circle at 30% 30%,#a9c2a4,#2f4a34); box-shadow:0 0 22px rgba(147,179,154,.55); opacity:0;transform:scale(.5); transition:opacity .18s ease,transform .5s var(--pk-ease); } html.pk-motion .pk-fade.pk-out{opacity:0;} html.pk-motion .pk-fade.pk-in{opacity:1;transition:opacity .2s ease;} html.pk-motion .pk-fade.pk-in::after{opacity:1;transform:scale(1);} /* ========================================================================== 4 · Navigation und Lesefortschritt ========================================================================== */ html.pk-motion .pk-progress{ position:fixed;left:0;top:calc(var(--nav-h,56px) - 2px);height:2px;width:100%; transform:scaleX(0);transform-origin:left;z-index:51;pointer-events:none; background:linear-gradient(90deg,#93b39a,#7bb662 55%,#e8752e); } html.pk-motion .nav.menu-open ~ .pk-progress{display:none;} html.pk-motion .nav{transition:background .35s ease,box-shadow .35s ease;} html.pk-motion .nav.pk-scrolled{background:rgba(5,12,9,.92);box-shadow:0 10px 30px rgba(0,0,0,.35);} @keyframes pkPulse{0%,100%{box-shadow:0 0 12px rgba(147,179,154,.5);}50%{box-shadow:0 0 22px rgba(147,179,154,.85);}} html.pk-motion .brand-dot{animation:pkPulse 4.5s ease-in-out infinite;} html.pk-motion .brand{transition:transform .3s var(--pk-ease);} html.pk-motion .brand:hover{transform:translateX(2px);} html.pk-motion .brand:hover .brand-dot{animation-duration:1.6s;} /* Menüeinträge klappen versetzt auf */ html.pk-motion .dropdown > a, html.pk-motion .dropdown > .dd-label, html.pk-motion .dropdown .dd-col > a, html.pk-motion .dropdown .dd-col > .dd-label{ opacity:0;transform:translateY(-6px); transition:opacity .22s ease var(--dd,0ms),transform .3s var(--pk-ease) var(--dd,0ms), background .15s,color .15s; } html.pk-motion .nav-item.open .dropdown > a, html.pk-motion .nav-item.open .dropdown > .dd-label, html.pk-motion .nav-item.open .dropdown .dd-col > a, html.pk-motion .nav-item.open .dropdown .dd-col > .dd-label{opacity:1;transform:none;} /* ========================================================================== 5 · Zeigerring und magnetische Schaltflächen (nur Maus, nur groß) ========================================================================== */ html.pk-motion .pk-ring{ position:fixed;left:0;top:0;width:28px;height:28px;margin:-14px 0 0 -14px; border:1px solid rgba(147,179,154,.6);border-radius:50%; pointer-events:none;z-index:9998;opacity:0; transition:opacity .25s ease,width .28s var(--pk-ease),height .28s var(--pk-ease), margin .28s var(--pk-ease),border-color .28s ease,background .28s ease; will-change:transform; } /* Der Punkt sitzt ohne Verzögerung genau auf der Zeigerspitze. Damit trifft man auch ohne Systemzeiger exakt. */ html.pk-motion .pk-dot{ position:fixed;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px; background:#eef2ea;border-radius:50%; pointer-events:none;z-index:9999;opacity:0; transition:opacity .18s ease,width .2s var(--pk-ease),height .2s var(--pk-ease), margin .2s var(--pk-ease),background .2s ease,border-radius .2s var(--pk-ease); will-change:transform; mix-blend-mode:difference; } html.pk-motion .pk-ring.on{opacity:1;} html.pk-motion .pk-dot.on{opacity:1;} /* ueber dem 3D-Kopfbereich der Startseite ist der eigene Zeiger aus */ html.pk-motion .pk-ring.pk-weg, html.pk-motion .pk-dot.pk-weg{opacity:0;} /* über Links und Schaltflächen: Ring wächst, Punkt tritt zurück */ html.pk-motion .pk-ring.hot{ width:52px;height:52px;margin:-26px 0 0 -26px; border-color:rgba(147,179,154,.9);background:rgba(147,179,154,.1); } html.pk-motion .pk-dot.hot{width:0;height:0;margin:0;opacity:0;} /* über Bildern, die sich vergrößern lassen: Ring mit Pluszeichen */ html.pk-motion .pk-ring.zoom{ width:68px;height:68px;margin:-34px 0 0 -34px; border-color:rgba(238,242,234,.75);background:rgba(238,242,234,.07); } html.pk-motion .pk-dot.zoom{width:0;height:0;margin:0;opacity:0;} html.pk-motion .pk-ring.zoom::before{ content:'';position:absolute;left:50%;top:50%;width:13px;height:1.5px;margin:-.75px 0 0 -6.5px; background:rgba(238,242,234,.9); } html.pk-motion .pk-ring.zoom::after{ content:'';position:absolute;left:50%;top:50%;width:1.5px;height:13px;margin:-6.5px 0 0 -.75px; background:rgba(238,242,234,.9); } /* über Text wird der Punkt zum Schreibbalken */ html.pk-motion .pk-ring.text{width:0;height:0;margin:0;border-color:transparent;background:none;} html.pk-motion .pk-dot.text{ width:1.5px;height:21px;margin:-10.5px 0 0 -.75px;border-radius:1px; background:#eef2ea; } html.pk-motion .pk-mag{transition:transform .35s var(--pk-ease);} /* Systemzeiger ausblenden. Die Klasse setzt das Skript erst nach der ersten echten Mausbewegung und nimmt sie bei Touch sofort wieder weg. Über der drehbaren Weltkugel bleibt der Systemzeiger sichtbar. */ @media (hover:hover) and (pointer:fine) and (min-width:900px){ html.pk-nocursor, html.pk-nocursor *{cursor:none!important;} /* Über der drehbaren Weltkugel bleibt der Systemzeiger sichtbar, "greifen" zeigt dort an, dass man ziehen kann. */ html.pk-nocursor #stage, html.pk-nocursor #stage *{cursor:grab!important;} html.pk-nocursor #stage:active, html.pk-nocursor #stage:active *{cursor:grabbing!important;} /* Eingabefelder behalten ihren Schreibbalken */ html.pk-nocursor input, html.pk-nocursor textarea, html.pk-nocursor select{cursor:auto!important;} } @media (max-width:899px),(hover:none),(pointer:coarse){ html.pk-motion .pk-ring, html.pk-motion .pk-dot{display:none!important;} } /* ========================================================================== 6 · Startseite ========================================================================== */ @keyframes pkHeroUp{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}} @keyframes pkHeroFade{from{opacity:0;}to{opacity:1;}} html.pk-motion .hero-overlay .eyebrow{animation:pkHeroUp .9s var(--pk-ease) .15s backwards;} html.pk-motion .hero-bottom{animation:pkHeroFade 1.1s ease .95s backwards;} /* .work wird per transform positioniert (Masonry). Deshalb hier nie transform anfassen, nur Deckkraft, Rahmen, Bild. */ html.pk-motion .gallery .work.placed{ opacity:0; transition:opacity .7s var(--pk-ease) var(--rv-d,0ms),border-color .25s ease,box-shadow .35s ease; } html.pk-motion .gallery .work.placed.rv-in{opacity:1;} html.pk-motion .gallery .work:not(.rv-in) .thumb{clip-path:inset(0 0 100% 0);} html.pk-motion .gallery .work .thumb{transition:clip-path .95s var(--pk-ease-out) var(--rv-d,0ms);} html.pk-motion .work:hover{box-shadow:0 18px 44px rgba(0,0,0,.42);} html.pk-motion .work .wyear{transition:transform .3s var(--pk-spring),background .3s ease;} html.pk-motion .work:hover .wyear{transform:translateY(-2px) scale(1.04);} html.pk-motion .work .meta h3{transition:color .25s ease;} html.pk-motion .work:hover .meta h3{color:var(--gold,#93b39a);} html.pk-motion .featured .f-media img{ transform:translate3d(0,var(--py,0px),0) scale(var(--ps,1.06)); transition:transform .6s var(--pk-ease);will-change:transform; } html.pk-motion .featured .f-media:hover img{--ps:1.12;} html.pk-motion .featured .f-media[data-rv] .f-badge{ opacity:0;transform:translateY(8px); transition:opacity .6s var(--pk-ease) .35s,transform .6s var(--pk-ease) .35s; } html.pk-motion .featured .f-media[data-rv].rv-in .f-badge{opacity:1;transform:none;} @keyframes pkBlink{0%,100%{opacity:1;}50%{opacity:.35;}} html.pk-motion .featured .f-eyebrow::before{animation:pkBlink 2.8s ease-in-out infinite;} html.pk-motion .f-facts span{transition:transform .3s var(--pk-ease);} html.pk-motion .f-facts span:hover{transform:translateY(-2px);} /* ========================================================================== 7 · Fallstudien ========================================================================== */ html.pk-motion .swatches[data-rv] .sw .dot{ transform:scale(0); transition:transform .55s var(--pk-spring) var(--rv-d,0ms); } html.pk-motion .swatches[data-rv].rv-in .sw .dot{transform:scale(1);} html.pk-motion .swatches .sw{transition:transform .3s var(--pk-ease);} html.pk-motion .swatches .sw:hover{transform:translateY(-3px);} html.pk-motion .cs-meta{position:relative;} html.pk-motion .cs-meta[data-rv].rv-in{border-color:var(--line);} /* Kicker bekommt einen kurzen Akzentstrich, der sich aufzieht */ html.pk-motion .section > .kicker, html.pk-motion .section-head > .eyebrow{position:relative;} html.pk-motion .section > .kicker[data-rv]::after, html.pk-motion .section-head > .eyebrow[data-rv]::after, html.pk-motion .section > .kicker.rv-in::after, html.pk-motion .section-head > .eyebrow.rv-in::after{ content:'';position:absolute;left:0;bottom:-5px;height:1px;width:26px; background:currentColor;opacity:.55; transform:scaleX(0);transform-origin:left; transition:transform .8s var(--pk-ease-out) calc(var(--rv-d,0ms) + 120ms); } html.pk-motion .section > .kicker.rv-in::after, html.pk-motion .section-head > .eyebrow.rv-in::after{transform:scaleX(1);} /* Karten heben leicht an */ html.pk-motion .cards .card, html.pk-motion .lgrid .lcard, html.pk-motion .grid .proj{transition:transform .35s var(--pk-ease),border-color .3s ease,box-shadow .35s ease;} html.pk-motion .cards .card:hover, html.pk-motion .lgrid .lcard:hover, html.pk-motion .grid .proj:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.35);} /* ========================================================================== 8 · Bilder, Galerie, Lightbox ========================================================================== */ html.pk-motion .gal figure img, html.pk-motion .shots figure img{transition:transform .8s var(--pk-ease);} html.pk-motion .gal figure:hover img, html.pk-motion .shots figure:hover img{transform:scale(1.035);} @keyframes pkLbIn{from{opacity:0;}to{opacity:1;}} @keyframes pkLbImg{from{opacity:0;transform:scale(.93);}to{opacity:1;transform:none;}} html.pk-motion #lb.show{animation:pkLbIn .22s ease;} html.pk-motion #lb.show img{animation:pkLbImg .38s var(--pk-ease-out);} html.pk-motion .pk-lbnav{ position:fixed;top:50%;transform:translateY(-50%);z-index:10000; width:46px;height:46px;padding:0;border-radius:50%; border:1px solid rgba(238,242,234,.3); background:rgba(8,20,14,.55);color:#eef2ea;font-size:22px;line-height:1; display:none;align-items:center;justify-content:center;cursor:pointer; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); transition:background .25s ease,opacity .25s ease;opacity:.72; } html.pk-motion .pk-lbnav:hover{background:rgba(147,179,154,.28);opacity:1;} html.pk-motion .pk-lbnav.prev{left:18px;} html.pk-motion .pk-lbnav.next{right:18px;} html.pk-motion #lb.show ~ .pk-lbnav.pk-avail{display:flex;} @media (max-width:760px){html.pk-motion .pk-lbnav{display:none!important;}} /* ========================================================================== 9 · Werdegang und Über mich ========================================================================== */ html.pk-motion .tl.pk-tl{border-left-color:transparent;} html.pk-motion .tl.pk-tl::before{ content:'';position:absolute;left:-1px;top:0;width:1px;height:100%; background:var(--gold);opacity:.5; transform:scaleY(0);transform-origin:top; transition:transform 1.3s var(--pk-ease-out); } html.pk-motion .tl.pk-tl.pk-drawn::before{transform:scaleY(1);} html.pk-motion .tl .item{position:relative;} html.pk-motion .tl .item[data-rv]::before, html.pk-motion .tl .item.rv-in::before{ content:'';position:absolute;left:-25px;top:7px;width:7px;height:7px;border-radius:50%; background:var(--gold);box-shadow:0 0 0 4px var(--bg); transform:scale(0); transition:transform .45s var(--pk-spring) var(--rv-d,0ms); } html.pk-motion .tl .item.rv-in::before{transform:scale(1);} html.pk-motion .skills .skill{transition:transform .3s var(--pk-spring),background .3s ease,border-color .3s ease;} html.pk-motion .skills .skill:hover{transform:translateY(-3px) scale(1.03);} html.pk-motion .qa .q{position:relative;} html.pk-motion .qa .q[data-rv]::after, html.pk-motion .qa .q.rv-in::after{ content:'';position:absolute;left:0;bottom:-5px;height:1px;width:100%; background:var(--gold);opacity:.4; transform:scaleX(0);transform-origin:left; transition:transform .8s var(--pk-ease-out) var(--rv-d,0ms); } html.pk-motion .qa .q.rv-in::after{transform:scaleX(1);} /* ========================================================================== 10 · Schaltflächen und Chips: Lichtstreifen beim Überfahren ========================================================================== */ html.pk-motion .btn, html.pk-motion .f-btn, html.pk-motion .chip{position:relative;overflow:hidden;} html.pk-motion .cta{position:relative;} html.pk-motion .btn::before, html.pk-motion .f-btn::before, html.pk-motion .chip::before{ content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(115deg,transparent 22%,rgba(255,255,255,.16) 47%,transparent 72%); transform:translateX(-125%); } html.pk-motion .btn:hover::before, html.pk-motion .f-btn:hover::before, html.pk-motion .chip:hover::before{transform:translateX(125%);transition:transform .75s var(--pk-ease);} /* ========================================================================== 11 · Barrierefreiheit: bei "Bewegung reduzieren" ist alles aus ========================================================================== */ @media (prefers-reduced-motion:reduce){ html.pk-nocursor, html.pk-nocursor *{cursor:auto!important;} html.pk-motion [data-rv], html.pk-motion .pk-w, html.pk-motion .band blockquote .pk-q, html.pk-motion .dropdown > a, html.pk-motion .dropdown > .dd-label, html.pk-motion .dropdown .dd-col > a, html.pk-motion .dropdown .dd-col > .dd-label{opacity:1!important;transform:none!important;} html.pk-motion [data-rv="wipe"], html.pk-motion .work .thumb, html.pk-motion .work:not(.rv-in) .thumb{clip-path:none!important;} html.pk-motion .work.placed{opacity:1!important;} html.pk-motion .pk-wm{overflow:visible;padding-bottom:0;margin-bottom:0;} html.pk-motion .swatches[data-rv] .sw .dot{transform:none!important;} html.pk-motion .tl .item[data-rv]::before, html.pk-motion .tl .item.rv-in::before{transform:scale(1)!important;} html.pk-motion .tl{border-left-color:var(--line)!important;} html.pk-motion .tl::before{display:none;} html.pk-motion .section > .kicker::after, html.pk-motion .section-head > .eyebrow::after, html.pk-motion .qa .q::after{transform:scaleX(1)!important;} html.pk-motion .brand-dot, html.pk-motion .featured .f-eyebrow::before, html.pk-motion .hero-overlay .eyebrow, html.pk-motion .hero-bottom, html.pk-motion #lb.show, html.pk-motion #lb.show img{animation:none!important;} html.pk-motion .featured .f-media[data-rv] .f-badge{opacity:1!important;transform:none!important;} html.pk-motion .pk-fade, html.pk-motion .pk-ring, html.pk-motion .pk-dot{display:none!important;} } /* ========================================================================== 12 · Druck: beim Drucken ist nichts versteckt und nichts bewegt ========================================================================== */ @media print{ html.pk-motion [data-rv], html.pk-motion [data-rv-keep], html.pk-motion .pk-w, html.pk-motion .band blockquote .pk-q, html.pk-motion .gallery .work.placed{opacity:1!important;transform:none!important;clip-path:none!important;} html.pk-motion .pk-wm{overflow:visible!important;} html.pk-motion .gallery .work .thumb, html.pk-motion [data-rv="wipe"]{clip-path:none!important;} html.pk-motion .pk-fade, html.pk-motion .pk-ring, html.pk-motion .pk-dot, html.pk-motion .pk-progress, html.pk-motion .pk-lbnav, .pk-amb,.pk-wash,.pk-grain,.pk-decay,.pk-split,.pk-months,.pk-fold{display:none!important;} } /* ========================================================================== 13 · Notschalter Wer alles sofort sehen will, haengt ?anim=aus an die Adresse. pk-motion.js setzt dann diese Klasse. ========================================================================== */ html.pk-motion.pk-alles-sichtbar [data-rv], html.pk-motion.pk-alles-sichtbar [data-rv-keep], html.pk-motion.pk-alles-sichtbar .pk-w, html.pk-motion.pk-alles-sichtbar .band blockquote .pk-q, html.pk-motion.pk-alles-sichtbar .gallery .work.placed{opacity:1!important;transform:none!important;clip-path:none!important;} html.pk-motion.pk-alles-sichtbar .pk-wm{overflow:visible!important;} html.pk-motion.pk-alles-sichtbar .gallery .work .thumb{clip-path:none!important;}