/* ============================================================ NeoTrack — components.css Navigation, Buttons, Preloader, Karten, Labels ============================================================ */ /* ---------- Preloader ---------- */ .preloader { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: grid; place-items: center; /* **Der Platz der Bildlaufleiste, solange sie weg ist.** Während des Ladens steht `overflow: hidden`; kommt die Leiste danach zurück, wird das Fenster schmaler und alles Mittige rückt um die halbe Leistenbreite zur Seite — gemessen sprang die Wortmarke dabei um 5 Pixel nach links. `--leiste` misst das Skript am Anfang des ``; hier wird der Streifen freigehalten, bis die echte Leiste ihn einnimmt. Beides endet im selben Bild, in dem `is-loading` fällt. */ padding-right: var(--leiste, 0px); } body:not(.is-loading) .preloader { padding-right: 0; } .preloader__inner { /* **Dieselbe Rechnung wie im Hero.** `.hero__logo-source` ist `min(90vw, 1500px, 165vh)` breit; steht hier etwas anderes, springt die Wortmarke in dem Moment, in dem der Vorspann aufgeht. Die 165vh halten das Wort auf flachen Fenstern kurz genug. */ width: min(90vw, 1500px, 165vh); display: grid; justify-items: center; position: relative; z-index: 2; } .preloader__wortmarke { display: block; width: 100%; height: auto; max-width: none; /* Als eingebettetes SVG ohne Höhenangabe braucht es das Verhältnis, sonst fällt der Kasten auf die Vorgabehöhe zusammen. */ aspect-ratio: 455 / 88; } /* Jeder Buchstabe schrumpft um seine eigene Mitte, nicht um den Ursprung des Koordinatensystems — ohne `fill-box` säße der beim Nullpunkt des viewBox und die Buchstaben flögen quer aus dem Bild. */ .marke__zeichen { transform-box: fill-box; transform-origin: 50% 50%; } body.is-loading { overflow: hidden; } /* ---------- Grid-Canvas ---------- */ /* ---------- Gerät-Bühne ---------- */ .device-stage { position: fixed; inset: 0; /* über der fliegenden Wortmarke (2), unter dem Seiteninhalt (main: 4) */ z-index: 3; pointer-events: none; } /* **Nach oben ausblenden — nur im Hero.** In der Vorlage steht das Gerät nicht auf schwarzem Grund, es *löst sich* nach oben darin auf: Die Fläche wird zum Bildrand hin immer dunkler, bis nichts mehr da ist. Das ist es, was aus einem freigestellten Rendering eine Aufnahme macht — ein Gegenstand im Raum hat keine Kante nach oben. Gemacht wird es mit einer Maske, nicht mit einem Verlauf darüber: Ein Verlauf müsste die Farbe des Grundes kennen und läge beim nächsten Wechsel des Satzes daneben. Die Maske nimmt Deckung weg, egal was dahinter ist. `--blende` kommt aus `applyState` in js/device.js und steht im Hero auf etwa 46 %, danach auf 0 — dort soll das Gerät ganz zu sehen sein. */ .device-stage canvas { width: 100%; height: 100%; display: block; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--blende, 0%)); mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--blende, 0%)); } .device-labels { position: absolute; inset: 0; pointer-events: none; } /* Beschriftungen der Explosionszeichnung */ .nt-label { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 16px; opacity: 0; visibility: hidden; will-change: opacity, transform; } /* Links vom Bauteil: Textspalte, dann Linie zum Teil hin */ .nt-label--left { flex-direction: row-reverse; text-align: right; transform: translate(calc(var(--x, 0px) - 100%), calc(var(--y, 0px) - 50%)); } /* Rechts vom Bauteil: Linie vom Teil weg, dann Textspalte */ .nt-label--right { flex-direction: row; text-align: left; transform: translate(var(--x, 0px), calc(var(--y, 0px) - 50%)); } .nt-label__line { flex: 0 0 auto; width: var(--reach, 54px); height: 1px; position: relative; background: linear-gradient(90deg, rgba(0, 194, 176, 0.12), var(--petrol)); } .nt-label--right .nt-label__line { background: linear-gradient(270deg, rgba(0, 194, 176, 0.12), var(--petrol)); } .nt-label__line::after { content: ''; position: absolute; top: 50%; right: 0; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--petrol); box-shadow: 0 0 12px var(--petrol-glow); } .nt-label--right .nt-label__line::after { right: auto; left: 0; } .nt-label__body { display: grid; gap: 5px; flex: 0 0 auto; width: 258px; } .nt-label__num { font-family: var(--font-label); font-size: 10px; letter-spacing: 0.2em; color: var(--petrol-text); } .nt-label__name { font-family: var(--font-label); font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); } .nt-label__desc { font-size: 12.5px; line-height: 1.45; color: var(--ink-dim); } /* ---------- Navigation ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 18px 0; } /* **Die Farbe muss dort stehen, wo auch die Marken umgeschaltet werden.** Die Bildmarke füllt ihren Punkt mit `currentColor`. Stünde `color` weiter oben am Balken, wäre der Wert dort mit dessen `--ink` schon ausgerechnet — die Marke erbte die fertige Farbe, und ein `--ink` an der Zone darunter käme zu spät. Also je Zone, dieselbe Ebene wie die Umschaltung. */ .nav__brand, .nav__menu, .nav__cta, .nav__toggle { /* **Der Gegenwert, nicht der gedämpfte Ton.** Die vier dunklen Zeichen im Balken — Punkt der Bildmarke, Schrift, Korbsymbol und die Umrandungen — sollen sich umkehren wie ein Negativ: auf Hellem schwarz, auf Dunklem weiss. Deshalb steht hier nicht `--ink` (das ist im hellen Satz ein weiches #111113 und im dunklen ein warmes #F2F2EF), sondern beide Enden der Skala. **Warum nicht `mix-blend-mode: difference`.** Das wäre das echte Negativ, pixelweise, und es funktioniert hier nicht: Der Balken ist `position: fixed` und bildet damit einen eigenen Stapelkontext. Ein Mischmodus darin rechnet nur gegen das, was *im Balken* liegt — und das ist nichts. Ausprobiert: Auf dem schwarzen Abschnitt sah es richtig aus, auf der hellen Seite war die Schrift restlos verschwunden, weil sie schlicht weiss blieb. Die ganze Leiste als Gruppe mischen zu lassen wäre möglich, kehrt dann aber auch das Petrol um — Bogen und aktive Pille würden rot. Petrol bleibt deshalb aussen vor: Der Bogen der Bildmarke trägt seine Farbe fest im SVG, die aktive Pille und das Abzeichen am Korb haben ihre eigene. Die beiden Werte stehen bei den Themenmarken in css/base.css — sie hängen am Grund der Seite. Hier wird nur benutzt, was dort steht, und `.nav--dunkler-grund` weiter unten dreht sie für die Zone um, unter der gerade eine dunkle Fläche liegt. */ color: var(--negativ); transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out); } /* **Der Balken auf dunklem Grund.** Die Figur-Sektion ist schwarz, auch wenn die Seite hell steht — ihr Grund ist das Video, kein Farbwert. Die Schrift im Balken stand dort dunkel auf dunkel. Umgeschaltet wird nicht Regel für Regel, sondern der ganze Satz Farben: Was im Balken liegt, greift ohnehin auf `--ink`, `--ink-dim` und `--hairline` zu. Es sind dieselben Werte wie im dunklen Satz der Seite, damit es überall gleich aussieht. Wer im Balken etwas Neues einbaut, muss hier nichts nachtragen — solange er die Marken benutzt statt fester Farben. Die Haarlinie ist die eine Ausnahme: `#242426` ist auf Schwarz kaum zu sehen. Da die Pille seit dem Wegfall der Tönung nur noch von ihrem Rand gehalten wird, steht sie hier als heller Hauch statt als dunkle Linie. Die Klasse sitzt **nicht** am Balken, sondern an der einzelnen Zone — Marke, Menü, Knopf schalten getrennt um. Warum, steht bei `setupNav` in js/main.js. */ .nav--dunkler-grund { --negativ: #FFFFFF; --negativ-rand: rgb(255 255 255 / 0.28); /* Auf schwarzem Grund wäre Anthrazit nicht zu sehen. */ --marke-ton: #FFFFFF; --bg: #070708; --surface-1: #0D0D10; --surface-2: #1C1C1E; --hairline: rgb(255 255 255 / 0.16); --ink: #F2F2EF; --ink-dim: #9A9A94; --ink-faint: #55554F; --petrol-deep: #063B36; --petrol-glow: rgba(0, 194, 176, 0.35); --petrol-text: var(--petrol); --ink-rgb: 242 242 239; --bg-rgb: 7 7 8; } /* **Unschärfe statt Verlauf.** Hier stand ein Verlauf aus `--bg` nach durchsichtig. Das geht so lange gut, wie der Grund hinter dem Balken die Seitenfarbe hat — und genau das ist er nicht überall: Die Figur-Sektion ist schwarz, während die Seite hell steht. Dort lief der Verlauf von Weiss in Schwarz und legte einen hellen Streifen quer über den schwarzen Abschnitt. Eine Unschärfe hat dieses Problem nicht: Sie nimmt die Farbe dessen an, was gerade dahinter liegt, statt eine eigene mitzubringen. Die Maske lässt sie nach unten auslaufen, damit keine Kante entsteht — dieselbe Rolle, die vorher der Verlauf hatte. */ /* **Drei Spalten, nicht eine Reihe.** In einer Flex-Reihe wurde das Menü mit `margin-left: auto` nach rechts gedrückt und saß damit neben dem Knopf. Mit `1fr auto 1fr` liegt es in der Mitte des Balkens — und zwar unabhängig davon, wie breit die Wortmarke links und der Knopf rechts gerade sind. Die Spalten sind ausdrücklich zugewiesen, weil auf dem Handy Menü und Knopf verschwinden: Ohne Zuweisung rutschte der Menüknopf in die mittlere Spalte und stünde dann in der Mitte statt am Rand. */ .nav__inner { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; } /* **Die Marke ist so hoch wie der Balken.** `stretch` statt `center`: Die Zeile ist 48 Pixel hoch — bestimmt von der Menü-Pille — und die Bildmarke füllt sie ganz aus. Als Zahl abgeschrieben wäre das eine Dopplung, die beim nächsten Eingriff am Menü auseinanderliefe; so geht sie von selbst mit. */ .nav__brand { grid-column: 1; justify-self: start; align-self: stretch; display: flex; align-items: center; } /* Sichtbar als Grundzustand: läuft kein JavaScript oder ist Bewegung abgeschaltet, zeigt die Navigation trotzdem ihr Logo. Die Umschaltung klappt den Schlitz beim Start zu — noch hinter dem Preloader. */ /* **Kein zuklappender Schlitz mehr.** Er war dafür da, den Schriftzug beim Ankommen aufzuziehen; die Bildmarke steht dagegen von Anfang an in ihrer Breite, und die Navigation ist ein Dreispaltenraster — die Mitte hängt nicht mehr daran, wie breit die Marke links ist. */ .nav__brand-slot { display: block; /* Anteil der Balkenhöhe, nicht eine feste Zahl: die Zeile ist 48 Pixel hoch, 77 % davon sind 37 — zwischen den 26 Pixeln, die es vorher waren, und der vollen Höhe, die zu wuchtig wirkte. Ändert sich der Balken, geht die Marke mit. */ height: 77%; } .nav__brand-slot img, .nav__brand-slot svg { height: 100%; width: auto; max-width: none; display: block; } /* Ein SVG ohne Breitenangabe braucht das Verhältnis, sonst fällt der Kasten auf die Vorgabebreite zurück. */ .nav__marke { aspect-ratio: 50 / 58.8; } .nav__menu { grid-column: 2; justify-self: center; display: flex; gap: 6px; padding: 5px; border-radius: var(--r-pill); /* **Ohne Tönung, nur Unschärfe.** Eine Füllung aus `--surface-2` bringt eine eigene Farbe mit und liegt damit als grauer Fleck auf jedem Grund, der nicht die Seitenfarbe hat. Die Unschärfe nimmt stattdessen an, was dahinter liegt. */ background: none; border: 1px solid var(--negativ-rand); backdrop-filter: blur(18px); transition: border-color 0.35s var(--ease-out); } .nav__link { font-family: var(--font-label); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; /* Der Gegenwert, gedämpft: Die inaktiven Punkte sollen sich umkehren, aber nicht so laut sein wie die aktive Pille daneben. 72 Prozent halten den Abstand, den vorher `--ink-dim` gehalten hat. */ color: color-mix(in srgb, var(--negativ) 72%, transparent); padding: 9px 16px; border-radius: var(--r-pill); transition: color 0.25s, background-color 0.25s; } .nav__link:hover { color: var(--negativ); } .nav__link.is-current { color: var(--on-petrol); background: var(--petrol); } .nav__cta { grid-column: 3; justify-self: end; } .nav__toggle { grid-column: 3; justify-self: end; display: none; } .nav__drawer { display: none; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-label); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 15px 28px; border-radius: var(--r-pill); position: relative; overflow: hidden; transition: transform 0.35s var(--ease-out), color 0.3s, background-color 0.3s, border-color 0.3s; white-space: nowrap; } .btn--sm { padding: 11px 20px; font-size: 11px; } .btn--petrol { background: var(--petrol); color: var(--on-petrol); box-shadow: 0 8px 34px rgba(0, 194, 176, 0.22); } .btn--petrol:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0, 194, 176, 0.34); } .btn--ghost { background: color-mix(in srgb, var(--surface-2) 55%, transparent); color: var(--ink); border: 1px solid var(--hairline); backdrop-filter: blur(14px); } .btn--ghost:hover { border-color: rgba(0, 194, 176, 0.5); color: var(--petrol-text); transform: translateY(-2px); } /* Wie die Pille: klar, mit Unschärfe. Die Tönung steht weiterhin in `.btn--ghost` — dort ist sie richtig, denn die Knöpfe im Fliesstext haben immer die Seitenfarbe hinter sich. Hier wird sie überschrieben. */ .nav__cta { background: none; border: 1px solid var(--negativ-rand); color: var(--negativ); backdrop-filter: blur(18px); } .nav__cta:hover { border-color: var(--petrol-text); color: var(--petrol-text); } /* ---------- Telefon-Rahmen ---------- */ .phone { border-radius: 42px; padding: 8px; background: linear-gradient(160deg, #303036, #131317 55%); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent) inset; overflow: hidden; } .phone img { width: 100%; height: auto; border-radius: 34px; display: block; } .phone--lg { border-radius: 54px; padding: 10px; } .phone--lg img { border-radius: 45px; } /* Gestapelte Screens, die beim Scrollen wechseln */ .phone__screens { position: relative; border-radius: 34px; overflow: hidden; } .phone__screen { position: absolute; inset: 0; opacity: 0; transition: none; } .phone__screen.is-on { position: relative; opacity: 1; } /* Korn — nimmt dem Verlauf das Digitale */ .grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } /* Lichtschein, der der Maus folgt */ /* ---------- Funktions-Karten ---------- */ .fcard { display: flex; gap: 20px; align-items: flex-start; /* **Wächst mit.** Die Überschrift des Abschnitts steht seit dem Umbau mitten zwischen den beiden Kartenspalten, auf ihrer Höhe. Bei fester Breite bleibt zwischen den Spalten an schmalen Fenstern zu wenig Luft für sie übrig; mit dem `vw`-Anteil geben die Karten dort nach. */ max-width: min(34ch, 26vw); padding: 22px 24px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface-1) 50%, transparent); border: 1px solid transparent; transition: border-color 0.4s var(--ease-out), background-color 0.4s, transform 0.4s var(--ease-out); } .fcard:hover { border-color: var(--hairline); background: color-mix(in srgb, var(--surface-2) 55%, transparent); transform: translateY(-3px); } .fcard__num { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--hairline); font-family: var(--font-label); font-size: 12px; color: var(--petrol-text); transition: background-color 0.4s, border-color 0.4s, box-shadow 0.4s; } .fcard:hover .fcard__num { background: var(--petrol); color: var(--on-petrol); border-color: var(--petrol-text); box-shadow: 0 0 24px var(--petrol-glow); } .fcard__body h3 { font-family: var(--font-display); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 6px; } .fcard__body p { font-size: 14px; line-height: 1.5; color: var(--ink-dim); max-width: 30ch; } /* ---------- Technik-Karten ---------- */ .spec { padding: 30px 28px 34px; border-radius: var(--r-xl); background: linear-gradient(165deg, color-mix(in srgb, var(--surface-2) 70%, transparent), color-mix(in srgb, var(--surface-1) 70%, transparent)); border: 1px solid var(--hairline); display: grid; gap: 16px; align-content: start; transition: transform 0.5s var(--ease-out), border-color 0.5s, background 0.5s; } .spec:hover { transform: translateY(-4px); border-color: rgba(0, 194, 176, 0.4); } .spec__icon { width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center; background: rgba(6, 59, 54, 0.5); border: 1px solid rgba(0, 194, 176, 0.25); color: var(--petrol-text); } .spec__icon svg { width: 26px; height: 26px; } .spec h3 { font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; } .spec p { font-size: 14.5px; color: var(--ink-dim); line-height: 1.55; } /* ---------- Ränge ---------- */ .rank { display: grid; gap: 10px; justify-items: center; padding: 22px 12px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface-1) 60%, transparent); border: 1px solid var(--hairline); transition: transform 0.45s var(--ease-out), border-color 0.45s, background 0.45s; } .rank:hover { transform: translateY(-5px); border-color: rgba(0, 194, 176, 0.4); } .rank__badge { font-family: var(--font-display); font-size: clamp(24px, 3vw, 38px); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); line-height: 1; } .rank__txt { font-family: var(--font-label); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); } .rank.is-top { background: linear-gradient(165deg, rgba(0, 194, 176, 0.16), rgba(6, 59, 54, 0.4)); border-color: rgba(0, 194, 176, 0.55); } .rank.is-top .rank__badge { color: var(--petrol-text); text-shadow: 0 0 30px var(--petrol-glow); } .rank.is-top .rank__txt { color: var(--petrol-text); } /* ---------- Mobile Navigation ---------- */ @media (max-width: 900px) { .nav__menu, .nav__cta { display: none; } .nav__toggle { display: grid; gap: 5px; margin-left: auto; padding: 12px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--surface-2) 60%, transparent); border: 1px solid var(--hairline); backdrop-filter: blur(14px); } .nav__toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform 0.35s var(--ease-out), opacity 0.25s; } .nav.is-open .nav__toggle span:first-child { transform: translateY(3.25px) rotate(45deg); } .nav.is-open .nav__toggle span:last-child { transform: translateY(-3.25px) rotate(-45deg); } .nav__drawer { display: grid; gap: 4px; padding: 22px var(--gutter) 30px; margin: 14px var(--gutter) 0; border-radius: var(--r-xl); background: color-mix(in srgb, var(--surface-1) 92%, transparent); border: 1px solid var(--hairline); backdrop-filter: blur(26px); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), visibility 0.35s; } .nav.is-open .nav__drawer { opacity: 1; visibility: visible; transform: none; } .nav__drawer-link { font-family: var(--font-display); font-size: 24px; padding: 10px 0; border-bottom: 1px solid var(--hairline); } .nav__drawer-cta { margin-top: 18px; justify-self: start; } } /* ============ FUSSZEILE ============ Stand bis eben in sections.css und fehlte damit jeder zweiten Seite — die Shop-Seite lädt sections.css nicht, ihre Fußzeile wäre ungestylt gewesen. Sie ist ein Bauteil, kein Abschnitt, und gehört hierher. */ .footer { padding-block: clamp(50px, 8vh, 100px) 40px; /* Ohne eigenen Grund: Die feste Studio-Fläche reicht bis hierher, und ein weisser Kasten darüber wäre das Einzige, was sie noch zudeckt. Die Haarlinie trennt weiterhin. */ border-top: 1px solid var(--hairline); } .footer__row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid var(--hairline); } .footer__links { display: flex; gap: 24px; } .footer__links a { transition: color 0.25s; } .footer__links a:hover { color: var(--petrol-text); } /* ============ DER UMSCHALTER HELL/DUNKEL ============ Übernommen aus dem Projekt „Dark-Light-Mode-Switch" von Open Source Coding; Herkunft und Vorbehalt stehen in js/vendor/HERKUNFT.md. **Zwei Anpassungen waren nötig.** Erstens die Ansteuerung: Das Original schaltet über `body.dark`. Diese Seite führt den Modus als `data-theme` am `` — schon deshalb, weil er vor dem ersten Bild feststehen muss und der `` da noch nicht existiert. Die Auswahlregeln greifen deshalb auf `:root[data-theme="dark"]`. Zweitens die Grösse: Das Original ist 150 × 65 Pixel und damit für eine Navigationsleiste zu gross. Weil im Original alle Masse als Variablen stehen, genügt es, diese zu überschreiben — der ganze Aufbau, die Wolkenbahnen und der Sternenstand rechnen sich daraus. */ .schalter { --breite: 66px; --hoehe: 30px; --rundung: 50px; --polster: 3px; --randstaerke: 1.5px; --gestirn: 24px; --lauf: all 0.5s ease; position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: var(--breite); height: var(--hoehe); border-radius: var(--rundung); background: linear-gradient(to bottom, #73bbff, #a2d1fd); cursor: pointer; transition: var(--lauf); } /* Die dunkle Fassung liegt als eigene Ebene darüber und wird eingeblendet — so überblenden die beiden Himmel ineinander, statt hart umzuspringen. */ .schalter::before { content: ''; position: absolute; inset: 0; border-radius: var(--rundung); background: linear-gradient(to top, #2b3347, #181d27); opacity: 0; transition: var(--lauf); } :root[data-theme="dark"] .schalter::before { opacity: 1; } .schalter__rand { position: absolute; top: calc(var(--randstaerke) * -1); left: calc(var(--randstaerke) * -1); width: calc(100% + var(--randstaerke) * 2); height: calc(100% + var(--randstaerke) * 2); border-radius: var(--rundung); background: linear-gradient(to bottom, #a2d1fd, #cde7ff); z-index: -1; transition: var(--lauf); } .schalter__rand::after { content: ''; position: absolute; inset: 0; border-radius: var(--rundung); background: linear-gradient(to bottom, #000000, #6c7384); opacity: 0; transition: var(--lauf); } :root[data-theme="dark"] .schalter__rand::after { opacity: 1; } /* Das Kästchen selbst ist das Bedienelement und bleibt für die Tastatur erreichbar — es wird nur nicht gezeichnet. `display: none` nähme es aus der Reihenfolge und machte den Schalter unbedienbar. */ .schalter input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .schalter:has(input:focus-visible) { outline: 2px solid var(--petrol); outline-offset: 3px; } .schalter__gestirn { position: absolute; left: var(--polster); z-index: 1; width: var(--gestirn); height: var(--gestirn); border-radius: 50%; background-color: #ffc187; box-shadow: 0 0 6px 0 #ffc187, 0 0 11px 0 #ffc18768, -1px -1px 3px 0 #ffab5c inset; transition: var(--lauf); } :root[data-theme="dark"] .schalter__gestirn { left: calc(100% - var(--gestirn) - var(--polster)); background-color: #dee5f3; box-shadow: 0 0 22px 0 #dee5f3; } /* Der Krater macht aus der Sonne einen Mond: Im Hellen hat er dieselbe Farbe wie die Scheibe und ist unsichtbar, im Dunkeln wird er grau. */ .schalter__krater { position: absolute; top: 1px; left: 1px; width: 75%; height: 75%; border-radius: 50%; background-color: #ffc187; transition: var(--lauf); } :root[data-theme="dark"] .schalter__krater { background-color: #565c6b; } .schalter__himmel { position: relative; width: 100%; height: 100%; border-radius: var(--rundung); overflow: hidden; } .wolke { position: absolute; width: 60%; transition: var(--lauf); } .wolke-1 { bottom: -55%; left: 0; } .wolke-2 { bottom: -45%; left: 11px; } .wolke-3 { bottom: -40%; right: 0; } .wolke-4 { bottom: -16%; right: -11px; } :root[data-theme="dark"] .wolke-1 { bottom: -35%; left: -48px; } :root[data-theme="dark"] .wolke-2 { bottom: -15%; left: -48px; transition: all 0.7s ease; } :root[data-theme="dark"] .wolke-3 { bottom: -15%; right: -48px; } :root[data-theme="dark"] .wolke-4 { bottom: -5%; right: -48px; transition: all 0.7s ease; } .sterne { position: absolute; top: 150%; left: 0; width: 100%; transform: translateY(-50%); pointer-events: none; transition: var(--lauf); } :root[data-theme="dark"] .sterne { top: 50%; } /* **Frei schwebend in der linken unteren Ecke.** Er sitzt damit ausserhalb des Balkens und bleibt beim Scrollen an seinem Platz. Die Ecke ist bewusst die linke: Rechts unten sitzen auf vielen Seiten die Hinweise des Browsers zu Verweisen, und auf dem Telefon liegt dort der Daumen. Der Schatten hebt ihn vom Inhalt ab, über den er hinwegläuft. Der Stapelwert bleibt unter dem der Navigation (100) und unter dem Produktfenster: Ein Umschalter für die Darstellung soll nichts verdecken, was gerade wichtiger ist. */ .schalter--schwebend { position: fixed; left: clamp(16px, 2.6vw, 34px); bottom: clamp(16px, 2.6vw, 34px); z-index: 95; box-shadow: 0 6px 22px color-mix(in srgb, var(--bg) 55%, transparent); } @media (max-width: 900px) { .schalter { --breite: 58px; --hoehe: 27px; --gestirn: 21px; } .schalter--schwebend { left: 14px; bottom: 14px; } } @media (prefers-reduced-motion: reduce) { .schalter, .schalter::before, .schalter__rand, .schalter__rand::after, .schalter__gestirn, .schalter__krater, .wolke, .sterne { transition-duration: 0.001s; } } /* ---- Der Schriftzug im Fuss folgt der Darstellung ---- Ein kann `currentColor` nicht erben, deshalb liegen zwei Dateien bereit und es wird die passende gezeigt. Eine Medienabfrage in der SVG-Datei selbst schiede aus: Sie sähe nur die Einstellung des Betriebssystems, und die kann von der Wahl auf der Seite abweichen. */ /* Die eingebetteten Marken zeichnen ihre helle Tinte als `currentColor` — das „neo" und der Punkt im a bleiben Petrol. */ /* Der Vorspann steht auf der Seitenfarbe, die Bildmarke im Balken nicht: Ihr Punkt gehört zu den vier Zeichen, die sich gegen den Grund umkehren. Diese Zeile stand vorher für beide zusammen da und hat den Gegenwert wieder auf `--ink` zurückgesetzt. */ /* Beide Marken auf denselben Ton — die Bildmarke im Balken ist derselbe Zug wie das n der Wortmarke, sie dürfen nicht auseinanderlaufen. */ .preloader__wortmarke { color: var(--marke-ton); } .nav__marke { color: var(--marke-ton); }