/* ========================================================================== Base - Reset, Fluid-Root, Typo-Utilities, Raster ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { /* Der Kern des Fluid-Systems: Root-Groesse skaliert mit dem Viewport, alle Typo-Tokens sind em-basiert und folgen automatisch. */ font-size: var(--root-size); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Die Seitenfarbe gehoert hierhin, nicht nur auf body: sonst blitzen die Raender neben der Buehne und der Ueberscroll-Bereich weiss auf. */ background-color: var(--color-background); } body { margin: 0; /* Die Buehne. Bis 2440px waechst die Seite mit, danach steht sie still und zentriert sich. position: relative, damit die absolut gesetzte Navigation an der Buehne haengt und nicht am Fensterrand. */ max-width: var(--size-stage); margin-inline: auto; position: relative; background-color: var(--color-background); color: var(--color); font-family: var(--font-family); font-size: var(--font-size-body); font-weight: var(--font-weight-medium); line-height: var(--line-height-150); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Ueberschriften auf 1em zurueckstellen. Ohne das multipliziert sich die UA-Vorgabe (h1 = 2em) mit den em-basierten Typo-Tokens und die Display- Groessen fallen doppelt so gross aus wie definiert. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, video, svg { display: block; max-width: 100%; } img, video { height: auto; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; border-radius: 0; } button { cursor: pointer; } ::selection { background: var(--color); color: var(--color-background); } /* Sichtbarer Fokus - die Referenz hat keinen, das ist ein Fehler. */ :focus-visible { outline: 2px solid var(--color); outline-offset: 3px; } /* -------------------------------------------------------------------------- Schriften Satoshi (Fontshare) und JetBrains Mono (Google Fonts) werden im geladen. size-adjust-Fallbacks halten das Layout stabil, solange die Webfonts noch nicht da sind. -------------------------------------------------------------------------- */ @font-face { font-family: "Satoshi Fallback"; src: local("Helvetica Neue"), local("Arial"); size-adjust: 97%; ascent-override: 96%; descent-override: 24%; } /* -------------------------------------------------------------------------- Layout-Utilities -------------------------------------------------------------------------- */ .u-container { width: 100%; padding-inline: var(--grid-margin); margin-inline: auto; } .u-grid { display: grid; grid-template-columns: var(--grid); column-gap: var(--grid-gutter); } .u-section { padding-block: var(--space-section); } .u-line { height: 1px; background: var(--color-line); border: 0; margin: 0; } /* -------------------------------------------------------------------------- Typo-Utilities -------------------------------------------------------------------------- */ .u-display { font-size: var(--font-size-display); line-height: var(--line-height-90); letter-spacing: var(--letter-spacing-tight-04); font-weight: var(--font-weight-medium); } .u-h1 { font-size: var(--font-size-h1); line-height: var(--line-height-90); letter-spacing: var(--letter-spacing-tight-04); font-weight: var(--font-weight-medium); } .u-h2 { font-size: var(--font-size-h2); line-height: var(--line-height-90); letter-spacing: var(--letter-spacing-tight-02); font-weight: var(--font-weight-medium); } .u-h3 { font-size: var(--font-size-h3); line-height: var(--line-height-100); letter-spacing: var(--letter-spacing-tight-01); font-weight: var(--font-weight-medium); } .u-h4 { font-size: var(--font-size-h4); line-height: var(--line-height-108); letter-spacing: var(--letter-spacing-tight-01); font-weight: var(--font-weight-medium); } .u-body { font-size: var(--font-size-body); line-height: var(--line-height-150); color: var(--color-gray-light); } /* Mono ausschliesslich fuer Metadaten. Winzig, versal, weit getrackt. */ .u-mono { font-family: var(--font-family-mono); font-size: var(--font-size-small-mono); letter-spacing: var(--letter-spacing-loose-05); text-transform: uppercase; line-height: var(--line-height-120); font-weight: var(--font-weight-regular); } .u-mono-lg { font-family: var(--font-family-mono); font-size: var(--font-size-large-mono); letter-spacing: var(--letter-spacing-loose-02); text-transform: uppercase; line-height: var(--line-height-120); font-weight: var(--font-weight-regular); } .u-dim { color: var(--color-gray-light); } .u-dark { color: var(--color-gray-dark); } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .u-button { --btn-bg: var(--color); --btn-fg: var(--color-background); display: inline-flex; align-items: center; gap: .75em; padding: .9em 1.6em; background: var(--btn-bg); color: var(--btn-fg); font-size: var(--font-size-caps); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-tight-01); border-radius: 100px; transition: transform var(--duration-fast) var(--ease-smooth), opacity var(--duration-fast) var(--ease-opacity); } .u-button:hover { transform: translateY(-2px); opacity: .88; } .u-button:active { transform: translateY(0); } .u-button--ghost { --btn-bg: transparent; --btn-fg: var(--color); border: 1px solid var(--color-line); } .u-button--ghost:hover { border-color: var(--color); opacity: 1; } /* Textlink mit unterstrichener Linie, die beim Hover durchlaeuft */ .u-link { display: inline-block; position: relative; padding-bottom: .2em; } .u-link::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--duration-base) var(--ease-smooth); } .u-link:hover::after { transform: scaleX(1); } /* -------------------------------------------------------------------------- Reveal - Progressive Enhancement Die Referenz setzt alle Sektionen initial auf opacity:0 und blendet sie per GSAP ein. Ohne laufendes JS bleibt die Seite dort komplett leer. Hier gilt der Startzustand ausschliesslich unter .js, das per Inline- Script im gesetzt wird. Ohne JS steht alles sichtbar da. -------------------------------------------------------------------------- */ .js [data-reveal] { opacity: 0; transform: translateY(1.5em); will-change: opacity, transform; } .js [data-reveal].is-revealed { opacity: 1; transform: none; } /* Ohne GSAP uebernimmt diese Transition das Einblenden. Laeuft GSAP, gewinnen dessen Inline-Styles und die Transition greift nicht. */ .no-gsap [data-reveal] { transition: opacity var(--duration-slow) var(--ease-opacity), transform var(--duration-slow) var(--ease-out-gentle); } /* Nur fuer Screenreader */ .u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .u-skip-link { position: absolute; top: 0; left: 0; z-index: var(--z-loader); padding: 1em 1.5em; background: var(--color); color: var(--color-background); transform: translateY(-120%); } .u-skip-link:focus { transform: translateY(0); } /* -------------------------------------------------------------------------- Bewegung reduzieren -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .js [data-reveal] { opacity: 1; transform: none; } }