/* ========================================================================== OMNISON — Alexander Matthäi project.css — Projekt-Subseiten (Hopium Māchina, Hopium Membrane, Red Bull …) Farbwelt pro Seite via CSS-Variablen im der jeweiligen Seite: --color-bg Seitenhintergrund --color-text Fließtext / X / Credits --color-title H1 (optional, Standard = --color-text) --color-dim Footer-Legal (optional) ========================================================================== */ :root{ --color-bg:#30151E; --color-text:#F3EDE7; --color-title:var(--color-text); --color-dim:rgba(243,237,231,.62); --font-serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif; --content-max:1440px; --pad:200px; /* Desktop: viel Luft, mehr als Übersicht (84px) */ --tile-gap:16px; /* wie Layout: 16px durchgehend */ --head-top:104px; /* Kopf-Abstand oben; X sitzt auf gleicher Höhe */ } @media (max-width:1259px){ :root{ --pad:88px; } } @media (max-width:979px){ :root{ --pad:57.6px; --tile-gap:14px; } } @media (max-width:767px){ :root{ --pad:12px; --tile-gap:12px; --head-top:47.52px; } } *,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; background:var(--color-bg); overscroll-behavior-y:none; } body{ background:var(--color-bg); color:var(--color-text); font-family:var(--font-serif); font-weight:400; min-height:100vh; -webkit-font-smoothing:antialiased; overflow-x:hidden; overscroll-behavior-y:none; } a{ color:inherit; text-decoration:none; } img{ display:block; width:100%; height:auto; } /* ===== Seiten-Einfahrt: von unten (nur bei Direktaufruf) ===== Während .page von unten hochfährt, liegt über ihr noch nichts — dort malt der Browser seine eigene Leinwand. Auf dem Handy war deshalb beim Direktaufruf/Reload oben ein Spalt in der Farbe der zuletzt gezeigten Seite (Übersicht) zu sehen. body::before legt eine feste, seitenfarbene Ebene unter die fahrende Karte, die diesen Spalt abdeckt. 100svh statt 100vh: iOS misst 100vh gegen den Viewport OHNE eingeblendete Browserleisten und schiebt die Karte dadurch zu weit nach unten. */ body::before{ content:""; position:fixed; inset:0; /* 100lvh: im Overlay-iframe der Übersicht ist der Rahmen so hoch wie der GROSSE iOS-Viewport; inset:0 allein deckte nur den kleinen ab und ließ oben einen Spalt stehen, wenn die Adressleiste ausgeblendet war. */ height:100lvh; background:var(--color-bg); z-index:-1; pointer-events:none; } .page{ background:var(--color-bg); /* KEIN min-height:100lvh: der Vollbild-Hintergrund läuft bereits über body::before. Ein erzwungenes min-height hier polsterte kurze Projekte (wenig Media) künstlich bis zur GROSSEN iOS-Viewporthöhe auf — beim Laden zeigt Safari aber die Adressleiste, der sichtbare Bereich ist kleiner. Der Footer landete dadurch in diesem unsichtbaren Rest unten, ohne dass optisch erkennbar war, dass noch gescrollt werden muss. Ohne min-height endet .page exakt am Inhalt — der Footer ist entweder sofort sichtbar oder eindeutig per Scroll erreichbar. */ transform:translate3d(0,100svh,0); animation:pageUp 1s cubic-bezier(0.16,1,0.3,1) .05s forwards; will-change:transform; backface-visibility:hidden; } @keyframes pageUp{ to{ transform:translate3d(0,0,0); } } /* Gleiche Kurve wie die Overlay-Rückfahrt (#project-overlay.closing in work.css): sofortiger Abgang beim Klick statt trägem Ease-in. */ body.leaving .page{ animation:pageDown .42s cubic-bezier(0.4,0,0.2,1) forwards; will-change:transform; } @keyframes pageDown{ to{ transform:translate3d(0,100svh,0); } } /* Im Overlay der Übersicht (iframe) übernimmt die Übersicht die Fahrt — die Seite selbst steht dann still und ist sofort komplett da. */ html.embedded .page{ animation:none; transform:none; } /* ===== Sequenzielles Lademanagement (mvsm-Muster) ===== 1) Der Background (.page) fährt sofort. 2) Kopf-Text und Hero-Video-Poster erscheinen sofort (nicht auf das Laden der Kacheln warten — sonst blieb auf dem Handy nur Hintergrund + X). 3) Erst danach laden die übrigen Kacheln strikt nacheinander von oben nach unten: erst laden, dann einblenden, dann die nächste. Dauert eine Kachel länger, erscheint darunter die „Laden…"-Anzeige. */ .wrap, .site-footer{ opacity:0; visibility:hidden; } body.content-ready .wrap, body.content-ready .site-footer{ visibility:visible; opacity:1; transition:opacity .5s ease .05s; } /* Einzel-Reveal der Medien-Kacheln */ .video-frame, .media-stack .media{ opacity:0; transform:translate3d(0,26px,0); } .video-frame.is-in, .media-stack .media.is-in{ opacity:1; transform:translate3d(0,0,0); transition:opacity .6s ease, transform .7s cubic-bezier(0.22,1,0.36,1); } /* „Laden…"-Anzeige während des sequenziellen Nachladens (analog mvsm). Sitzt als Kind im Medien-Stack direkt vor der ladenden Einheit — mittig, ca. 75px unter der zuletzt eingeblendeten Kachel; wandert mit dem Ladefortschritt nach unten. Erscheint erst bei längerer Ladezeit. */ .load-indicator{ text-align:center; margin-top:clamp(0px, 4vw, 15px); padding-bottom:8px; font-family:var(--font-serif); font-size:clamp(19px, 1.6vw, 22px); font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--color-title); opacity:0; transition:opacity .35s ease; pointer-events:none; } .load-indicator.is-on{ opacity:.7; animation:loadPulse 1.4s ease-in-out infinite; } @keyframes loadPulse{ 0%,100%{ opacity:.32; } 50%{ opacity:.75; } } /* ===== Schließen (X, oben rechts) ===== */ .close{ /* fixed statt absolute: das X bleibt beim Scrollen oben stehen */ position:fixed; right:var(--pad); top:calc(var(--head-top) - 6px); /* -6px gleicht die Button-Padding aus, X-Glyph landet auf H1-Cap-Höhe */ z-index:50; padding:6px; color:var(--color-text); opacity:.8; transition:opacity .3s ease, transform .3s ease; } .close svg{ width:26px; height:26px; display:block; } .close:hover{ opacity:1; transform:rotate(90deg); } @media (max-width:767px){ .close svg{ width:22px; height:22px; } } /* ===== Zurück-Pfeil (links, vertikal mittig — optional pro Seite) ===== */ .back{ position:fixed; left:calc(var(--pad) / 4); top:50%; transform:translateY(-50%); z-index:50; padding:10px; color:var(--color-text); opacity:.75; transition:opacity .3s ease, transform .3s ease; } .back svg{ width:30px; height:30px; display:block; } .back:hover{ opacity:1; transform:translateY(-50%) translateX(-4px); } @media (max-width:767px){ .back{ display:none; } /* Mobil reicht das X oben rechts */ } /* ===== Wrapper ===== */ .wrap{ max-width:calc(var(--content-max) + var(--pad) * 2); margin:0 auto; padding:0 var(--pad); } /* ===== Kopf ===== */ .head{ padding-top:var(--head-top); } .head h1{ font-weight:700; text-transform:uppercase; color:var(--color-title); /* 15% kleiner als zuvor (war clamp(60px,10.7vw,154px)) */ font-size:clamp(49px, 9.1vw, 129px); line-height:.9; letter-spacing:-.01em; /* Optischer Ausgleich: Serifen-Versalien (B, M, …) wirken sonst zu weit rechts */ margin-left:-5px; } .head .sub{ /* Abstände 15% enger, proportional zur kleineren Überschrift */ margin-top:clamp(12px, 1.79vw, 26px); font-size:clamp(18px, 1.8vw, 25px); letter-spacing:.2em; text-transform:uppercase; color:var(--color-text); font-weight:600; } .head hr{ border:none; /* Gleiche Stärke/Farbe wie die Pager-Linie unten (.projekt-pager, .projekt-pager .strich). Feste Farbe statt color-mix() — manche älteren Safari-Versionen verwerfen dabei offenbar die gesamte Deklaration statt nur die color-mix-Zeile zu ignorieren. */ border-top:1px solid var(--color-dim); margin:clamp(17px, 2.21vw, 32px) 0 clamp(19px, 2.47vw, 36px); } .head .intro{ /* Desktop: läuft nur bis 75% der Strichbreite, nicht rechtsbündig zum Strich */ max-width:75%; /* Desktop 22px (2px größer als zuvor 20px), skaliert proportional herunter */ font-size:clamp(14.36px, 1.5625vw, 20.5px); font-weight:600; /* SemiBold */ line-height:1.35; /* enger als Mixed-Case, da Versalien ohne Ober-/Unterlängen */ letter-spacing:0.08em; /* 8% laut Figma */ text-transform:uppercase; color:var(--color-text); } .head .intro strong{ font-weight:600; } @media (max-width:979px){ /* Tablet & Handy: wieder volle Breite, bündig mit dem Strich */ .head .intro{ max-width:none; } } /* ===== Medien-Grid ===== */ .media-stack{ margin-top:clamp(44px, 5.2vw, 74px); display:flex; flex-direction:column; gap:var(--tile-gap); } .video-frame{ position:relative; width:100%; aspect-ratio:16/9; background:#000; /* +16px Grid-Gap: Desktop 96+16=112px (20% mehr als zuvor 80px), skaliert proportional auf kleineren Auflösungen herunter */ margin-bottom:clamp(52px, 6.71vw, 96px); border-radius:6px; overflow:hidden; } /* Fallback für Browser ohne aspect-ratio-Support (z.B. Safari < 15) */ @supports not (aspect-ratio: 1 / 1) { .video-frame{ height: 0; padding-top: 56.25%; } } .video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .video-frame media-controller{ position:absolute; inset:0; width:100%; height:100%; /* Player-Skin ist projektunabhängig immer identisch (Māchina-Look: Creme auf Dunkel) — bindet NICHT an --color-text/--color-bg der jeweiligen Seite, sonst verliert der Player auf hellen Farbwelten (z.B. Membrane) seinen Kontrast auf dem schwarzen Videobalken. */ --media-primary-color:#F3EDE7; --media-secondary-color:#30151E; --media-control-background:transparent; --media-control-hover-background:transparent; --media-font-family:var(--font-serif); --media-font-size:24px; --media-tooltip-display:none; } .video-frame media-time-display{ margin-left:14px; } .video-frame media-controller video{ width:100%; height:100%; object-fit:cover; } /* Vollbild: Video an Monitor-Seitenverhältnis anpassen statt seitlich zu beschneiden — Videos, die vom 16:9-Rahmen abweichen (z.B. Sinupret 1920x814), bekommen dann oben/unten schwarze Balken statt Beschnitt. */ media-controller:fullscreen video, media-controller:-webkit-full-screen video{ object-fit:contain; background:#000; } .video-frame .center-play{ --media-button-icon-width:46px; --media-button-icon-height:46px; width:96px; height:96px; border-radius:50%; /* fest Creme (Māchina-Skin), nicht an --color-text der Seite gebunden */ border:1.5px solid #F3EDE7; background:rgba(0,0,0,.28); } .video-frame .center-play:hover{ background:rgba(0,0,0,.45); } /* Startzustand: nur der zentrale Play-Kreis, keine Steuerleiste */ .video-frame.pre-play .bar-progress, .video-frame.pre-play .bar-controls{ display:none; } /* Nach dem ersten Start: Kreis dauerhaft weg. Die Steuerleiste blendet Media Chrome automatisch aus, sobald die Maus den Frame verlässt. */ .video-frame.started .center-play{ display:none !important; } .video-frame .bar-progress{ padding:0 10px; transform:translateY(6px); /* Fortschrittsbalken näher an die Steuerzeile */ } .video-frame .bar-progress media-time-range{ width:100%; } .video-frame .bar-controls{ padding:2px 10px 8px; } .video-frame .ctrl-spacer{ flex:1; } @media (max-width:767px){ .video-frame .center-play{ width:64px; height:64px; --media-button-icon-width:32px; --media-button-icon-height:32px; } } .media{ overflow:hidden; border-radius:6px; } .media img{ height:100%; object-fit:cover; } .media video{ display:block; width:100%; height:100%; object-fit:cover; } .media-pair{ display:flex; gap:var(--tile-gap); } .media-pair .media{ flex:var(--w) 1 0; min-width:0; } @media (max-width:767px){ .media-pair{ flex-direction:column; } .media-pair .media{ flex:none; width:100%; } } /* ===== Credits (ausklappbar) ===== */ .credits{ margin-top:64px; } @media (max-width:767px){ .credits{ margin-top:40px; } } .credits-toggle{ display:flex; align-items:center; gap:14px; background:none; border:none; color:var(--color-text); font-family:var(--font-serif); font-size:clamp(18px, 1.8vw, 25px); font-weight:500; cursor:pointer; padding:6px 0; } /* Handy: "Team ansehen"/"View team" weicht dem kürzeren "Credits" (siehe .short-label unten), damit die Zeile neben der KI-Transparenz-Zeile Platz hat und .credits-head nicht mehr umbrechen muss. */ .credits-toggle .short-label{ display:none; } .credits-toggle .burger{ width:17px; height:11px; position:relative; display:inline-block; } .credits-toggle .burger span{ position:absolute; left:0; width:100%; height:1.5px; background:var(--color-text); transition:transform .4s cubic-bezier(0.22,1,0.36,1), top .4s cubic-bezier(0.22,1,0.36,1), opacity .3s ease; } .credits-toggle .burger span:nth-child(1){ top:0; } .credits-toggle .burger span:nth-child(2){ top:5px; } .credits-toggle .burger span:nth-child(3){ top:10px; } .credits.open .burger span:nth-child(1){ top:5px; transform:rotate(45deg); } .credits.open .burger span:nth-child(2){ opacity:0; } .credits.open .burger span:nth-child(3){ top:5px; transform:rotate(-45deg); } .credits-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s cubic-bezier(0.22,1,0.36,1); } .credits.open .credits-body{ grid-template-rows:1fr; } .credits-inner{ overflow:hidden; opacity:0; transform:translateY(10px); transition:opacity .45s ease .1s, transform .55s cubic-bezier(0.22,1,0.36,1) .05s; } .credits.open .credits-inner{ opacity:1; transform:translateY(0); } .credits-inner dl{ padding-top:30px; } .credits-inner dt{ font-weight:600; font-size:clamp(18px, 1.8vw, 25px); margin-top:23px; } .credits-inner dt:first-child{ margin-top:0; } .credits-inner dd{ font-size:clamp(18px, 1.8vw, 25px); line-height:1.62; color:var(--color-text); font-weight:400; } /* ===== Footer ===== */ .site-footer{ margin-top:120px; padding:0 var(--pad) 40px; text-align:center; } @media (max-width:767px){ /* 96px = 80px + 20%: auf dem Handy stand der Footer zu dicht am Inhalt. */ .site-footer{ margin-top:96px; } .site-footer .copy{ font-size:14px; } .site-footer .legal{ font-size:12px; } } .site-footer .copy{ font-size:16px; letter-spacing:.06em; font-weight:400; } .site-footer .copy strong{ font-weight:600; letter-spacing:.06em; } .site-footer .copy .copy-years{ font-weight:500; } .site-footer .legal{ margin-top:8px; font-size:14px; color:var(--color-dim); } .site-footer .legal a{ position:relative; text-decoration:none; transition:opacity .25s ease; } /* Unterstrich: erscheint bei Hover genau wie im Hauptmenü (siehe .header-nav-item::after in style.css), ohne Overshoot/Bounce. */ .site-footer .legal a::after{ content:''; position:absolute; left:0; bottom:-4px; width:100%; height:1px; background-color:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(0.16, 1, 0.3, 1); } .site-footer .legal a:hover{ opacity:.6; } .site-footer .legal a:hover::after{ transform:scaleX(1); } .site-footer .legal .sep{ display:inline-block; margin:0 .5em; } /* ========================================================================== KI-Transparenz-Zeile — sitzt rechts neben "Team ansehen" (.credits-head umschließt beide). Farben laufen über die Seitenpalette (--color-dim / --color-text), damit die Zeile in jeder Projekt-Farbwelt funktioniert. ========================================================================== */ .credits-head{ display:flex; align-items:center; justify-content:space-between; gap:40px; } .ki-line{ display:flex; align-items:center; gap:10px; text-decoration:none; /* volle Textfarbe wie "Team ansehen" — das gedimmte --color-dim wirkte auf den dunklen Seiten grau statt weiß und dadurch dünner */ color:var(--color-text); /* Gewicht/Größe an "Team ansehen" (500, bis 25px) angenähert, eine Stufe kleiner, damit die Hierarchie erhalten bleibt */ font-size:clamp(18px, 1.5vw, 21px); font-weight:500; letter-spacing:.03em; white-space:nowrap; position:relative; padding-bottom:2px; } /* animierter Unterstrich — gleiche Mechanik wie im Hauptmenü (.header-nav-item::after): fährt bei Hover von links ein */ .ki-line::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background-color:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(0.16, 1, 0.3, 1); } .ki-line svg{ width:14px; height:14px; flex:0 0 14px; display:block; } .ki-line svg circle, .ki-line svg path{ fill:none; stroke:currentColor; stroke-width:1.3; vector-effect:non-scaling-stroke; } .ki-line svg .fill{ fill:currentColor; stroke:none; } .ki-line .zahl{ opacity:.7; } .ki-line .zahl::before{ content:"\00b7 "; opacity:.55; } .ki-line .pfeil{ font-size:17px; margin-left:2px; transition:transform .3s cubic-bezier(.22,1,.36,1); } @media (hover:hover) and (pointer:fine){ .ki-line:hover::after{ transform:scaleX(1); } .ki-line:hover .pfeil{ transform:translateX(5px); } } @media (max-width:900px){ .credits-head{ flex-direction:column; align-items:flex-start; gap:18px; } } @media (max-width:767px){ .ki-line{ font-size:17px; } /* "immer am rechten Rand neben Team ansehen": die Spalten-Stapelung aus der 900px-Regel oben wird hier wieder aufgehoben, eine Zeile bleibt bestehen — möglich, weil .short-label ("Credits") die Zeile deutlich kürzt (siehe .credits-toggle-Regeln). */ .credits-head{ flex-direction:row; align-items:center; justify-content:space-between; gap:16px; } .credits-toggle .full-label{ display:none; } .credits-toggle .short-label{ display:inline; } /* Zähler ("2 von 17" usw.) nur auf dem Handy weg — Tablet/Desktop zeigen ihn weiterhin. */ .ki-line .zahl{ display:none; } } /* ========================================================================== Weitere Arbeiten — Vor/Zurück-Fuß (Layout aus dem Vorschlag, in den Seitenstil übersetzt: Cormorant statt Bodoni, Farben aus der Palette). Beim Hover wächst das Projektbild als Band aus der Mittellinie heraus, der Text rückt mit der Bildkante nach innen und wird weiß. ========================================================================== */ .projekt-pager{ margin-top:96px; /* Zarte Linie in fester Farbe statt color-mix() — manche älteren Safari-Versionen verwerfen bei color-mix() offenbar die gesamte Deklaration statt nur die eine Zeile zu ignorieren, auch wenn ein Fallback davorsteht. Mit fester Farbe zuverlässig auf alten und neuen Browsern sichtbar. */ border-top:1px solid var(--color-dim); display:grid; grid-template-columns:1fr 1px 1fr; align-items:stretch; position:relative; overflow:hidden; } .projekt-pager .strich{ background:var(--color-dim); position:relative; z-index:3; } .projekt-pager .teil{ position:relative; display:block; padding:34px 0 40px; text-decoration:none; color:var(--color-text); } .projekt-pager .teil.rechts{ text-align:right; padding-left:44px; } .projekt-pager .teil.links{ padding-right:44px; } .projekt-pager .mini{ display:block; margin-bottom:10px; font-size:14.3px; /* 10% größer als zuvor (13px) */ font-weight:800; /* nochmal 2 Stufen fetter als zuvor (600) */ letter-spacing:.169em; /* etwas mehr Luft als die reine Kopf-Enge */ text-transform:uppercase; color:var(--color-dim); position:relative; z-index:2; } .projekt-pager .name{ display:block; font-family:var(--font-serif); font-weight:700; /* Cormorant endet bei 700 — die feine Kontur in Schriftfarbe macht den Schnitt zusätzlich schwerer (gleicher Kniff wie bei strong auf der Über-Seite) */ -webkit-text-stroke:.4px currentColor; font-size:clamp(22.95px, 2.295vw, 34px); /* 15% kleiner als zuvor (27/2.7vw/40) */ letter-spacing:.02em; /* etwas mehr Luft als die reine Kopf-Enge */ text-transform:uppercase; line-height:1.12; position:relative; z-index:2; } .projekt-pager .sub{ display:block; margin-top:1px; font-size:19.5px; /* 15% größer als zuvor (17px) */ font-weight:500; /* erbt sonst die 700 des Namens */ -webkit-text-stroke:0; /* Kontur des Namens nicht mitvererben */ /* Enger als zuvor, wie die Kopf-Subline (.head .sub) */ letter-spacing:.121em; text-transform:uppercase; color:var(--color-dim); } .projekt-pager .reveal{ position:absolute; /* Kanten einzeln statt inset:0 — Safari kennt die Kurzform erst ab 14.1; auf älteren iPads fiel der Bildrahmen sonst auf seine Inhaltsgröße zusammen (gleiche Vorsicht wie bei color-mix und aspect-ratio oben). */ top:0; right:0; bottom:0; left:0; z-index:0; pointer-events:none; /* Muss sein: das Bild steht im Ruhezustand auf scale(1.07) und ragt damit 3,5% über diesen Rahmen hinaus. Beschnitten wurde bisher erst außen an .projekt-pager — nicht an der Mittellinie und nicht oben/unten. Je breiter die Spalte, desto sichtbarer; ab ~1220px (bei 1259px fällt --pad von 200 auf 88px, die Hälften werden deutlich breiter und flacher) lief das Bild erkennbar aus seinem Format. */ overflow:hidden; } /* Bildband startet unsichtbar an der Mittellinie */ .projekt-pager .teil.links .reveal{ clip-path:inset(0 0 0 100%); } .projekt-pager .teil.rechts .reveal{ clip-path:inset(0 100% 0 0); } .projekt-pager .reveal img{ /* absolut statt im Fluss: height:100% braucht sonst eine aufgelöste Elternhöhe. Fehlt die (siehe inset-Hinweis oben), fällt das Bild auf seine Eigenhöhe zurück und füllt die Fläche nicht mehr — dann steht unter bzw. über dem Bild ein Streifen, in dem nur der Schleier liegt. */ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.07); } /* dunkler Schleier für Lesbarkeit des Texts auf dem Bild */ .projekt-pager .reveal::after{ content:""; position:absolute; top:0; right:0; bottom:0; left:0; background:rgba(10,10,12,.34); } /* KEIN pauschales object-position:50% 50% unterhalb 1280px mehr (frühere Fassung). Die vier betroffenen Bilder sind Produktionsstills, kein eigens zugeschnittenes Thumbnail — ihr Motiv sitzt deutlich außerhalb der Mitte (Auto im unteren Drittel bei machina-01.jpg, Fahrzeug am rechten Rand bei audi_thumb3.jpg, Kletterer rechts der Mitte bei redbull-10_2/3). Zentriert zeigte die schmale 1280px-Karte vor allem Beton-Decke bzw. Fels statt des Motivs. Die object-position steht jetzt direkt an den im HTML — als Prozentwert statt fixem calc(50% - 100px), damit sie mit der Box mitskaliert statt bei flachen Boxen über das Ziel hinauszuschießen. Keine Media Query mehr nötig. */ @media (hover:hover) and (pointer:fine){ .projekt-pager .reveal{ transition:clip-path .72s cubic-bezier(.22,1,.36,1); } .projekt-pager .reveal img{ transition:transform 1.4s cubic-bezier(.22,1,.36,1); } .projekt-pager .teil .mini, .projekt-pager .teil .name{ transition:transform .72s cubic-bezier(.22,1,.36,1), color .45s ease; } .projekt-pager .teil .sub{ transition:color .45s ease; } .projekt-pager .teil:hover .reveal{ clip-path:inset(0 0 0 0); } .projekt-pager .teil:hover .reveal img{ transform:scale(1); } .projekt-pager .teil:hover .name, .projekt-pager .teil:hover .mini, .projekt-pager .teil:hover .sub{ color:#fff; } .projekt-pager .teil.links:hover .mini, .projekt-pager .teil.links:hover .name{ transform:translateX(34px); } .projekt-pager .teil.rechts:hover .mini, .projekt-pager .teil.rechts:hover .name{ transform:translateX(-34px); } } @media (prefers-reduced-motion:reduce){ .projekt-pager .reveal, .projekt-pager .reveal img{ transition:none; } } @media (max-width:767px){ /* Zurück/Weiter bleiben nebeneinander wie am Desktop — eines links, eines rechts, in einer Zeile. Die mittlere Trennlinie (.strich) fällt weg: border-top auf .projekt-pager selbst (oben, gegen die Credits-Sektion) bleibt bestehen, nur der Divider ZWISCHEN den beiden Feldern wird auf dem Handy nicht mehr gebraucht. */ .projekt-pager{ grid-template-columns:1fr 1fr; column-gap:16px; margin-top:80px; } .projekt-pager .strich{ display:none; } .projekt-pager .teil.rechts{ padding-left:0; } .projekt-pager .teil.links{ padding-right:0; } .projekt-pager .sub{ font-size:17px; } }