/* ========================================================================== JARII · Basis: Schriften, Reset, Seitenraster, Sektionen Gilt für alle Seiten (Landingpage und Rechtsseiten). ========================================================================== */ /* Schriften lokal als WOFF2 (Latin-Subset aus @fontsource-variable 5.3.0, OFL 1.1, Lizenztexte in /assets/fonts/). Kein Google-Fonts-Request: jeder Aufruf eines Font-CDN überträgt die IP-Adresse der Besucherin an Dritte. font-display: swap zeigt sofort die Ersatzschrift statt unsichtbaren Text. */ @font-face { font-family: "Plus Jakarta Sans"; src: url("/assets/fonts/PlusJakartaSans-Variable.woff2") format("woff2-variations"), url("/assets/fonts/PlusJakartaSans-Variable.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-Variable.woff2") format("woff2-variations"), url("/assets/fonts/Inter-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- Reset (bewusst klein: nur, was Browser uneinheitlich machen) --------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* Sanftes Springen zu #liste aus Header und Sticky-Bar. Bei reduzierter Bewegung unten wieder aus. */ scroll-behavior: smooth; } /* Aufruf mit #anker: Den ersten Sprung des Browsers nicht animieren (early.js setzt anker-start, main.js nimmt die Klasse nach dem Sprung zurück). Agent P, 26.10.2026: Seit beim Laden keine ScrollTrigger- Refreshes mehr laufen, bricht nichts mehr die weiche Fahrt des Browsers ab; gemessen fuhr die Seite bei /#liste sichtbar über alle Sektionen und landete 60–90 px neben dem Ziel. */ html.anker-start { scroll-behavior: auto; } body { margin: 0; min-height: 100vh; background-color: var(--surface-100); color: var(--ink); font-family: var(--font-text); font-size: 1rem; line-height: 1.5; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; } ol, ul { padding: 0; } img, svg, video { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } /* Überschriften ausbalanciert, Absätze ohne Hurenkinder */ h1, h2, h3, .zweitakt { text-wrap: balance; } p, li, dd { text-wrap: pretty; } a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } /* Fließtext-Links tragen die Akzentfarbe der Fläche (violet hell, lilac auf navy) */ .prose a, a.link { color: var(--accent); font-weight: 500; } /* Fokus überall gleich: 2 px Ring in --focus mit 2 px Abstand (Markenbuch S. 15). --focus wechselt auf navy-Flächen automatisch auf on-navy-accent (tokens.css). */ :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* Programmatisch fokussierte Ziele (Skip-Link -> main) ohne Ring, sie sind kein Bedienelement. */ [tabindex="-1"]:focus { outline: none; } /* --- Hilfsklassen ------------------------------------------------------- */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* SVG-Sprite ist nur Definitionsquelle, nie sichtbar */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* Icons aus dem Sprite: Größe über em, Farbe über currentColor */ .icon { display: inline-block; width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Skip-Link: erstes fokussierbares Element, sichtbar erst mit Fokus */ .skip-link { position: absolute; left: var(--space-4); top: var(--space-4); z-index: 1000; padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill); background: var(--navy); color: var(--on-navy); font-weight: 600; text-decoration: none; transform: translateY(-200%); --focus: var(--on-navy-accent); } .skip-link:focus { transform: none; } /* --- Raster ------------------------------------------------------------- */ .wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .wrap-read { width: 100%; max-width: calc(var(--read) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } /* Sektionen: 48 px mobil (space-12) bis 96 px Desktop. scroll-margin-top hält Sprungziele unter dem fixierten Mini-Header frei. */ .section { padding-block: clamp(48px, 8vw, 96px); scroll-margin-top: var(--head-h); } /* Alle Sprungziele mit id bekommen denselben Abstand, auch wenn eine Sektion die Klasse .section nicht trägt (z. B. der gepinnte Hero von Agent B). */ [id] { scroll-margin-top: var(--head-h); } /* Lesetext nicht breiter als ~64 Zeichen */ .measure { max-width: 64ch; } /* Zweitakt-Headline: zwei kurze Sätze, je eigene Zeile, zweite in --accent. Muster:

Your night.
Your terms.

*/ .zweitakt { color: var(--text); } /* Abstand zwischen Headline und folgendem Text im Rhythmus des Rasters */ .stack > * + * { margin-top: var(--space-6); } .stack-sm > * + * { margin-top: var(--space-3); } .muted { color: var(--text-muted); } /* --- Rechtsseiten (danke, impressum, datenschutz) ------------------------ */ .page-static main { padding-top: calc(var(--head-h) + var(--space-12)); padding-bottom: var(--space-16); } .prose h1 { margin-bottom: var(--space-8); } .prose h2 { margin-top: var(--space-12); margin-bottom: var(--space-4); } .prose h3 { margin-top: var(--space-8); margin-bottom: var(--space-3); } .prose p, .prose ul, .prose ol, .prose dl { margin-bottom: var(--space-4); max-width: 68ch; } .prose ul, .prose ol { padding-left: 1.25em; } .prose li + li { margin-top: var(--space-2); } .prose dt { font-weight: 600; margin-top: var(--space-3); } .prose dd { margin-left: 0; } /* E-Mail-Links stehen meist allein (Impressum): Zielhöhe mindestens 24 px (WCAG 2.5.8) */ .prose a[href^="mailto:"] { display: inline-block; min-height: 24px; padding-block: 2px; } .back-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; margin-bottom: var(--space-6); color: var(--accent); font-weight: 600; text-decoration: none; } .back-link:hover { text-decoration: underline; } .back-link .icon { transform: rotate(180deg); } /* --- Reduzierte Bewegung ------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }