/* ── stil.css — Cursor, Hintergrund-Muster, Scroll-Gefühl ──── Gilt für alle Designs. Gesteuert über . Jedes Design liefert dazu --vorder (Textfarbe) und --akzent. ──────────────────────────────────────────────────────────── */ /* ── Hintergrund-Muster ──────────────────────────────────── */ .muster, .muster-wolken { position: fixed; inset: 0; pointer-events: none; z-index: 1; } .muster { z-index: 9999; } /* keins */ html[data-muster='keins'] .muster, html[data-muster='keins'] .muster-wolken { display: none; } /* Korn — feines Rauschen über allem */ html[data-muster='korn'] .muster { opacity: 0.035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Raster — feine Linien wie Millimeterpapier */ html[data-muster='raster'] .muster { z-index: 0; opacity: 0.5; background-image: repeating-linear-gradient( to right, color-mix(in srgb, var(--vorder) 7%, transparent) 0 1px, transparent 1px 84px ), repeating-linear-gradient( to bottom, color-mix(in srgb, var(--vorder) 7%, transparent) 0 1px, transparent 1px 84px ); } /* Punkte */ html[data-muster='punkte'] .muster { z-index: 0; opacity: 0.6; background-image: radial-gradient( color-mix(in srgb, var(--vorder) 16%, transparent) 1px, transparent 1.2px ); background-size: 26px 26px; } /* Blaupause — grobes Raster + feines Unterraster */ html[data-muster='blaupause'] .muster { z-index: 0; opacity: 0.7; background-image: repeating-linear-gradient( to right, color-mix(in srgb, var(--akzent) 16%, transparent) 0 1px, transparent 1px 120px ), repeating-linear-gradient( to bottom, color-mix(in srgb, var(--akzent) 16%, transparent) 0 1px, transparent 1px 120px ), repeating-linear-gradient( to right, color-mix(in srgb, var(--akzent) 7%, transparent) 0 1px, transparent 1px 24px ), repeating-linear-gradient( to bottom, color-mix(in srgb, var(--akzent) 7%, transparent) 0 1px, transparent 1px 24px ); } /* Wolken — zwei grosse weiche Farbflecken, die langsam ziehen */ .muster-wolken { display: none; overflow: hidden; } html[data-muster='wolken'] .muster-wolken { display: block; z-index: 0; } /* Zwei weiche Farbflecken, die endlos ziehen. Gemessen (4x gedrosselte CPU, Ruhezustand, gleiche Seite, nur das Muster umgeschaltet): 60vw + filter: blur(90px) → 38 fps (so war es ursprünglich) 90vw + radialer Verlauf → 32 fps (schlechter! zu gross geraten) 55vw + radialer Verlauf → 50 fps ← das hier gar keine Wolken → 61 fps Zwei Lehren: (1) der Verlauf ist billiger als der Weichzeichner, (2) die Kosten hängen fast nur an der FLÄCHE — nicht am scale, nicht am Auslagern auf die Grafikkarte (beides gemessen, brachte je 1 fps). Wer hier die Breite hochdreht, zahlt sofort. Gemessen wurde ohne echte Grafikkarte; auf richtigen Geräten dürfte der Abstand kleiner sein — die Rangfolge bleibt aber. */ html[data-muster='wolken'] .muster-wolken::before, html[data-muster='wolken'] .muster-wolken::after { content: ''; position: absolute; width: 55vw; aspect-ratio: 1; opacity: 0.55; will-change: transform; } html[data-muster='wolken'] .muster-wolken::before { top: -14%; left: -12%; background: radial-gradient(closest-side circle, color-mix(in srgb, var(--akzent) 45%, transparent) 0%, color-mix(in srgb, var(--akzent) 20%, transparent) 45%, transparent 72%); animation: wolke-a 26s ease-in-out infinite alternate; } html[data-muster='wolken'] .muster-wolken::after { bottom: -20%; right: -14%; background: radial-gradient(closest-side circle, color-mix(in srgb, var(--akzent-hell, var(--akzent)) 35%, transparent) 0%, color-mix(in srgb, var(--akzent-hell, var(--akzent)) 16%, transparent) 45%, transparent 72%); animation: wolke-b 34s ease-in-out infinite alternate; } @keyframes wolke-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(22vw, 12vh, 0) scale(1.25); } } @keyframes wolke-b { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-18vw, -10vh, 0) scale(1.15); } } /* Inhalt muss über den flächigen Mustern liegen */ html:not([data-muster='korn']) body > main, html:not([data-muster='korn']) body > footer { position: relative; z-index: 2; } /* Kopfzeile NICHT anfassen ausser beim Stapeln: Hier stand früher position:relative — diese Regel ist spezifischer als `.kopf` und hat damit die feste Kopfzeile ALLER Designs still ausgehebelt (sie scrollte weg und lag unter dem Inhalt). Das Design bestimmt `position` selbst; wir sorgen nur dafür, dass sie oben liegt — sonst verschwindet das Klapp-Menü hinter dem Titelbild. */ html:not([data-muster='korn']) body > header { z-index: 400; } /* ── Fokus — für alle, die mit der Tastatur bedienen ────── Gilt für jedes Design. Nur bei Tastatur sichtbar (:focus-visible), die Maus sieht davon nichts. Muss auch dann da sein, wenn der eigene Cursor läuft — sonst ist die Seite unbedienbar. */ :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 2px; } /* Auf Bildern/dunklem Grund braucht der Rahmen einen Gegenhalt */ .werk:focus-visible, .fund:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--hinter, #000) 70%, transparent); } /* Sprungmarke zum Inhalt — erste Station für Tastatur-Nutzer */ .zum-inhalt { position: fixed; top: 0; left: 50%; translate: -50% -120%; z-index: 10001; padding: 0.75rem 1.25rem; background: var(--akzent); color: var(--hinter, #000); font-size: 0.8rem; letter-spacing: 0.08em; border-radius: 0 0 6px 6px; transition: translate 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .zum-inhalt:focus { translate: -50% 0; } /* ── Menü auf dem Handy ─────────────────────────────────── Vorher war das Menü unter 860px einfach weg. Jetzt: Klapp-Menü. Ohne JS bleiben die Links sichtbar (umbrechend) — nie unerreichbar. */ .kopf-knopf { display: none; width: 44px; height: 44px; margin: -10px -10px -10px 0; padding: 0; position: relative; z-index: 2; color: inherit; } .kopf-knopf span, .kopf-knopf span::before, .kopf-knopf span::after { position: absolute; left: 50%; width: 20px; height: 1.5px; background: currentColor; translate: -50% 0; } .kopf-knopf span { top: 50%; transition: background-color 0.2s; } .kopf-knopf span::before, .kopf-knopf span::after { content: ''; left: 0; translate: 0 0; transition: translate 0.24s cubic-bezier(0.16, 1, 0.3, 1), rotate 0.24s cubic-bezier(0.16, 1, 0.3, 1); } .kopf-knopf span::before { translate: 0 -6px; } .kopf-knopf span::after { translate: 0 6px; } .kopf-knopf[aria-expanded='true'] span { background: transparent; } .kopf-knopf[aria-expanded='true'] span::before { translate: 0 0; rotate: 45deg; } .kopf-knopf[aria-expanded='true'] span::after { translate: 0 0; rotate: -45deg; } @media (max-width: 860px) { .kopf-knopf { display: block; } html:not(.js) .kopf-knopf { display: none; } /* Mit JS: als Tafel, die aufklappt. ACHTUNG Falle: `inset: 0` geht hier NICHT. Designs wie „papier" haben backdrop-filter auf der Kopfzeile — ein Filter macht das Element zum Bezugsrahmen für alles fest Positionierte darin. Die Tafel wäre dann nur so hoch wie die Kopfzeile (~74px) und die Links lägen über dem Bildschirmrand. Darum feste Bildschirmmasse statt inset. Die Kopfzeile sitzt in allen Designs oben links, also stimmt der Nullpunkt. */ html.js .kopf-menu { position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; font-size: 1.1rem; background: color-mix(in srgb, var(--hinter, #000) 96%, transparent); opacity: 0; visibility: hidden; translate: 0 -8px; transition: opacity 0.24s ease-out, translate 0.24s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.24s; } html.js .kopf-menu.offen { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; } html.js .kopf-menu a { padding: 0.5rem 1rem; } /* Ohne JS: Links bleiben da, brechen einfach um */ html:not(.js) .kopf-menu { flex-wrap: wrap; gap: 1rem; justify-content: flex-end; } html.js body.menu-offen { overflow: hidden; } } @media (prefers-reduced-motion: reduce) { html.js .kopf-menu, .kopf-knopf span::before, .kopf-knopf span::after, .zum-inhalt { transition-duration: 0.01ms; } } /* ── Cursor ──────────────────────────────────────────────── */ body.hat-cursor, body.hat-cursor a, body.hat-cursor button, body.hat-cursor .werk, body.hat-cursor .fund { cursor: none; } .cur-punkt, .cur-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 10000; translate: -100px -100px; will-change: translate; } .cur-punkt { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--akzent); } .cur-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid color-mix(in srgb, var(--vorder) 45%, transparent); border-radius: 50%; display: grid; place-items: center; transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1), height 0.32s cubic-bezier(0.16, 1, 0.3, 1), margin 0.32s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.32s, border-color 0.32s; } .cur-ring.aktiv { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 14%, transparent); } .cur-ring.mit-text { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--akzent); border-color: var(--akzent); } .cur-text { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hinter, #000); opacity: 0; transition: opacity 0.25s; white-space: nowrap; } .cur-ring.mit-text .cur-text { opacity: 1; } /* Kein eigener Cursor auf Touch-Geräten */ @media (pointer: coarse) { .cur-punkt, .cur-ring { display: none; } body.hat-cursor, body.hat-cursor a, body.hat-cursor button { cursor: auto; } } /* ── Scroll-Gefühl ───────────────────────────────────────── */ html.scroll-einrasten { scroll-snap-type: y proximity; } html.scroll-einrasten .buehne, html.scroll-einrasten .abschnitt { scroll-snap-align: start; scroll-snap-stop: normal; } @media (prefers-reduced-motion: reduce) { html.scroll-einrasten { scroll-snap-type: none; } .muster-wolken::before, .muster-wolken::after { animation: none !important; } .cur-punkt, .cur-ring { display: none; } } /* Der Fuss-Verweis auf die Rechtsseiten steht auf ALLEN Seiten (Start, Shop). Er soll dort unauffaellig sein, aber auffindbar — nicht versteckt. */ .fuss-recht { display: block; margin-top: 0.35rem; font-size: 0.78rem; opacity: 0.7; } .fuss-recht a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; } .fuss-recht a:hover { opacity: 1; }