/* ========================================================================== Felix — Portfolio Zwei Grundfarben: Creme und ein dunkles Blau. Tagsüber Creme, nachts Blau — umgeschaltet über data-theme am -Element. Aufbau: 1 Schriften · 2 Farben & Tokens · 3 Basis · 4 Navigation 5 Seitenkopf & Hero · 6 Text & Karten · 7 Projekte · 8 Kontakt 9 Tageszeit-Regler · 10 Footer · 11 Buttons · 12 Bewegung 13 Responsive · 14 Reduzierte Bewegung ========================================================================== */ /* ---------- 1 · Schriften (lokal, keine externen Requests) --------------- */ @font-face { font-family: 'Bricolage Grotesque'; src: url('assets/fonts/bricolage-grotesque-var.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter Var'; src: url('assets/fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ---------- 2 · Farben & Tokens ------------------------------------------ */ /* ===== Die beiden Grundfarben — hier ändern, alles andere folgt ===== */ :root { --cream: #EFE8DB; --blue: #1E3A5F; /* Tagvariante (Standard) */ color-scheme: light; --bg: var(--cream); --surface: #F7F2E8; --raised: #FCF9F3; --text: var(--blue); /* Akzente — natürliche, gedeckte Töne */ --clay: #C9603C; --sage: #6F8F63; --ochre: #D2971F; --slate: #4F6DAE; --plum: #96628F; --accent: var(--clay); /* Auf Kontrast geprüft (Creme-Grund): muted ≈ 5.9:1, soft ≈ 5:1 — beide über der WCAG-AA-Grenze von 4.5:1. Beim Aufhellen nicht unter 76% gehen. */ --muted: color-mix(in srgb, var(--text) 86%, var(--bg)); --soft: color-mix(in srgb, var(--text) 77%, var(--bg)); --hairline: color-mix(in srgb, var(--text) 16%, var(--bg)); --glass: color-mix(in srgb, var(--surface) 72%, transparent); --pill: color-mix(in srgb, var(--text) 10%, transparent); --nav-glass: rgb(247 242 232 / .5); --nav-glass-strong: rgb(247 242 232 / .64); --nav-active-glass: rgb(255 253 248 / .6); --nav-tape-border: rgb(255 255 255 / .44); --nav-tape-shadow: inset 0 1px 0 rgb(255 255 255 / .72), 0 14px 34px -24px rgb(30 58 95 / .38); --nav-pill-shadow: inset 0 1px 0 rgb(255 255 255 / .88), 0 5px 14px -10px rgb(30 58 95 / .34); --shadow: 0 1px 2px color-mix(in srgb, var(--blue) 10%, transparent), 0 16px 34px -20px color-mix(in srgb, var(--blue) 30%, transparent); --shadow-lift: 0 2px 6px color-mix(in srgb, var(--blue) 12%, transparent), 0 30px 56px -24px color-mix(in srgb, var(--blue) 40%, transparent); --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter Var', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --wrap: 1180px; --gutter: clamp(1.25rem, 4vw, 3rem); --r-card: 24px; --r-md: 16px; --r-pill: 999px; --ease: cubic-bezier(.22, .61, .36, 1); --ease-spring: cubic-bezier(.2, .9, .28, 1.16); } /* Nachtvariante */ [data-theme='dark'] { color-scheme: dark; /* Nachts tauschen die beiden Grundfarben einfach die Rollen */ --bg: var(--blue); --surface: #26476F; --raised: #2E5480; --text: var(--cream); --clay: #E2805C; --sage: #93B385; --ochre: #EBB748; --slate: #7C99DC; --plum: #BC8AB4; /* Auf dunklem Grund trägt schon weniger Deckkraft genug Kontrast */ --muted: color-mix(in srgb, var(--text) 78%, var(--bg)); --soft: color-mix(in srgb, var(--text) 68%, var(--bg)); --glass: color-mix(in srgb, var(--surface) 66%, transparent); --pill: color-mix(in srgb, var(--text) 14%, transparent); --nav-glass: rgb(30 58 95 / .46); --nav-glass-strong: rgb(38 71 111 / .6); --nav-active-glass: rgb(239 232 219 / .13); --nav-tape-border: rgb(239 232 219 / .16); --nav-tape-shadow: inset 0 1px 0 rgb(239 232 219 / .12), 0 16px 36px -24px rgb(0 0 0 / .72); --nav-pill-shadow: inset 0 1px 0 rgb(239 232 219 / .18), 0 6px 16px -10px rgb(0 0 0 / .58); --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 16px 34px -20px rgb(0 0 0 / .6); --shadow-lift: 0 2px 6px rgb(0 0 0 / .35), 0 30px 56px -24px rgb(0 0 0 / .7); } /* ---------- 3 · Basis ---------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; overflow-y: auto; scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; } body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: clamp(1rem, .96rem + .22vw, 1.0625rem); line-height: 1.65; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; } /* Farbwechsel weich — erst aktiv, wenn die Seite steht (kein Blitzen beim Laden) */ .theme-ready body, .theme-ready .nav, .theme-ready .principles-panel, .theme-ready .about-cta__panel { transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease); } .theme-ready .project { transition: background-color .5s var(--ease), color .5s var(--ease), border-color 3.2s cubic-bezier(.37, 0, .63, 1), transform 3.2s cubic-bezier(.37, 0, .63, 1), box-shadow 3.2s cubic-bezier(.37, 0, .63, 1); } /* Sehr feine Körnung — gibt der Fläche etwas Papierhaftes */ body::after { content: ''; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } img, svg { display: block; max-width: 100%; } ul { list-style: none; margin: 0; padding: 0; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; font-optical-sizing: auto; letter-spacing: -.032em; line-height: 1.02; margin: 0; text-wrap: balance; } a { color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .skip-link { position: fixed; top: .75rem; left: 50%; z-index: 600; transform: translate(-50%, -200%); padding: .75rem 1.25rem; border-radius: var(--r-pill); background: var(--text); color: var(--bg); font-weight: 600; text-decoration: none; transition: transform .25s var(--ease); } .skip-link:focus { transform: translate(-50%, 0); } .eyebrow { display: flex; align-items: center; gap: .55rem; margin: 0 0 1.15rem; font-size: .8125rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--soft); } .eyebrow::before { content: ''; width: 1.75rem; height: 1px; background: currentColor; opacity: .5; } /* ---------- 4 · Navigation ----------------------------------------------- */ /* Milchiges Navigations-Tape mit heller Innenpille, angelehnt an die Referenz. */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: center; padding: clamp(.75rem, 2vw, 1.25rem) 1rem; pointer-events: none; } .nav { position: relative; pointer-events: auto; max-width: 100%; padding: .38rem; border: 1px solid transparent; border-radius: var(--r-pill); background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background-color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease), backdrop-filter .45s var(--ease); } .nav.is-glass { border-color: var(--nav-tape-border); background: var(--nav-glass-strong); box-shadow: var(--nav-tape-shadow); backdrop-filter: blur(20px) saturate(1.08); -webkit-backdrop-filter: blur(20px) saturate(1.08); } .nav__list { position: relative; z-index: 1; display: flex; align-items: center; gap: .1rem; } .language-switch { position: absolute; top: clamp(.75rem, 2vw, 1.25rem); right: clamp(.75rem, 2vw, 1.25rem); display: grid; width: 40px; min-height: 40px; place-items: center; pointer-events: auto; border: 1px solid var(--nav-tape-border); border-radius: var(--r-pill); background: var(--nav-glass-strong); box-shadow: var(--nav-tape-shadow); backdrop-filter: blur(20px) saturate(1.08); -webkit-backdrop-filter: blur(20px) saturate(1.08); color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .04em; line-height: 1; text-decoration: none; transition: color .3s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); } .language-switch:hover, .language-switch:focus-visible { border-color: var(--nav-tape-border); background: var(--nav-active-glass); box-shadow: var(--nav-pill-shadow); color: var(--text); } .nav__link { display: flex; align-items: center; min-height: 44px; padding: .5rem clamp(.7rem, 2.2vw, 1.1rem); border: 1px solid transparent; border-radius: var(--r-pill); font-size: clamp(.8125rem, .75rem + .28vw, .9375rem); font-weight: 500; line-height: 1.2; white-space: nowrap; color: var(--muted); text-decoration: none; background: transparent; transition: color .3s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); } .nav__link:hover { color: var(--text); } .nav__link[aria-current='page'] { color: var(--text); border-color: var(--nav-tape-border); background: var(--nav-active-glass); box-shadow: var(--nav-pill-shadow); backdrop-filter: blur(10px) saturate(1.05); -webkit-backdrop-filter: blur(10px) saturate(1.05); } .nav.is-glass .nav__link[aria-current='page'] { border-color: var(--nav-tape-border); background: var(--nav-active-glass); box-shadow: var(--nav-pill-shadow); } /* Mit JavaScript übernimmt eine gemeinsame Pille die Hervorhebung. Dadurch kann sie vor dem Seitenwechsel weich zum nächsten Eintrag gleiten. */ .nav__indicator { position: absolute; z-index: 0; top: 0; left: 0; width: 0; height: 0; pointer-events: none; border: 1px solid var(--nav-tape-border); border-radius: var(--r-pill); background: var(--nav-active-glass); box-shadow: var(--nav-pill-shadow); backdrop-filter: blur(10px) saturate(1.05); -webkit-backdrop-filter: blur(10px) saturate(1.05); will-change: transform, width; } .nav__indicator.is-ready { transition: transform .26s var(--ease), width .26s var(--ease), height .26s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); } .nav.is-glass .nav__indicator { border-color: var(--nav-tape-border); background: var(--nav-active-glass); box-shadow: var(--nav-pill-shadow); } .nav.has-indicator .nav__link[aria-current='page'] { border-color: transparent; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .nav.has-indicator.is-switching .nav__link[aria-current='page'] { color: var(--muted); } .nav.has-indicator .nav__link.is-target { color: var(--text); } /* ---------- 5 · Seitenkopf & Hero ---------------------------------------- */ .hero, .page-head, .about-hero { position: relative; isolation: isolate; } .hero { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; padding: clamp(7rem, 18vh, 11rem) 0 clamp(4rem, 10vh, 7rem); } .page-head { padding: clamp(8rem, 20vh, 12rem) 0 clamp(2.5rem, 6vw, 4rem); } /* Weicher Lichtschein oben — sehr zurückhaltend */ .hero::before, .page-head::before, .about-hero::before { content: ''; position: absolute; z-index: -1; top: -30vh; left: 50%; transform: translateX(-50%) translateY(var(--par, 0px)); width: min(1100px, 120vw); aspect-ratio: 1; border-radius: 50%; opacity: .5; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%); pointer-events: none; } .hero__title { font-size: clamp(2.5rem, 7.4vw, 6.5rem); line-height: .96; letter-spacing: -.038em; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); text-wrap: initial; } .hero__line { display: block; } .word { display: inline-block; } .word--accent { color: var(--accent); } .hero__sub { max-width: 46ch; margin: 0 0 clamp(2rem, 4vw, 2.75rem); font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem); color: var(--muted); text-wrap: pretty; } .hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; } .page-title { font-size: clamp(2.25rem, 6.4vw, 5rem); } .page-lead { margin-top: clamp(1.25rem, 3vw, 1.75rem); max-width: 54ch; font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); color: var(--muted); text-wrap: pretty; } /* ---------- 6 · Text & kleine Karten ------------------------------------- */ .section { padding-block: clamp(3rem, 8vw, 6rem); } .section--tight { padding-top: 0; } .section__title { font-size: clamp(1.75rem, 4vw, 2.75rem); } .section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); } /* ---------- 6b · Über mich ------------------------------------------------ */ .about-hero { overflow: hidden; padding: clamp(8rem, 17vh, 11rem) 0 clamp(4rem, 8vw, 7rem); } .about-hero__title { margin-bottom: clamp(3.5rem, 8vw, 6.5rem); text-align: center; font-size: clamp(3.5rem, 10vw, 8rem); line-height: .9; letter-spacing: -.05em; } .about-hero__grid { display: grid; grid-template-columns: 1fr; align-items: start; gap: clamp(2rem, 4vw, 3.75rem); max-width: 68rem; margin-inline: auto; } .about-portrait { position: relative; width: min(82vw, 100%, 25rem); aspect-ratio: 4 / 5; margin: 0; align-self: start; justify-self: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--blue) 24%, transparent); border-radius: 999px 999px 1.1rem 1.1rem; background: var(--bg); box-shadow: 0 18px 42px -30px color-mix(in srgb, var(--blue) 34%, transparent); transition: background-color .5s var(--ease); } .about-portrait__image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0; } .about-portrait__image--light { opacity: 1; } [data-theme='dark'] .about-portrait__image--light { opacity: 0; } [data-theme='dark'] .about-portrait__image--dark { opacity: 1; } .theme-ready .about-portrait__image { transition: opacity .5s var(--ease); } .protected-media { -webkit-touch-callout: none; user-select: none; } .protected-media img { pointer-events: none; -webkit-user-drag: none; user-select: none; } .protected-media:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 72%, transparent); outline-offset: 4px; } .media-badge { position: absolute; z-index: 2; left: clamp(.75rem, 2vw, 1rem); bottom: clamp(.75rem, 2vw, 1rem); display: inline-flex; align-items: center; gap: .4rem; max-width: calc(100% - 1.5rem); min-height: 44px; padding: .5rem 1rem; border: 1px solid var(--nav-tape-border); border-radius: var(--r-pill); background: var(--nav-glass-strong); box-shadow: var(--nav-tape-shadow); backdrop-filter: blur(20px) saturate(1.08); -webkit-backdrop-filter: blur(20px) saturate(1.08); color: var(--text); font-size: clamp(.8125rem, .75rem + .28vw, .9375rem); font-weight: 500; line-height: 1.2; opacity: 0; transform: translateY(calc(100% + 1.5rem)); transition: opacity .28s var(--ease), transform .42s var(--ease-spring), background-color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); } .media-badge--ai span { color: #E2805C; } .protected-media:hover .media-badge, .protected-media:focus-visible .media-badge, .protected-media:focus-within .media-badge { opacity: 1; transform: translateY(0); } .about-hero__statement { max-width: 22ch; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); font-size: clamp(1.75rem, 3.4vw, 3rem); line-height: 1.05; text-wrap: balance; } .about-hero__copy { max-width: 58ch; color: var(--muted); } .about-hero__copy p + p { margin-top: clamp(1.25rem, 2.5vw, 2rem); } /* ---------- 6c · Leitgedanke --------------------------------------------- */ .about-belief { padding-top: 0; } .about-belief__inner { max-width: 75rem; margin-inline: auto; padding-block: clamp(1rem, 4vw, 3.5rem); text-align: center; } .about-belief__title { max-width: 22ch; margin-inline: auto; font-size: clamp(2.6rem, 6vw, 5.75rem); line-height: .98; } .about-belief__copy { max-width: 64ch; margin: clamp(2rem, 4vw, 3rem) auto 0; color: var(--muted); font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); } /* ---------- 6d · Arbeitsprinzipien --------------------------------------- */ .about-principles { padding-top: 0; } .about-principles .wrap { max-width: 1480px; } .about-principles__title { margin-bottom: clamp(2rem, 5vw, 4rem); padding-inline: clamp(0rem, 4vw, 4rem); font-size: clamp(2.5rem, 5vw, 4.75rem); } .principles-panel { max-width: none; margin-inline: auto; padding: clamp(2.25rem, 6vw, 5.75rem); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); border-radius: clamp(2rem, 5vw, 4rem); background: color-mix(in srgb, var(--surface) 86%, transparent); box-shadow: var(--shadow); } .principles-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(3rem, 8vw, 7rem); row-gap: clamp(3.5rem, 7vw, 5.5rem); } .principle__number { margin: 0 0 clamp(1.25rem, 2.5vw, 2rem); color: #E2805C; font-family: var(--font-display); font-size: clamp(2rem, 3.2vw, 2.65rem); font-weight: 650; line-height: 1; letter-spacing: -.05em; } .principle__title { margin-bottom: 1.15rem; font-size: clamp(1.4rem, 2.2vw, 1.8rem); } .principle__copy { max-width: 46ch; color: var(--muted); font-size: clamp(1rem, .95rem + .25vw, 1.125rem); line-height: 1.7; } /* ---------- 6e · Geschichte & Abschluss ---------------------------------- */ .about-story__grid { display: grid; grid-template-columns: minmax(15rem, .82fr) minmax(0, 1.18fr); gap: clamp(2.5rem, 8vw, 7rem); max-width: 70rem; margin-inline: auto; padding-block: clamp(1rem, 3vw, 2rem); } .about-story__title { max-width: 12ch; font-size: clamp(2.4rem, 5vw, 4.5rem); } .about-story__copy { max-width: 58ch; color: var(--muted); } .about-story__copy p + p { margin-top: clamp(1.4rem, 3vw, 2.25rem); } .about-cta { padding-top: 0; } .about-cta__panel { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; align-items: end; gap: clamp(2rem, 7vw, 6rem); max-width: 70rem; margin-inline: auto; padding: clamp(2.25rem, 5vw, 4rem); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); border-radius: clamp(1.75rem, 4vw, 3rem); background: color-mix(in srgb, var(--surface) 80%, transparent); } .about-cta__title { max-width: 15ch; margin-bottom: 1.25rem; font-size: clamp(2.35rem, 5vw, 4.5rem); } .about-cta__copy { max-width: 66ch; color: var(--muted); } .about-cta .link-more { flex: 0 0 auto; white-space: nowrap; } /* ---------- 6f · Bildergalerie ------------------------------------------- */ .section--gallery { padding-top: 0; } .about-gallery { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(15rem, .95fr); gap: clamp(.75rem, 1.4vw, 1rem); max-width: 75rem; margin-inline: auto; } .about-photo { position: relative; min-height: clamp(20rem, 42vw, 34rem); margin: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); border-radius: clamp(1rem, 2vw, 1.35rem); background: var(--surface); box-shadow: var(--shadow); } .about-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .about-photo:hover img, .about-photo:focus-visible img { transform: scale(1.025); } /* ---------- 7 · Projekte ------------------------------------------------- */ .projects { display: grid; grid-template-columns: 1fr; align-items: start; gap: clamp(1rem, 1.8vw, 1.5rem); } .projects__column { display: grid; align-content: start; gap: clamp(1rem, 1.8vw, 1.5rem); } .project { position: relative; display: flex; flex-direction: column; width: 100%; order: var(--order, 0); overflow: hidden; isolation: isolate; border: 1px solid var(--nav-tape-border); border-radius: 18px; background: var(--glass); box-shadow: var(--nav-tape-shadow); -webkit-backdrop-filter: blur(18px) saturate(1.08); backdrop-filter: blur(18px) saturate(1.08); transform: translate3d(0, 0, 0); transition: transform 3.2s cubic-bezier(.37, 0, .63, 1), box-shadow 3.2s cubic-bezier(.37, 0, .63, 1), border-color 3.2s cubic-bezier(.37, 0, .63, 1); backface-visibility: hidden; will-change: transform; } .project:hover, .project:focus-within { transform: translate3d(0, -4px, 0); border-color: color-mix(in srgb, var(--text) 18%, transparent); box-shadow: var(--nav-tape-shadow), 0 20px 34px -28px color-mix(in srgb, var(--text) 38%, transparent); } .project__body { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; padding: clamp(1.5rem, 2.2vw, 2rem); } .project__title { font-size: clamp(1.4rem, 1.2rem + .55vw, 1.75rem); } .project__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; } .project__status { display: inline-flex; min-height: 1.85rem; align-items: center; padding: .3rem .75rem; border-radius: var(--r-pill); background: var(--text); color: var(--bg); font-size: .75rem; font-weight: 700; letter-spacing: .01em; } .project__desc { margin: 0; max-width: 44ch; font-size: clamp(.9rem, .87rem + .15vw, 1rem); color: var(--muted); text-wrap: pretty; } .project--small { min-height: 220px; flex-direction: row; align-items: center; color: inherit; text-decoration: none; } .project--small .project__body { flex: 1 1 auto; } .project__icon-placeholder { flex: 0 0 auto; width: clamp(4.75rem, 7vw, 6rem); aspect-ratio: 1; margin: clamp(1.5rem, 2.2vw, 2rem); margin-left: 0; overflow: hidden; border: 1px solid var(--nav-tape-border); border-radius: 50%; background: var(--pill); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 12%, transparent); } .project__icon-placeholder img { width: 100%; height: 100%; object-fit: cover; } .project--large { min-height: 500px; } .project--large .project__body { padding-bottom: 1.25rem; } .project--soon { cursor: not-allowed; } .project--soon::before, .project--soon::after { content: ''; position: absolute; right: 0; left: 0; z-index: 5; height: 10px; pointer-events: none; opacity: 0; background: repeating-linear-gradient( -45deg, color-mix(in srgb, var(--text) 10%, transparent) 0 8px, transparent 8px 16px ); transition: opacity .6s var(--ease); } .project--soon::before { top: 0; } .project--soon::after { bottom: 0; } .project--soon:hover::before, .project--soon:hover::after { opacity: 1; } .project__image-placeholder { position: relative; min-height: 310px; margin: auto clamp(1.5rem, 2.2vw, 2rem) 0; overflow: hidden; border: 1px solid var(--nav-tape-border); border-bottom: 0; border-radius: 14px 14px 0 0; background: color-mix(in srgb, var(--text) 6%, var(--raised)); box-shadow: 0 18px 42px -28px color-mix(in srgb, var(--text) 45%, transparent); } .project__image { width: 100%; height: 100%; min-height: inherit; object-fit: cover; } .home-mockup { position: absolute; inset: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem) -1px; overflow: hidden; border: 1px solid var(--nav-tape-border); border-radius: 11px 11px 0 0; background: var(--surface); box-shadow: 0 20px 38px -24px color-mix(in srgb, var(--text) 36%, transparent); } .home-mockup__bar { display: flex; height: 2.5rem; align-items: center; gap: .45rem; padding: 0 .8rem; border-bottom: 1px solid var(--hairline); } .home-mockup__bar i { width: .75rem; aspect-ratio: 1; margin-right: auto; border: 2px solid currentColor; border-radius: 50%; } .home-mockup__bar span { width: 2.2rem; height: .38rem; border-radius: var(--r-pill); background: var(--hairline); } .home-mockup__content { display: grid; height: calc(100% - 2.5rem); grid-template-columns: 22% 1fr; } .home-mockup__nav { display: flex; flex-direction: column; gap: .75rem; padding: 1rem .7rem; border-right: 1px solid var(--hairline); background: color-mix(in srgb, var(--text) 3%, var(--surface)); } .home-mockup__nav i { width: 100%; height: .48rem; border-radius: var(--r-pill); background: var(--hairline); } .home-mockup__nav i:first-child { width: 72%; background: var(--soft); } .home-mockup__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; padding: 1rem; } .home-mockup__tiles i { min-height: 3.4rem; border: 1px solid var(--hairline); border-radius: 9px; background: var(--glass); box-shadow: inset 0 1px 0 var(--nav-tape-border); } .game-mockup { position: absolute; inset: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem) -1px; display: flex; overflow: hidden; flex-direction: column; border: 1px solid var(--nav-tape-border); border-radius: 11px 11px 0 0; background: var(--surface); box-shadow: 0 20px 38px -24px color-mix(in srgb, var(--text) 36%, transparent); } .game-mockup__bar { display: flex; height: 2.5rem; flex: 0 0 auto; align-items: center; gap: .45rem; padding: 0 .8rem; border-bottom: 1px solid var(--hairline); } .game-mockup__bar i { width: .75rem; aspect-ratio: 1; margin-right: auto; border: 2px solid currentColor; border-radius: 4px; } .game-mockup__bar span { width: 2.2rem; height: .38rem; border-radius: var(--r-pill); background: var(--hairline); } .game-mockup__field { position: relative; flex: 1 1 auto; background-image: linear-gradient(var(--hairline) 1px, transparent 1px), linear-gradient(90deg, var(--hairline) 1px, transparent 1px); background-size: 2.25rem 2.25rem; } .game-player { position: absolute; z-index: 2; width: 1.7rem; aspect-ratio: 1; border: 5px solid var(--surface); border-radius: 50%; background: var(--text); box-shadow: 0 0 0 1px var(--hairline); } .game-player--one { top: 20%; left: 18%; opacity: .55; } .game-player--two { top: 48%; left: 54%; opacity: .8; } .game-player--three { top: 24%; right: 14%; } .game-route { position: absolute; z-index: 1; height: 2px; transform-origin: left center; border-radius: var(--r-pill); background: var(--soft); opacity: .55; } .game-route--one { top: 32%; left: 22%; width: 40%; transform: rotate(22deg); } .game-route--two { top: 60%; left: 58%; width: 31%; transform: rotate(-42deg); } .game-mockup__actions { display: flex; flex: 0 0 auto; justify-content: center; gap: .65rem; padding: .8rem; border-top: 1px solid var(--hairline); } .game-mockup__actions i { width: 3.25rem; height: .65rem; border-radius: var(--r-pill); background: var(--hairline); } .game-mockup__actions i:nth-child(2) { width: 4.75rem; background: var(--soft); } /* ---------- 8 · Kontakt --------------------------------------------------- */ .contact { text-align: center; } .contact .eyebrow { justify-content: center; } .contact .page-lead { margin-inline: auto; } .contact__mail { margin: clamp(2rem, 4vw, 3rem) 0; } .mail-link { display: inline-block; padding: .3rem 0; font-family: var(--font-display); font-size: clamp(1.25rem, .9rem + 2vw, 2.5rem); font-weight: 600; letter-spacing: -.02em; text-decoration: none; background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 2px; transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0); transition: background-size .4s var(--ease), color .3s var(--ease), transform .25s var(--ease); } .mail-link:hover { background-size: 100% 8px; color: var(--accent); } .socials { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.5rem; } .social { display: inline-flex; align-items: center; gap: .3rem; min-height: 46px; padding: .5rem .25rem; font-weight: 500; color: var(--muted); text-decoration: none; transition: color .3s var(--ease); } .social:hover { color: var(--text); } .social__arrow { display: inline-block; transition: transform .35s var(--ease-spring); } .social:hover .social__arrow { transform: translate(3px, -3px); } /* ---------- 9 · Tageszeit-Regler ----------------------------------------- */ /* 24 Striche, einer je Stunde. Die Bubble markiert die eingestellte Stunde; Tag schaltet auf Creme, Nacht auf Blau. */ .clock { padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem); } /* Ohne JavaScript kann der Regler nichts tun — dann zeigen wir ihn auch nicht. Die Seite bleibt in der hellen Creme-Variante (data-theme im ). */ html:not(.js) .clock { display: none; } .clock__track { --hot: -99; /* überfahrene Stunde, wird vom Skript gesetzt */ position: relative; display: block; width: 100%; padding-top: 2.75rem; /* genau die Höhe der Bubble */ cursor: pointer; touch-action: pan-y; } .clock__ticks { display: flex; align-items: flex-end; width: 100%; height: 3.5rem; } /* Alle Striche gleich hoch und hauchdünn. Die Fläche des bleibt breit, damit sich der Regler gut treffen lässt — sichtbar ist nur die Linie. */ .clock__ticks i { --gap: calc(var(--i) - var(--hot)); --near: max(0, 1 - (var(--gap) * var(--gap)) / 8); flex: 1 1 0; height: 1.15rem; background: linear-gradient(currentColor, currentColor) no-repeat center bottom / 2px 100%; color: var(--text); opacity: .22; /* Nachtstunden bleiben zurückhaltend */ transform: translateY(calc(-.35rem * var(--near))); transition: opacity .3s var(--ease), height .4s var(--ease-spring), transform .45s var(--ease-spring); } /* Tagesstunden treten hervor, die aktuelle wächst zur Bubble hinauf */ .clock__ticks i.is-day { opacity: .8; } .clock__ticks i.is-on { opacity: 1; height: 3.5rem; transform: none; } .clock__bubble { position: absolute; top: 0; left: calc((var(--hour, 12) + .5) / 24 * 100%); transform: translateX(-50%); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; /* Kehrt sich mit dem Theme um: dunkler Kreis am Tag, heller in der Nacht */ background: var(--text); color: var(--bg); transition: left .45s var(--ease-spring), background-color .4s var(--ease), color .4s var(--ease); } .clock__bubble svg { width: 1.25rem; height: 1.25rem; } /* Sonne am Tag, Mond in der Nacht — beide liegen im HTML, CSS blendet um */ [data-theme='light'] .icon-moon, [data-theme='dark'] .icon-sun { display: none; } .clock__track:focus-visible .clock__bubble { outline: 2px solid var(--text); outline-offset: 4px; } /* ---------- 10 · Footer -------------------------------------------------- */ .site-footer { border-top: 1px solid var(--hairline); padding-block: clamp(2rem, 4vw, 2.75rem); font-size: .9375rem; color: var(--soft); } .footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; } .footer__copy { margin: 0; } .footer__links { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; } .footer__links a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; transition: color .3s var(--ease); } .footer__links a:hover { color: var(--text); } /* ---------- 11 · Buttons ------------------------------------------------- */ .btn { --tx: 0px; --ty: 0px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px; padding: .8rem 1.5rem; border: 1px solid transparent; border-radius: var(--r-pill); font-family: var(--font-body); font-size: .9375rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transform: translate3d(var(--tx), var(--ty), 0); transition: transform .25s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); } .btn__label { display: inline-block; } .btn__icon { display: inline-block; transition: transform .35s var(--ease-spring); } .btn--solid { background: var(--text); color: var(--bg); } .btn--solid:hover { box-shadow: 0 0 0 4px var(--pill); } .btn--outline { border-color: var(--hairline); color: var(--text); } .btn--outline:hover { border-color: var(--soft); background: var(--pill); } .btn--card { min-height: 46px; margin-top: .5rem; padding: .65rem 1.2rem; border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--text); font-size: .9375rem; } .btn--card:hover { background: var(--accent); border-color: var(--accent); color: var(--surface); } .btn--card:hover .btn__icon { transform: translateX(3px); } .btn--card[data-kind='download']:hover .btn__icon { transform: translateY(3px); } .btn--card[data-kind='github']:hover .btn__icon { transform: translate(3px, -3px); } .link-more { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color .3s var(--ease); } .link-more:hover { color: var(--text); } .link-more span { transition: transform .35s var(--ease-spring); } .link-more:hover span { transform: translateX(4px); } /* ---------- 12 · Bewegung ------------------------------------------------ */ /* Ohne JS bleiben alle Inhalte sichtbar — .js kommt aus dem */ .js .reveal { opacity: 0; translate: 0 26px; transition: opacity .75s var(--ease), translate .75s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); } .js .reveal.is-in { opacity: 1; translate: 0 0; } .js .hero__title .word { opacity: 0; translate: 0 .45em; animation: word-in .9s var(--ease-spring) forwards; animation-delay: calc(var(--i, 0) * 60ms + 100ms); } @keyframes word-in { to { opacity: 1; translate: 0 0; } } /* ---------- 13 · Responsive ---------------------------------------------- */ @media (min-width: 768px) { .projects--catalog, .projects--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .about-hero__grid { grid-template-columns: minmax(17rem, .88fr) minmax(0, 1.12fr); } } @media (max-width: 767px) { .projects--catalog .projects__column { display: contents; } .project__image-placeholder { min-height: 280px; } .principles-grid, .about-story__grid, .about-cta__panel { grid-template-columns: 1fr; } .principles-panel { padding: 2rem 1.5rem; border-radius: 1.75rem; } .about-story__title { max-width: 15ch; } .about-cta__panel { align-items: start; } .about-gallery { grid-template-columns: 1fr; } .about-photo { min-height: 0; } .about-photo--wide { aspect-ratio: 16 / 10; } .about-photo--portrait { aspect-ratio: 3 / 4; } .footer__inner { flex-direction: column; align-items: flex-start; } .hero__actions .btn { flex: 1 1 auto; } .clock__ticks { height: 3rem; } .clock__ticks i.is-on { height: 3rem; } } @media (max-width: 480px) { .project--small { min-height: 0; } .project__icon-placeholder { width: 4.25rem; margin: 1.25rem; margin-left: 0; } .project__image-placeholder { min-height: 240px; } .home-mockup, .game-mockup { inset: 1rem 1rem -1px; } } @media (max-width: 420px) { .site-header { padding-top: 4.25rem; } } @media (max-width: 380px) { .nav { padding: .28rem; } .nav__link { min-height: 40px; padding-inline: .35rem; font-size: .75rem; } .language-switch { width: 34px; min-height: 36px; font-size: .6875rem; } } @media (hover: none) { .project:hover { transform: translate3d(0, 0, 0); } .media-badge { opacity: 1; transform: translateY(0); } } /* ---------- 14 · Reduzierte Bewegung ------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } .js .reveal { opacity: 1; translate: none; } .js .hero__title .word { opacity: 1; translate: none; animation: none; } .clock__ticks i { transform: none; } }