/* =============================================================================
Myra — Landing. Stand 28.08.2026.
Ersetzt die deutsche Fassung vollstaendig (gesichert als Tag
`website/stand-20260828`). Text: web/COPY_EN_2026-08.md, acht Bloecke.
Bauplan: web/REFERENZ_VERTUS.md.
-----------------------------------------------------------------------------
1 · DIE MARKE — Joels Festlegung vom 28.08.2026
-----------------------------------------------------------------------------
Weiss, Schwarz, Blau. Kein Gold, kein Beige. Das Blau ist aus Joels
Referenzbild GEMESSEN, nicht gewaehlt: Farbton 219-223 Grad, volle Saettigung,
helle Kerne kippen Richtung Cyan.
Rolle Wert Farbton Kontrast
Seitengrund hell #FFFFFF -- --
Buehne dunkel #05070E 226,7 --
Blau fuer Text auf Weiss #0A2E9E 225,4 11,07:1 auf Weiss
Blau kraeftig #0B3FD1 224,2 7,94:1 auf Weiss
Flow-Tiefe (P25) #001A4D 219,7 --
Flow-Mitte (P50) #002887 222,2 --
Flow-Koerper (P75) #0B3FD1 224,2 2,54:1 auf der Buehne
Flow-Kern (P95) #3795EF 209,3 6,43:1 auf der Buehne
Flow-Spitzlicht (P99) #5B9BFF 216,6 7,26:1 auf der Buehne
Tinte #0F1115 220,0 18,90:1 auf Weiss
Auch die Grautoene sind dieses Blau, nur entsaettigt: --gedaempft 219,3 ·
--linie-stark 220,0 · --buehne-gedaempft 220,6 · --linie 220,0. Die Seite hat
keinen einzigen neutralen Grauwert; jede Flaeche liegt im gemessenen Band.
NACHGERECHNET, NICHT BEHAUPTET: jede Zahl oben steht so in kontrast.py und
wird bei jedem Lauf neu gerechnet. `python3 web/landing-neu/kontrast.py`
muss mit 0 zurueckkommen. Kommentare luegen, das Skript nicht.
-----------------------------------------------------------------------------
2 · TIEFE — benannte Stufen
-----------------------------------------------------------------------------
Die alte Regel aus docs/marke.md ("eine Schattenfamilie, weich und flach —
Papier, kein Startup-Gluehen") ist am 28.08.2026 gefallen. Joel ausdruecklich:
"die Buttons mit Schatten in Farbverlaeufen." vertus.ai traegt gemessen 194
border-radius, 42 Verlaeufe, 40 Schatten, 30 Weichzeichner. Tiefe ist gewollt.
An ihre Stelle treten FUENF benannte Stufen. Mehr gibt es nicht; wer eine
sechste braucht, hat ein Layoutproblem, kein Schattenproblem.
--tiefe-1 KANTE Karte in Ruhe. Haarlinie plus ein Hauch Streuung.
Sie hebt die Karte vom Grund ab, nicht von der Seite.
--tiefe-2 ABHEBEN Karte unter dem Zeiger, Produktausschnitt, Portraet.
Doppelt so weit gestreut, immer noch blau statt schwarz.
--tiefe-3 KNOPF Primaerknopf in Ruhe. Drei Lagen: Innenlicht oben
(die Kante faengt Licht), harter Nahschatten (er liegt
auf), farbiger Fernschatten (er leuchtet).
--tiefe-4 GRIFF Primaerknopf unter dem Zeiger. Dieselben drei Lagen,
weiter und farbiger. Der Knopf kommt entgegen.
--tiefe-glut GLUT Nur auf der dunklen Buehne. Kein Umgebungsschatten —
auf Schwarz sieht man keinen Schatten, nur Licht.
Ein blauer Rand plus ein weiter, tiefer Schein.
Alle Schattenfarben sind das Blau (10 46 158 / 11 63 209 / 91 155 255), nie
Schwarz. Ein schwarzer Schatten unter einer blauen Flaeche wird grau und
schmutzig; ein blauer bleibt Farbe.
-----------------------------------------------------------------------------
3 · DIE NAHT ZUM FLOW (web/landing-neu/flow.js, anderer Bau)
-----------------------------------------------------------------------------
Vollstaendiger Vertrag: web/landing-neu/FLOW_KONTRAKT.md. Kurzfassung:
Ersatzverlauf, CSS
...
· Drei Buehnen, drei benannte Zustaende: ruhig (Kopf) · stroemung
(Zwischenruf) · strom (Abschluss und Aufforderung).
· Der Ersatzverlauf liegt IMMER darunter und ist der Grund. Er greift ohne
JavaScript, vor dem Laden von flow.js und bei prefers-reduced-motion.
Die Seite ist ohne flow.js vollstaendig und schoen — das ist die Bedingung,
unter der die Naht ueberhaupt erlaubt ist.
· Das Canvas liegt IM MARKUP und gehoert der Huelle. flow.js erzeugt keines,
es zeichnet in das vorhandene. Es startet auf opacity 0; erst wenn flow.js
sein erstes Bild gezeichnet hat, setzt es .flow-laeuft auf die Buehne, und
dann blendet das Canvas ueber den Ersatzverlauf. Kein Aufblitzen, kein
leeres Schwarz. Beim Abbau nimmt flow.js die Klasse wieder herunter.
· Bei prefers-reduced-motion nimmt CSS das Canvas hart aus dem Fluss.
· SECHS Farbmerkmale, nicht drei (Token-Block unten): flow.js liest die
ganze Rampe --flow-grund … --flow-spitze. kontrast.py vergleicht die Liste
mit der in flow.js — ein Name, zwei Farben ist genau der Fehler, den hier
am 28.08. niemand gesehen haette (FLOW_KONTRAKT.md §3).
· Lesbarkeit: die Huelle legt ihren Text OHNE Schleier auf die Buehne.
Deshalb misst flow.js die Textkaesten in .buehne-inhalt und deckelt dort
seine Helligkeit auf #043AA9 — weiss 9,6:1, --buehne-gedaempft 5,3:1.
Gemessen mit flow-messen.py, nicht behauptet.
-----------------------------------------------------------------------------
4 · SCHRIFT
-----------------------------------------------------------------------------
Aspekta Variable 2.100 (Ivo Dolenc), SIL Open Font License 1.1, Reserved Font
Name "Aspekta" — Lizenztext liegt bei: fonts/OFL-Aspekta.txt. Dieselbe Schrift
wie vertus.ai, ein Achsengewicht 100-900, 30 KB fuer die ganze Familie.
Unveraendert uebernommen; der Reserved Font Name verbietet Aenderung unter
diesem Namen, und wir aendern nichts.
Aspekta 2.100 hat kein Paragraphenzeichen (U+00A7) und keine Tilde (U+007E).
Beide stehen auf der Seite ("§ 7 UWG") und massenhaft auf Impressum und
Datenschutzerklaerung. Dafuer liegt ein 1,8-KB-Ausschnitt aus Inter daneben
(fonts/ergaenzung-latin.woff2, OFL 1.1 ohne Reserved Font Name, Lizenztext
fonts/OFL-Inter.txt), per unicode-range auf genau diese zwei Zeichen begrenzt.
Der Browser laedt ihn nur, wenn eines davon vorkommt.
BEIDE liegen lokal in fonts/. Kein CDN, kein fremder Host — das ist keine
Geschmacksfrage, sondern die Zusage im Fuss der Seite: "This page loads no
script, no font and no image from a third-party server."
-----------------------------------------------------------------------------
5 · BEWEGUNG
-----------------------------------------------------------------------------
Handgeschrieben: IntersectionObserver plus CSS-Uebergaenge, main.js, rund
siebzig Zeilen. Keine Bibliothek. vertus laedt GSAP, Lenis, Swiper und jQuery
von fremden Servern und braucht deshalb ein Einwilligungsbanner. Wir nicht.
prefers-reduced-motion: reduce schaltet ALLES ab — Einblenden, Flow,
Wortwechsel. Und ohne JavaScript ist nichts verborgen: jede Regel, die etwas
unsichtbar macht, haengt an .js am .
========================================================================== */
/* ---------------------------------------------------------------------------
Schrift
--------------------------------------------------------------------------- */
@font-face {
font-family: "Aspekta";
src: url("fonts/aspekta-var.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* Die Wortmarke laeuft in Outfit (SIL OFL, fonts/OFL-Outfit.txt) — beschlossen
von Joel am 30.08.2026, zusammen mit dem Cut-m. Nur die Marke; der Text der
Seite bleibt Aspekta. Selbst gehostet wie alles hier — ein Fremdabruf waere
der einzige der ganzen Seite. */
@font-face {
font-family: "Outfit";
src: url("fonts/outfit-latin-500.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
/* Nur U+007E und U+00A7. Aspekta 2.100 hat beide nicht; ohne diese Zeile
springt der Browser fuer jedes Paragraphenzeichen in die Systemschrift und
das Impressum bekommt acht fremde Glyphen. */
@font-face {
font-family: "Ergaenzung";
src: url("fonts/ergaenzung-latin.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+007E, U+00A7;
}
/* ---------------------------------------------------------------------------
Token
--------------------------------------------------------------------------- */
:root {
/* Flaechen */
--grund: #ffffff;
--flaeche: #f1f5fd;
--flaeche-2: #e2eaf8;
--buehne: #05070e;
/* Schrift auf hellem Grund */
--tinte: #0f1115;
/* vertus faerbt seinen Fliesstext #808080. Das sind auf Weiss 3,95:1 und
reisst SC 1.4.3. #5B6577 ist der hellste Ton, der auf ALLEN drei hellen
Gruenden traegt — auch auf --flaeche-2 (#E2EAF8), dem dunkelsten davon:
5,88 / 5,38 / 4,86:1. Von #4B5568 aus ein sichtbarer Schritt Richtung
vertus, ohne die Schwelle zu reissen. kontrast.py rechnet es nach. */
--gedaempft: #5b6577;
--akzent: #0a2e9e;
--akzent-stark: #0b3fd1;
--akzent-licht: #1350d8;
/* Linien auf hellem Grund */
--linie: #dde4f2;
--linie-stark: #6e7686;
/* Auf der dunklen Buehne */
--buehne-tinte: #ffffff;
--buehne-gedaempft: #b6c1d7;
--buehne-linie: #1b2436;
--knopf-hell: #1e63e8;
/* Flow — die SECHS Stufen der Rampe, von flow.js ueber getComputedStyle
gelesen. EINE Quelle fuer Shader und Ersatzverlauf; Reihenfolge und Namen
stehen genauso in flow.js (FARBEN) und werden von kontrast.py verglichen.
Die Werte sind Joels Perzentile aus dem Referenzbild: P25 / P50 / P75 /
P95 / P99, dazu der Grund aus den Ecken.
--flow-koerper ist die P75-Stufe — die dunklere P50-Stufe heisst
--flow-mitte. Warum das wichtig ist: FLOW_KONTRAKT.md §3.
⚠ 29.08.2026: zwei der sechs Stufen sind NICHT mehr Joels Perzentile.
Gemessen kippten die hellen Stufen Richtung Cyan (Spitze #43CFFF lag bei
Farbton 195,3 — das Referenzbild hat sie so hergegeben, aber die Marke
kennt kein Cyan). Joel: das ist das falsche Blau. Ersetzt sind genau die
zwei, die man sieht: --flow-koerper #074AC7 -> #0B3FD1 (das Blau kraeftig
der Marke) und --flow-spitze #43CFFF -> #5B9BFF. Damit liegt die ganze
Rampe im Band 209-224 Grad statt 195-224, und die Spitze traegt auf der
Buehne 7,26:1 statt 11,13:1 — weniger Reserve, immer noch weit ueber der
Schwelle. Nachgerechnet in kontrast.py, nicht geschaetzt. */
--flow-grund: #05070e;
--flow-tiefe: #001a4d;
--flow-mitte: #002887;
--flow-koerper: #0b3fd1;
--flow-kern: #3795ef;
--flow-spitze: #5b9bff;
/* Schriftgroessen — gemessen an vertus.ai (28.08.2026), nicht geschaetzt:
H1 48 px / Gewicht 500 / Laufweite -1,44 px, H2 40 px / -1,2 px,
Fliesstext 16 px. Myra stand vorher bei 100 px H1 und 18 px Text.
Die Riesenzeile DARF jetzt kleiner werden, weil ein Bild die Seite
traegt — das ist der ganze Grund, warum vertus mit 48 px auskommt.
clamp-Deckel so gesetzt, dass 1440 px Fensterbreite genau die
gemessenen Werte ergibt: 3,35vw = 48,2 px, 2,8vw = 40,3 px. */
--t-riese: clamp(2.125rem, 3.35vw, 3.25rem);
--t-gross: clamp(1.625rem, 2.8vw, 2.5rem);
--t-mittel: clamp(1.125rem, 1.35vw, 1.375rem);
--t-text: 1rem;
--t-klein: 0.9375rem;
--t-mikro: 0.8125rem;
/* Raster */
--breit: 1180px;
--schmal: 720px;
--luft: clamp(20px, 4vw, 40px);
--abschnitt-luft: clamp(76px, 9vw, 148px);
/* Radien — vertus benutzt ELF verschiedene Werte, bis 60 px und 500 px.
Myra hatte vier. Rund ist hier kein Zierrat, sondern das, was die Seite
von einem Formular unterscheidet. Jeder Wert unten kommt im Blatt
mindestens einmal vor; ein Token, das nichts faerbt, waere gelogen. */
--r-mikro: 4px;
--r-fein: 6px;
--r-klein: 10px;
--r: 14px;
--r-mittel: 18px;
--r-gross: 24px;
--r-weit: 32px;
--r-schale: 40px;
--r-buehne: 60px;
--r-band: 500px;
--r-voll: 999px;
/* Tiefe. Fuenf Stufen, benannt im Kopf dieser Datei. */
--tiefe-1:
0 1px 2px rgb(10 46 158 / 0.06),
0 8px 20px -12px rgb(10 46 158 / 0.22);
--tiefe-2:
0 2px 4px rgb(10 46 158 / 0.08),
0 22px 48px -20px rgb(10 46 158 / 0.34);
--tiefe-3:
inset 0 1px 0 rgb(255 255 255 / 0.24),
0 1px 2px rgb(7 20 60 / 0.30),
0 12px 26px -12px rgb(11 63 209 / 0.62);
--tiefe-4:
inset 0 1px 0 rgb(255 255 255 / 0.30),
0 2px 5px rgb(7 20 60 / 0.32),
0 20px 44px -14px rgb(11 63 209 / 0.78);
--tiefe-glut:
0 0 0 1px rgb(55 149 239 / 0.30),
0 28px 80px -26px rgb(11 63 209 / 0.90);
/* Innenfase — das Detail, an dem vertus teuer aussieht: eine 1 px feine
helle Kante oben links auf jeder Flaeche, als saesse Licht darauf.
vertus traegt drei solche Schatten, Myra hatte einen. Jetzt drei
eigenstaendige, plus die Innenkante in --tiefe-3 und --tiefe-4. */
--fase: inset 1px 1px 0 rgb(255 255 255 / 0.65);
--fase-blau:
inset 1px 1px 0 rgb(255 255 255 / 0.9),
inset 0 -1px 0 rgb(10 46 158 / 0.09);
--fase-dunkel:
inset 1px 1px 0 rgb(255 255 255 / 0.16),
inset -1px -1px 0 rgb(255 255 255 / 0.05);
/* Bewegung */
--kurve: cubic-bezier(0.22, 0.61, 0.36, 1);
--dauer: 0.24s;
--dauer-lang: 0.72s;
}
/* ---------------------------------------------------------------------------
Grundlagen
--------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* scroll-padding: sonst verschwindet das Sprungziel unter der Kopfleiste. */
scroll-padding-top: 84px;
/* clip statt hidden: `overflow-x: hidden` macht aus einen eigenen
Scroll-Behaelter — ScrollTrigger und Lenis rechnen dann am falschen
Element. `clip` schneidet ab, ohne einen Behaelter aufzumachen. */
overflow-x: clip;
}
/* ---------------------------------------------------------------------------
Lenis — weiches Scrollen
---------------------------------------------------------------------------
Die vier Regeln, die die Bibliothek braucht. Sie stehen HIER und nicht in
einer zweiten Datei, weil die Seite genau ein Stylesheet laedt. Die Klassen
setzt Lenis selbst; ohne Lenis greift keine davon.
--------------------------------------------------------------------------- */
html.lenis,
html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
body {
margin: 0;
background: var(--grund);
color: var(--tinte);
font-family: "Aspekta", "Ergaenzung", system-ui, -apple-system, "Segoe UI", sans-serif;
font-size: var(--t-text);
font-weight: 380;
/* vertus setzt 16/20 (1,25). Auf Absaetze mit 60 Zeichen Zeilenmass ist das
eine Wand — WCAG SC 1.4.8 nennt 1,5 als Richtwert fuer Textbloecke. 1,45
ist der Schritt, den die Seite vertraegt: von 1,62 spuerbar dichter,
ohne dass die langen Absaetze zulaufen. Bewusst NICHT auf 1,25. */
line-height: 1.45;
letter-spacing: -0.003em;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
/* Silbentrennung nur auf Deutsch. Englische Woerter auf dieser Seite sind
kurz; deutsche Komposita sind es nicht — das laengste im Bestand ist
„Auftragsverarbeitungsvertrag" (28 Zeichen, datenschutz.html). In einer
350-px-Spalte reisst so ein Wort entweder die Zeile auf oder haengt ueber
den Rand. `hyphens: auto` braucht das lang-Attribut und die Silbentabelle
des Browsers, und genau deshalb steht es an :lang(de) und nicht an html:
der Slogan im Kopf traegt lang="en" und ist damit automatisch ausgenommen.
-webkit-hyphens fuer Safari vor 17. */
:lang(de) {
-webkit-hyphens: auto;
hyphens: auto;
}
h1,
h2,
h3 {
margin: 0;
/* vertus: Gewicht 500, Laufweite -1,44 px auf 48 px = -0,03em. */
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.03em;
text-wrap: balance;
}
p {
margin: 0 0 1.05em;
text-wrap: pretty;
}
p:last-child {
margin-bottom: 0;
}
a {
color: var(--akzent);
text-decoration-color: rgb(10 46 158 / 0.35);
text-underline-offset: 0.18em;
text-decoration-thickness: 1px;
transition: color var(--dauer) var(--kurve),
text-decoration-color var(--dauer) var(--kurve);
}
a:hover {
color: var(--akzent-stark);
text-decoration-color: currentColor;
}
strong {
font-weight: 640;
}
img,
svg,
canvas {
display: block;
max-width: 100%;
}
::selection {
background: rgb(11 63 209 / 0.16);
}
:focus-visible {
outline: 2px solid var(--tinte);
outline-offset: 3px;
border-radius: var(--r-mikro);
}
.buehne :focus-visible {
outline-color: var(--flow-spitze);
}
/* Sprunglink — erste Taste auf jeder Seite. */
.sprung {
position: absolute;
left: 12px;
top: -80px;
z-index: 99;
padding: 12px 18px;
border-radius: var(--r-klein);
background: var(--grund);
color: var(--akzent);
font-weight: 600;
text-decoration: none;
transition: top var(--dauer) var(--kurve);
}
/* Der Schatten erst im Fokus. Ohne diese Trennung ragte der Schein des
ausgeblendeten Sprunglinks oben links sichtbar in die Buehne — auf dem
dunklen Kopf war das ein heller Fleck ohne Ursache. */
.sprung:focus {
top: 12px;
box-shadow: var(--fase), var(--tiefe-2);
}
.sr-only,
.nur-lesen {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* 30.08.2026: `viewport-fit=cover` steht seit jeher im , benutzt wurde
env() nirgends — gemessen null Vorkommen. Auf einem Telefon mit Kerbe im
Querformat lief der Text damit unter die Kerbe und unter die abgerundete
Ecke. Es steht HIER und nicht an drei Einzelstellen, weil jede Spalte der
Seite eine .wrap ist: Kopfleiste, Abschnitte, Fuss. Ohne Kerbe ist env()
null, `max()` liefert dann exakt --luft — auf dem Schreibtisch aendert
sich kein Pixel. Der 0px-Rueckfall in env() ist Pflicht: kennt ein Browser
env() nicht, ist sonst die ganze Zeile ungueltig und die Luft weg. */
.wrap {
width: 100%;
max-width: var(--breit);
margin-inline: auto;
padding-inline:
max(var(--luft), env(safe-area-inset-left, 0px))
max(var(--luft), env(safe-area-inset-right, 0px));
}
.wrap-schmal {
max-width: var(--schmal);
}
/* ---------------------------------------------------------------------------
Knoepfe — Joels Satz: "die Buttons mit Schatten in Farbverlaeufen"
--------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 28px;
border: 0;
border-radius: var(--r-voll);
font: inherit;
font-size: var(--t-klein);
font-weight: 600;
letter-spacing: -0.006em;
text-decoration: none;
cursor: pointer;
transition: transform var(--dauer) var(--kurve),
box-shadow var(--dauer) var(--kurve),
background-color var(--dauer) var(--kurve),
color var(--dauer) var(--kurve);
}
/* Der Pfeil ist gezeichnet, kein Zeichensatz-Glyph und kein Bild:
ein 8x8-Quadrat, um 45 Grad gedreht, zwei Kanten sichtbar. */
.btn::after {
content: "";
width: 7px;
height: 7px;
border-top: 1.6px solid currentColor;
border-right: 1.6px solid currentColor;
transform: rotate(45deg);
opacity: 0.9;
transition: transform var(--dauer) var(--kurve);
}
.btn:hover::after {
transform: rotate(45deg) translate(2px, -2px);
}
.btn-primaer {
/* Zwei Stops, beide gemessen: #0B3FD1 traegt weissen Text mit 7,94:1,
#0A2E9E mit 11,07:1. Ein hellerer Stop waere huebscher und wuerde die
4,5:1 reissen — deshalb steht er nicht hier. */
background-image: linear-gradient(178deg, var(--akzent-stark) 0%, var(--akzent) 100%);
color: #fff;
box-shadow: var(--tiefe-3);
}
.btn-primaer:hover {
background-image: linear-gradient(178deg, var(--akzent-licht) 0%, var(--akzent-stark) 100%);
box-shadow: var(--tiefe-4);
transform: translateY(-1px);
}
.btn-primaer:active {
transform: translateY(0);
box-shadow: var(--tiefe-3);
}
/* Auf dunklem Grund — Buehne und Kopfleiste — traegt der Knopf von oben mit
2,54:1 gegen Schwarz keine erkennbare Grenze (SC 1.4.11 will 3:1). Zwei
hellere Stops: #1E63E8 liegt bei 3,84:1 gegen die Buehne, #1350D8 bei
3,04:1; weisser Text steht mit 5,24:1 bzw. 6,63:1 darauf.
Und ein DURCHGEHENDER Rand im Spitzlicht. Er ist nicht Zierrat, er ist die
Erfuellung: sobald der Flow hinter dem Knopf hell wird, faellt die Grenze
Fuellung-gegen-Grund unter 3:1 — rechnerisch bei JEDER Aufhellung, weil der
untere Stop schon auf blankem Schwarz nur 3,04:1 hat. Der Rand haelt
dagegen: #5B9BFF steht ueber der hellsten Mischung der drei Buehnen noch
mit 5,4 bis 6,0:1. kontrast.py rechnet beides nach. */
.buehne .btn-primaer,
.leiste .btn-primaer {
background-image: linear-gradient(178deg, var(--knopf-hell) 0%, var(--akzent-licht) 100%);
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 0.30),
0 0 0 2px var(--flow-spitze),
0 16px 46px -14px rgb(30 99 232 / 0.85);
}
.buehne .btn-primaer:hover,
.leiste .btn-primaer:hover {
/* NICHT heller als --knopf-hell: weisser Text auf --flow-kern haette
3,13:1. Der Zeiger-Zustand wird ueber Rand und Schein heller, nicht
ueber die Fuellung. */
background-image: linear-gradient(178deg, var(--knopf-hell) 0%, var(--akzent-stark) 100%);
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 0.36),
0 0 0 2px #fff,
0 24px 60px -14px rgb(55 149 239 / 0.95);
}
.btn-still {
background: var(--grund);
color: var(--akzent);
box-shadow: var(--fase), inset 0 0 0 1px var(--linie-stark);
}
.btn-still:hover {
background: var(--flaeche);
box-shadow: inset 0 0 0 1px var(--akzent-stark), var(--tiefe-1);
}
/* Zusatz hinter der Beschriftung: "45 minutes, free" traegt weniger Gewicht
als "Pick a time", steht aber im selben Knopf. */
.btn-zusatz {
font-weight: 420;
opacity: 0.82;
}
/* ---------------------------------------------------------------------------
Kopfleiste
--------------------------------------------------------------------------- */
.leiste {
position: sticky;
top: 0;
z-index: 40;
/* Dunkles Glas — IMMER, nicht erst nach dem Scrollen. Ueber der Buehne
verschwindet die Leiste im Grund, ueber den weissen Abschnitten steht sie
als schwarzer Balken. Beides ist beabsichtigt, und beides funktioniert
ohne JavaScript: eine Leiste, die ihre Farbe erst per Skript findet, ist
ohne Skript weisse Schrift auf weissem Grund. */
background: rgb(5 7 14 / 0.92);
backdrop-filter: blur(16px) saturate(1.4);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
border-bottom: 1px solid rgb(255 255 255 / 0.07);
transition: background-color var(--dauer) var(--kurve),
border-color var(--dauer) var(--kurve);
}
@supports not (backdrop-filter: blur(4px)) {
.leiste {
background: rgb(5 7 14 / 0.96);
}
}
/* main.js setzt das, sobald der Waechter oben aus dem Bild ist. Reine Zugabe. */
.leiste.ist-gescrollt {
background: rgb(5 7 14 / 0.95);
border-bottom-color: rgb(55 149 239 / 0.28);
}
.leiste-innen {
display: flex;
align-items: center;
gap: 20px;
min-height: 68px;
}
.waechter {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
}
/* Die Wortmarke: das Cut-m als erster Buchstabe, "yra" als gesetzter Text
(Joel, 30.08.2026 — „das m den cut hat wie das icon logo von der app").
Markup und Begruendung stehen im Vorratsblock oben in index.html.
Der Vorrat traegt nur das Symbol und darf keinen Platz belegen. Nicht
`display: none`: ein `