/* ============================================================= Josephine Vesper — Portfolio styles.css · Grundlage + geteilte Bausteine + Seiten-Styles Aufbau dieser Datei: 1. Reset & Basis 2. Schriften (@font-face) 3. Design-Tokens (Farben, Maße) → :root 4. Typografie-Klassen 5. Layout: Container, Header/Navigation, Footer, Button 6. Seite: Home (weitere Seiten folgen weiter unten, je mit eigenem Banner) Breakpoints (mobile-first): Basis = < 640px sm = ≥ 640px xl = ≥ 1024px ============================================================= */ /* ============================================================= 1. RESET & BASIS ============================================================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { min-height: 100vh; font-family: 'neue-haas-grotesk-display', 'Neue Haas Grotesk Display Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-weight: 450; color: var(--black); background: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.4; } img, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ul { list-style: none; padding: 0; } /* Sichtbarer Fokus für Tastatur-Navigation (Barrierefreiheit) */ :focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; } /* Skip-Link */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--purple); color: var(--white); padding: 10px 16px; border-radius: 3px; z-index: 100; } .skip-link:focus { left: 8px; top: 8px; } /* ============================================================= 2. SCHRIFTEN ------------------------------------------------------------- Die ECHTEN Schriften kommen über Adobe Fonts (Typekit) – der Kit-Link steht im jeder Seite: Familien: "neue-haas-grotesk-display" (Titel/Fließtext) und "felt-tip-woman" (handschriftliche Display-Schrift). Adobe-Fonts-Dateien dürfen nicht selbst gehostet werden – deshalb der Link statt lokaler Dateien. Die lokalen Woffs unten sind nur OFFLINE-FALLBACK (falls Typekit mal nicht lädt): Neue Haas (Roman/Medium/Light) und „Gochi Hand" als Ersatz für die handschriftliche Schrift. Sie stehen in den Font-Stacks jeweils HINTER den Typekit-Familien. ============================================================= */ @font-face { font-family: 'Neue Haas Grotesk Display Pro'; src: url('assets/fonts/NeueHaasDisplay-Light.woff') format('woff'); font-weight: 350; font-style: normal; font-display: swap; } @font-face { font-family: 'Neue Haas Grotesk Display Pro'; src: url('assets/fonts/NeueHaasDisplay-Roman.woff') format('woff'); font-weight: 450; font-style: normal; font-display: swap; } @font-face { font-family: 'Neue Haas Grotesk Display Pro'; src: url('assets/fonts/NeueHaasDisplay-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } /* Echte Display-Schrift „Felt Tip Woman" (kommerziell) – NICHT beigelegt. Wenn du die lizenzierte Datei hast: in assets/fonts/ ablegen und diesen Block auskommentieren (die Schrift steht im Font-Stack ganz vorne und hat dann automatisch Vorrang vor dem Platzhalter). */ /* @font-face { font-family: 'Felt Tip Woman'; src: url('assets/fonts/FeltTipWoman.woff2') format('woff2'), url('assets/fonts/FeltTipWoman.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } */ /* Frei lizenzierter Platzhalter für die Display-Schrift. */ @font-face { font-family: 'Gochi Hand'; src: url('assets/fonts/GochiHand-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* ============================================================= 3. DESIGN-TOKENS ============================================================= */ :root { /* Markenfarben */ --purple: #4c2c49; --purple-60: #4c2c4999; --purple-30: #4c2c494d; --pink: #d44f7a; --pink-60: #d44f7a99; --pink-30: #d44f7a4d; --grey: #746d66; --grey-60: #746d6699; --grey-30: #746d664d; --greige: #d3cec9; --greige-60: #d3cec999; --greige-30: #d3cec94d; --white: #faf7f3; --white-90: #faf7f3e5; --white-60: #faf7f399; --white-30: #faf7f34d; --black: #1c1c1c; /* Maße */ --maxw: 1192px; /* Inhaltsbreite */ --radius: 3px; /* Standard-Eckenradius */ --gutter: 32px; /* Mindest-Seitenabstand (Mobil) */ /* Text-Abstände (einheitliches Rhythmus-System für alle Overline/Headline/Text/Button-Kombinationen der Seite). Auf Mobil/Tablet identisch (Basiswert), auf xl (≥1024px) die vom Design vorgegebenen Zielwerte. Als CSS-Variablen definiert, damit jede Komponente automatisch denselben Wert bei derselben Bildschirmbreite bekommt – unabhängig von der FensterHÖHE (die alten clamp(…vh…)-Werte sorgten dafür, dass z.B. der Abstand auf zwei xl-Fenstern gleicher Breite aber unterschiedlicher Höhe unterschiedlich ausfiel). */ --gap-overline-headline: 8px; /* Overline → Überschrift */ --gap-headline-text: 24px; /* Überschrift → Text */ --gap-text-button: 32px; /* Text → Button */ } @media (min-width: 640px) { :root { --gutter: 64px; } } /* Tablet */ @media (min-width: 1024px) { :root { /* War vorher fest 64px. Auf schmaleren xl-Fenstern (z.B. 1024–1280px, etwa kleinere Laptop-Fenster oder DevTools-Responsive-Modus) wirkte der Inhalt dadurch unnötig eingeengt, da die feste 64px-Polsterung proportional zur verfügbaren Breite viel Platz wegnahm. Mit clamp() skaliert das Padding jetzt sanft mit der Fensterbreite: bei 1024px Breite sind es ca. 51px, ab ca. 1280px Breite wird der Deckel von 64px erreicht und bleibt für größere xl-Fenster wie bisher konstant. Betrifft ausschließlich diesen (≥1024px) Breakpoint – Tablet (640px) und Mobil bleiben unverändert bei ihren festen Werten. */ --gutter: clamp(32px, 5vw, 64px); --gap-overline-headline: 12px; --gap-headline-text: 32px; --gap-text-button: 56px; } } /* ============================================================= 4. TYPOGRAFIE-KLASSEN ------------------------------------------------------------- Werte 1:1 aus dem Original (mobile → sm → xl). ============================================================= */ .headline-style { /* große handschriftliche Titel */ font-family: 'felt-tip-woman', 'Gochi Hand', 'Bradley Hand', cursive; font-weight: 400; line-height: 1.3; font-size: 1.25rem; } .headline-large { font-weight: 400; line-height: 1.35; font-size: 1.5rem; } .headline-medium { font-weight: 400; font-size: 1.4rem; line-height: 1.75rem; } .headline-small { font-weight: 400; line-height: 1; font-size: 1rem; } .headline-xl { font-weight: 450; font-size: 48px; line-height: 58px; } .title-large { font-weight: 400; font-style: italic; font-size: 1rem; line-height: 23px; } .body-large { font-weight: 400; line-height: 1.2; font-size: 0.875rem; } .body-small { font-weight: 400; line-height: 1.2; font-size: 0.675rem; } .body-style { font-family: 'felt-tip-woman', 'Gochi Hand', 'Bradley Hand', cursive; font-weight: 400; font-size: 1.2rem; line-height: 1; } .description { font-weight: 400; font-size: 0.8rem; line-height: 1.15; } .button-text { /* Schriftschnitt für Buttons/Nav */ font-weight: 400; font-size: 0.75rem; line-height: 22px; } .cta-text { /* Schriftschnitt für Buttons/Nav */ font-weight: 600; font-size: 0.75rem; line-height: 22px; } @media (min-width: 640px) { .headline-style { font-size: 1.625rem; } .headline-large { font-size: 1.875rem; } .headline-medium { font-size: 1.5rem; } .headline-small { font-size: 1rem; } .body-large { font-size: 1rem; } .body-small { font-size: 0.8rem; } .description { font-size: 0.9rem; } .title-large { font-size: 1.1rem; } .button-text { font-size: 0.9rem; } .cta-text { font-size: 0.9rem; } } @media (min-width: 1024px) { .headline-style { font-size: 2rem; } .headline-large { font-size: 2.5rem; } .headline-medium { font-size: 2rem; } .headline-small { font-size: 1.125rem; } .body-large { font-size: 1.125rem; } .body-small { font-size: 0.9125rem; } .body-style { font-size: 1.25rem; } .description { font-size: 1rem; } .title-large { font-size: 1.25rem; } .button-text { font-size: 1rem; } .cta-text { font-size: 1rem; } } /* ============================================================= 5. LAYOUT: Container, Header, Footer, Button ============================================================= */ /* Zentrierter Inhalts-Container */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; } /* ---- Header / Navigation ---------------------------------- */ .site-header { width: 100%; background: var(--white); display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 32px; } .site-header__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; position: relative; } .site-header__rule, .site-footer__rule { height: 1px; width: 100%; max-width: var(--maxw); background: var(--grey); } /* Logo/Nametag mit Wechsel Josi → Josephine Vesper */ .nametag { position: relative; width: 182px; height: 22px; overflow: hidden; flex-shrink: 0; color: var(--purple); } .nametag span { position: absolute; left: 0; top: 0; white-space: nowrap; transition: transform .5s ease-in-out, opacity .4s ease-in-out; } .nametag__short { transform: translateX(0); opacity: 1; } .nametag__full { transform: translateX(100%); opacity: 0; } .nametag:hover .nametag__short { transform: translateX(-100%); opacity: 0; } .nametag:hover .nametag__full { transform: translateX(0); opacity: 1; } /* Zentrale Navigation */ .site-nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; } .site-nav a { transition: color .2s ease; } .site-nav a:hover { color: var(--pink); } .site-nav__sep { color: var(--black); } /* Kontakt rechts, mit Unterstrich-Animation */ .header-right { width: 148px; display: flex; justify-content: flex-end; flex-shrink: 0; } .link-underline { position: relative; transition: color .2s ease; } .link-underline::after { content: ""; position: absolute; bottom: -8px; left: 0; height: 2px; width: 100%; background: var(--pink); transform: scaleX(0); transform-origin: right; transition: transform .3s ease-in-out; } .link-underline:hover::after { transform: scaleX(1); transform-origin: left; } @media (min-width: 640px) { .site-header { padding: 32px 64px; gap: 24px; } .site-nav { gap: 12px; } } @media (min-width: 1024px) { .site-header { padding: 32px 0; gap: 24px; } .site-nav { gap: 16px; } } /* ---- Footer ----------------------------------------------- */ .site-footer { width: 100%; background: var(--white); display: flex; flex-direction: column; align-items: center; padding: 24px 32px; } .site-footer__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .site-footer__rule { margin-bottom: 12px; } .footer-mail { display: none; } /* auf Mobile ausgeblendet */ .footer-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-start; } .footer-nav a { transition: color .2s ease; } .footer-nav a:hover { color: var(--pink); } .footer-nav__sep { color: var(--black); } @media (min-width: 640px) { .site-footer { padding: 32px 64px; } .site-footer__rule { margin-bottom: 16px; } .footer-mail { display: flex; } .footer-nav { gap: 12px; justify-content: center; } } @media (min-width: 1024px) { .site-footer { padding: 32px 0; } .site-footer__rule { margin-bottom: 24px; } .footer-nav { gap: 16px; } } /* ---- Button (pink → violett) ------------------------------- */ .btn { display: inline-flex; align-items: center; background: var(--pink); color: var(--white); border-radius: var(--radius); padding: 6px 12px; transition: background-color .2s ease; } .btn:hover { background: var(--purple); } .btn .smiley { margin-left: 8px; } @media (min-width: 640px) { .btn { padding: 10px 20px; } } @media (min-width: 1024px) { .btn { padding: 12px 24px; } } /* ============================================================= 6. SEITE: HOME (index.html) ============================================================= */ /* Erster Block: Nav + Hero füllen die Bildschirmhöhe. Auf Mobile/Tablet ist der Inhalt gestapelt und oft höher als der Bildschirm -> dort nur min-height, damit normal gescrollt werden kann. Erst ab 1024px (Text/Card nebeneinander) wird auf eine feste Höhe begrenzt, damit der Hero garantiert in den Screen passt. Auf SEHR GROSSEN/HOHEN xl-Bildschirmen (große Monitore, 4K) würde eine reine 100vh-Höhe zu viel Leerraum über dem (unten ausgerichteten) Hero-Inhalt erzeugen. Deshalb wird die Höhe zusätzlich auf einen sinnvollen Maximalwert gedeckelt (siehe --hero-vh-max weiter unten): ab dort wächst die Sektion nicht weiter mit der Fensterhöhe mit, sondern bleibt zentriert mit Luft ober- und unterhalb. */ .home-top { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; width: 100%; } @media (min-width: 1024px) { .home-top { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; } } /* Ist der xl-Bildschirm zu niedrig (z.B. kleine Laptops, Zoom, Browser-UI), würde .home-top mit fester Höhe + overflow:hidden Inhalte abschneiden. Deshalb hier zurück auf natürliches Fließen + Scrollen, statt Clipping. Dieser Schwellenwert (--short-vh) wird unten für ALLE Sektionen mit fester Bildschirmhöhe konsistent verwendet (auch für Ordner etc.), damit kein Element durch einen abweichenden Grenzwert vom Elternteil abgeschnitten wird. */ @media (min-width: 1024px) and (max-height: 720px) { .home-top { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; } } /* Ist der xl-Bildschirm sehr GROSS/HOCH (große Desktop-Monitore, 4K, externe Displays), wird die Höhe gedeckelt statt endlos mit 100vh mitzuwachsen – sonst hängt der (unten ausgerichtete) Hero-Inhalt einsam im unteren Drittel eines riesigen leeren Screens. */ @media (min-width: 1024px) and (min-height: 1400px) { .home-top { height: auto; min-height: 0; max-height: 1200px; overflow: visible; margin-inline: auto; } } /* ---- Hero -------------------------------------------------- */ .hero { background: var(--white); flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 32px; padding: 24px 32px 48px; } .hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-text-button); width: 60vw; } .hero__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-headline-text); width: 100%; } .hero__title { display: flex; flex-direction: column; gap: 4px; width: 100%; } /* Card „Selected work" rechts (Legacy: aktuell auf keiner Seite mehr eingebunden – die Home-Seite nutzt stattdessen die Folder-Komponente weiter unten unter „SEITE: WORK". Regeln bewusst nicht entfernt, falls das 2er-Karten-Layout an anderer Stelle wiederverwendet wird.) */ .selected-work { background: var(--white); border: 1px solid var(--grey); border-radius: var(--radius); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; width: 100%; } .selected-work__head { display: flex; flex-direction: column; gap: 8px; width: 100%; } .selected-work__rule { height: 1px; width: 100%; background: var(--grey); } .selected-work__cards { display: flex; flex-direction: column; gap: 16px; width: 100%; } /* Einzelne Arbeit-Kachel */ .work-card { display: flex; flex-direction: column; width: 100%; } .work-card__num { text-transform: uppercase; margin-bottom: 8px; } .work-card__media { position: relative; display: block; height: 130px; border-radius: var(--radius); overflow: hidden; } .work-card__media img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .work-card__overlay { position: absolute; inset: 0; background: var(--purple-30); opacity: 0; transition: opacity .3s ease; } .work-card:hover .work-card__overlay { opacity: 1; } .work-card__logo-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; } .work-card__logo { height: 80px; width: 130px; object-fit: contain; pointer-events: none; transition: transform .3s ease; } /* Mau & Beyond the Frame: Logos etwas größer als die übrigen Karten, da sie in den Original-Assets kleiner wirken als z.B. Need for Seed oder Pony Palette. Nur diese zwei Projekte bekommen die Modifier- Klasse im HTML (work-card__logo--mau / --btf). */ .work-card__logo--mau, .work-card__logo--btf { height: 96px; width: 156px; } .work-card:hover .work-card__logo { transform: scale(1.1); } .work-card__caption { margin-top: 12px; } @media (min-width: 640px) { .hero { gap: clamp(24px, 4vh, 48px); padding: 24px 64px 48px; } .selected-work { padding: clamp(16px, 3vh, 24px); gap: clamp(12px, 2vh, 16px); } .selected-work__cards { flex-direction: row; gap: 24px; } .work-card { width: calc(50% - 12px); } .work-card__media { height: clamp(140px, 26vh, 220px); } .work-card__logo { height: clamp(60px, 11vh, 95px); width: 150px; } .work-card__logo--mau, .work-card__logo--btf { height: clamp(72px, 13vh, 112px); width: 176px; } } @media (min-width: 1024px) { .hero { flex-direction: row; align-items: flex-end; justify-content: center; gap: 134px; padding: 16px 160px 36px; min-height: 0; } .hero__text { width: 376px; flex-shrink: 0; } .hero__title { gap: 8px; } .selected-work { /* War vorher clamp(16px, 4vw, 48px)/clamp(8px, 2vw, 24px) – bei 1024px Breite ergab das noch ~41px/20px, also recht nah am 48px/24px-Deckel. Mit "calc(Xvw - Ypx)" statt reinem "Xvw" lässt sich die Steigung UND der Startpunkt unabhängig einstellen: bei 1024px Breite jetzt ~40px/20px, der Deckel von 48px/24px wird ab ca. 1155px Breite erreicht. */ padding: clamp(16px, calc(5.8vw - 19px), 48px); gap: clamp(8px, calc(2.9vw - 10px), 24px); width: auto; flex-shrink: 0; } .selected-work__head { gap: 8px; } /* FIX: war vorher "align-items: center". Dadurch wurden die beiden Karten vertikal ZENTRIERT nebeneinander ausgerichtet statt oben buendig - wenn eine Bildunterschrift laenger ist und in 2 Zeilen umbricht (z.B. "Immersive Design, 3D Design & Sound Design" bei Beyond the Frame) waehrend die andere nur 1 Zeile braucht, wird die Karte mit der kuerzeren Caption dadurch insgesamt niedriger und rutschte optisch nach unten, um mittig zu bleiben - die Bilder standen dadurch nicht mehr auf derselben Hoehe, obwohl beide dieselbe feste .work-card__media-Hoehe haben. "flex-start" richtet beide Karten stattdessen oben buendig aus, wodurch die Bilder immer auf gleicher Hoehe beginnen, unabhaengig von der Zeilenanzahl der Caption darunter. */ .selected-work__cards { gap: clamp(16px, 3vh, 32px); align-items: flex-start; } .work-card { width: 304px; } .work-card__media { height: clamp(110px, 24vh, 274px); /* FIX (Ultrawide-Bug ≥2560px): war vorher fest "width: 304px". Weiter unten in der Override-Ebene (RESPONSIVE LAYOUT) wird .work-card selbst auf "flex: 1 1 0" (fluide Breite) umgestellt, damit die Karten mit --maxw mitwachsen. Diese feste Breite hier wurde davon aber NICHT erfasst und blieb bei 304px stehen – auf sehr breiten Screens (--maxw wächst ab 1920px/2560px) wurde .work-card dadurch breiter als sein eigenes .work-card__media, wodurch das Bild nicht mehr die volle Kartenbreite einnahm. "width: 100%" sorgt dafür, dass .work-card__media IMMER exakt so breit ist wie die jeweils aktuelle Breite von .work-card (ob 304px fest oder später fluide via flex). */ width: 100%; } .work-card__logo { height: clamp(52px, 9vh, 110px); width: 170px; } .work-card__logo--mau, .work-card__logo--btf { height: clamp(64px, 10.5vh, 130px); width: 196px; } } @media (min-width: 1500px) { .hero { padding: 16px 160px 80px; } } /* ---- Design Approach -------------------------------------- */ .approach { background: var(--white); width: 100%; display: flex; justify-content: center; padding: 24px 32px 48px; } .approach__card { border: 1px solid var(--grey); border-radius: var(--radius); background: var(--white); padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } .approach__icon { width: 80px; height: 80px; object-fit: contain; flex-shrink: 0; } .approach__body { display: flex; flex-direction: column; align-items: flex-start; width: 100%; } .approach__eyebrow { margin-bottom: var(--gap-overline-headline); } .approach__rule { height: 1px; width: 100%; background: var(--grey); margin-bottom: 24px; } .approach__title { margin-bottom: var(--gap-headline-text); } @media (min-width: 640px) { .approach { padding: 40px 64px 48px; } .approach__card { flex-direction: row; align-items: center; gap: 32px; } .approach__icon { width: 100px; height: 100px; } } @media (min-width: 1024px) { .approach { padding: 104px 0; } .approach__card { padding: 44px 56px; gap: 134px; } .approach__icon { width: 132px; height: 132px; } .approach__rule { margin-bottom: 32px; } } /* Hilfsklasse: kursiv (für die handschriftliche Überschrift auf About) */ .is-italic { font-style: italic; } /* ---- Photography-Teaser ----------------------------------- */ .photo-teaser { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; } .photo-teaser__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 50%; pointer-events: none; } .photo-teaser__tint { position: absolute; inset: 0; background: var(--greige-60); pointer-events: none; } .photo-teaser__inner { position: relative; width: 100%; display: flex; flex-direction: column; gap: 32px; padding: 24px 32px 48px; } .photo-grid { display: flex; flex-direction: column; gap: 16px; width: 100%; } .photo-grid__row { display: flex; gap: 16px; align-items: center; width: 100%; } .photo-grid__row img { object-fit: cover; height: 140px; } .photo-grid__row img.f1 { flex: 1; } .photo-grid__row img.f2 { flex: 2; } .photo-grid__row img.f3 { flex: 3; } .photo-teaser__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-text-button); width: 100%; } /* Vorher hatte .photo-teaser__head EIN gemeinsames `gap` für alle drei Kinder (Overline, Headline, Text) – dadurch war der Abstand Overline→ Headline UND Headline→Text identisch (8px/12px), obwohl beide Beziehungen laut Design unterschiedlich sein sollen. Fix: `gap` entfernt, stattdessen je Element ein eigener margin-bottom mit dem passenden Token. */ .photo-teaser__head { display: flex; flex-direction: column; width: 100%; } .photo-teaser__head > .body-style { margin-bottom: var(--gap-overline-headline); } .photo-teaser__head > .headline-medium { margin-bottom: var(--gap-headline-text); } @media (min-width: 640px) { .photo-teaser__inner { gap: 40px; padding: 40px 64px 48px; } .photo-grid__row img { height: 180px; } } @media (min-width: 1024px) { .photo-teaser__inner { flex-direction: row; align-items: center; justify-content: center; gap: 134px; padding: 120px 160px 104px; } .photo-grid { gap: 32px; flex-shrink: 0; width: 682px; } .photo-grid__row { gap: 32px; } .photo-grid__row img { height: 250px; } .photo-teaser__content { flex-shrink: 0; width: 376px; } } /* ============================================================= GETEILT: Erste-Screen-Hülle + „Hero unten" (About, Legal, Data) ============================================================= */ .page-top { /* Nav + Hero füllen die Bildschirmhöhe. Wie bei .home-top: auf Mobile/Tablet nur min-height (normales Scrollen), erst ab 1024px feste Höhe + overflow hidden, damit der erste Screen garantiert komplett sichtbar ist. */ min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; width: 100%; } @media (min-width: 1024px) { .page-top { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; } } /* Gleicher Kurzbildschirm-Fallback wie bei .home-top (identischer Schwellenwert, damit verschachtelte Elemente wie z. B. die Ordner-Slideshow auf work.html nicht vom hier noch aktiven overflow:hidden abgeschnitten werden): bei niedrigen xl-Fenstern nicht clippen, sondern natürlich fließen/scrollen lassen. */ @media (min-width: 1024px) and (max-height: 720px) { .page-top { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; } } /* Gleicher Grosbildschirm-Deckel wie bei .home-top: auf sehr hohen xl-Displays nicht endlos mit 100vh mitwachsen. */ @media (min-width: 1024px) and (min-height: 1400px) { .page-top { height: auto; min-height: 0; max-height: 1200px; overflow: visible; } } .page-hero { /* Inhalt am unteren Rand des ersten Screens */ background: var(--white); width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 24px 32px 48px; } .page-hero__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; } @media (min-width: 640px) { .page-hero { padding: 24px 64px 48px; } } @media (min-width: 1024px) { .page-hero { padding: 0 0 36px; } } /* ============================================================= SEITE: ABOUT (about.html) ============================================================= */ .about-hero__grid { width: 100%; display: flex; flex-direction: column; gap: 32px; align-items: flex-start; } .about-hero__text { display: flex; flex-direction: column; gap: var(--gap-headline-text); width: 75vw; max-width: 65ch; } .about-hero__title { display: flex; flex-direction: column; gap: 8px; width: 100%; } .about-hero__portrait { position: relative; /* NEU: Anker für das absolut positionierte Platzhalterbild */ } .about-hero__portrait-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); opacity: 0; /* Platzhalter unsichtbar – auf 1 setzen, sobald das echte Foto eingefügt wird */ } /* Experience-Bereich */ .about-exp { background: var(--white); width: 100%; display: flex; justify-content: center; padding: 32px; } .about-exp__grid { width: 100%; display: flex; flex-direction: column; gap: 32px; } .skills-box { border: 1px solid var(--grey); border-radius: var(--radius); background: var(--white); padding: 24px; width: 100%; } .skills-box__inner { display: flex; flex-direction: column; gap: 32px; } .skills-group { display: flex; flex-direction: column; align-items: flex-start; } .skills-group__label { margin-bottom: 8px; } .skills-group__rule { height: 1px; background: var(--grey); width: 100%; margin-bottom: 24px; } .skills-group__tags { display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 8px; } .exp-list { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; width: 75vw; max-width: 65ch; } .exp-entry { width: 100%; display: flex; flex-direction: column; gap: 12px; } .exp-entry__period { text-transform: uppercase; width: 100%; } .exp-entry__detail { display: flex; flex-direction: column; gap: 4px; } .exp-entry__title { font-size: 20px; font-weight: 700; } @media (min-width: 640px) { .about-hero__grid { gap: 40px; } .about-hero__portrait { height: 280px; } .about-exp { padding: 32px 64px; } .skills-box { padding: 32px; } .exp-entry { flex-direction: row; align-items: flex-start; gap: 24px; } .exp-entry__period { width: 180px; flex-shrink: 0; } } @media (min-width: 1024px) { .about-hero__grid { flex-direction: row; align-items: flex-end; gap: 134px; } .about-hero__text { width: 376px; max-width: none; } .about-hero__title { gap: 8px; } .about-hero__portrait { width: 682px; height: auto; min-height: clamp(200px, 34vh, 320px); } .about-exp { padding: 120px 0 104px; } .about-exp__grid { flex-direction: row; align-items: flex-start; gap: 134px; } .skills-box { padding: 44px 56px; flex-shrink: 0; width: 474px; } .skills-box__inner { gap: 40px; } .skills-group__label { margin-bottom: 8px; } .skills-group__rule { margin-bottom: 32px; } .skills-group__tags { column-gap: 32px; row-gap: 8px; } .exp-list { width: 784px; max-width: none; gap: 32px; } .exp-entry { align-items: center; gap: 56px; } } /* ============================================================= SEITE: WORK (work.html) ============================================================= */ .work-intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-headline-text); width: 60vw; } .work-intro__head { display: flex; flex-direction: column; gap: 8px; width: 100%; } /* --- Mobile/Tablet: einfache Ordner-Liste --- */ .work-folders-mobile { width: 100%; display: flex; flex-direction: column; gap: 24px; } .work-folder { background: var(--white); border: 1px solid var(--grey); border-radius: var(--radius); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; width: 100%; } .work-folder__head { display: flex; flex-direction: column; gap: 8px; width: 100%; } .work-folder__rule { height: 1px; width: 100%; background: var(--grey); } .work-folder__cards { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; width: 100%; } /* --- Desktop: animierte Ordner-Slideshow (nur ≥ 1024px) --- */ .work-folders-desktop { display: none; } @media (min-width: 640px) { .work-folder { padding: clamp(16px, 3vh, 24px); gap: clamp(12px, 2vh, 16px); } .work-folder__cards { flex-direction: row; gap: 24px; } } @media (min-width: 1024px) { .work-intro { width: 376px; flex-shrink: 0; padding-bottom: 0px; } .work-intro__head { gap: 12px; } .work-folders-mobile { display: none; } .work-folders-desktop { display: flex; flex-direction: column; position: relative; width: 682px; flex-shrink: 0; } /* Einzelner Ordner: klappt zwischen Titelleiste (nur Übersschrift + Strich) und aktiv auf. --folder-pad wird für Padding UND die collapsed/hover max-height wiederverwendet, damit beide Zustände mit der Box mitskalieren. max-height statt fester height, damit die Box sich exakt an ihren Inhalt anpasst (Padding oben = Padding unten) statt auf eine feste Höhe aufgeblasen zu werden, wenn der Inhalt kürzer ist. Der clamp()-Wert dient nur noch als Obergrenze für die Öffnen-Animation. --folder-peek ist die zentrale Stellschraube für "wie viel wird beim Hover/beim Peek-Bounce zusätzlich sichtbar" – Hover-Zustand UND die folder-hint-peek-Animation (weiter unten) lesen beide denselben Wert, damit sie garantiert exakt gleich hoch gehen. */ .folder { /* War vorher clamp(16px, 4vw, 48px) – siehe Begründung bei .selected-work weiter oben: mit "calc(Xvw - Ypx)" schrumpft das Padding auf schmaleren xl-Fenstern jetzt spürbar stärker (bei 1024px Breite ~40px), der Deckel bei 48px wird ab ca. 1155px Breite erreicht. */ --folder-pad: clamp(16px, calc(5.8vw - 19px), 48px); --folder-peek: 76px; position: relative; box-sizing: border-box; width: 100%; height: auto; /* Zugeklappt: nur Padding-oben + Übersschrift/Strich sichtbar, die Nummern (folder__cards) bleiben unter der Kante verborgen. */ max-height: calc(var(--folder-pad) + 34px); background: var(--white); border: 1px solid var(--grey); border-radius: var(--radius); padding: var(--folder-pad); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; gap: clamp(8px, calc(2.9vw - 10px), 24px); align-items: flex-start; transition: max-height 500ms ease-in-out, opacity 380ms ease; } .folder--collapsed { border-bottom: none; order: 1; } /* Hover: gibt zusätzlich Platz für die Nummern und einen kleinen Streifen der Bilder frei, ohne die Karten komplett aufzuklappen. Liest --folder-peek, damit Hover-Reveal und Peek-Animation (folder-hint-peek weiter unten) immer exakt denselben Wert nutzen. */ .folder--collapsed:hover { max-height: calc(var(--folder-pad) + 34px + var(--folder-peek)); } .folder--active { width: auto; max-height: clamp(280px, 66vh, 496px); order: 2; } .folder__head { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; width: 100%; } .folder__rule { height: 1px; width: 100%; background: var(--grey); } /* FIX (Bildbreiten-Bug hinterer Ordner): .folder nutzt bewusst "align-items: flex-start" statt des Stretch-Defaults (damit der Ordner nicht künstlich hoch gezogen wird). Dadurch werden Kinder NICHT automatisch auf die volle Breite gestreckt, sondern nehmen nur so viel Platz ein wie ihr Inhalt braucht ("fit-content"). .folder__head und .folder__rule haben deshalb bereits explizit "width: 100%" – bei .folder__cards fehlte das. Ohne die explizite Breite berechnete der Browser die Breite der Kartenreihe anhand der Bildunterschriften-Textlänge der jeweiligen Karten – je nach Ordner (unterschiedlich lange Captions) kam so eine andere "natürliche" Breite heraus, unabhängig davon ob der Ordner gerade aktiv/aufgeklappt oder eingeklappt war. Mit width:100% füllt die Kartenreihe immer verlässlich die komplette Innenbreite des Ordners, wie bei .folder__head/.folder__rule. */ .folder__cards { display: flex; flex-direction: row; gap: clamp(16px, 3vh, 32px); align-items: flex-start; width: 100%; } } /* Auf sehr niedrigen xl-Fenstern reicht selbst die vergrößerte max-height von .folder--active evtl. nicht für Kopf + Bilder + Text. Statt Inhalt abzuschneiden (overflow:hidden), hier die Höhenbremse lösen: die Box wächst mit ihrem Inhalt, die Seite scrollt bei Bedarf (siehe .page-top-Fallback weiter oben) statt Logos/Bilder zu clippen. Schwellenwert deckt sich bewusst mit dem von .page-top/.home-top, damit der Elternrahmen zum selben Zeitpunkt auf overflow:visible wechselt wie dieses Kind – sonst gäbe es ein Zeitfenster, in dem die Box zwar selbst nicht mehr begrenzt, aber vom Elternteil mit overflow:hidden trotzdem abgeschnitten wird. */ @media (min-width: 1024px) and (max-height: 720px) { .folder--active { max-height: none; overflow: visible; } } /* Sehr hohe xl-Displays: die Ordner-Box darf zwar über 496px wachsen (mehr vh verfügbar), aber nicht unbegrenzt – sonst wirkt der aufgeklappte Ordner auf einem riesigen Monitor überproportional groß. */ @media (min-width: 1024px) and (min-height: 1400px) { .folder--active { max-height: 560px; } } /* --- „Projects": einheitliches Grid aus 4 Projekt-Karten (Mau, Beyond the Frame, Need for Seed, PonyPalette), unterhalb des Hero (work.html). Mau war früher eine separate Karte im Hero, ist jetzt aber ein ganz normales Grid-Item wie die anderen drei. --- */ .work-more { background: var(--white); width: 100%; display: flex; justify-content: center; padding: 24px 32px 48px; } .work-more__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; } .work-more__cards { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; width: 100%; } /* .work-more__card ist der wiederverwendbare Karten-Rahmen (weißer Kasten, Rahmen, Radius, Innenabstand, Overline + Trennlinie) für alle 4 Projekt-Karten. align-items:stretch (Grid-Default) sorgt dafür, dass Karten in derselben Reihe unabhängig von unterschiedlich langen Bildunterschriften dieselbe Höhe bekommen. */ .work-more__card { background: var(--white); border: 1px solid var(--grey); border-radius: var(--radius); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; width: 100%; } .work-more__card__head { display: flex; flex-direction: column; gap: 8px; width: 100%; } .work-more__card__rule { height: 1px; width: 100%; background: var(--grey); } .work-more__card .work-card { width: 100%; } /* Mittlere Bildschirme (Tablet, 640–1023px): 2 Spalten → bei 4 Karten exakt 2 Reihen mit je 2 Karten. */ @media (min-width: 640px) { .work-more { padding: 32px 64px 48px; } .work-more__cards { grid-template-columns: repeat(2, 1fr); gap: 24px; } .work-more__card { padding: clamp(16px, 3vh, 24px); gap: clamp(12px, 2vh, 16px); } } /* Große Bildschirme (Desktop, ≥1024px): Mau wandert zurück in den Hero (siehe .hero--work weiter unten) – hier bleiben nur noch 3 Karten übrig, die sich eine Reihe zu 3 Spalten teilen. */ @media (min-width: 1024px) { .work-more { padding: 96px 64px; } .work-more__cards { grid-template-columns: repeat(3, 1fr); gap: 32px; } /* align-items:stretch (Grid-Standard, s.o.) sorgt dafür, dass die 3 Karten hier automatisch exakt gleich hoch sind, unabhängig von der Länge der jeweiligen Bildunterschrift. */ /* War vorher clamp(16px, 4vw, 48px)/clamp(8px, 2vw, 24px) – siehe Begründung bei .selected-work weiter oben: mit "calc(Xvw - Ypx)" schrumpft das Karten-Padding auf schmaleren xl-Fenstern jetzt (bei 1024px Breite ~40px/20px), der Deckel bei 48px/24px wird erst ab ca. 1155px Breite erreicht. */ .work-more__card { padding: clamp(16px, calc(5.8vw - 19px), 48px); gap: clamp(8px, calc(2.9vw - 10px), 24px); } .work-more__card__head { gap: 8px; } /* Die Mau-Karte hier im Grid ausblenden – ab 1024px zeigt stattdessen die Kopie im Hero (.work-more__card--hero-dup) dasselbe Projekt. */ .work-more__card--mau { display: none; } } /* --- Mau: responsive Doppelgänger zwischen Hero und Grid --- Auf XL-Bildschirmen (≥1024px) steht Mau als eigene Karte im Hero (neben dem Intro-Text), auf kleineren Bildschirmen reiht sie sich stattdessen ganz normal ins Projekt-Grid unter "Projects" ein. Da beide Positionen in unterschiedlichen DOM-Containern liegen (.hero vs. .work-more__cards), lässt sich das ohne JavaScript nur lösen, indem dieselbe Karte an BEIDEN Stellen im Markup steht und die jeweils nicht passende Kopie per display:none ausgeblendet wird (dank display:none nimmt die versteckte Kopie auch für Screenreader keinen Platz im Accessibility-Baum ein – zu jedem Zeitpunkt ist nur eine der beiden Karten tatsächlich vorhanden). .work-more__card--hero-dup = die Kopie im Hero (Standard: versteckt). .work-more__card--mau = die Kopie im Grid (Standard: sichtbar, wird oben ab 1024px ausgeblendet). */ .work-more__card--hero-dup { display: none; } /* .hero-work__inner: eigener Inhalts-Wrapper NUR für den Hero von work.html (Zusatzklasse .hero--work). Statt die Breite indirekt über Padding + eine "maxw + 2*gutter"-Formel auf .hero selbst zu erzeugen (die nur MATHEMATISCH auf dasselbe Ergebnis kommt wie die Navigationsleiste, aber als zwei getrennte, unabhängig wartbare Regeln), kopiert dieser Wrapper direkt das Muster von .site-header__inner: width:100% + max-width:var(--maxw) + margin-inline:auto, zentriert innerhalb der ohnehin per --gutter gepolsterten .hero--work-Box. Dadurch orientiert sich die Breite des Hero-Inhalts nicht mehr zufällig, sondern GARANTIERT immer an derselben --maxw-Spalte wie die Nav-Leiste – ändert sich --maxw künftig (z. B. Ultrawide-Anpassung), zieht das automatisch beide nach, ohne dass zwei Formeln synchron gehalten werden müssen. */ .hero-work__inner { width: 100%; } @media (min-width: 1024px) { .work-more__card--hero-dup { display: flex; width: auto; max-width: none; } /* .hero--work selbst nicht mehr breiten-/zentrierungsverantwortlich (das übernimmt .hero-work__inner unten), aber weiterhin für die VERTIKALE Position zuständig: als Flex-Column mit justify-content:flex-end schiebt es seinen einzigen Inhalt (.hero-work__inner) an den unteren Rand des Hero – exakt das Verhalten, das die generische .hero-Regel sonst per Flex-Row + align-items:flex-end erzeugt. .hero-work__inner zentriert sich darin per margin-inline:auto weiterhin horizontal (Auto-Margins funktionieren auch auf der Cross-Achse eines Flex-Items). WICHTIG (Bugfix): Selektor bewusst als ".hero.hero--work" (kombiniert, zwei Klassen) statt nur ".hero--work" geschrieben. ".hero--work" allein hat dieselbe Spezifität wie ".hero" (je ein einzelner Klassenselektor) – weiter unten in der Datei steht ".hero { justify-content: space-between; gap: 64px; }" (für die Home-Seite gedacht), die als spätere, gleich spezifische Regel das hiesige "flex-end" sonst wieder überschreiben würde, obwohl sie inhaltlich nur für die Home-Seite gedacht ist. Die kombinierte Schreibweise erhöht die Spezifität und gewinnt garantiert – unabhängig davon, wo/wann später weitere .hero-Regeln ergänzt werden. */ .hero.hero--work { display: flex; flex-direction: column; justify-content: flex-end; } /* .hero-work__inner: exakt dasselbe Zentrier-Muster wie .site-header__inner (width:100%; max-width:var(--maxw); margin-inline:auto) – garantiert identische Breite zur Nav-Leiste. Spalte 1 (Intro-Text): 1fr → nimmt den kompletten verbleibenden Platz ein. Spalte 2 (Mau-/Need-for-Fluff-Karte): calc((100% - 64px) / 3) → exakt dieselbe Formel wie bei den 3 Karten unter "Projects" (Containerbreite minus 2 Gaps à 32px, geteilt durch 3) – da .hero-work__inner und .work-more__inner auf dieselbe --maxw-Spalte begrenzt/zentriert sind, garantiert das exakt gleiche Kartenbreiten. */ .hero-work__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: 1fr calc((100% - 64px) / 3); gap: 64px; align-items: end; /* Text/Karte bodenbündig zueinander */ } .hero--work .work-intro { width: auto; max-width: none; } } /* ============================================================= SEITEN: LEGAL NOTICE + DATA SECURITY (Textseiten) ============================================================= */ /* .doc = Fließtext-Dokument, linksbündig, begrenzte Breite */ .doc { width: 100%; display: flex; flex-direction: column; align-items: flex-start; } .doc__section { /* großer Abschnitt (mit h2) */ display: flex; flex-direction: column; gap: 24px; width: 100%; } .doc__group { /* Untergruppe: Zwischentitel + Absatz/Liste */ display: flex; flex-direction: column; gap: 16px; } .doc__lines { display: flex; flex-direction: column; gap: 8px; } .doc--narrow { max-width: 886px; } /* Abstände zwischen den großen Abschnitten */ .doc > * + * { margin-top: 32px; } /* zweiter Textblock unterhalb des ersten Screens (Data Security) */ .doc-section { background: var(--white); width: 100%; display: flex; justify-content: center; padding: 32px; } @media (min-width: 640px) { .doc-section { padding: 32px 64px; } } @media (min-width: 1024px) { .doc-section { padding: 0 0 104px; } .doc__section { gap: 32px; } .doc > * + * { margin-top: 32px; } } /* ============================================================= SEITE: GALLERY (gallery.html) ============================================================= */ .gallery-hero { background: var(--white); width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 24px 32px 48px; } .gallery-hero__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; display: flex; flex-direction: column; } .gallery-hero__text { display: flex; flex-direction: column; align-items: flex-start; } .gallery-hero__text h1 { padding-top: 12px; } .gallery-hero__text .body-large { margin-top: var(--gap-headline-text); } .gallery-hero__media { margin-top: 24px; width: 100%; overflow: hidden; border-radius: var(--radius); background: var(--grey-30); } .gallery-hero__media img { display: block; width: 100%; height: 200px; object-fit: cover; object-position: center 70%; } @media (min-width: 640px) { .gallery-hero { padding: 24px 64px 48px; } .gallery-hero__media { margin-top: 32px; } .gallery-hero__media img { height: 280px; } } @media (min-width: 1024px) { .gallery-hero { align-items: center; padding: 0 160px 36px; } .gallery-hero__text > * { width: 478px; } .gallery-hero__media { margin-top: clamp(24px, 6vh, 68px); } .gallery-hero__media img { height: clamp(200px, 30vh, 344px); } } /* --- Masonry-Spalten (mobil gestapelt → sm/xl nebeneinander) --- */ .gallery { width: 100%; display: flex; justify-content: center; overflow: hidden; padding: 24px 32px 0; } .gallery__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; } .gallery__cols { display: flex; flex-direction: column; gap: 24px; align-items: stretch; } .gallery__col { display: flex; flex-direction: column; gap: 16px; } /* ---- Gallery-Hover: sanfter Zoom ---- */ .gallery__item { position: relative; display: block; overflow: hidden; border-radius: var(--radius); cursor: pointer; } .gallery__img { display: block; width: 100%; object-fit: cover; border-radius: var(--radius); transition: transform .6s cubic-bezier(.16, .84, .44, 1); } .gallery__item:hover .gallery__img { transform: scale(1.045); } /* Touch-Geräte ohne echten Hover: Effekt nicht "einfrieren" – Bild bleibt normal, Tippen öffnet weiterhin direkt die Lightbox. */ @media not all and (hover: hover) { .gallery__item:hover .gallery__img { transform: none; } } @media (min-width: 640px) { .gallery { padding: 32px 64px; } .gallery__cols { flex-direction: row; gap: 16px; align-items: flex-start; } .gallery__col { flex: 1; min-width: 0; } } @media (min-width: 1024px) { .gallery { padding: 96px 160px; } .gallery__cols { gap: 32px; } } /* --- Lightbox --- */ .lightbox { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s ease; } .lightbox.is-open { opacity: 1; } .lightbox[hidden] { display: none; } .lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .8); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .lightbox__close, .lightbox__nav { position: absolute; z-index: 10; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; transition: background-color .2s ease; } .lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .2); } .lightbox__close { top: 24px; right: 24px; width: 40px; height: 40px; } .lightbox__nav { width: 48px; height: 48px; top: 50%; transform: translateY(-50%); } .lightbox__prev { left: 24px; } .lightbox__next { right: 24px; } .lightbox__counter { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); z-index: 10; color: rgba(255, 255, 255, .6); font-size: 0.875rem; font-variant-numeric: tabular-nums; } .lightbox__stage { position: relative; z-index: 10; max-width: 90vw; max-height: 90vh; display: flex; align-items: center; justify-content: center; } .lightbox__img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: var(--radius); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .6); animation: lightboxFadeIn .2s ease; } @keyframes lightboxFadeIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } } .lightbox__thumbs { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 8px; overflow-x: auto; max-width: 80vw; padding: 4px 8px; } .lightbox__thumb { flex-shrink: 0; width: 48px; height: 48px; border-radius: 2px; overflow: hidden; opacity: .4; transition: opacity .2s ease, box-shadow .2s ease; } .lightbox__thumb:hover { opacity: .7; } .lightbox__thumb.is-current { opacity: 1; box-shadow: 0 0 0 2px #fff; } .lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; } /* ============================================================= GETEILT: CASE-STUDY-Bausteine (Beyond the Frame, Mau, Pony) ============================================================= */ .is-tracked { letter-spacing: 0.12em; } /* --- Case-Study-Hero (unten ausgerichtet, Meta-Grid + Bild) --- */ .cs-hero { background: var(--white); width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0px 32px 48px; } .cs-hero__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; display: flex; flex-direction: column; } .cs-hero__meta { width: 100%; display: flex; flex-direction: column; gap: 32px; align-items: flex-start; } .cs-meta { width: 100%; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 16px; } .cs-meta__item { display: flex; flex-direction: column; gap: 8px; } .cs-hero__media { margin-top: 24px; width: 100%; position: relative; overflow: hidden; border-radius: var(--radius); } .cs-hero__bg { display: block; width: 100%; height: 200px; object-fit: cover; object-position: center 50%; } .cs-hero__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 120px; height: auto; object-fit: contain; pointer-events: none; user-select: none; } @media (min-width: 640px) { .cs-hero { padding: 24px 64px 48px; } .cs-hero__meta { gap: 40px; } .cs-meta { row-gap: 24px; } .cs-hero__media { margin-top: 32px; } .cs-hero__bg { height: 280px; } .cs-hero__logo { width: 160px; } } @media (min-width: 1024px) { /* Padding, Abstand und Bildhöhe skalieren per clamp() mit der Bildschirmhöhe, damit der gesamte Case-Study-Hero auch bei niedrigeren XL-Fenstern komplett sichtbar bleibt (kein Clipping durch das overflow:hidden von .page-top). */ .cs-hero { padding: 0 64px 36px clamp(24px, 5vh, 56px); } .cs-hero__meta { flex-direction: row; align-items: flex-end; gap: 134px; } .cs-hero__title { width: 478px; flex-shrink: 0; } .cs-meta { width: 580px; column-gap: 32px; row-gap: clamp(16px, 3vh, 32px); } .cs-meta__item { gap: 12px; width: 274px; } .cs-hero__media { margin-top: clamp(16px, 4vh, 40px); } .cs-hero__bg { height: clamp(180px, 30vh, 344px); } .cs-hero__logo { width: clamp(140px, 8vh, 220px); height: clamp(134px, 8vh, 210px); } } /* --- Inhalts-Bänder --- */ .cs-band { background: var(--white); width: 100%; display: flex; justify-content: center; padding: 24px 32px 32px; } .cs-band__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; } .cs-band--greige { background: var(--greige); } @media (min-width: 640px) { .cs-band { padding: 32px 64px; } } @media (min-width: 1024px) { .cs-band { padding: 96px 64px; } .cs-band--goal { padding-top: 120px; padding-bottom: 96px; } .cs-band--digital { padding-top: 96px; padding-bottom: 104px; } } /* --- Zwei-Spalten-Textblock (z. B. Goal / Process) --- */ .cs-cols { display: flex; flex-direction: column; gap: 32px; } .cs-col { display: flex; flex-direction: column; gap: var(--gap-headline-text); width: 75vw; max-width: 65ch; } @media (min-width: 640px) { .cs-cols { gap: 40px; } } @media (min-width: 1024px) { .cs-cols { flex-direction: row; align-items: flex-start; gap: 134px; } .cs-col { max-width: none; } .cs-col--narrow { width: 274px; } .cs-col--wide { width: 784px; } } /* --- Bild + Text nebeneinander (Final Exhibit) --- */ .cs-media-text { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; } .cs-media-text__img { width: 140px; height: auto; object-fit: contain; } .cs-media-text__body { width: 75vw; max-width: 65ch; display: flex; flex-direction: column; } .cs-media-text__body .body-large { margin-top: var(--gap-headline-text); } @media (min-width: 640px) { .cs-media-text { gap: 40px; } .cs-media-text__img { width: 180px; } } @media (min-width: 1024px) { .cs-media-text { flex-direction: row; align-items: center; gap: 134px; } .cs-media-text__img { width: 274px; } .cs-media-text__body { width: 784px; max-width: none; } } /* --- „Give it a try": Kopf + QR/Bild-Reihe (BtF) --- FIX (Overflow-Bug): Vorher hatten .btf-digital__qr (274px) und .btf-digital__img (784px, flex:none) zusammen eine feste Mindest- breite von 1058px + Gap. Der umgebende Container ist aber nur "Fensterbreite − 2×--gutter" breit. Zwischen ~1024px und ~1186px Fensterbreite reichte das nicht aus, wodurch .btf-digital__img über den Rand der greigen Box hinauslief und der weiße Body- Hintergrund dahinter sichtbar wurde. Fix: .btf-digital__img wird zu einem schrumpfbaren Flex-Item (flex:1, min-width:0) mit max-width:784px als Obergrenze. Der QR-Code behält seine feste Breite (flex-shrink:0), damit er immer scanbar bleibt – das größere Bild gibt stattdessen nach. */ .btf-digital__head { display: flex; flex-direction: column; gap: var(--gap-headline-text); max-width: 65ch; } .btf-digital__row { margin-top: 32px; width: 100%; display: flex; flex-direction: column; gap: 32px; align-items: flex-start; } .btf-digital__qr { width: 140px; height: auto; object-fit: contain; } .btf-digital__img { width: 100%; height: auto; object-fit: contain; } @media (min-width: 640px) { .btf-digital__row { margin-top: 40px; flex-direction: row; align-items: center; gap: 40px; } .btf-digital__qr { width: 180px; } .btf-digital__img { min-width: 0; flex: 1; } } @media (min-width: 1024px) { .btf-digital__row { margin-top: 0px; justify-content: space-between; gap: 32px; } .btf-digital__qr { width: 274px; flex-shrink: 0; } .btf-digital__img { flex: 1 1 0; min-width: 0; max-width: 784px; } } /* --- „Next project"-Karte --- */ .cs-next { background: var(--white); width: 100%; display: flex; justify-content: center; padding: 48px 32px 0; } .cs-next__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; } .cs-next-card { background: var(--white); border: 1px solid var(--grey); border-radius: var(--radius); display: flex; flex-direction: column; gap: 24px; align-items: flex-start; padding: 24px; width: 100%; } .cs-next__head { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; width: 100%; } .cs-next__rule { height: 1px; background: var(--grey); width: 100%; } .cs-next__row { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; width: 100%; } .cs-next__thumb { height: 80px; width: 100%; border-radius: var(--radius); overflow: hidden; flex-shrink: 0; } .cs-next__thumb img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .cs-next__text { display: flex; flex-direction: column; gap: 8px; flex: 1; } @media (min-width: 640px) { .cs-next { padding: 48px 64px 0; } .cs-next-card { padding: 32px; } .cs-next__row { flex-direction: row; align-items: center; gap: 24px; } .cs-next__thumb { width: 180px; } } @media (min-width: 1024px) { .cs-next { padding: 56px 64px 0; } .cs-next-card { gap: 32px; padding: 51px; } .cs-next__row { gap: 32px; } .cs-next__thumb { height: 60px; width: 220px; } } /* ============================================================= SEITE: MAU (mau.html) ============================================================= */ /* Kleineres Hero-Logo (animierte Frame-Sequenz per JS) */ .cs-hero__logo--mau { width: 90px; } @media (min-width: 640px) { .cs-hero__logo--mau { width: 130px; } } @media (min-width: 1024px) { .cs-hero__logo--mau { width: 120px; height: 120px; } } /* Hardware-Band */ .mau-hardware { width: 100%; display: flex; flex-direction: column; gap: 32px; } .mau-hardware__text { display: flex; flex-direction: column; gap: 16px; width: 75vw; max-width: 65ch; } .mau-hardware__group { display: flex; flex-direction: column; gap: 16px; } .mau-hardware__images { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } .mau-hardware__img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--radius); } @media (min-width: 640px) { .mau-hardware { gap: 40px; } .mau-hardware__images { flex-direction: row; gap: 24px; } .mau-hardware__img--a { width: 274px; height: 323px; } .mau-hardware__img--b { flex: 1; min-width: 0; height: 323px; } } @media (min-width: 1024px) { .mau-hardware { flex-direction: row; align-items: center; gap: 0; } .mau-hardware__text { width: 376px; max-width: none; gap: 12px; } .mau-hardware__group { gap: 12px; } .mau-hardware__images { margin-left: 134px; gap: 32px; align-items: flex-start; } .mau-hardware__img--a { width: 274px; height: 323px; } .mau-hardware__img--b { width: 376px; height: 323px; flex: none; } } /* Videos-Band: 4 Hochkant-Videos */ .mau-videos { width: 100%; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 32px; } .mau-video { display: flex; flex-direction: column; gap: 12px; } .mau-video video { width: 100%; object-fit: contain; border-radius: var(--radius); aspect-ratio: 9 / 16; } @media (min-width: 640px) { .mau-videos { grid-template-columns: repeat(4, 1fr); column-gap: 24px; } } @media (min-width: 1024px) { .mau-videos { display: flex; align-items: flex-start; gap: 32px; } .mau-video { gap: 16px; flex: 1; } .mau-video video { width: 274px; height: 568px; aspect-ratio: auto; } } /* ============================================================= SEITE: PONY PALETTE (pony-palette.html) ============================================================= */ /* Poster im „Final App"-Block: mobil volle Breite, xl 274 */ .cs-media-text__img--full { width: 100%; } @media (min-width: 640px) { .cs-media-text__img--full { width: 100%; } } @media (min-width: 1024px) { .cs-media-text__img--full { width: 580px; } } /* Videos-Band: 3 Hochkant-Videos */ .pony-videos { width: 100%; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 32px; } .pony-video { display: flex; flex-direction: column; gap: 12px; } .pony-video video { width: 100%; border-radius: var(--radius); object-fit: contain; aspect-ratio: 9 / 16; } @media (min-width: 640px) { .pony-videos { grid-template-columns: repeat(3, 1fr); column-gap: 24px; row-gap: 0; } .pony-video { gap: 16px; } .pony-video video { aspect-ratio: 10 / 16; } } @media (min-width: 1024px) { .pony-videos { display: flex; align-items: flex-start; justify-content: space-between; } .pony-video { flex: 0 0 auto; } .pony-video video { width: 274px; height: 568px; aspect-ratio: auto; } } /* ============================================================= SEITE: NEED FOR SEED (need-for-seed.html) ============================================================= */ .nfs-canvas { display: block; width: 100%; height: clamp(160px, 26vh, 200px); object-fit: cover; object-position: center center; } @media (min-width: 640px) { .nfs-canvas { height: clamp(200px, 28vh, 280px); } } @media (min-width: 1024px) { .nfs-canvas { height: clamp(180px, 30vh, 344px); } } .nfs-name-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); z-index: 5; } .nfs-name-overlay[hidden] { display: none; } .nfs-name-box { background: var(--white); padding: 24px 28px; border-radius: 12px; text-align: center; } .nfs-name-box input { background: var(--white); border-color: var(--black); display: block; margin: 12px 0; padding: 8px 10px; font-size: 16px; width: 200px; } .nfs-name-box button { padding: 8px 16px; cursor: pointer; } /* Kleineres Icon im „Final Game"-Block */ .cs-media-text__img--sm { width: 100px; } @media (min-width: 640px) { .cs-media-text__img--sm { width: 130px; } } @media (min-width: 1024px) { .cs-media-text__img--sm { width: 172px; } } /* „Try it"-Button nur auf Geräten mit Maus/Tastatur (Spiel braucht Tasten) */ .nfs-try { display: none; margin-top: 32px; align-self: flex-start; } @media (hover: hover) and (pointer: fine) { .nfs-try { display: inline-flex; } } @media (min-width: 1024px) { .nfs-try { margin-top: 56px; } } /* Einblenden beim Scrollen */ [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity .7s ease-out, transform .7s ease-out; } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } /* Kasten-Slide-in: die "Selected work"-Card (Home) und die Ordner-Box (Work) gleiten beim Laden von unten sanft ins Bild, statt einfach da zu stehen. Läuft einmalig beim Seitenaufbau, kein Scroll-Trigger nötig, da beide Elemente im ersten Screen liegen. Home-Card + mobile Ordner-Liste bleiben bei 1.4s und sind nie von Klick-Interaktionen betroffen (unkritisch, keine Scoping nötig). WICHTIG (Bugfix "unterschiedliche Zurück-Animation"): Die Desktop- Ordner-Slideshow wurde früher direkt über ".work-folders-desktop .folder" animiert – DAUERHAFT, nicht nur beim Laden. Sobald beim Klick die Klasse .folder--initial-active gesetzt/entfernt wurde, änderte sich dadurch rechnerisch auch der animation-name auf dem Ordner, der gerade in den Hintergrund wandert – und weil einer der beiden Ordner strukturell zufällig das zweite Kind (:nth-child(2)) ist, bekam NUR dieser beim Zurückgehen zusätzlich die folder-hint-peek-Bounce erneut aufgespielt, der andere nicht. Die beiden "Zurück"-Animationen sahen dadurch unterschiedlich aus. FIX: box-slide-in/folder-hint-peek nur noch anwenden, solange der Container die Klasse .is-first-load trägt. Diese Klasse wird per JS (initWorkSlideshow in script.js) exakt einmal beim Laden gesetzt und danach dauerhaft entfernt (Timeout + bei jedem ersten Klick) – damit können diese Keyframes durch spätere Klicks NIE wieder greifen, egal welche anderen Klassen (folder--active/--collapsed/ --initial-active) in der Zwischenzeit wechseln. Das einzige, was beim Klick noch animiert, ist danach für BEIDE Ordner identisch: die CSS-Transition auf .folder (max-height/opacity, s.u.) fürs Zurückgehen sowie .folder--initial-active (paper-lay-down) fürs Nach-vorne-Kommen. */ @keyframes box-slide-in { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: translateY(0); } } .selected-work, .work-folder { animation: box-slide-in 1.4s cubic-bezier(.16, .84, .44, 1) both; } .work-folders-desktop.is-first-load .folder { animation: box-slide-in 2.4s cubic-bezier(.16, .84, .44, 1) both; } /* Lade-Hinweis: Der hintere (zweite) Ordner hebt beim ERSTEN Laden der Work-Seite einmal sanft seine max-height an und wieder zurück, um zu zeigen, dass unter der Kante noch Inhalt (Karten/Nummern) steckt und der Ordner anklickbar ist. Animiert bewusst dieselbe Eigenschaft (max-height) und denselben Zielwert (--folder-peek) wie der :hover-Zustand oben, damit die Animation optisch exakt so hoch geht wie das Hover-Reveal – reine transform-Bounces würden den Inhalt selbst nicht freilegen. Auch diese Regel ist bewusst an .is-first-load gebunden (s. Bugfix- Notiz oben) – sie darf ausschließlich beim initialen Seitenaufbau laufen, nie durch spätere Klicks erneut ausgelöst werden. KEIN "forwards" im Fill-Mode: 0%/100% entsprechen ohnehin dem Ruhezustand, und mit "forwards" (bzw. "both") würde die Animation die Kontrolle über max-height dauerhaft behalten und dadurch den :hover-Effekt dieses Ordners blockieren. */ @keyframes folder-hint-peek { 0%, 100% { max-height: calc(var(--folder-pad) + 34px); } 50% { max-height: calc(var(--folder-pad) + 34px + var(--folder-peek)); } } .work-folders-desktop.is-first-load .folder:nth-child(2) { animation: box-slide-in 2.4s cubic-bezier(.16, .84, .44, 1) both, folder-hint-peek 1500ms ease-in-out; } /* Papier-Stapel-Effekt: Beim Öffnen eines Ordners legt sich der GESAMTE Ordner-Kasten (Kopf + beide Projekt-Karten) wie ein locker hingelegtes Blatt Papier ab – leicht gedreht und angehoben, das sich sanft einpendelt und flach aufliegt. Die Selektor-Kombination ".work-folders-desktop .folder. folder--active" ist bewusst so spezifisch gewählt, dass sie die bereits vorhandene "box-slide-in"-Ladeanimation (gleiches Element, `animation`-Eigenschaft, Selektor ".work-folders-desktop .folder") sicher überschreibt, statt von ihr ignoriert zu werden. Da die vordere Karte direkt beim Laden per JS (initWorkSlideshow()) die Klasse .folder--active bekommt, ist DIESE Animation (nicht box-slide-in) die tatsächliche Ladeanimation der vorderen Karte. */ @keyframes paper-lay-down { 0% { opacity: 0; transform: translateY(-22px) rotate(-3deg) scale(0.97); } 65% { opacity: 1; transform: translateY(3px) rotate(.8deg) scale(1.003); } 100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); } } .work-folders-desktop .folder.folder--initial-active { animation: paper-lay-down 1.5s cubic-bezier(.22, 1, .36, 1) both; } @media (prefers-reduced-motion: reduce) { .selected-work, .work-folder, .work-folders-desktop.is-first-load .folder { animation: none; } .work-folders-desktop.is-first-load .folder:nth-child(2) { animation: none; } .work-folders-desktop .folder.folder--initial-active { animation: none; } } /* Wipp-Animation der Pixel-Assets */ @keyframes nfs-sway { 0% { transform: rotate(0deg); } 10% { transform: rotate(5deg); } 20% { transform: rotate(-5deg); } 30% { transform: rotate(4deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } } .nfs-sway { animation: nfs-sway 5s ease-in-out infinite; transform-origin: bottom center; } /* Asset-Reihe (Player/Goal/Obstacles) */ .nfs-assets { width: 100%; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; row-gap: 40px; } .nfs-asset { display: flex; flex-direction: column; align-items: flex-start; } .nfs-asset__role { margin-top: 8px; } .nfs-asset__img { width: 90%; height: auto; margin-top: 24px; object-fit: contain; max-height: 120px; } @media (min-width: 640px) { .nfs-assets { grid-template-columns: repeat(4, 1fr); column-gap: 64px; } .nfs-asset__img { max-height: 160px; } } @media (min-width: 1024px) { .nfs-assets { display: flex; align-items: flex-start; justify-content: space-between; } .nfs-asset { width: 172px; } .nfs-asset__img { max-height: none; } } /* Status-Reihe (Home/Victory/Game Over) */ .nfs-status { width: 100%; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 40px; } .nfs-status-item { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .nfs-status-item img { width: 100%; height: auto; object-fit: contain; } @media (min-width: 640px) { .nfs-status { grid-template-columns: repeat(3, 1fr); column-gap: 40px; } .nfs-status-item { gap: 16px; } } @media (min-width: 1024px) { .nfs-status { display: flex; align-items: flex-start; justify-content: space-between; gap: 0; } .nfs-status-item img { max-width: 350px; } } /* --- Spiel-Modal (Vollbild-Overlay mit Canvas) --------------- Grundprinzip: Der Canvas bekommt seine Höhe per JS zugewiesen (need-for-seed.js, setSize()) und richtet sich dabei nach window.innerHeight. Damit auf NIEDRIGEN Fenstern (kleine Laptop-Fenster, Handys im Querformat, viel Browser-Chrome) weder der Canvas noch Close-/Mute-Button oder der Tasten-Hinweis abgeschnitten werden, gilt hier zusätzlich: 1. Das Modal selbst darf vertikal scrollen (overflow-y: auto) – das ist das Sicherheitsnetz, falls trotz aller Verkleinerungen unten noch etwas nicht passt. 2. Oben ist Platz (padding-top) reserviert, damit die absolut positionierten Buttons niemals über der Bühne/dem Canvas liegen. 3. Unterhalb von 700px bzw. 480px Fensterhöhe werden Buttons, Hinweistext und Abstände zusätzlich verkleinert bzw. (bei extrem wenig Platz) der Hinweistext ganz ausgeblendet. Der 700px-Schwellenwert ist bewusst identisch zum übrigen Kurzbildschirm-Fallback dieser Datei (.home-top/.page-top). */ .nfs-game { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0, 0, 0, .8); padding: 72px 16px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .nfs-game[hidden] { display: none; } .nfs-game__close { position: absolute; top: 16px; right: 20px; color: #fff; font-size: 2.5rem; font-weight: 300; line-height: 1; transition: opacity .2s ease; z-index: 2; } .nfs-game__close:hover { opacity: .7; } .nfs-game__mute { position: absolute; top: 14px; left: 20px; color: #fff; display: flex; transition: opacity .2s ease; z-index: 2; } .nfs-game__mute:hover { opacity: .6; } .nfs-game__hint { color: rgba(255, 255, 255, .6); font-size: .875rem; margin-bottom: 12px; user-select: none; text-align: center; flex-shrink: 0; } .nfs-game__hint kbd { background: rgba(255, 255, 255, .2); padding: 2px 6px; border-radius: 4px; color: #fff; font-family: inherit; } .nfs-game__stage { width: 100%; max-width: 900px; border-radius: 4px; overflow: hidden; flex-shrink: 0; } .nfs-game__canvas { display: block; width: 100%; } /* Niedrige Fenster (kleine Laptop-Fenster, Handy quer, viel Browser-UI): Buttons und Hinweistext kompakter, damit mehr Platz fürs eigentliche Spiel bleibt. Der Canvas selbst schrumpft parallel über die angepasste JS-Formel in setSize(). */ @media (max-height: 700px) { .nfs-game { padding: 52px 12px 16px; } .nfs-game__close { top: 8px; right: 12px; font-size: 1.75rem; } .nfs-game__mute { top: 10px; left: 12px; } .nfs-game__mute svg { width: 18px; height: 18px; } .nfs-game__hint { font-size: .75rem; margin-bottom: 8px; } } /* Extrem wenig Höhe (z.B. Smartphone quer < 480px): Hinweistext ausblenden, damit der Canvas den verbleibenden Platz bekommt statt um wenige Pixel Text zu konkurrieren. Steuerungshinweise stehen dann weiterhin sichtbar in der Anleitung/Beschreibung der Seite. */ @media (max-height: 480px) { .nfs-game { padding-top: 44px; } .nfs-game__hint { display: none; } } /* ============================================================= RESPONSIVE LAYOUT (Override-Ebene) ------------------------------------------------------------- Der Inhalt liegt in einer ZENTRIERTEN Spalte von max. 1192 px – Header, Content und Footer sind alle gleich breit und bündig. Auf großen Bildschirmen entstehen dadurch links/rechts gleiche Ränder, z. B. bei 1512 px Vollbild genau (1512-1192)/2 = 160 px. Auf schmaleren Fenstern greift ein Mindest-Seitenabstand (--gutter, siehe Design-Tokens oben in Abschnitt 3). Zusätzlich sind die früher FESTEN Spaltenbreiten (376/682/274 …) auf flexible Anteile (flex) umgestellt – so wächst der Inhalt innerhalb der 1192-px-Spalte sauber mit und läuft auch auf kleineren Laptops nicht über. Auf SEHR BREITEN Fenstern (Ultrawide, ≥ 1920px) bleibt die Spalte bei --maxw gedeckelt – die Anteile verteilen sich also innerhalb von 1192px, nicht über die volle Fensterbreite, damit Zeilenlängen und Bildgrößen lesbar bleiben. Drei Breakpoints (Media Queries): Mobil < 640px – einspaltig Tablet 640–1023px – teils zweispaltig Desktop ≥ 1024px – mehrspaltig Für die Bildschirm-HÖHE auf xl gilt zusätzlich (siehe .home-top / .page-top weiter oben): < 720px Höhe – feste vh-Höhe wird aufgehoben, Seite scrollt 720–1399px Höhe – Standardverhalten (100vh, unten ausgerichtet) ≥ 1400px Höhe – Höhe wird gedeckelt, Inhalt bleibt kompakt Anpassen: • Spalte breiter/schmaler: --maxw ändern (z. B. 1440px) • Volle Fensterbreite ohne Rand: --maxw auf 100% setzen • Rand auf schmalen Fenstern: --gutter ändern • Kurzbildschirm-Schwelle: 720px in den max-height-Queries ändern • Hochbildschirm-Deckel: 1400px in den min-height-Queries ändern ============================================================= */ /* Mindest-Seitenabstand auf allen Sektionen (greift, sobald das Fenster schmaler als die 1192-px-Spalte ist) */ .site-header, .site-footer, .hero, .approach, .photo-teaser__inner, .gallery, .gallery-hero, .page-hero, .about-exp, .doc-section, .cs-hero, .cs-band, .cs-next, .work-more { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; } /* Hero + Foto-Teaser haben keinen eigenen Inhalts-Wrapper. Auf DESKTOP werden sie direkt auf die 1192-px-Spalte begrenzt und zentriert. Auf Tablet/Mobile NICHT begrenzen – sonst schrumpft der Hero (als Flex-Item mit margin:auto) auf Inhaltsbreite und wird schmaler als der Header. Ohne die Begrenzung füllt er dort die volle Breite. .work-more (Projects-Sektion auf work.html) besitzt zwar bereits einen eigenen Inhalts-Wrapper (.work-more__inner mit max-width: var(--maxw) + margin-inline:auto), der rechnerisch zur selben Spaltenbreite führt wie Header/Hero. Damit die Breite aber garantiert – und nicht nur rechnerisch zufällig – exakt der Navigationsleiste entspricht (gleiche Berechnungsmethode wie bei .hero, statt zweier verschachtelter Zentrierungen), wird .work-more hier bewusst zusätzlich mit derselben Deckel-Regel begrenzt. */ @media (min-width: 1024px) { .hero, .photo-teaser__inner, .work-more { max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; } /* Ausnahme: .hero--work (work.html) bekommt seine Breite NICHT über diese Padding+maxw-Formel, sondern über den eigenen .hero-work__inner-Wrapper (siehe Abschnitt "SEITE: WORK"), der 1:1 das Zentrier-Muster von .site-header__inner kopiert. Die geerbte Deckel-Regel oben würde sonst eine zweite, unabhängige Breitenberechnung überlagern – hier bewusst deaktiviert, damit nur noch eine einzige Quelle (--maxw über .hero-work__inner) die Breite bestimmt und diese garantiert – nicht nur rechnerisch zufällig – mit der Nav-Leiste übereinstimmt. Selektor bewusst als ".hero.hero--work" (kombiniert) statt nur ".hero--work" – siehe Bugfix-Kommentar im Abschnitt "SEITE: WORK": ein einzelner ".hero--work"-Selektor hat dieselbe Spezifität wie ".hero" und würde von späteren, gleich spezifischen .hero-Regeln überschrieben werden können. */ .hero.hero--work { max-width: none; margin-inline: 0; } } /* ---- Desktop (≥1024px): feste Breiten → fluide Anteile ---- */ @media (min-width: 1024px) { /* Home-Hero: Text links, Folder-Komponente rechts – füllen die Breite */ .hero { justify-content: space-between; gap: 64px; } .hero__text { width: auto; flex: 38 1 0; } .selected-work { width: auto; height: auto; flex: 58 1 0; } .selected-work__cards .work-card { width: auto; flex: 1 1 0; } /* Photography-Teaser */ .photo-teaser__inner { justify-content: space-between; gap: 64px; } .photo-grid { width: auto; flex: 58 1 0; } .photo-teaser__content{ width: auto; flex: 36 1 0; } /* Work / Home: Folder-Komponente (Home-Hero rechts, gleiches Markup wird auf work.html mobil weiterverwendet) */ .work-folders-desktop { width: auto; flex: 58 1 0; } .folder__cards .work-card { width: auto; flex: 1 1 0; } /* Work: Mau ist jetzt Teil des einheitlichen Projekt-Grids unter "Projects" (4 gleich breite Spalten ab 1024px, siehe Abschnitt "SEITE: WORK" weiter oben) statt einer separaten Karte im Hero – der Hero enthält auf work.html nur noch den Intro-Text. */ /* About */ .about-hero__grid { justify-content: space-between; gap: 64px; } .about-hero__text { width: auto; flex: 38 1 0; } .about-hero__portrait { width: auto; flex: 56 1 0; } .about-exp__grid { gap: 64px; } .skills-box { width: auto; flex: 34 1 0; } .exp-list { width: auto; flex: 62 1 0; max-width: none; } /* Case-Study-Hero */ .cs-hero__meta { justify-content: space-between; gap: 64px; } .cs-hero__title { width: auto; flex: 38 1 0; } .cs-meta { width: auto; flex: 56 1 0; } .cs-meta__item { width: auto; } /* Zwei-Spalten-Texte (Goal/Process usw.) */ .cs-cols { gap: 64px; } .cs-col--narrow { width: auto; flex: 30 1 0; } .cs-col--wide { width: auto; flex: 68 1 0; } .cs-media-text__body { width: auto; flex: 1 1 0; } /* Mau Hardware */ .mau-hardware { gap: 64px; } .mau-hardware__text { width: auto; flex: 34 1 0; } .mau-hardware__images { margin-left: 0; flex: 0 1 auto; } /* Fließtext nicht unendlich breit ziehen (Lesbarkeit) */ .cs-col p, .cs-media-text__body p, .exp-list .exp-entry p, .work-intro .body-large, .about-hero__text .body-large { max-width: 75ch; } /* FIX: Die "Give it a try"-Reihe (QR + Rahmenbild) ist NICHT Teil der obigen 38/58/62-Verteilung, weil sie ihre Breiten direkt in Abschnitt "SEITE: MAU/PONY/BtF" oben bekommt. Der eigentliche Fix sitzt dort (.btf-digital__img: flex:1 1 0; min-width:0; max-width:784px) und ist bewusst nicht hier in der Override-Ebene platziert, damit Fix und Ursprungsregel im selben Block sichtbar bleiben. */ } /* ---- Tablet & Mobile (< 1024px): Inhalts-Textblöcke genauso breit wie der Header (im Original waren sie mit 60vw/75vw schmaler) ---- */ @media (max-width: 1023px) { .hero__text, .work-intro, .about-hero__text, .exp-list, .cs-col, .cs-media-text__body, .btf-digital__head, .mau-hardware__text { width: 100%; max-width: none; } } /* ============================================================= NEU: ULTRAWIDE-SCHUTZ (sehr breite xl-Fenster, ≥ 1920px) ------------------------------------------------------------- Die Inhaltsspalte ist bereits über --maxw gedeckelt, wodurch Text- und Bildbreiten grundsätzlich stabil bleiben. Auf sehr breiten Monitoren (Ultrawide, 5K etc.) darf die Spalte aber ruhig etwas mitwachsen, statt links/rechts riesige, leere Ränder zu erzeugen – dafür wird --maxw ab 1920px moderat angehoben (Bilder/Grids in Case-Studies profitieren am meisten davon, Fließtext bleibt über max-width/ch weiterhin auf Lesbarkeit begrenzt). ============================================================= */ @media (min-width: 1920px) { :root { --maxw: 1320px; } } @media (min-width: 2560px) { :root { --maxw: 1440px; } }