/* OM Studios — Retro Future Ein Stylesheet für alle Seiten. Schriften liegen lokal (siehe /assets/fonts). */ @font-face{font-family:"Syne";src:url("fonts/syne-800.woff2?v=latein") format("woff2"); font-weight:800;font-style:normal;font-display:swap} @font-face{font-family:"Syne";src:url("fonts/syne-600.woff2?v=latein") format("woff2"); font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Outfit";src:url("fonts/outfit-300.woff2?v=latein") format("woff2"); font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:"Outfit";src:url("fonts/outfit-400.woff2?v=latein") format("woff2"); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Outfit";src:url("fonts/outfit-600.woff2?v=latein") format("woff2"); font-weight:600;font-style:normal;font-display:swap} /* Die Markenschrift der Schwestermarke. Nur für die Wortmarke im Kopf, nicht für Fließtext. Selbst gehostet wie die anderen fünf — die Datenschutzerklärung sagt zu, dass nichts an fremde Server geht, und das Ausrollskript prüft das. */ @font-face{font-family:"Oxanium";src:url("fonts/oxanium-800.woff2?v=latein") format("woff2"); font-weight:800;font-style:normal;font-display:swap} :root{ --night:#05060A; --night-2:#0D1119; --night-3:#141A26; --line:#1E2534; --line-2:#2C3446; --text:#EDF1F7; --text-2:#9AA4BA; /* Aufgehellt am 3. September. #66708A erreichte gegen die drei Hintergründe nur 4,10 / 3,82 / 3,53 zu 1 und lag damit unter den 4,5, die die Norm für Fließtext verlangt - auf 78 Stellen. Dies ist der kleinste Wert, der auf allen dreien besteht: 4,54. */ --text-3:#7682A0; --cy:#3FD9EB; /* Marke OM Studios */ --cy-dim:#0C2E36; --amber:#F5A524; /* alles für Creator */ --amber-dim:#33260C; --em:#00FFB2; /* Schwestermarke TriggerTok, exakt --tt-signal */ /* Hier stand #2EE6A8 - ein weicheres, entsättigtes Mint. Wer die Schwestermarke von einer Seite zur anderen verfolgt, sah sie die Farbe wechseln. */ --em-dim:#0A3128; --lime:#B4E01F; /* Schwestermarke OM Records */ --hit:#FF3D71; /* sparsam: Leben, Season-Ende */ --px:4px; /* das Raster */ --syne:"Syne",system-ui,-apple-system,"Segoe UI",sans-serif; --outfit:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif; --oxanium:"Oxanium",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} /* ---------- Die Bildlaufleiste gehört zur Seite ---------- */ /* Auf nachtschwarzem Grund liefert das Betriebssystem eine hellgraue Leiste - der hellste Streifen der ganzen Seite, und ausgerechnet am Rand. color-scheme sagt dem Browser, dass hier alles dunkel ist; davon profitieren auch Auswahlfelder und jede andere Leiste, die der Browser selbst zeichnet. Danach die Farben ausdrücklich: erst der neue Standard, dann WebKit für alles, was ihn noch nicht kennt. Der Rand am Griff ist kein Rand, sondern Hintergrundfarbe - so entsteht Luft um den Griff, ohne dass die Spur sichtbar wird. Eckig, wie alles andere auf dieser Seite. */ :root{color-scheme:dark} /* Dünn und in Amber. Der Griff ist 8px schmal statt 12px, dafür trägt er die Markenfarbe - sichtbar, aber nicht laut, weil er nur 2px Luft zum Rand lässt und eckig bleibt wie alles andere. Firefox kennt nur `thin` und kein :hover für die Leiste, bekommt also den Ruhezustand; WebKit hellt beim Überfahren auf. */ html{scrollbar-width:thin;scrollbar-color:var(--amber) transparent} ::-webkit-scrollbar{width:12px;height:12px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--amber);border:2px solid var(--night); background-clip:padding-box} ::-webkit-scrollbar-thumb:hover{background:#FFC155;border-color:var(--night); background-clip:padding-box} ::-webkit-scrollbar-thumb:active{background:var(--cy)} ::-webkit-scrollbar-corner{background:transparent} html,body{scroll-behavior:smooth} /* Fällt der Scroll-Test in seite.js durch, setzt er diese Klasse und die Seite springt hart. Lieber ohne Animation als ohne Funktion. */ html.harte-sprünge,html.harte-sprünge body{scroll-behavior:auto} /* Der Messkasten dieses Tests. Er steht hier und nicht im JavaScript, damit die Seite ohne 'unsafe-inline' in der Content-Security-Policy auskommt - ein style-Attribut aus dem Skript wäre sonst blockiert, der Kasten bliebe unformatiert und würde die Seite beim Laden kurz aufreißen. */ .scroll-probe{position:fixed;top:0;left:-9999px;width:100px;height:100px; overflow:auto;pointer-events:none;visibility:hidden} .scroll-probe>div{height:600px} @media (prefers-reduced-motion:reduce){ html,body{scroll-behavior:auto} /* ⚠️ animation-delay gehört dazu. Der Blitz im Kopf zündet über elf Zellen mit Verzögerungen bis 0,3 s - ohne diese Zeile erscheinen sie auch bei abgeschalteter Bewegung nacheinander statt sofort. Die Dauer auf null zu setzen reicht also nicht; die Verzögerung ist selbst die Bewegung. Am 5.9. beim Nachprüfen gefunden. */ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important; animation-delay:0s !important;transition-duration:.001ms !important;transition-delay:0s !important} } body{ background:var(--night);color:var(--text); font-family:var(--outfit);font-size:17px;line-height:1.65; -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative; } /* Sprites laufen hinter allem */ /* Die Anzeigegröße des Hintergrund-Canvas steht hier, nicht im Skript: Die Content-Security-Policy lässt kein style-Attribut aus dem JavaScript zu. width/height müssen ausdrücklich stehen - ein ersetztes Element mit width:auto nimmt sonst seine Pufferauflösung als Anzeigegröße, und auf Bildschirmen mit doppelter Punktdichte wäre der Canvas doppelt so breit wie das Fenster. */ #bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none; /* Der Hintergrund ist nicht einfach schwarz, sondern gebaut. Zuunterst das Raster: dieselbe Konstruktionsregel, aus der Zeichen, Symbole und Figuren gebaut sind - 44px, also elf Einheiten des 4px-Rasters. Darüber ein Abdunkeln zu den Rändern, das den Blick in der Mitte hält. Die Figuren zeichnet sprites.js oben drauf; die Leinwand selbst ist durchsichtig. */ background-image: radial-gradient(128% 96% at 50% 38%, transparent 46%, rgba(0,0,0,.62)), repeating-linear-gradient(to right, rgba(63,217,235,.05) 0 1px, transparent 1px 44px), repeating-linear-gradient(to bottom, rgba(63,217,235,.05) 0 1px, transparent 1px 44px)} /* .top ist ausgenommen, weil diese Regel wegen :not(#bg) eine höhere Spezifität hat als jede .top-Regel - position:sticky wäre sonst überschrieben. (Bis zum 5.9.2026 stand hier auch .swap; die Leiste ist im Kopf aufgegangen.) */ body > *:not(#bg):not(.top):not(.sprung){position:relative;z-index:1} .wrap{max-width:1160px;margin:0 auto;padding:0 26px} h1,h2,h3{font-family:var(--syne);font-weight:800;letter-spacing:-.025em;line-height:1.04;text-wrap:balance} h1{font-size:clamp(2.2rem,6.4vw,4.6rem)} h2{font-size:clamp(1.7rem,3.6vw,2.7rem)} h3{font-size:1.28rem;font-weight:600;letter-spacing:-.015em} p{margin:0 0 16px;max-width:68ch} a{color:inherit;text-decoration:none} a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--cy);outline-offset:3px;border-radius:3px} /* Sprunglink. Wer mit der Tastatur kommt, hat sonst die Umschaltleiste und die ganze Navigation vor sich, bevor der Inhalt anfängt - auf jeder Seite neu. Unsichtbar, bis er den Fokus bekommt. .sprung ist oben aus der Sammelregel ausgenommen, sonst überschriebe deren position:relative das position:fixed hier. */ .sprung{position:fixed;left:-9999px;top:8px;z-index:100; background:var(--cy);color:#04262C;font-family:var(--syne);font-weight:800; font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:12px 20px} .sprung:focus{left:8px} strong{font-weight:600} .eyebrow{ font-family:var(--syne);font-size:11px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--text-3); } /* ---------- Der Kopf trägt beide Marken ---------- Bis zum 5. September saß über der Navi eine eigene Leiste, der Marken-Umschalter (40 px). Zusammen waren das 112 px, bevor der erste Inhalt kam - und die Navi war in der Mitte leer. Jetzt steht beides in EINER Reihe: die Sperrung links, die Schwestermarke daneben, die Verweise rechts. 84 px statt 112. ⚠️ Auf triggertok.de steht die alte, gespiegelte Leiste weiter (im JS-Bündel nachgewiesen: "om-studios.de", "Auch von uns"). Die beiden Seiten sind damit vorerst unsymmetrisch. Der Brief mit der neuen Fassung liegt in `marke/triggertok-header.md`. Drei Regeln, ohne die aus "giftig" ein Neonschild wird: 1. Es bewegt sich immer nur EINE Sache. 2. Harte Kanten. Kein Glimmen, kein Verlauf, kein Schatten. 3. Alles springt auf dem Raster, nichts gleitet. */ /* Der Kopf darf breiter sein als der Inhalt. Gemessen: Sperrung 243 + Schwestermarke rund 200 + Navi rund 660 sind gut 1100, der Inhalts-Wrap gibt aber nur 1136 her - das reißt bei der ersten Schriftänderung. Ein Kopfbereich ist kein Fließtext, er darf die vollen Ränder nutzen. */ .top .wrap{max-width:1320px} /* Die Schwestermarke. Sie ruht als Zeichen, Name und der Zeile, auf die es ankommt: "Auch von uns". Ohne sie liest sich der Verweis wie Fremdwerbung - genau das soll er nicht. */ .tt{position:relative;display:flex;align-items:center;gap:11px;height:80px; flex:none;padding:0 20px;color:var(--text-3);text-decoration:none; transition:background .16s steps(2),color .16s steps(2)} .tt:hover,.tt:focus-visible{background:var(--em-dim);color:var(--em)} .tt-text{display:flex;flex-direction:column;gap:3px} /* ⚠️ Oxanium, nicht Syne. Das ist die Markenschrift der Schwestermarke; in unserer Hausschrift gesetzt war es unser Wort über ihrem Zeichen. Kantige, breit laufende Groteske — deshalb auch nur 0,02em Laufweite statt der 0,14em, die Syne braucht. */ .tt-name{font-family:var(--oxanium);font-size:15px;font-weight:800; letter-spacing:.02em;text-transform:uppercase;white-space:nowrap; display:inline-flex;align-items:center;line-height:1} /* Der Überschnitt. Ein Blitz mit Luft ringsum wirkt als Trennzeichen, einer der sich verzahnt als Teil des Wortes. */ .tt-name .blitz{margin:0 -2px} .tt-hint{font-family:var(--syne);font-size:9.5px;font-weight:600; letter-spacing:.16em;text-transform:uppercase;white-space:nowrap; color:var(--text-3)} .tt:hover .tt-hint,.tt:focus-visible .tt-hint{color:var(--em);opacity:.72} /* Hier stand kurz eine Beschreibung, die beim Überfahren aufklappte ("Overlays fuer TikTok Live"). Sie ist wieder raus: Selbst im breitesten Kopf (1320) bleiben neben Sperrung, Marke und Navi nur rund 195 px, sie braucht 320 - und schob damit die Verweise aus dem Bild. Eine Bewegung, die eine zweite auslöst, ist keine Geste mehr, sondern ein Ruckeln. Was sie sagen sollte, steht jetzt im aria-label des Verweises. */ /* Der Blitz sitzt auf demselben Raster wie das OM-Zeichen: Zellen von zwei Einheiten, sieben Spalten, elf Zeilen. Er zündet EINMAL beim Laden von oben nach unten und ruht danach - ein Zeichen, das dauernd zappelt, kämpft mit dem Text um Aufmerksamkeit, und der Text verliert. */ /* 1,7-mal die Schriftgröße: der Blitz ragt bewusst oben und unten aus der Zeile. Bei 15px Wortmarke sind das 26px — vorher stand er mit 30px daneben, die Kopfzeile behält also ihr Gewicht. */ .blitz{flex:none;width:auto;height:26px;display:block} /* Das Zeichen ist jetzt EIN Pfad. Die elf gestaffelten Verzögerungen fielen damit weg - sie gehörten zu den elf Rechtecken der alten Pixeltreppe. Gezündet wird weiterhin einmal beim Laden, danach ruht es. */ .blitz-mint{fill:var(--em)} /* Der Keil ist die Reaktionsfarbe der Schwestermarke (--tt-reaktion drüben). Er färbt sich NICHT beim Überfahren mit — ein Markenzeichen wechselt nicht die Farbe, weil die Maus vorbeikommt. */ .blitz-keil{fill:#FF2BD6} /* ⚠️ OHNE `fill`. Solange der Blitz einfarbig war, konnte die Animation die Farbe mitführen. Mit zwei Pfaden färbte sie am Ende BEIDE auf var(--em) — der magentafarbene Keil wäre nach einer halben Sekunde grün geworden. Gezündet wird jetzt nur über die Deckkraft. */ @keyframes blitz-zuenden{0%{opacity:.1}38%{opacity:1}100%{opacity:1}} @keyframes blitz-zuenden2{0%{opacity:.1}38%{opacity:1}100%{opacity:1}} .blitz path{animation:blitz-zuenden .5s steps(3) both} /* ⚠️ `both` hält den LETZTEN Keyframe — wer Bewegung abbestellt hat, sähe aber den ERSTEN, und der steht auf opacity .1. Ohne diese Regel bliebe das Zeichen dort fast unsichtbar. */ @media (prefers-reduced-motion:reduce){ .blitz path{animation:none;opacity:1} } /* Neu zünden beim Überfahren: ein zweiter, gleicher Name startet die Animation neu. Ohne JavaScript, ohne Klassenwechsel. */ .tt:hover .blitz path,.tt:focus-visible .blitz path{animation-name:blitz-zuenden2} /* Die Fuge zwischen den beiden Marken. Vier Pixel, wie alles hier. */ .kopf-fuge{flex:none;width:2px;align-self:stretch;margin:27px 0;background:var(--line-2)} /* ---------- Kopfzeile ---------- */ /* ⚠️ KEIN backdrop-filter. Er stand hier bis zum 5.9.2026 und war der Grund, warum die Menü-Schublade nicht funktionierte: Ein Element mit backdrop-filter (ebenso filter, transform oder will-change) wird zum Bezugsrahmen für alles, was darin `position:fixed` ist. Die Schublade und ihr Verdunkler hängen dann an der Kopfzeile statt am Fenster - 340px breit, aber nur 70px hoch, und der Verdunkler deckte nur die Leiste ab. Ersatz: mehr Deckkraft statt Unschärfe. Bei .94 schimmert der Inhalt darunter nicht mehr durch, und es passt ohnehin besser - eine Unschärfe ist der weichste Effekt, den es gibt, und diese Seite ist eckig. */ .top{position:sticky;top:0;z-index:60;background:rgba(5,6,10,.94); border-bottom:var(--px) solid var(--line)} /* Am 3. September verkleinert: 88 auf 72, das Zeichen von 56 auf 44. Die Leiste nahm mit 88px zusammen mit dem Umschalter darüber 129px vom Bildschirm - auf einem Notebook fast ein Sechstel der Höhe, bevor der erste Inhalt kam. Das Zeichen ist bei 44px immer noch 243px breit und damit gut lesbar. ⚠️ Wer diese Höhe ändert, ändert `scroll-margin-top` mit - beide Vorkommen, hier unten und im 900px-Block am Dateiende. */ .nav{display:flex;align-items:center;height:80px;gap:0} .brand{position:relative;display:flex;align-items:center;height:80px; padding-right:26px;flex:none} /* Der Markenbalken blinkt nicht um, er wird UEBERGEBEN: der eine schrumpft auf null, während der andere auf volle Breite wächst - beides in acht Rastersprüngen. Ein Element trägt damit die ganze Aussage "du bist hier, das daneben gehört auch uns", ohne dass sie irgendwo steht. Das Wachsen kommt ohne :has() aus, damit es auch in älteren Browsern passiert; nur das Schrumpfen der Gegenseite braucht :has(). Wie das ohne :has() aussieht, ist am 5.9.2026 nachgesehen worden (Regel in Chrome zur Laufzeit gelöscht): Beide Balken stehen dann GLEICHZEITIG - der cyanfarbene bleibt in voller Breite, während der emeraldfarbene wächst. Aus der Übergabe wird ein Nebeneinander, und zwei Marken sehen kurz beide aktiv aus. Nicht kaputt, aber die Geste ist weg. :has() ist Baseline 2023 (Firefox ab 121, Safari ab 15.4), das trifft also nur wirklich alte Browser. ⚠️ Der naheliegende Ausweg wäre, den TriggerTok-Verweis im Quelltext VOR die Sperrung zu setzen und optisch zurückzuordnen - dann genügt der Geschwister-Kombinator `~`, den jeder Browser kann. Das ist bewusst NICHT gemacht: Damit erreichte die Tabulatortaste die Schwestermarke vor dem eigenen Startseiten-Verweis. Eine falsche Reihenfolge für alle, die mit der Tastatur gehen, wäre ein höherer Preis als eine fehlende Geste in Browsern von vor 2023. */ .brand::after,.tt::after{content:"";position:absolute;left:0; bottom:calc(-1 * var(--px));height:var(--px);transition:width .3s steps(8)} .brand::after{width:100%;background:var(--cy)} .tt::after{width:0;background:var(--em)} .tt:hover::after,.tt:focus-visible::after{width:100%} .nav:has(.tt:hover) .brand::after,.nav:has(.tt:focus-visible) .brand::after{width:0} /* Die Sperrung blitzt beim Überfahren einmal auf - zwei Sprünge, kein Verlauf. */ @keyframes marke-blitz{0%{filter:none}50%{filter:brightness(2.6)}100%{filter:none}} .brand:hover .zeichen,.brand:focus-visible .zeichen{animation:marke-blitz .2s steps(2)} /* Die Sperrung: Zeichen, eine Strichstärke Abstand, dann "STUDIOS" - die Masse stehen im Markenblatt und werden von marke/zeichen-bauen.js gerechnet. Bei 56px Höhe ist sie 309px breit. */ .brand .zeichen{height:44px;width:auto;display:block;flex:none} /* Die Navi spricht jetzt dieselbe Sprache wie der Rest: Versalien in Syne mit Sperrung, wie Umschalter, Augenbrauen und Kennwerte. Vorher stand hier 15px Fließtext - sauber, aber ohne Stimme. ⚠️ Höhe und Rahmen der Leiste bleiben unangetastet. Sie stecken in der 41/134px-Rechnung für die Sprungmarken am Ende dieser Datei; wer sie anfasst, verschiebt jeden Ankersprung der Seite. Das Polster unten ändert daran nichts, weil `.nav` eine feste Höhe hat. */ .nav-links{margin-left:auto;flex:none;display:flex;gap:20px;font-family:var(--syne); font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--text-2)} /* ⚠️ KEIN padding-bottom hier. Es stand am 3. September kurz drin, damit der Balken darunter Platz hat - und hat den Text nach oben gerückt: Bei `align-items:center` zentriert der Flexbau die Box MIT Polster, die Schrift sitzt dann um die halbe Polsterhöhe zu hoch. Der Balken hängt deshalb über `bottom` unter der Zeile, ohne die Box zu vergrößern. */ .nav-links a{position:relative;transition:color .18s ease} .nav-links a:hover,.nav-links a:focus-visible{color:var(--text)} /* Der Balken sitzt auf dem 4px-Raster und blendet NICHT weich ein: hart an, hart aus. Weiche Übergänge sind die Sprache runder Oberflächen - diese Seite ist eckig. */ .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-13px; height:var(--px);background:var(--cy);opacity:0} .nav-links a:hover::after,.nav-links a:focus-visible::after{opacity:1} /* Der Sprachwechsel ist kein Seitenbereich, sondern ein Werkzeug - eine Stufe leiser, und in Amber statt Cyan, damit er sich von den Bereichen abhebt. */ .nav-links a[hreflang]{color:var(--text-3)} .nav-links a[hreflang]:hover,.nav-links a[hreflang]:focus-visible{color:var(--amber)} .nav-links a[hreflang]::after{background:var(--amber)} /* ⚠️ DER EINE PUNKT, DER GARANTIERT OHNE SCROLLEN ZU SEHEN IST. Gemessen am 9.9.2026: der Creator-Knopf im Hero sitzt bei 914 px, die Falz auf einem 889 px hohen Fenster darüber - er ist von 4.309 px hierher gerückt, aber eben immer noch knapp DARUNTER. Der Navigationspunkt steht dagegen bei 30 px und ist auf jedem Fenster da. Deshalb trägt er Amber wie das Angebot selbst, und der Balken darunter steht dauerhaft statt nur beim Zeigen - ein Wort in derselben Farbe wie die übrigen fünf ist kein Hinweis, sondern ein Listeneintrag. Nicht mehr als das: kein Kasten, kein Blinken. Die Zeile trägt sechs Punkte, und wer einen davon schreit, macht die anderen unleserlich. */ .nav-links a.nav-hebel{color:var(--amber)} .nav-links a.nav-hebel:hover,.nav-links a.nav-hebel:focus-visible{color:#FFD98A} .nav-links a.nav-hebel::after{background:var(--amber);opacity:.5} .nav-links a.nav-hebel:hover::after,.nav-links a.nav-hebel:focus-visible::after{opacity:1} /* ---------- Menü für schmale Bildschirme ---------- Ohne JavaScript, über
. Seit dem 5.9.2026 keine Klappliste unter dem Knopf mehr, sondern eine Schublade an der rechten Kante: volle Höhe, eigener Grund, die Seite dahinter abgedunkelt. ⚠️ Sie fährt NICHT herein. Das ist dieselbe Regel wie beim Balken unter den Navi-Verweisen: hart an, hart aus. Weiche Übergänge sind die Sprache runder Oberflächen, und diese Seite ist eckig. Dazu kommt, dass
seinen Inhalt im geschlossenen Zustand gar nicht rendert — ein Hereinfahren bräuchte @starting-style oder ein Kästchen statt
, und beides wäre teurer als der Gewinn. */ .menu{display:none;flex:none} .menu summary{list-style:none;cursor:pointer;position:relative;z-index:3; display:flex;align-items:center;gap:12px; font-family:var(--syne);font-size:11.5px;font-weight:800;letter-spacing:.16em; text-transform:uppercase;color:var(--text-2); padding:12px 15px;background:var(--night-2);border:var(--px) solid var(--line); transition:color .16s steps(2),border-color .16s steps(2),background .16s steps(2)} .menu summary::-webkit-details-marker{display:none} .menu summary:hover{color:var(--cy);border-color:var(--cy-dim);background:var(--night-3)} .menu[open] summary{color:var(--cy);border-color:var(--cy);background:var(--cy-dim)} /* Das Zeichen: drei Balken auf dem Raster, die beim Öffnen zum Kreuz werden. Der mittlere ist der Hintergrund des Feldes, die äußeren sind ::before und ::after — nur so lassen sich zwei davon einzeln drehen. Die Drehung läuft in drei Sprüngen. Ein Kreuz ist von Natur aus schräg; das ist die eine Stelle, an der die Seite eine Diagonale zulässt, wie beim Blitz. */ .menu-zeichen{position:relative;flex:none;width:20px;height:16px; background:linear-gradient(currentColor,currentColor) left center/20px var(--px) no-repeat; transition:background-size .18s steps(3)} .menu-zeichen::before,.menu-zeichen::after{content:"";position:absolute;left:0; width:20px;height:var(--px);background:currentColor; transition:top .18s steps(3),transform .18s steps(3)} .menu-zeichen::before{top:0} .menu-zeichen::after{top:12px} .menu[open] .menu-zeichen{background-size:0 var(--px)} .menu[open] .menu-zeichen::before{top:6px;transform:rotate(45deg)} .menu[open] .menu-zeichen::after{top:6px;transform:rotate(-45deg)} /* Die abgedunkelte Seite dahinter. Nur Bild, nicht klickbar — zum Schließen dient derselbe Knopf, der geöffnet hat, und der liegt darüber. */ .menu[open]::before{content:"";position:fixed;inset:0;background:rgba(5,6,10,.84);z-index:1} .menu-panel{position:fixed;top:0;right:0;bottom:0;z-index:2; width:min(340px,84vw);overflow-y:auto;overscroll-behavior:contain; background:var(--night-2);border-left:var(--px) solid var(--cy); padding:96px 0 34px;display:flex;flex-direction:column} .menu-titel{padding:0 24px 9px;font-family:var(--syne);font-size:10.5px;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--amber)} /* "Rechtliches" wird nach unten gedrückt, statt der Schublade eine tote untere Hälfte zu lassen. Zwei verankerte Blöcke - Bereiche oben, Pflicht unten - sind ruhiger als eine Liste mit Luft darunter, und es braucht kein Füllwerk dafür. */ .menu-titel--später{margin-top:auto;padding-top:30px} .menu-panel a{position:relative;padding:15px 24px;font-family:var(--syne); font-size:15px;font-weight:600;letter-spacing:.03em;color:var(--text-2); border-top:1px solid var(--line)} .menu-panel a:last-child{border-bottom:1px solid var(--line)} .menu-panel a:hover,.menu-panel a:focus-visible{background:var(--night-3);color:var(--text)} /* Derselbe Balken wie im Kopf, nur hochkant: er wächst in Sprüngen. */ .menu-panel a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0; background:var(--cy);transition:width .2s steps(4)} .menu-panel a:hover::before,.menu-panel a:focus-visible::before{width:var(--px)} /* Der Sprachwechsel gehört nicht ins Menü. Er ist kein Seitenbereich, sondern ein Werkzeug — im Menü sucht ihn niemand. Er steht jetzt neben dem Knopf und erscheint genau dann, wenn die Verweise verschwinden. Amber wie überall, wo ein Werkzeug gemeint ist und kein Bereich. */ /* Auf kurzen Schirmen - Handy quer, kleine Fenster - lief der Inhalt der Schublade unten heraus: gemessen 636 px Inhalt in 520 px Höhe. Scrollen darin ginge zwar (overflow-y:auto steht oben), aber eine Liste von sieben Verweisen, die gescrollt werden muss, ist ein Eingeständnis. Also enger setzen, statt scrollen zu lassen - damit passen dieselben Punkte in 458 px. Die Verankerung unten fällt dabei weg; bei Platzmangel ist Gedränge schlimmer als eine Liste ohne Anker. */ @media (max-height:680px){ .menu-panel{padding:68px 0 16px} .menu-panel a{padding:11px 24px;font-size:14px} .menu-titel{padding-bottom:7px} .menu-titel--später{margin-top:0;padding-top:22px} } /* Solange die Schublade offen ist, darf die Seite dahinter nicht mitscrollen. ⚠️ NUR auf Geräten ohne Zeigegerät. Dort gibt es keine sichtbare Bildlaufleiste, `overflow:hidden` kostet also keine Breite. Am Schreibtisch würde die Leiste verschwinden und der ganze Inhalt um ihre Breite springen - das wäre schlimmer als das Übel, das es behebt. `overscroll-behavior:contain` an der Schublade sorgt zusätzlich dafür, dass ein Wisch am unteren Ende der Liste nicht auf die Seite dahinter durchschlägt. */ @media (hover:none){ html:has(.menu[open]){overflow:hidden} } .kopf-rechts{display:flex;align-items:center;gap:8px;flex:none} .sprache{display:none;flex:none;align-items:center; font-family:var(--syne);font-size:11.5px;font-weight:800;letter-spacing:.14em; text-transform:uppercase;color:var(--text-3); padding:12px 13px;border:var(--px) solid transparent; transition:color .16s steps(2),border-color .16s steps(2)} .sprache:hover,.sprache:focus-visible{color:var(--amber);border-color:var(--amber-dim)} /* ⚠️ DER PREIS VON EINER REIHE STATT ZWEIER. Gemessen an der deutschen Startseite bei 1600 px: Sperrung 269 + Fuge 2 + Schwestermarke 230 + Verweise 723 + Ränder 44 = 1268 px. Danach abgespeckt, was ohne Verlust ging - Sprachwechsel als "EN"/"DE" statt ausgeschrieben (-72), Abstand der Verweise 22 auf 20 (-8) - bleiben rund 1190. Darum weicht die Navi ab 1200 px ins Menü. Vorher tat sie das erst bei 880. Auf einem 1024er oder 1152er Notebook sieht man also das Menü statt der Verweise. Das ist eine Entscheidung, kein Versehen: Der einzige weitere Hebel wäre, den Markennamen "TriggerTok" wegzulassen und nur den Blitz stehen zu lassen (-160 px). Ein Zeichen ohne Namen im Kopf ist aber genau das generische Symbol, das wir nicht wollten. */ @media (max-width:1200px){ .nav-links{display:none} .menu{display:block} .sprache{display:flex} .kopf-rechts{margin-left:auto} } @media (max-width:880px){ .nav{height:66px} .brand{height:66px;padding-right:16px} .tt{height:66px;padding:0 14px;gap:9px} .blitz{height:24px} .tt-name{font-size:11.5px;letter-spacing:.1em} .kopf-fuge{margin:22px 0} /* Auf schmalen Geräten ist neben dem Menü kein Platz für die Wortmarke. Statt eines zweiten Elements wird sie abgeschnitten: Der Ausschnitt sitzt dank preserveAspectRatio="xMinYMid slice" links, die feste Breite kappt den Rest. Das Zeichen ist 1,247 mal so breit wie hoch - bei 40px also 50px. 52px zeigt es vollständig plus einen Hauch Luft; ab etwa 57px lugte das S der Wortmarke hervor. */ .brand .zeichen{height:40px;width:52px} } /* Unter 430px reicht der Platz neben Zeichen und Menü nicht mehr für den Markennamen. Der Blitz bleibt - er ist das Zeichen und trägt allein. */ @media (max-width:430px){ .tt-text{display:none} .tt{padding:0 10px} } /* ---------- Pixel-Rahmen: das Retro-Element, das überall wiederkehrt ---------- */ .px{ position:relative;background:var(--night-2); border:var(--px) solid var(--line); /* gestufte Ecken statt Radius — das Raster wird zur Kante */ clip-path:polygon( 12px 0, calc(100% - 12px) 0, calc(100% - 12px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 12px, 100% 12px, 100% calc(100% - 12px), calc(100% - 4px) calc(100% - 12px), calc(100% - 4px) calc(100% - 4px), calc(100% - 12px) calc(100% - 4px), calc(100% - 12px) 100%, 12px 100%, 12px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 12px), 0 calc(100% - 12px), 0 12px, 4px 12px, 4px 4px, 12px 4px); } .px--cy{border-color:var(--cy-dim)} .px--amber{border-color:var(--amber-dim)} .px--em{border-color:var(--em-dim)} /* ---------- Marken-Chips ---------- */ .chip{ display:inline-block;font-family:var(--syne);font-size:10.5px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;white-space:nowrap; } .chip--soon{background:var(--night-3);color:var(--text-3)} .chip--cy{background:var(--cy-dim);color:var(--cy)} .chip--amber{background:var(--amber-dim);color:var(--amber)} .chip--em{background:var(--em-dim);color:var(--em)} .chip--free{background:var(--amber);color:#2A1B03} /* ---------- Knopf im Arcade-Stil ---------- */ .btn{ /* border und cursor gehören hierher, obwohl jahrelang nur diese Klasse trug: Ein