/*---------------------------------------------------------------------*/ /* Stil ausschliesslich fuer portfolio.html. index.css bleibt unangetastet - die vier bestehenden Seiten sollen von dieser Seite nichts merken. portfolio.html laedt index.css UND diese Datei, erbt also alles (Karten, Navbar, Go-to-Top, Netz-Canvas) und legt hier nur das Portfolio-Eigene obendrauf. Harte Regel fuer alles hier drin: Farben NUR aus den Variablen, die index.js setzt (--linkc, --backg) bzw. die in index.css stehen (--them, --hovg). Eine einzige fest eingetragene Farbe, und der individuelle Modus faerbt diese Seite nicht mehr mit. Reihenfolge im : index.css, dann Bootstrap, dann diese Datei. Sie laedt also NACH Bootstrap und braucht die doppelten Selektoren nicht, mit denen sich index.css gegen Bootstrap wehren muss. */ /*---------------------------------------------------------------------*/ /* Grundgeruest */ /* Nur diese Seite hat einen Sprungpfeil im Kopfbereich. Die Regel steht deshalb hier und nicht in index.css - die anderen Seiten sollen weiter hart springen. */ html { scroll-behavior: smooth; } /* Die Seite arbeitet mit viel Luft. Der Wert steht einmal hier, damit Abstaende zwischen Kopfbereich und Bloecken nicht auseinanderlaufen. --tiefe ist der Ausschlag des Parallax-Effekts; auf schmalen Schirmen weiter unten kleiner. */ .portfolio { --luft: clamp(4rem, 10vw, 9rem); --tiefe: 70px; } /*---------------------------------------------------------------------*/ /* Scroll-Fortschritt am oberen Rand. scaleX statt width: das laeuft im Compositor und zwingt den Browser nicht bei jedem Scroll-Pixel zu einem neuen Layout. */ .fortschritt { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 100; pointer-events: none; } .fortschritt span { display: block; width: 100%; height: 100%; background: var(--linkc); opacity: 0.5; transform: scaleX(var(--fortschritt, 0)); transform-origin: left center; } /* Bootstrap-Container waeren hier zu schmal fuer die zweispaltigen Bloecke. */ .portfolio .huelle { width: min(1140px, 92vw); margin-inline: auto; } /*---------------------------------------------------------------------*/ /* Kopfbereich (Hero) */ /* --weg zaehlt beim Runterscrollen von 0 auf 1 hoch (gesetzt von portfolio.js). Der Kopfbereich blendet dabei aus und wandert leicht nach oben, statt einfach aus dem Bild zu rutschen. translate veraendert das Layout nicht - darunter bleibt alles, wo es ist. Die Opacity liegt hier auf dem
, nicht auf .kopf-inhalt: dessen Opacity gehoert schon der Einblend-Animation. */ .kopfbereich { min-height: 100svh; display: flex; justify-content: center; align-items: center; padding: var(--luft) 0 6rem; opacity: calc(1 - var(--weg, 0)); translate: 0 calc(var(--weg, 0) * -70px); } .kopf-inhalt { display: flex; flex-direction: column; align-items: center; text-align: center; } /* Titel und Namensbegruessung stehen auf einer gemeinsamen Grundlinie: klein "Moin Hendrik -", gross "IT Wolf". Auf schmalen Schirmen bricht die Begruessung von allein in die Zeile darueber. */ .kopf-titel { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.2em 0.5em; margin: 0; font-size: clamp(3.2rem, 13vw, 8.5rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; color: var(--linkc); } /* index.js schreibt die Begruessung in #headline - ohne gesetzten Namen bleibt das Element leer und wuerde sonst nur die Luecke aufziehen. */ .kopf-titel #headline { font-size: clamp(1rem, 2.6vw, 1.5rem); font-weight: 500; letter-spacing: 0; opacity: 0.65; } .kopf-titel #headline:empty { display: none; } /* Duenner Strich unter dem Titel - trennt Name und Projektliste, ohne eine Farbe zu erfinden. */ .kopf-strich { width: 64px; height: 2px; margin: 2.5rem auto 0; border-radius: 2px; background: color-mix(in srgb, var(--linkc) 35%, transparent); } /*---------------------------------------------------------------------*/ /* Projektliste im Kopfbereich (Sprungmarken) */ .projektliste { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin-top: 2.5rem; max-width: 760px; } .projektpille { display: inline-flex; align-items: center; gap: 0.55rem; padding: 10px 20px; border-radius: 999px; background: var(--them); color: var(--linkc); font-size: 0.95rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color 0.3s ease, transform 0.3s ease; } .projektpille:hover { background: var(--hovg); color: var(--linkc); transform: scale(1.06); } .projektpille:active { transform: scale(0.94); } /* Das gerade sichtbare Projekt. Faellt beim Runterscrollen nicht auf - der Kopfbereich ist dann weg - hilft aber beim Zurueckscrollen. */ .projektpille.aktiv { background: var(--hovg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--linkc) 30%, transparent); } .projektpille svg { flex: 0 0 auto; opacity: 0.75; } /*---------------------------------------------------------------------*/ /* Pfeil nach unten */ .scrollpfeil { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-top: 3.5rem; border-radius: 999px; color: var(--linkc); background: var(--them); transition: background-color 0.3s ease, transform 0.3s ease; animation: sanftHuepfen 2.4s ease-in-out infinite; } .scrollpfeil:hover { background: var(--hovg); transform: scale(1.1); cursor: pointer; } .scrollpfeil:active { transform: scale(0.9); } @keyframes sanftHuepfen { 0%, 100% { translate: 0 0; } 50% { translate: 0 8px; } } /*---------------------------------------------------------------------*/ /* Projektbloecke */ .projektblock { position: relative; overflow: hidden; padding: var(--luft) 0; } /* Grosse Ziffer im Hintergrund. Steht bewusst VOR dem Inhalt im HTML und bekommt kein z-index: so malt der Browser sie von allein darunter. Ein negatives z-index waere hier gefaehrlich - auf dieser Hoehe liegt schon das Netz-Canvas (#backgroundCanvas, z-index -1). */ /* --p setzt portfolio.js je Block auf -1 (Block noch unten) bis +1 (Block schon oben). Die Ziffer wandert dadurch gegenlaeufig zum Scrollen und liegt scheinbar tiefer als der Text. Zentriert wird ueber transform, verschoben ueber die eigenstaendige translate-Eigenschaft - die beiden ueberschreiben sich nicht, der Browser rechnet erst translate, dann transform. */ .blocknummer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); translate: 0 calc(var(--p, 0) * var(--tiefe) * -1); font-size: clamp(11rem, 32vw, 26rem); font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: var(--linkc); opacity: 0.05; pointer-events: none; user-select: none; } .projekt-inhalt { position: relative; display: flex; align-items: center; gap: clamp(2rem, 6vw, 5rem); } /* Jeder zweite Block spiegelt sich - das Auge bekommt beim Scrollen einen Rhythmus statt fünf gleicher Zeilen. */ .projektblock.gedreht .projekt-inhalt { flex-direction: row-reverse; } /*---------------------------------------------------------------------*/ /* Symbol links/rechts */ /* Zwei Ebenen: aussen der weiche Schein, innen die Kachel. Der Schein liegt auf einem eigenen Element statt auf ::before, damit hier ebenfalls kein negatives z-index noetig ist (siehe .blocknummer). */ .symbol-huelle { flex: 0 0 auto; padding: clamp(0.8rem, 2vw, 1.6rem); border-radius: 64px; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--linkc) 11%, transparent), transparent 70%); } /* Das Symbol wandert ebenfalls mit --p, aber schwaecher als die Ziffer - dadurch entstehen drei Ebenen: Ziffer (weit hinten), Symbol, Text. Kein transition auf translate: der Wert kommt pro Scroll-Frame neu, ein Uebergang wuerde nur hinterherhinken. */ /* Die Kachel ist selbst ein Link auf das Projekt - dasselbe Ziel wie der Knopf darunter, nur die groessere Trefferflaeche. */ .projekt-symbol { display: grid; place-items: center; width: clamp(130px, 20vw, 210px); aspect-ratio: 1; border-radius: 48px; background: var(--them); color: var(--linkc); text-decoration: none; translate: 0 calc(var(--p, 0) * var(--tiefe) * -0.32); transition: background-color 0.4s ease, transform 0.4s ease; } .projekt-symbol svg { width: 44%; height: 44%; } /* Der Block als Ganzes hebt die Kachel schon leicht an - so sieht man beim Ueberfahren, dass hier etwas zusammengehoert. */ .projektblock:hover .projekt-symbol { background: var(--hovg); transform: scale(1.05); } /* Direkt auf der Kachel deutlicher, damit sie sich vom blossen Block-Hover abhebt und als anklickbar zu erkennen ist. Reihenfolge zaehlt: alle drei Regeln sind gleich spezifisch, die spaetere gewinnt. */ .projekt-symbol:hover { background: var(--hovg); color: var(--linkc); transform: scale(1.11); } .projekt-symbol:active { transform: scale(0.95); transition: transform 0.2s ease; } /*---------------------------------------------------------------------*/ /* Textspalte */ .projekt-text { flex: 1 1 0; min-width: 0; } .projekt-nummer { margin: 0 0 0.9rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--linkc) 50%, transparent); } .projekt-titel { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin: 0 0 1.1rem; font-size: clamp(1.9rem, 5vw, 3.1rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--linkc); } /* Gleiche Marke wie die .beta-badge auf der Startseite, nur nicht absolut positioniert - hier sitzt sie im Textfluss neben der Ueberschrift. */ .neu-marke { padding: 2px 9px; border-radius: 999px; background: var(--them); color: var(--linkc); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px; white-space: nowrap; } .projekt-beschreibung { max-width: 56ch; margin: 0 0 1.6rem; font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.7; color: color-mix(in srgb, var(--linkc) 78%, transparent); } /*---------------------------------------------------------------------*/ /* Stichworte */ .stichworte { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2rem; padding: 0; list-style: none; } .stichworte li { padding: 5px 13px; border-radius: 999px; background: var(--them); color: color-mix(in srgb, var(--linkc) 80%, transparent); font-size: 0.86rem; white-space: nowrap; } /*---------------------------------------------------------------------*/ /* Knopf */ .projekt-knopf { display: inline-flex; align-items: center; gap: 0.6rem; padding: 13px 26px; border-radius: 999px; background: var(--them); color: var(--linkc); font-weight: 600; text-decoration: none; transition: background-color 0.3s ease, transform 0.3s ease; } .projekt-knopf:hover { background: var(--hovg); color: var(--linkc); transform: scale(1.05); } .projekt-knopf:active { transform: scale(0.94); } /* Der Pfeil wandert beim Hover ein Stueck mit. */ .projekt-knopf svg { transition: translate 0.3s ease; } .projekt-knopf:hover svg { translate: 4px 0; } /*---------------------------------------------------------------------*/ /* Abschluss unter dem letzten Projekt */ .ausklang { padding: var(--luft) 0 calc(var(--luft) / 1.5); text-align: center; } .ausklang p { max-width: 46ch; margin: 0 auto 2rem; font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.7; color: color-mix(in srgb, var(--linkc) 72%, transparent); } /*---------------------------------------------------------------------*/ /* Scroll-Animation Startzustand hier, Endzustand unter .sichtbar. portfolio.js haengt .sichtbar an, sobald ein Block in den Blick kommt. Wichtig: greift nur unter .js-an. Diese Klasse setzt portfolio.js ganz oben selbst - ohne JavaScript bleibt sie aus und die Seite ist einfach sofort vollstaendig da, statt unsichtbar zu bleiben. */ /* Der Abschnitt selbst blendet nur auf. Die Fahrt von unten machen die Zeilen darin (.stufen) - beides gleichzeitig waere die doppelte Strecke und wirkt traege. */ .js-an .enthuellen > * { opacity: 0; transition: opacity 0.7s ease; } .js-an .enthuellen.sichtbar > * { opacity: 1; } /* Die grosse Hintergrundziffer bleibt auch sichtbar sehr blass. */ .js-an .enthuellen.sichtbar > .blocknummer { opacity: 0.05; } /* Innerhalb eines Blocks laufen die Zeilen versetzt ein, 80 ms Abstand. .stufen sitzt immer auf einem NACHFAHREN von .enthuellen, nie auf demselben Element - sonst greift der Nachfahren-Selektor unten nicht. */ .js-an .stufen > * { opacity: 0; translate: 0 26px; transition: opacity 0.6s ease, translate 0.6s ease; } .js-an .sichtbar .stufen > * { opacity: 1; translate: 0 0; } .js-an .sichtbar .stufen > *:nth-child(1) { transition-delay: 0ms; } .js-an .sichtbar .stufen > *:nth-child(2) { transition-delay: 80ms; } .js-an .sichtbar .stufen > *:nth-child(3) { transition-delay: 160ms; } .js-an .sichtbar .stufen > *:nth-child(4) { transition-delay: 240ms; } .js-an .sichtbar .stufen > *:nth-child(5) { transition-delay: 320ms; } .js-an .sichtbar .stufen > *:nth-child(6) { transition-delay: 400ms; } /*---------------------------------------------------------------------*/ /* Einflug aus der Seite Das Symbol kommt von aussen herein und waechst dabei auf, der Text von der Gegenseite - bei jedem zweiten Block spiegelverkehrt. Die Kurve (0.16, 1, 0.3, 1) startet schnell und laeuft weich aus; ein lineares oder ease-Ende wirkt bei so langen Wegen zaeh. */ .js-an .projektblock .symbol-huelle { opacity: 0; translate: -70px 0; scale: 0.85; transition: opacity 0.8s ease, translate 0.9s cubic-bezier(0.16, 1, 0.3, 1), scale 0.9s cubic-bezier(0.16, 1, 0.3, 1); } .js-an .projektblock.gedreht .symbol-huelle { translate: 70px 0; } .js-an .projektblock.sichtbar .symbol-huelle { opacity: 1; translate: 0 0; scale: 1; } /* Die Textzeilen ueberschreiben nur die Richtung - Dauer, Staffelung und Deckkraft kommen weiter von .stufen oben. */ .js-an .projektblock .projekt-text > * { translate: 34px 16px; transition: opacity 0.6s ease, translate 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .js-an .projektblock.gedreht .projekt-text > * { translate: -34px 16px; } .js-an .projektblock.sichtbar .projekt-text > * { translate: 0 0; } /*---------------------------------------------------------------------*/ /* Kopfbereich: eigene Staffelung, weil die fuenf Pillen einzeln einfliegen sollen. Die Liste selbst ist Stufe 3 (160 ms), die Pillen setzen ab 200 ms nach - und der Pfeil kommt ganz zum Schluss. */ .js-an .projektliste > * { opacity: 0; translate: 0 14px; scale: 0.94; transition: opacity 0.5s ease, translate 0.5s cubic-bezier(0.16, 1, 0.3, 1), scale 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .js-an .sichtbar .projektliste > * { opacity: 1; translate: 0 0; scale: 1; } .js-an .sichtbar .projektliste > *:nth-child(1) { transition-delay: 200ms; } .js-an .sichtbar .projektliste > *:nth-child(2) { transition-delay: 265ms; } .js-an .sichtbar .projektliste > *:nth-child(3) { transition-delay: 330ms; } .js-an .sichtbar .projektliste > *:nth-child(4) { transition-delay: 395ms; } .js-an .sichtbar .projektliste > *:nth-child(5) { transition-delay: 460ms; } .js-an .sichtbar .kopf-inhalt > .scrollpfeil { transition-delay: 580ms; } /*---------------------------------------------------------------------*/ /* Schmale Schirme */ @media (max-width: 767.98px) { .portfolio { /* Weniger Tiefe: auf kleinen Schirmen faellt ein grosser Versatz eher als Wackeln auf denn als Ebene. */ --tiefe: 26px; } .projekt-inhalt, .projektblock.gedreht .projekt-inhalt { flex-direction: column; align-items: flex-start; text-align: left; } .symbol-huelle { align-self: center; } /* Gestapelt gibt es kein "aussen" mehr - Symbol und Text kommen beide von unten, sonst schoebe der Einflug die Seite in die Breite. */ .js-an .projektblock .symbol-huelle, .js-an .projektblock.gedreht .symbol-huelle { translate: 0 34px; } .js-an .projektblock .projekt-text > *, .js-an .projektblock.gedreht .projekt-text > * { translate: 0 22px; } .js-an .projektblock.sichtbar .symbol-huelle, .js-an .projektblock.sichtbar .projekt-text > * { translate: 0 0; } .projektpille { font-size: 0.88rem; padding: 9px 16px; } .blocknummer { font-size: 40vw; } } /*---------------------------------------------------------------------*/ /* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt alles sofort und ohne Fahrt zu sehen. portfolio.js setzt .sichtbar dann ebenfalls direkt, damit nichts unsichtbar haengen bleibt. */ @media (prefers-reduced-motion: reduce) { .js-an .enthuellen > *, .js-an .stufen > *, .js-an .projektliste > *, .js-an .projektblock .symbol-huelle, .js-an .projektblock.gedreht .symbol-huelle, .js-an .projektblock .projekt-text > *, .js-an .projektblock.gedreht .projekt-text > * { opacity: 1; translate: 0 0; scale: 1; transition: none; transition-delay: 0ms; } .js-an .enthuellen > .blocknummer { opacity: 0.05; } /* Parallax und Ausblenden des Kopfbereichs setzt portfolio.js hier gar nicht erst - diese Regeln fangen nur den Fall ab, dass die Einstellung erst nach dem Laden umgestellt wird. */ .blocknummer, .projekt-symbol { translate: 0 0; } .kopfbereich { opacity: 1; translate: 0 0; } .scrollpfeil { animation: none; } html { scroll-behavior: auto; } }