/* ============================================================================= automatisierbar, Design-System (Entwurf, 19.08.2026) Grundlage: Entscheid 18.08. "Dunkles Theme, weg vom grünstichigen Terminal-Schwarz, hin zu neutralem Graphit, #15C97A als einziger Akzent." Aufbau der Datei (in dieser Reihenfolge laden): 0 Schrift selbst gehostet, variabel, wird auch wirklich angewendet 1 Tokens Flächen, Tinten, Akzent, Typo, Raster, Bewegung, Texturen 2 Reset und Basis Elementebene 3 Bausteine Fläche, Karte, Knopf, Feld, FAQ, Statistik, Eyebrow, Trenner 4 Texturen Karo-Raster, Rauschen 5 Bewegung Reveal, prefers-reduced-motion Musterseite: patterns.html (zeigt jeden Baustein und die Kontrast-Tabelle). Drei Regeln, die überall gelten und nie aufgeweicht werden: 1. Flächen werden nach vorne heller. Seite am dunkelsten, Karte eine Stufe heller, Overlay am hellsten. Getrennt wird über Ton plus Haarlinie, nie über Schatten. Keine Ausnahme. 2. Grün ist der einzige Akzent und kommt nur an fünf Stellen vor: Eyebrow-Punkt, Headline-Hervorhebung, Hover-Pfeil, Icon, der eine CTA. 3. Jede Text-auf-Fläche-Kombination erfüllt WCAG AA. Werte siehe patterns.html, Abschnitt "Kontrast". ========================================================================== */ /* ============================================================================= 0 SCHRIFT Inter, variabel (Achsen opsz 14 bis 32, wght 100 bis 900), auf latin und latin-ext untersetzt: 75 KB statt 352 KB. SIL Open Font License 1.1. Selbst gehostet, keine Verbindung zu Google. Warum Inter: echte tabellarische Ziffern (tnum), eine optische Grössenachse, die grosse Zeilen enger und kleine Zeilen offener zeichnet, und ein Grauwert, der auf dunklem Grund nicht zuläuft. Eine Datei deckt alle Gewichte ab. In der Host-Seite gehört in den : ========================================================================== */ @font-face { font-family: "Inter var"; src: url("fonts/Inter-var-latin.woff2") format("woff2"); font-weight: 100 900; /* variable Spanne, kein zweiter Download */ font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================================= 1 TOKENS ========================================================================== */ :root { color-scheme: dark; /* --------------------------------------------------------------------- 1.1 Flächen: Graphit-Rampe Alle vier Flächen: Farbton 220°, Sättigung 8%. Nur die Helligkeit wandert, in gleichmässigen Schritten von 4 Prozentpunkten: 7% → 11% → 15% → 19%. Damit ist keine Fläche stärker getönt als ihre Nachbarin. Genau das unterscheidet ein absichtlich gebautes Dunkel von einem, das nur leicht falsch aussieht. Der alte Stand (#0C1410, #13201A) hatte den Grünstich in der Fläche selbst; er ist hier komplett raus. --------------------------------------------------------------------- */ --bg-page: #101113; /* hsl(220 8% 7%) Grund. Nichts ist dunkler. */ --bg-card: #1A1B1E; /* hsl(220 8% 11%) Karte, Sektionsband, Panel */ --bg-raised: #232529; /* hsl(220 8% 15%) Eingabefeld, Karte in Karte */ --bg-overlay: #2D2F34; /* hsl(220 8% 19%) Overlay, Menü, Tooltip, Header */ /* Haarlinien. Die zweite Hälfte der Trennung, überall dieselbe. */ --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.14); /* --------------------------------------------------------------------- 1.2 Tinte: drei Töne, drei Rollen, kein reines Weiss --------------------------------------------------------------------- */ --ink-strong: #F4F4F6; /* Überschriften, Zahlen, aktive Zustände */ --ink: #C1C5CD; /* Fliesstext. Der Ton, der am meisten gelesen wird */ --ink-muted: #969CA6; /* Label, Meta, Hilfetext. Erfüllt weiterhin AA. */ --on-accent: #0A0D12; /* Text auf grüner Füllung */ /* --------------------------------------------------------------------- 1.3 Akzent: einer, mit Aufgabe --------------------------------------------------------------------- */ --accent: #15C97A; --accent-hi: #30E892; /* nur als Hover-Füllung */ --accent-wash: rgba(21, 201, 122, 0.10); /* Icon-Feld, Matt-Verlauf */ --accent-line: rgba(21, 201, 122, 0.28); /* Kante an Akzentflächen */ --focus: var(--accent); /* --------------------------------------------------------------------- 1.4 Typografie --------------------------------------------------------------------- */ --font-sans: "Inter var", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Grössen. Fliesstext startet bei 1.125rem, weil dunkler Grund die Strichstärke optisch frisst. Kleiner wird nur Meta-Text. */ --text-2xs: 0.75rem; /* 12px Eyebrow, Tabellenkopf */ --text-xs: 0.8125rem; /* 13px Hilfetext, Fussnote */ --text-sm: 0.9375rem; /* 15px Label, Knopf, Meta */ --text-body: 1.125rem; /* 18px Fliesstext, Untergrenze auf dunkel */ --text-lead: clamp(1.25rem, 1.13rem + 0.5vw, 1.4375rem); --text-h3: clamp(1.25rem, 1.16rem + 0.4vw, 1.5rem); --text-h2: clamp(1.875rem, 1.40rem + 2.0vw, 2.75rem); --text-h1: clamp(2.375rem, 1.60rem + 3.3vw, 3.75rem); --text-display: clamp(2.75rem, 1.50rem + 5.4vw, 4.75rem); /* Zeilenhöhen, einheitenlos, werden mit wachsender Grösse enger. */ --lh-display: 1.05; --lh-h1: 1.08; --lh-h2: 1.10; --lh-h3: 1.25; --lh-lead: 1.50; --lh-body: 1.65; --lh-small: 1.60; /* Laufweite: enger, je grösser. Versalien laufen auf. */ --ls-display: -0.03em; --ls-h1: -0.03em; --ls-h2: -0.03em; --ls-h3: -0.02em; --ls-body: 0; --ls-caps: 0.08em; /* Gewichte. Überschriften stehen auf 500, nicht auf fett: auf dunklem Grund wirkt 700 in grossen Graden fleckig, 500 wirkt gebaut. */ --w-body: 400; --w-heading: 500; --w-emph: 600; /* klarer Abstand zu 400, damit Betonung als Wahl liest */ /* Textbreite */ --measure: 65ch; --measure-narrow: 52ch; /* --------------------------------------------------------------------- 1.5 Raster: ein Maximum, ein Innenabstand, überall Damit fluchten die Kanten aller Abschnitte vertikal. --------------------------------------------------------------------- */ --page-max: 1120px; --page-px: clamp(20px, 5vw, 48px); --section-y: clamp(72px, 9vw, 128px); /* Abstände, 4er-Raster */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* Radien */ --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px; /* --------------------------------------------------------------------- 1.6 Bewegung --------------------------------------------------------------------- */ --dur-hover: 300ms; /* Karte, Knopf, Pfeil */ --dur-reveal: 700ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --reveal-shift: 28px; --reveal-stagger: 120ms; /* --------------------------------------------------------------------- 1.7 Texturen Rauschen: feTurbulence als data-URI, gegen Verlaufs-Banding auf grossen dunklen Flächen. Wird immer bei 5% Deckkraft eingesetzt, nie stärker. --------------------------------------------------------------------- */ --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); --noise-opacity: 0.05; --grid-size: 30px; --grid-color: rgba(255, 255, 255, 0.05); } /* ============================================================================= 2 RESET UND BASIS ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; font-optical-sizing: auto; /* nutzt die opsz-Achse von Inter */ } body { font-family: var(--font-sans); font-size: var(--text-body); font-weight: var(--w-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--ink); background-color: var(--bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant-ligatures: contextual common-ligatures; overflow-x: hidden; } /* Der Fehler, den die Referenzseite macht: Schrift laden und nie anwenden. Deshalb erben Formularelemente hier ausdrücklich. */ button, input, select, textarea { font: inherit; color: inherit; } img, svg, video, canvas { display: block; max-width: 100%; } svg { fill: none; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { color: var(--ink-strong); font-weight: var(--w-heading); text-wrap: balance; } h1 { font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); } h2 { font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); } h3 { font-size: var(--text-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); } h4 { font-size: var(--text-body); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); } p { text-wrap: pretty; } strong, b { font-weight: var(--w-emph); color: var(--ink-strong); } small { font-size: var(--text-xs); line-height: var(--lh-small); } /* Alle Zahlen laufen tabellarisch: Preise, Statistiken, Tabellen, Zeiten. Im Fliesstext bleiben die proportionalen Ziffern. */ .num, .stat__value, .table td, .table th, time, [data-num] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } ::selection { background: rgba(21, 201, 122, 0.28); color: var(--ink-strong); } /* ----------------------------------------------------------------------- 2.1 Fokus: sichtbar, in Akzentfarbe, auf allem Fokussierbaren. Der Versatz von 3px legt einen dunklen Spalt zwischen Element und Ring, dadurch bleibt der Ring auch auf der grünen Füllung des Haupt-CTA lesbar. Kontrast Ring gegen Fläche: 6.17:1 bis 8.70:1, nötig sind 3:1. ----------------------------------------------------------------------- */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } :where(a, button, summary):focus:not(:focus-visible) { outline: none; } /* Nur für Screenreader sichtbar, etwa Tabellen-Beschriftungen. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ============================================================================= 3 BAUSTEINE ========================================================================== */ /* ----------------------------------------------------------------------- 3.1 Raster ----------------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-px); } .section { padding-block: var(--section-y); position: relative; } .section--band { background-color: var(--bg-card); } /* eine Stufe heller, nie dunkler */ .measure { max-width: var(--measure); } .measure-narrow { max-width: var(--measure-narrow); } /* Überschrift an den Block darunter binden: oben viel Luft, unten wenig. */ .stack > * + * { margin-top: var(--space-4); } .stack h2, .stack h3 { margin-top: var(--space-7); margin-bottom: 0; } .stack > h2 + *, .stack > h3 + * { margin-top: var(--space-3); } .lead { font-size: var(--text-lead); line-height: var(--lh-lead); color: var(--ink); max-width: var(--measure-narrow); } .prose { max-width: var(--measure); } .prose p { font-size: var(--text-body); line-height: var(--lh-body); color: var(--ink); } .prose p + p { margin-top: 1.1em; } /* ----------------------------------------------------------------------- 3.2 Eyebrow: 8px Akzentpunkt plus Versalien-Label ----------------------------------------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: 0.625rem; font-size: var(--text-2xs); font-weight: var(--w-emph); text-transform: uppercase; letter-spacing: var(--ls-caps); line-height: 1; color: var(--ink-muted); } .eyebrow::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background-color: var(--accent); } /* ----------------------------------------------------------------------- 3.3 Headline-Hervorhebung Kein grüner Text. Stattdessen ein 3px-Balken links und ein weiches waagrechtes Leuchten hinter der Zeile. Die Zeile bleibt in --ink-strong und damit bei 17:1, statt auf den Akzentwert abzusinken. ----------------------------------------------------------------------- */ .mark { position: relative; display: inline-block; isolation: isolate; padding-left: 0.5em; } .mark::before { content: ""; position: absolute; left: 0; top: 0.12em; bottom: 0.14em; width: 3px; border-radius: 2px; background-color: var(--accent); } .mark::after { content: ""; position: absolute; z-index: -1; left: -0.15em; right: -0.35em; top: -0.12em; bottom: -0.10em; background: linear-gradient(90deg, rgba(21, 201, 122, 0.24) 0%, rgba(21, 201, 122, 0.07) 45%, rgba(21, 201, 122, 0) 82%); filter: blur(16px); pointer-events: none; } /* ----------------------------------------------------------------------- 3.4 Sektions-Trenner: 60% breit, beidseitig ausblendend ----------------------------------------------------------------------- */ .rule { border: 0; height: 1px; width: 60%; margin-inline: auto; margin-block: 0; /* liegt zwischen zwei .section, die ihre Luft schon mitbringen */ background: linear-gradient(90deg, transparent 0%, var(--line-strong) 22%, var(--line-strong) 78%, transparent 100%); } /* ----------------------------------------------------------------------- 3.5 Fläche und Karte Zwei überlagerte Radial-Verläufe machen die Fläche matt statt flach: Akzent oben links bei 10%, Weiss unten rechts bei 4%, darunter --bg-card (das ist exakt die Stufe "Grund plus 5% Weiss"). Dazu die Haarlinie, weil die Schichtung überall gleich getrennt wird. Kein Schatten. ----------------------------------------------------------------------- */ .surface { position: relative; isolation: isolate; border: 1px solid var(--line); border-radius: var(--r-lg); background-image: radial-gradient(120% 100% at 0% 0%, var(--accent-wash) 0%, transparent 55%), radial-gradient(100% 100% at 100% 100%, rgba(255, 255, 255, 0.04) 0%, transparent 60%); background-color: var(--bg-card); } .surface--raised { background-color: var(--bg-raised); } .surface--overlay { background-color: var(--bg-overlay); border-color: var(--line-strong); } /* Sonderfall Header/Overlay über scrollendem Inhalt */ .surface--glass { background-color: rgba(45, 47, 52, 0.72); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); } .card { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--r-lg); background-color: var(--bg-card); background-image: radial-gradient(120% 100% at 0% 0%, var(--accent-wash) 0%, transparent 55%), radial-gradient(100% 100% at 100% 100%, rgba(255, 255, 255, 0.04) 0%, transparent 60%); transition: transform var(--dur-hover) ease; will-change: transform; } /* Hover: 2px anheben, 300ms, ease. Sonst nichts. Kein Scale, kein Leuchten, kein Farbwechsel. Die Zurückhaltung ist der ganze Effekt. */ .card:hover { transform: translateY(-2px); } .card__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); background-color: var(--accent-wash); border: 1px solid var(--accent-line); color: var(--accent); } .card__icon svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .card h3 { margin-top: var(--space-1); } .card p { color: var(--ink); font-size: var(--text-body); line-height: var(--lh-body); } .card__meta { font-size: var(--text-sm); color: var(--ink-muted); } /* ----------------------------------------------------------------------- 3.6 Knöpfe Drei Stufen. Genau eine trägt den Akzent. ----------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.375rem; border: 1px solid transparent; border-radius: var(--r-pill); background: none; font-size: var(--text-sm); font-weight: var(--w-emph); line-height: 1; letter-spacing: 0; cursor: pointer; white-space: nowrap; transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease, color var(--dur-hover) ease; } .btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .btn--primary { background-color: var(--accent); color: var(--on-accent); } .btn--primary:hover { background-color: var(--accent-hi); } .btn--secondary { border-color: var(--line-strong); color: var(--ink-strong); } .btn--secondary:hover { border-color: rgba(255, 255, 255, 0.26); background-color: rgba(255, 255, 255, 0.04); } .btn--quiet { padding-inline: 0.25rem; color: var(--ink); } .btn--quiet:hover { color: var(--ink-strong); } .btn--quiet svg { color: var(--accent); transition: transform var(--dur-hover) ease; } .btn--quiet:hover svg { transform: translateX(3px); } .btn--sm { padding: 0.625rem 1rem; font-size: var(--text-xs); } /* Inaktiv. WCAG 1.4.3 nimmt inaktive Bedienelemente vom Kontrastwert aus, deshalb ist dieser Zustand der einzige unter AA. Bewusst, dokumentiert. */ .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.42; cursor: not-allowed; pointer-events: none; } /* Geteilter CTA: Label-Pille plus separater Akzentkreis. Beim Hover wandert nur der Kreis, 3px. */ .cta { display: inline-flex; align-items: center; gap: 0.625rem; border-radius: var(--r-pill); } .cta__label { padding: 0.8125rem 1.25rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--ink-strong); font-size: var(--text-sm); font-weight: var(--w-emph); line-height: 1; transition: border-color var(--dur-hover) ease; } .cta__dot { display: grid; place-items: center; width: 2.875rem; height: 2.875rem; border-radius: 50%; background-color: var(--accent); color: var(--on-accent); transition: transform var(--dur-hover) ease; } .cta__dot svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .cta:hover .cta__dot { transform: translateX(3px); } .cta:hover .cta__label { border-color: rgba(255, 255, 255, 0.26); } /* ----------------------------------------------------------------------- 3.7 Formularfeld Das Feld liegt immer eine Stufe über seiner Trägerfläche. ----------------------------------------------------------------------- */ .field { display: grid; gap: var(--space-2); max-width: 26rem; } .field__label { font-size: var(--text-sm); font-weight: var(--w-emph); color: var(--ink); line-height: 1.3; } .input { width: 100%; padding: 0.8125rem 1rem; font-size: var(--text-body); line-height: 1.4; color: var(--ink-strong); background-color: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: var(--r-sm); transition: border-color var(--dur-hover) ease, background-color var(--dur-hover) ease; } .input--on-page { background-color: var(--bg-card); } /* Feld direkt auf dem Grund */ .input::placeholder { color: var(--ink-muted); opacity: 1; } .input:hover { border-color: rgba(255, 255, 255, 0.22); } textarea.input { min-height: 7rem; resize: vertical; line-height: var(--lh-body); } .field__hint { font-size: var(--text-xs); color: var(--ink-muted); line-height: var(--lh-small); } /* ----------------------------------------------------------------------- 3.8 FAQ-Aufklapper ----------------------------------------------------------------------- */ .faq { border-top: 1px solid var(--line); max-width: var(--measure); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-5); color: var(--ink-strong); font-size: var(--text-body); font-weight: var(--w-heading); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq__sign { position: relative; flex: none; width: 16px; height: 16px; } .faq__sign::before, .faq__sign::after { content: ""; position: absolute; background-color: var(--accent); border-radius: 1px; transition: transform var(--dur-hover) ease, opacity var(--dur-hover) ease; } .faq__sign::before { top: 7px; left: 0; width: 16px; height: 2px; } .faq__sign::after { left: 7px; top: 0; width: 2px; height: 16px; } .faq details[open] .faq__sign::after { transform: rotate(90deg); opacity: 0; } .faq__answer { padding-bottom: var(--space-5); color: var(--ink); font-size: var(--text-body); line-height: var(--lh-body); max-width: var(--measure-narrow); } /* ----------------------------------------------------------------------- 3.9 Statistik-Block Die Fugen sind 1px Haarlinie, die durchscheint. Kein Kasten pro Zahl. Jede Zahl trägt ein Urteil, nie steht sie allein. ----------------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background-color: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .stat { background-color: var(--bg-card); padding: var(--space-6) var(--space-5); } .stat__value { display: block; font-size: clamp(2rem, 1.4rem + 2.4vw, 2.875rem); font-weight: var(--w-heading); line-height: 1.05; letter-spacing: var(--ls-display); color: var(--ink-strong); font-variant-numeric: tabular-nums; } .stat__unit { font-size: 0.5em; color: var(--ink-muted); letter-spacing: -0.01em; } .stat__label { display: block; margin-top: var(--space-3); font-size: var(--text-sm); line-height: var(--lh-small); color: var(--ink-muted); } /* Tabelle mit tabellarischen Ziffern */ .table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .table th, .table td { text-align: left; padding: 0.875rem 1rem; border-bottom: 1px solid var(--line); } .table th { font-size: var(--text-2xs); font-weight: var(--w-emph); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--ink-muted); } .table td { font-size: var(--text-sm); color: var(--ink); } .table td:first-child { color: var(--ink-strong); } .table .n { text-align: right; } /* Pille für Status und Herkunft */ .pill { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: var(--text-2xs); font-weight: var(--w-emph); letter-spacing: 0.02em; color: var(--ink-muted); line-height: 1.5; } .pill--accent { border-color: var(--accent-line); color: var(--accent); } /* ============================================================================= 4 TEXTUREN ========================================================================== */ /* Karo-Raster, 30px, 5% Weiss, radial ausmaskiert, damit es zum Rand verschwindet statt an einer Kante abzureissen. */ .texture-grid { position: relative; isolation: isolate; } .texture-grid > * { position: relative; z-index: 1; } .texture-grid::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(to right, var(--grid-color) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size); -webkit-mask-image: radial-gradient(115% 85% at 50% 0%, #000 8%, rgba(0,0,0,0.55) 45%, transparent 78%); mask-image: radial-gradient(115% 85% at 50% 0%, #000 8%, rgba(0,0,0,0.55) 45%, transparent 78%); } /* Feines Rauschen über Glasflächen, 5%. Bricht das Banding in den Verläufen. */ .noise { position: relative; isolation: isolate; } .noise > * { position: relative; z-index: 1; } .noise::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background-image: var(--noise); opacity: var(--noise-opacity); } /* ============================================================================= 5 BEWEGUNG Reveal beim Scrollen. Die Klasse js-reveal setzt das JS, damit der Inhalt ohne JavaScript sichtbar bleibt statt zu verschwinden. Nie [data-reveal] und .card auf dasselbe Element setzen, beide arbeiten mit transform. Wrapper aussen, Karte innen. ========================================================================== */ .js-reveal [data-reveal] { opacity: 0; transform: translateY(var(--reveal-shift)); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--reveal-i, 0) * var(--reveal-stagger)); } .js-reveal [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }