/* Elite als eine einzige Hintergrund-Leinwand.
Alle großen Lichtfelder liegen in Seitenkoordinaten. Kein Verlauf beginnt
oder endet mehr an einer Sektionsgrenze. */
@media (min-width: 1024px) {
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) {
position: relative;
isolation: isolate;
background: #020100;
}
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil)::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(ellipse 92% 38% at 50% 24%, rgba(255, 236, 202, 0.76) 0%, rgba(250, 180, 73, 0.60) 30%, rgba(194, 111, 13, 0.30) 58%, rgba(92, 47, 4, 0.08) 82%, transparent 100%),
radial-gradient(ellipse 78% 37% at 100% 47%, rgba(255, 199, 102, 0.62) 0%, rgba(224, 137, 25, 0.40) 38%, rgba(134, 72, 6, 0.15) 70%, transparent 100%),
radial-gradient(ellipse 80% 39% at 0% 66%, rgba(255, 218, 151, 0.76) 0%, rgba(240, 158, 43, 0.52) 34%, rgba(161, 88, 8, 0.21) 66%, transparent 100%),
radial-gradient(ellipse 76% 37% at 100% 81%, rgba(255, 190, 76, 0.58) 0%, rgba(218, 128, 18, 0.36) 40%, rgba(124, 64, 5, 0.13) 72%, transparent 100%),
radial-gradient(ellipse 92% 32% at 30% 96%, rgba(255, 192, 82, 0.46) 0%, rgba(204, 114, 13, 0.27) 44%, rgba(102, 50, 3, 0.09) 76%, transparent 100%),
linear-gradient(180deg, #020100 0%, #0b0601 18%, #160b02 42%, #1c0e02 64%, #130901 84%, #070301 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000000 96px, #000000 100%);
mask-image: linear-gradient(180deg, transparent 0, #000000 96px, #000000 100%);
}
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) > section {
position: relative;
z-index: 1;
background-color: transparent;
background-image: none;
}
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) .lve-e2::before,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) .lve-e2::after,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) .lve-e3::after,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) .lve-e5::before,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) .lve-e5::after,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) .lve-e6::before,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) .lve-e6::after {
content: none;
background: none;
background-image: none;
}
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) .lve-e3 .lve-e3-bg,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) .lve-e4 .lve-e4-bg,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) .lve-e5 .lve-e5-bg,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) .lve-e6 .lve-e6-bg,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) .lve-e7 .lve-e7-bg,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) .lve-e7 .lve-e7-bg::before {
background: none;
background-image: none;
-webkit-mask-image: none;
mask-image: none;
}
}
/* Die gemeinsame Leinwand endet weich auf demselben Dunkelgold wie der
separate Footerwrapper. Dadurch wird das letzte Goldfeld nicht mehr an
der DOM-Grenze als waagerechte Kante abgeschnitten. */
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil)::after {
content: "";
position: absolute;
inset: auto 0 0;
height: clamp(180px, 24vw, 260px);
z-index: 0;
pointer-events: none;
background: linear-gradient(180deg,
rgba(2, 1, 0, 0) 0%,
rgba(2, 1, 0, 0.34) 44%,
#020100 100%);
}
/* e3 war urspruenglich fuer eine fast weisse lokale Goldflaeche gesetzt.
Nachdem die getrennte Flaeche zugunsten der Seitenleinwand entfaellt,
muessen Ueberschrift und Einleitung auf dem dunklen Goldgrund hell sein. */
body.page-id-8046 .lvf-page.lvf-page .lve-e3 .lve-e3-title {
color: #fffaf0;
text-shadow: 0 2px 26px rgba(0, 0, 0, 0.34);
}
body.page-id-8046 .lvf-page.lvf-page .lve-e3 .lve-e3-sub {
color: rgba(255, 247, 232, 0.82);
}
@media (max-width: 1023.98px) {
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) {
position: relative;
isolation: isolate;
background: #020100;
}
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil)::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(ellipse 124% 33% at 50% 19%, rgba(255, 231, 190, 0.80) 0%, rgba(247, 178, 70, 0.64) 32%, rgba(183, 101, 10, 0.28) 62%, transparent 100%),
radial-gradient(ellipse 108% 34% at 0% 42%, rgba(255, 204, 116, 0.64) 0%, rgba(226, 137, 23, 0.42) 40%, rgba(129, 67, 5, 0.15) 72%, transparent 100%),
radial-gradient(ellipse 110% 35% at 100% 63%, rgba(255, 193, 91, 0.62) 0%, rgba(218, 127, 16, 0.39) 42%, rgba(121, 60, 4, 0.13) 74%, transparent 100%),
radial-gradient(ellipse 110% 34% at 0% 82%, rgba(255, 211, 137, 0.66) 0%, rgba(231, 144, 30, 0.42) 42%, rgba(132, 69, 5, 0.14) 74%, transparent 100%),
radial-gradient(ellipse 122% 29% at 72% 96%, rgba(255, 190, 79, 0.48) 0%, rgba(208, 118, 13, 0.29) 44%, rgba(109, 53, 3, 0.10) 76%, transparent 100%),
linear-gradient(180deg, #020100 0%, #0b0601 18%, #160b02 43%, #1b0d02 66%, #120801 85%, #070301 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000000 96px, #000000 100%);
mask-image: linear-gradient(180deg, transparent 0, #000000 96px, #000000 100%);
}
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) > .lve-e1,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) > .lve-e2,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) > .lve-e3,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) > .lve-e4,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) > .lve-e5,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) > .lve-e6,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) > .lve-e7 {
position: relative;
z-index: 1;
background-color: transparent;
background-image: none;
}
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) .lve-e2::before,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) .lve-e2::after,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) .lve-e3::after,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) .lve-e5::before,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) .lve-e5::after,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) .lve-e6::before,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) .lve-e6::after {
content: none;
background: none;
background-image: none;
}
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) .lve-e3 .lve-e3-bg,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) .lve-e4 .lve-e4-bg,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) .lve-e5 .lve-e5-bg,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) .lve-e6 .lve-e6-bg,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) .lve-e7 .lve-e7-bg,
body.page-id-8046 .lvf-page.lvf-page:not(.lvf-theme-teil) .lve-e7 .lve-e7-bg::before {
background: none;
background-image: none;
-webkit-mask-image: none;
mask-image: none;
}
}
/* == e1-hero == */
/* e1-hero: Hero der Lvlup Elite Seite. Praefix .lve-e1- */
/* Abgleich 13.08.2026: Diese Datei enthielt bisher die Werte VOR der
Runde-3/Abnahme-Messung vom 06.-10.08. Die richtigen, pixelgemessenen Werte
standen nur in server-stand-20260810/lvlup-fixes/r3-elite.css (tabu, nur
lesen) und ueberschrieben diese Datei live per gleicher oder hoeherer
Spezifitaet, ohne dass fragment.css je nachgezogen wurde. Wer nur diese
Datei liest (ohne den Override geladen zu haben), sah eine Seite, die es
live nie gab. Ab hier stehen die tatsaechlich messbaren, gepruepften Werte
direkt hier, damit das Fragment fuer sich allein richtig ist. */
.lve-e1 {
position: relative;
overflow: clip;
background: #000;
padding: 306px 0 236px;
}
/* Hintergrund: Videoframe + weiche Glows. Bild und Überlagerung laufen vor
ihrer Unterkante in die gemeinsame Seitenleinwand aus. */
.lve-e1-bg {
position: absolute;
inset: 0;
pointer-events: none;
}
.lve-e1-bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 790px;
object-fit: fill;
object-position: center top;
opacity: 1;
/* Sepia+Saettigung dreht das blaue Ausgangsbild nach Bernstein. Kette am
Quellbild zurueckgerechnet, mittlerer Restfehler 11/255 an 12 Stuetzstellen
gegen referenz-neu/soll/elite-aus-vollbild.png. */
filter: sepia(1) saturate(3.2) brightness(0.8);
-webkit-mask-image: linear-gradient(180deg, #000000 0%, #000000 74%, rgba(0, 0, 0, 0.68) 82%, rgba(0, 0, 0, 0.24) 92%, transparent 100%);
mask-image: linear-gradient(180deg, #000000 0%, #000000 74%, rgba(0, 0, 0, 0.68) 82%, rgba(0, 0, 0, 0.24) 92%, transparent 100%);
}
.lve-e1-bg-shade {
position: absolute;
inset: 0;
/* Randband links durchgehend abdunkeln (Soll 0..5, vorher 8..35 an dieser
Stelle), warme Bernstein-Toenung oben. */
background:
linear-gradient(180deg, rgba(18, 10, 1, 0.42) 0%, rgba(18, 10, 1, 0.24) 12%, rgba(14, 8, 1, 0.10) 22%, rgba(10, 6, 1, 0.04) 40%, rgba(10, 6, 1, 0) 72%),
linear-gradient(180deg,
rgba(0, 0, 0, 0.95) 0%,
rgba(0, 0, 0, 0.86) 6%,
rgba(0, 0, 0, 0.52) 11%,
rgba(0, 0, 0, 0.26) 16%,
rgba(0, 0, 0, 0.14) 24%,
rgba(0, 0, 0, 0.05) 40%,
rgba(0, 0, 0, 0) 70%);
}
/* Grosser Bernstein-Glow oben (die "Star"-Vektoren aus dem Figma, angenaehert).
Die Lichtkeil-Struktur ging bei zu starkem Glow verloren (Soll x0..70 oben: 1, vorher 13). */
.lve-e1-bg::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 62% 40% at 50% -16%, rgba(255, 146, 0, 0.22) 0%, rgba(255, 146, 0, 0.08) 45%, rgba(255, 146, 0, 0) 72%);
}
/* Eckabdunklung oben, Bodenschein unten mittig. Rechte Randsäule ergänzt einen warmen Schein, den das
Quellbild dort nicht hat (Soll x1690..1760 y300..786: 11 -> 41). */
.lvf-page .lve-e1.lve-e1 .lve-e1-bg::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 20% 13% at 0% 0%, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0) 76%),
radial-gradient(ellipse 20% 13% at 100% 0%, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0) 76%),
radial-gradient(ellipse 17% 12% at 70% 90%, rgba(255, 176, 60, 0.22) 0%, rgba(255, 176, 60, 0) 76%),
radial-gradient(ellipse 26% 34% at 0% 100%, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.80) 50%, rgba(0, 0, 0, 0.30) 80%, rgba(0, 0, 0, 0) 100%),
radial-gradient(ellipse 13% 44% at 105% 62%, rgba(255, 168, 54, 0.30) 0%, rgba(255, 146, 0, 0) 78%);
-webkit-mask-image: linear-gradient(180deg, #000000 0%, #000000 74%, rgba(0, 0, 0, 0.68) 82%, rgba(0, 0, 0, 0.24) 92%, transparent 100%);
mask-image: linear-gradient(180deg, #000000 0%, #000000 74%, rgba(0, 0, 0, 0.68) 82%, rgba(0, 0, 0, 0.24) 92%, transparent 100%);
}
@media (min-width: 1024px) {
/* Der nachgeladene Legacy-Stand setzte die Bildmaske auf none. Diese
spezifischere Regel hält den weichen Auslauf auch in der Live-Ladereihenfolge. */
.lvf-page .lve-e1.lve-e1 img.lve-e1-bg-img.lve-e1-bg-img {
-webkit-mask-image: linear-gradient(180deg, #000000 0%, #000000 68%, rgba(0, 0, 0, 0.56) 78%, rgba(0, 0, 0, 0.16) 88%, transparent 96%, transparent 100%);
mask-image: linear-gradient(180deg, #000000 0%, #000000 68%, rgba(0, 0, 0, 0.56) 78%, rgba(0, 0, 0, 0.16) 88%, transparent 96%, transparent 100%);
}
}
.lve-e1-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* Kicker, ohne sichtbare Pille. Befund B1 (Runde 3, 06.08.): im Entwurf ist
die Kapsel-Flaeche schwarz mit 47% auf schwarzem Grund, das ist optisch nicht
von "keine Flaeche" zu unterscheiden (Gewinn eine halbe Stufe in einem
Kanal, siehe Kicker-Zweifarbigkeit-Notiz 13.08 weiter unten). Als echter Kasten mit
Innenabstand kostet sie dagegen 14 px Seitenhoehe und schiebt die H1 nach
unten aus ihrer belegten Soll-Position. Deshalb kein Kasten: padding/
Hintergrund/Radius/Blur auf null, nur die Textzeile bleibt. */
.lve-e1-kicker {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0;
border-radius: 0;
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0.42px;
color: #959595;
margin-bottom: 16px;
}
.lve-e1-kicker-dot {
width: 6px;
height: 6px;
margin-right: 4px;
border-radius: 50%;
background: linear-gradient(180deg, #ffbc54 0%, #ff9200 100%);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
/* Headline. Zeilenschritt 63px (0,93 * 68px Schriftgroesse), 26px bis zum
Subtext (Runde 3, 06.08., gemessen gegen referenz-neu/soll/elite-aus-vollbild.png). */
.lve-e1-title {
font-size: clamp(36px, 4.6vw, 68px);
font-weight: 500;
line-height: 0.93;
letter-spacing: normal;
margin-bottom: 26px;
}
.lve-e1-title-line { display: block; }
.lve-e1-title-line--gold {
background: linear-gradient(180deg, #ffbc54 0%, #ff9200 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Kunden-QA "the title thing", ergaenzt 13.08.2026: dasselbe Muster wie bei
den H2-Gold-Spans auf e2/e4/e5/e6/e7 - "Beyond Funded." wird live fett
(w700) gegen "Welcome to Lvlup Elite." regulaer (w500) gesetzt, im Entwurf
haben beide Zeilen denselben Schnitt. Ursache
server-stand-20260810/lvlup-fixes/r3-elite.css Zeile 96 (0-2-0, laedt nach
dieser Datei), 0-3-0 schlaegt sie unabhaengig von der Ladereihenfolge
(gleiche Technik wie beim e1-Kicker weiter unten in dieser Datei). */
.lvf-page .lve-e1 .lve-e1-title-line--gold { font-weight: 500; }
.lve-e1-title-line--white {
background: linear-gradient(141deg, rgba(255, 255, 255, 0.7) 0%, #ffffff 50%, rgba(255, 255, 255, 0.7) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Subtext */
.lve-e1-sub {
max-width: 656px;
font-size: clamp(16px, 1.3vw, 18px);
font-weight: 425;
line-height: 1.36;
letter-spacing: 0.54px;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 36px;
}
/* Buttons */
.lve-e1-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
}
.lve-e1-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 46px;
border-radius: 10px;
font-size: 17px;
line-height: 25px;
transition: filter 0.2s ease, transform 0.2s ease;
}
.lve-e1-btn:hover { filter: brightness(1.08); }
.lve-e1-btn:active { transform: translateY(1px); }
.lve-e1-btn--primary {
padding: 5px 18px 5px 5px;
font-weight: 500;
color: #060606;
/* Verlaufsachse 11.08.2026 von 134deg auf senkrecht gestellt.
Am Mockup gemessen laeuft die Farbe im Knopf ausschliesslich von
oben nach unten: Unterschied senkrecht 23,3 gegen waagerecht 7,1.
Live war es umgekehrt, 4,8 gegen 25,0, der Knopf wurde also von
links nach rechts dunkler statt von oben nach unten. Die beiden
Stuetzfarben stimmten, nur die Achse nicht. */
background: linear-gradient(180deg, #ffbc54 0%, #ff9200 100%);
border: 1px solid rgba(255, 188, 84, 0.55);
box-shadow:
inset 0 1px 18px rgba(255, 226, 186, 0.9),
6px 11px 28px rgba(0, 0, 0, 0.15),
25px 44px 50px rgba(0, 0, 0, 0.13);
}
.lve-e1-btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 6px;
background: #060606;
color: #ffffff;
flex: none;
}
.lve-e1-btn--ghost {
padding: 8px 17px;
font-weight: 400;
color: var(--lvf-white);
background:
linear-gradient(134deg, rgba(255, 188, 84, 0.16) 0%, rgba(255, 146, 0, 0.16) 100%),
rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 188, 84, 0.35);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow:
inset -2px -6px 19px rgba(255, 188, 84, 0.35),
inset 9px 7px 12px rgba(0, 0, 0, 0.55);
}
/* Tablet. Unter 1024px passt object-fit:fill nicht mehr (ein 16:9-Bild
wuerde auf schmalen Breiten zusammengestaucht), deshalb hier zurueck auf
cover mit weich auslaufender Maske statt der harten 91,5%-Kante. Die harte
Kante auf ::after gilt nur am Desktop, wo sie exakt auf die 790px-Bildkante
trifft (863px Sektionshoehe); bei anderer Bildhoehe (640/520px) saesse sie
an der falschen Stelle, deshalb hier abgeschaltet. */
@media (max-width: 1023px) {
.lve-e1 { padding: 220px 0 200px; }
.lve-e1-bg-img {
height: 640px;
object-fit: cover;
-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.lve-e1-bg::after {
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, 0.62) 72%, rgba(0, 0, 0, 0.18) 88%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, 0.62) 72%, rgba(0, 0, 0, 0.18) 88%, transparent 100%);
}
}
/* Mobile: kein Design vorhanden, sauber gestapelt abgeleitet */
@media (max-width: 767px) {
.lve-e1 { padding: 160px 0 120px; }
.lve-e1-bg-img { height: 520px; }
.lve-e1-kicker { font-size: 13px; }
.lve-e1-title { margin-bottom: 24px; }
.lve-e1-sub { margin-bottom: 28px; letter-spacing: 0.3px; }
.lve-e1-actions {
flex-direction: column;
align-items: stretch;
width: 100%;
max-width: 340px;
}
.lve-e1-btn { min-height: 48px; width: 100%; }
}
/* Abnahme 06.08.: Shell-Reset ueberstimmte die Textfarbe - dunkel erzwingen */
a.lve-e1-btn--primary { color: #1c1200; }
a.lve-e1-btn--primary .lve-e1-btn-icon { color: #ffffff; }
/* ===========================================================================
Zweitknopf "View Benefits", Abgleich 11.08.2026, nur Desktop
Live trug der Knopf eine eigene Bernstein-Fuellung, einen sichtbaren Rand
und nur zwei abgeschwaechte Innenscheine:
background rgba(0,0,0,0.35) + linear-gradient(134deg, 255,188,84,0.16 ->
255,146,0,0.16)
border 1px rgba(255,188,84,0.35)
box-shadow inset -2px -6px 19px rgba(255,188,84,0.35)
inset 9px 7px 12px rgba(0,0,0,0.55)
Der Entwurf (Figma-Knoten "Frame 64", 154 x 46 bei x 904 y 577) hat
KEINEN Rand, als Fuellung nur Schwarz mit 10 Prozent plus einen
Goldverlauf im Modus COLOR (der faerbt, hellt aber nicht auf) und VIER
Innenscheine in voller Deckkraft.
Am Mockup nachgemessen, senkrecht durch die Knopfmitte bei x 980:
y 574 577 583 594 609 615 621 625
Soll 0 13 14 2 64 154 237 0
vorher 0 1 39 44 61 77 94 101
Waagerecht bei y 600, von der Knopfmitte nach rechts:
x 1035 1040 1045 1050 1055 1060
Soll 4 16 63 137 216 2
vorher 54 62 75 3 3 3
Damit ist der gemeldete Bloom "UM den Knopf herum" widerlegt: drei Pixel
neben der Knopfkante misst das Mockup (0,0,0), der Schein liegt INNEN an
der Unterkante und an der rechten Kante und wird von der Knopfkante hart
abgeschnitten. Genau das leisten die vier Innenscheine.
Der Rand wird nur farblos gestellt statt entfernt: seine 2 px stecken in
der abgenommenen Knopfhoehe von 46 px.
=========================================================================== */
@media (min-width: 1024px) {
.lve-e1 .lve-e1-btn--ghost {
/* Fuellung: Soll Schwarz 10 % (Knopfmitte 1,0,0 auf Untergrund 0,0,0),
vorher 48,32,9 durch die zusaetzliche Bernstein-Lage. */
background: rgba(0, 0, 0, 0.1);
border-color: transparent;
/* Innenscheine, Versatz nach oben links wie im
Entwurf (Gold -2/-6 r 19,4 | Gold -5/-4 r 15,7 | Orange -0,8/-1,6
r 4,5 | Schwarz 9/7 r 12,1). Die Radien sind NICHT 1:1 uebernommen:
mit den Figma-Radien streut CSS den Schein deutlich weiter in die
Gegenkante als der Entwurf. Mit 19 px und 16 px stand an der
Oberkante 96 statt 17. Deshalb groesserer Versatz und kleinerer
Radius, angepasst an das gemessene Profil des Mockups (Abstand von
der jeweiligen Kante nach innen):
unten 4 px 216 | 7 px 170 | 10 px 123 | 13 px 79 | 16 px 42
rechts 3 px 216 | 8 px 137 | 13 px 63 | 18 px 16
oben 3 px 17 | 6 px 14 | 9 px 5
Die dritte Zeile ist ein schwacher Rundum-Schein: ohne ihn bleibt die
Oberkante schwarz, das Mockup zeigt dort 13 bis 17.
Deckkraft 0,80 statt 1,00: mit 1,00 lag das ganze Profil unten und
rechts rund 25 Prozent zu hell (unten 4 px 242 gegen 216, rechts 8 px
172 gegen 137). */
box-shadow:
inset -8px -9px 12px rgba(255, 188, 84, 0.8),
inset -3px -4px 7px rgba(255, 146, 0, 0.75),
inset 0 0 9px rgba(255, 188, 84, 0.11),
inset 9px 7px 12px rgba(0, 0, 0, 0.9);
}
}
/* ===========================================================================
Ghost-Knopf: Lichtsaum ergaenzt, 11.08.2026 (Knopf-Abnahme)
Hier war gar kein Schatten deklariert, nicht einmal einer, den eine
Fremdregel haette erschlagen koennen. Gemessen oben (44,29,9), unten
(52,34,8), also an allen vier Kanten gleich: der Knopf hatte kein
Glanzlicht. Der Entwurf zeigt oben und links fast Schwarz ((3,3,1) und
(12,9,4)) und unten ein kraeftiges Bernstein-Bloom (192,140,57).
Aufbau eins zu eins vom bewaehrten Knopf in s10, nur die beiden
Glanzlichtfarben auf das Gold dieser Seite.
=========================================================================== */
@media (min-width: 1024px) {
.lvf-page .lve-e1-btn--ghost {
box-shadow:
rgb(255, 196, 110) -2px -6px 19px 0 inset,
rgb(255, 146, 0) -5px -4px 16px 0 inset,
rgb(255, 146, 0) -1px -2px 5px 0 inset,
rgb(0, 0, 0) 9px 7px 12px 0 inset,
rgba(0, 0, 0, .36) 7px 3px 11px 0,
rgba(0, 0, 0, .25) 0 0 0 2px,
rgba(0, 0, 0, .16) 0 0 0 3px;
}
}
/* ===========================================================================
Kicker-Zweifarbigkeit, Abgleich 13.08.2026.
Befund B1 (Runde 3): im Entwurf ist "The Lvlup Elite" GOLD, nur " Experience"
bleibt grau (98. Perzentil ueber die Glyphen: Entwurf (253,168,55) gegen
(144,144,144), mittlere Abweichung 72,3 auf dem ersten Text der Seite).
B1 wollte das per Markup-Span .lve-e1-kicker-gold loesen. Bis 12.08. stand
in dieser Datei ein Ersatz per background-clip mit hart einprogrammierter
Wortluecke bei 109 px, WEIL fragment.html hier angeblich nicht angefasst
werden sollte.
Live traegt den Span aber laengst (Vergleich outerHTML,
lvlup2.tivaosagencytempdomains.de/elite/ am 13.08.):
The Lvlup Elite Experience
Der Kapselbericht meldete dazu eine Abweichung zwischen Live-DOM und Repo:
fragment.html hatte hier bislang nur Fliesstext ohne Span. Live ist der
richtige Stand, nicht nur weil er schon lief, sondern weil er die
robustere Loesung ist: eine echte Markup-Grenze statt eines auf 1024 px
und 109 px fest verdrahteten Bildausschnitts, der bei jedem Textumbruch
(andere Breite, andere Schriftmetrik) an der falschen Stelle schneiden
wuerde. Deshalb jetzt der Span in fragment.html, und hier nur noch die
einfache, breitenunabhaengige Fuellregel dafuer (deckt sich mit
server-stand-20260810/lvlup-fixes/r3-elite.css Zeile 80-87, dort nur ohne
das nie eingebaute HTML - das ist jetzt nachgezogen).
=========================================================================== */
.lve-e1-kicker-gold {
font-weight: 600;
background: linear-gradient(180deg, #ffbc54 0%, #ff9200 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* == e2-what-is == */
/* e2-what-is: "What is Lvlup Elite" Sektion der Elite-Seite. Praefix .lve-e2- */
.lve-e2 {
position: relative;
overflow: clip;
padding: 30px 0 60px;
}
/* Weiche Bernstein-Glows, laufen nach allen Seiten transparent aus (Kundenfeedback:
keine harten Kanten zwischen Sektionen). Runde 3: deutlich kraeftiger, das Soll
zeigt einen grossen goldenen Ambient-Schein ueber der ganzen Sektion. */
.lve-e2::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
/* Kaan 06.08.: Verlauf muss ZUSAMMENHAENGEND in den Performance-Block laufen.
Sauberer vertikaler Aufbau von Warm-Schwarz zu sattem Gold, Endfarbe exakt
der Startton von e3 (#f8ac33), plus weiche Seitenfluegel. Kein Weiss-Ring. */
/* Messpass 06.08.2026: Rampe spaeter starten - im Soll ist die Zone hinter
dem Textblock (y~1320) noch dunkel (50-92), bei uns leuchtete sie schon
mit 200+. Volles Gold weiterhin exakt am e3-Uebergang. */
background:
radial-gradient(ellipse 60% 36% at 8% 100%, rgba(255, 188, 84, 0.4) 0%, rgba(255, 188, 84, 0) 70%),
radial-gradient(ellipse 60% 36% at 92% 100%, rgba(255, 188, 84, 0.4) 0%, rgba(255, 188, 84, 0) 70%),
linear-gradient(180deg,
rgba(8, 5, 2, 0) 54%,
rgba(120, 74, 8, 0.25) 70%,
rgba(200, 128, 16, 0.55) 83%,
rgba(240, 158, 30, 0.85) 93%,
#f8ac33 100%);
}
.lve-e2::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 52% 42% at 50% -14%, rgba(255, 146, 0, 0.18) 0%, rgba(255, 146, 0, 0) 70%),
radial-gradient(ellipse 40% 34% at 6% 4%, rgba(255, 146, 0, 0.16) 0%, rgba(255, 146, 0, 0) 72%);
}
.lve-e2-inner {
position: relative;
z-index: 1;
}
/* Gold gefuellte Eyebrow-Pille ueber der Ueberschrift (Soll: ca. 90px Abstand
zur Headline), dunkle Schrift auf Gold-Verlauf */
.lve-e2-eyebrow {
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
margin: 0 0 26px; /* Kaan 06.08.: links ueber dem Titel wie im Mockup */
padding: 7px 20px;
border-radius: 78px;
background: linear-gradient(180deg, #ffbc54 0%, #ff9200 100%);
box-shadow:
inset 0 0 0 1px rgba(255, 238, 211, 0.25),
0 0 26px rgba(255, 146, 0, 0.35);
font-size: 14px;
font-weight: 530;
line-height: 17px;
letter-spacing: 0.84px;
color: #1c1200;
}
/* Zweispaltig: Text links (768), Karten rechts (416), Figma-Abstand 54.
Die beiden Spalten stehen als minmax(0, ...) und nicht als feste Breite:
768 + 54 + 416 = 1238 px passen erst in einen Container ab 1238 px, und den
gibt es erst ab einem Fenster von 1278 px (.lvf-container: max-width 1280,
padding-inline 20). Darunter lief der Kartenstapel aus dem Sichtfenster
heraus, und `overflow: clip` auf .lve-e2 hat es still weggeschnitten -
gemessen bei 1024 px: Karten bis x1258,7, also 234,7 px hinter dem Rand,
alle vier Kartentitel angeschnitten.
Mit minmax(0, X) bekommt zuerst die schmalere Spalte ihre volle Breite:
bei 1024 px sind das 514 fuer den Text und weiter 416 fuer die Karten,
der Stapel endet damit genau auf der Containerkante. Ab 1280 px reicht der
Platz fuer beide Hoechstwerte, dort aendert sich nichts (Karten unveraendert
ab x1082). */
.lve-e2-grid {
display: grid;
grid-template-columns: minmax(0, 768px) minmax(0, 416px);
gap: 54px;
align-items: start;
}
.lve-e2-copy {
padding-top: 32px;
}
/* Headline: 65px, w500, weisser Schimmer + Gold-Teil */
.lve-e2-title {
font-size: clamp(40px, 3.7vw, 65px);
font-weight: 500;
line-height: 0.95;
letter-spacing: -1.3px;
margin-bottom: 37px;
background: linear-gradient(141deg, rgba(255, 255, 255, 0.7) 0%, #ffffff 50%, rgba(255, 255, 255, 0.7) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lve-e2-title-gold {
background: linear-gradient(180deg, #ffbc54 0%, #ff9200 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Kunden-QA "the title thing": der Goldteil war live schwerer gesetzt als
der weisse ("Lvlup Elite" fett gegen "What is" regulaer); im Entwurf haben
beide denselben Schnitt (w500, wie .lve-e2-title). Ursache ist
server-stand-20260810/lvlup-fixes/r3-elite.css Zeile 113
(".lve-e2 .lve-e2-title-gold{font-weight:700}", Selektor 0-2-0, laedt nach
dieser Datei). Gleiche Technik wie beim e1-Kicker: 0-3-0 schlaegt 0-2-0
unabhaengig von der Ladereihenfolge. Als Nebenwirkung wirkt dadurch auch
der Wortabstand in Gold-Ueberschriften nicht mehr "kollabiert": die
Woerter stehen layoutseitig konstant 8-9px auseinander (gemessen live und
lokal identisch), aber die fette Type frisst optisch mehr vom Zwischenraum
als die reguläre. */
.lvf-page .lve-e2 .lve-e2-title-gold { font-weight: 500; }
/* Fliesstext: 18px, w425, Gold-Highlights.
Korrektur Breitenlauf 13.08.2026: hier stand bisher max-width:570px nach
einem "Befund 14" (Soll-Textkante bei x~830 statt 1026). Das ist widerlegt.
Rohknoten figma/elite.json 263:850 (der komplette Fliesstext-Block) hat
box.width 768 bei layoutSizingHorizontal "FILL" - die Spalte fuellt also
bewusst die volle Gridspalte, nicht ihren Inhalt. Deckt sich mit
.lve-e2-grid (768px erste Spalte) und mit r3-elite.css Zeile 107
(".lve-e2 .lve-e2-text{max-width:768px}", 0-2-0), die bisher immer
gewonnen hat, weil diese Regel hier nur 0-1-0 war. Auch der spaetere
Kommentar zu p:first-child unten in dieser Datei rechnet bereits mit
768/754 px fuer Absatz 2 und 3 ("stimmen mit 754 px genau"), nicht mit
570. Ohne diese Korrektur weicht die Vorschau ohne Overrides-Ebene in der
Zeilenumbruchbreite des gesamten Fliesstexts von der Live-Seite ab und die
Sektion faellt 33 px zu hoch aus. */
.lve-e2-text {
max-width: 768px;
font-size: clamp(16px, 1.3vw, 18px);
font-weight: 425;
line-height: 1.45;
letter-spacing: 0.54px;
color: rgba(255, 255, 255, 0.85);
}
.lve-e2-text p + p { margin-top: 26px; }
.lve-e2-hl {
background: linear-gradient(180deg, #ffbc54 0%, #ff9200 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Karten-Stapel: leicht versetzt und gefaechert wie im Soll */
.lve-e2-cards {
display: flex;
flex-direction: column;
}
.lve-e2-card {
width: 386px;
max-width: 100%;
padding: 6px 7px 12px;
border-radius: 14px;
border: 1px solid rgba(255, 188, 84, 0.22);
background:
linear-gradient(160deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.62) 100%),
linear-gradient(90deg, rgba(255, 146, 0, 0.10) 0%, rgba(255, 146, 0, 0.18) 50%, rgba(255, 146, 0, 0.10) 100%),
rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(34px);
backdrop-filter: blur(34px);
box-shadow:
9px 8px 27px rgba(0, 0, 0, 0.49),
37px 32px 49px rgba(0, 0, 0, 0.28);
}
/* Drehwinkel und Kartenabstand: siehe den Block "Lage des Kartenstapels" am
Ende dieser Datei. Kurz: der Entwurf dreht Karte 1 gar nicht und die
uebrigen drei um 0,5 Grad, und er stapelt sie ohne Ueberlappung. Die
seitlichen Versaetze 10 / 30 / 0 / 30 stimmen auf den Punkt und bleiben. */
.lve-e2-card + .lve-e2-card { margin-top: 0; }
.lve-e2-card--1 { transform: translateX(10px); }
.lve-e2-card--2 { transform: translateX(30px) rotate(0.5deg); position: relative; z-index: 1; }
.lve-e2-card--3 { transform: translateX(0) rotate(-0.5deg); position: relative; z-index: 2; }
.lve-e2-card--4 { transform: translateX(30px) rotate(0.5deg); position: relative; z-index: 3; }
.lve-e2-card-head {
display: flex;
align-items: center;
gap: 8px;
min-height: 46px;
padding: 8px 17px;
border-radius: 8px;
background:
linear-gradient(0deg, rgba(33, 19, 0, 0) 0%, rgba(32, 18, 0, 0.35) 100%),
linear-gradient(327deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
border: 1px solid rgba(255, 255, 255, 0.03);
}
.lve-e2-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 23px;
height: 23px;
flex: none;
color: #ffae3d;
filter: drop-shadow(0 0 6px rgba(255, 146, 0, 0.45));
}
.lve-e2-card-title {
font-size: clamp(17px, 1.4vw, 20px);
font-weight: 555;
line-height: 1.2;
letter-spacing: -0.39px;
background: linear-gradient(141deg, rgba(255, 255, 255, 0.75) 0%, #ffffff 50%, rgba(255, 255, 255, 0.75) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Zweifarbigkeit wie im Entwurf: je Kartentitel ein Kennwort in Gold, der
Rest bleibt im hellen Verlauf von .lve-e2-card-title. Live bestätigt
(13.08., server-stand-20260810/lvlup-fixes/r3-elite.css und Live-DOM):
Karte 1 "Earned,", Karte 2 "10,000", Karte 3 "Membership", Karte 4
"Requalify". Verlauf 1:1 von .lve-e2-title-gold übernommen, kein neuer
Farbton erfunden. */
.lve-e2-card-title-gold {
background: linear-gradient(180deg, #ffbc54 0%, #ff9200 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Gewicht separat und mit höherer Spezifität, gleiche Technik wie bei
.lve-e2-title-gold oben: server-stand-20260810/lvlup-fixes/r3-elite.css
setzt ".lve-e2 .lve-e2-card-title-gold{font-weight:700}" (Selektor 0-2-0)
und lädt nach dieser Datei, eine gleich starke Regel würde je nach
Ladereihenfolge verlieren. 0-3-0 gewinnt unabhängig davon. Belegter
Fehler von heute: das schwere Gewicht ließ die Wortabstände in e2, e6
und e7 kollabieren wirkend erscheinen ("MoreThanOnce"); gemessen liegen
die Lücken konstant bei 8,4 px, es gibt keinen echten Überlapp, der
Eindruck kam allein von der zu fetten Type. Deshalb 500, nicht 700. */
.lvf-page .lve-e2 .lve-e2-card-title-gold { font-weight: 500; }
.lve-e2-card-sub {
padding: 12px 17px 2px;
font-size: 11px;
font-weight: 338;
line-height: 1.7;
letter-spacing: 0.67px;
color: rgba(250, 248, 246, 0.6);
}
/* Pill unten mittig: "The Path to Elite" */
.lve-e2-path {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: fit-content;
margin: clamp(48px, 4.6vw, 80px) auto 0;
padding: 7px 14px;
border-radius: 78px;
border: 1px solid rgba(255, 188, 84, 0.45);
background:
linear-gradient(134deg, rgba(255, 188, 84, 0.22) 0%, rgba(255, 146, 0, 0.22) 100%),
#1c1200;
box-shadow:
2px 2px 7px rgba(0, 0, 0, 0.1),
22px 19px 17px rgba(0, 0, 0, 0.05);
font-size: 14px;
font-weight: 400;
line-height: 17px;
letter-spacing: 0.84px;
color: var(--lvf-white);
}
.lve-e2-path-icon {
display: inline-flex;
align-items: center;
color: #ffae3d;
}
/* Tablet: Spalten schmaler, Karten volle Spaltenbreite */
@media (max-width: 1023px) {
.lve-e2 { padding: 24px 0 48px; }
.lve-e2-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
gap: 32px;
}
/* Der gedrehte Stapel ist fuer die 386 px breite Karte auf dem Desktop
gedacht. In der 340 px schmalen Tablet-Spalte reichen die 2 px
Ueberlappung plus Drehung nicht mehr: jede Karte deckte die vorherige um
7 bis 8 px zu und schnitt deren letzte Textzeile ab. Unter 768 px ist das
laengst geloest, der Zweig darunter setzt transform: none und 12 px
Abstand. Ab hier gilt dasselbe. */
.lve-e2-card { width: 100%; transform: none; }
.lve-e2-card + .lve-e2-card { margin-top: 12px; }
}
/* Mobile: kein Design vorhanden, sauber gestapelt */
@media (max-width: 767px) {
.lve-e2 { padding: 16px 0 44px; }
.lve-e2-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.lve-e2-copy { padding-top: 0; }
.lve-e2-eyebrow { margin-bottom: 32px; font-size: 13px; }
.lve-e2-title {
letter-spacing: -0.6px;
margin-bottom: 24px;
}
.lve-e2-text { letter-spacing: 0.2px; }
.lve-e2-text p + p { margin-top: 20px; }
.lve-e2-card {
width: 100%;
transform: none;
}
.lve-e2-card + .lve-e2-card { margin-top: 12px; }
.lve-e2-card-head {
min-height: 48px;
padding: 10px 14px;
}
.lve-e2-card-sub {
padding: 12px 14px 4px;
font-size: 16px;
font-weight: 400;
line-height: 1.55;
letter-spacing: 0.2px;
}
.lve-e2-path { margin-top: 56px; }
}
/* ============================================================
Uebergang zu e3, Abgleich 11.08.2026 (Befund der Gegenpruefung:
sichtbare waagerechte Kante am Beginn von lve-e3), nur Desktop.
Die Kante entsteht auf beiden Seiten der Naht. Die Seite von e3 ist dort
gedaempft (siehe e3-performance/fragment.css); hier fehlt der letzte Rest
Licht am Fuss von e2. Randprofil, Mittel ueber x 0..150 und 1610..1760,
Soll-y = Ist-y + 10, Naht bei Ist-y 1395:
dy -40 -16 -2
Soll 91 105 112
vorher 94 103 107
Der Verlauf faellt am Ende also flacher aus als im Entwurf. Ein duenner
Bernsteinsaum ueber die letzten 7,5 Prozent (rund 40 px) hebt die
Unterkante von 107 auf 111 und schliesst damit an die 113 an, mit denen
e3 beginnt. Sprung an der Naht: vorher +19,3, nachher +2,4 (Entwurf 4,5).
Der Selektor ist 0-2-0, weil `section.lve-e2::before` in
server-stand-20260810/lvlup-fixes/r3-elite.css Z. 131 und Z. 483 (0-1-1)
den Verlauf setzt; eine reine Klasse (0-1-0) wuerde dort verlieren.
============================================================ */
/* ===========================================================================
Die vier Vorteilskarten, Abgleich 11.08.2026, nur Desktop
Gemeldet und nachgemessen: die Karten sind live eingefaerbt. Median ueber
den Kartenkoerper von Karte 3 (unter der Kopfleiste, ohne Text):
Koerper vorher (40,27,14) Soll (18,12,4)
Kopfleiste vorher (32,21, 9) Soll (10, 7,3)
Kopf links oben vorher (27,18,8) Soll ( 1, 1,1)
URSACHE: der Entwurf legt ueber die Fuellung rgba(255,255,255,0.05) einen
Goldverlauf im Modus COLOR. COLOR uebernimmt nur Farbton und Saettigung,
die Helligkeit bleibt die des Untergrunds. Live lag derselbe Verlauf als
normale Deckkraft (0,10 / 0,18 / 0,10) darauf und hat damit aufgehellt.
In CSS gibt es fuer Hintergrundebenen kein COLOR gegen den Seitengrund,
deshalb wird das Ergebnis nachgebaut: schwaechere Weissbasis (0,02 statt
0,05) plus schwaecherer Goldverlauf (0,055/0,11/0,055 statt 0,10/0,18/0,10).
Rechnung fuer die Messstelle, Untergrund (4,3,1):
Weiss 2 % -> ( 9,0 8,0 6,1)
Gold 11 % -> (36,1 23,2 5,4)
schwarzer Eckverlauf 43 % -> (20,6 13,2 3,1) Soll (18,12,4)
RAND: der Entwurf hat eine Kontur von 0,0598 px, das entspricht 1 px mit
rund 6 Prozent Deckkraft. Live standen 22 Prozent, am oberen Kartenrand
gemessen (47,34,17) gegen Soll (23,17,5).
AUSSENSCHATTEN: im Entwurf werfen die Karten 2 bis 4 ihren Schatten nach
OBEN LINKS auf die Karte darueber (-5/-3, -22/-10, -49/-23, -86/-41).
Live lagen zwei Schatten nach unten rechts an, die es an der Karte nicht
gibt; die Werte 9/8 und 37/32 stammen aus der Gruppe um alle vier Karten.
Karte 1 hat im Entwurf keinen eigenen Schatten.
ECKVERLAUF UND KOPFLEISTE spiegeln sich zwischen ungeraden und geraden
Karten. Am Mockup je Ecke nachgemessen:
Kopf 1/3 links oben ( 1, 1,1) rechts oben (11, 7,3)
Kopf 2/4 links oben (14,10,4) rechts oben ( 0, 0,0)
Koerper 3 links (19,13,6) rechts ( 8, 6,3)
Koerper 4 links (13, 9,4) rechts (19,14,5)
Spezifitaet 0-2-0, damit die Regeln die Grundregeln oben in dieser Datei
schlagen; r3-elite.css fasst diese Bausteine nicht an.
=========================================================================== */
@media (min-width: 1024px) {
.lve-e2 .lve-e2-card {
/* Rand von 0,22 auf 0,06: entspricht der 0,0598 px breiten Kontur des
Entwurfs. Breite bleibt 1 px, damit die Kartengroesse gleich bleibt. */
border-color: rgba(255, 188, 84, 0.06);
background:
linear-gradient(150deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.61) 100%),
linear-gradient(90deg, rgba(255, 146, 0, 0.055) 0%, rgba(255, 146, 0, 0.11) 50%, rgba(255, 146, 0, 0.055) 100%),
rgba(255, 255, 255, 0.02);
/* Schatten nach oben links wie im Entwurf, vier statt fuenf Stufen:
die fuenfte (-135/-65, Deckkraft 0,01) liegt unter der Messschwelle. */
box-shadow:
-5px -3px 13px rgba(0, 0, 0, 0.34),
-22px -10px 24px rgba(0, 0, 0, 0.3),
-49px -23px 32px rgba(0, 0, 0, 0.18),
-86px -41px 38px rgba(0, 0, 0, 0.05);
}
/* Karte 1 liegt oben auf und hat im Entwurf keinen eigenen Schatten. */
.lve-e2 .lve-e2-card--1 { box-shadow: none; }
/* Gerade Karten: Eckverlauf gespiegelt, dunkel links unten statt rechts unten
(Entwurf: t 0,00 rechts oben bis 0,62 links unten). */
.lve-e2 .lve-e2-card--2,
.lve-e2 .lve-e2-card--4 {
background:
linear-gradient(212deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.62) 100%),
linear-gradient(90deg, rgba(255, 146, 0, 0.055) 0%, rgba(255, 146, 0, 0.11) 50%, rgba(255, 146, 0, 0.055) 100%),
rgba(255, 255, 255, 0.02);
}
/* Kopfleiste: im Entwurf fast schwarz. Die warme Lage oben traegt 0,20
Deckkraft und endet bei 77 Prozent Hoehe (live 0,35 ueber die ganze
Hoehe), darueber ein waagerechter Schwarzverlauf. */
.lve-e2 .lve-e2-card-head {
background:
linear-gradient(90deg, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.52) 100%),
linear-gradient(180deg, rgba(32, 18, 0, 0.2) 0%, rgba(33, 19, 0, 0) 77%);
}
.lve-e2 .lve-e2-card--2 .lve-e2-card-head,
.lve-e2 .lve-e2-card--4 .lve-e2-card-head {
background:
linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.93) 100%),
linear-gradient(180deg, rgba(32, 18, 0, 0.2) 0%, rgba(33, 19, 0, 0) 77%);
}
}
/* ===========================================================================
Naht e2/e3, zweiter Durchgang 11.08.2026 nachts, nur Desktop.
Der erste Durchgang hat nur das RANDPROFIL geprueft (x 0..150 und
1610..1760) und dort auch geschlossen. In der Bildmitte steht der Sprung
aber weiter: Median je Spaltenblock, 8 px ueber und unter der Naht bei
Ist-y 1395 (Soll-y 1393), Rotkanal:
x 0 176 352 528 704 880 1056 1232 1408
Soll ueber 226 170 134 109 93 83 76 68 75
Ist ueber 189 140 88 80 80 80 80 80 80
Der Fuss von e2 ist also im linken Drittel bis zu 46 Stufen zu dunkel und
laeuft ab x 440 in ein waagerechtes Plateau (80) aus, das der Entwurf
nicht hat: dort faellt das Gold von links nach rechts weiter durch. Weil
e3 gleichzeitig zu hell startet, ergibt das den gemessenen Sprung von 51
im Mittel und 80 bei x 352, wo der Entwurf 14 hat.
Der Fehlbetrag waechst erst im letzten Stueck: bei y 1240 sind es 5
Stufen, bei 1300 18, bei 1360 41, an der Naht 46. Deshalb eine flache
Ellipse in der linken unteren Ecke, 980 x 150 px, statt einer weiteren
Verlaufsstufe: eine Stufe im senkrechten Grundverlauf wuerde ueber die
ganze Breite wirken und die rechte Haelfte, die stimmt, mit aufhellen.
Deckkraft je Stuetzstelle aus (Soll - Ist) / (250 - Ist) zurueckgerechnet,
Farbe rgb(250,160,45): sie trifft in der Mitte alle drei Kanaele
(bei x 352 ergibt 0,28 genau (134,88,21) gegen Soll (134,87,24)). In der
linken Ecke bleibt ein Blauueberschuss stehen, der nicht aus der
Helligkeit kommt: dort ist Ist (189,144,70) gegen Soll (226,143,23), also
zu blass statt zu dunkel. Die Lage holt R auf 226 und senkt B von 70 auf
55; den Rest muesste eine eigene Entsaettigung machen, die die Ecke
zugleich zu dunkel zoege.
Die Hoehe steht in Pixeln, nicht in Prozent: die Sektionshoehe ist am
11.08. schon einmal gewachsen, und eine Prozentkante wandert dann mit
(siehe die Maskenkante in e3-performance/fragment.css).
=========================================================================== */
@media (min-width: 1024px) {
.lvf-page .lve-e2::before {
background:
radial-gradient(ellipse 980px 120px at 0% 100%,
rgba(250, 160, 45, 0.55) 0%,
rgba(250, 160, 45, 0.36) 12%,
rgba(250, 160, 45, 0.28) 22%,
rgba(250, 160, 45, 0.28) 42%,
rgba(250, 160, 45, 0.23) 52%,
rgba(250, 160, 45, 0.17) 60%,
rgba(250, 160, 45, 0.12) 68%,
rgba(250, 160, 45, 0.075) 77%,
rgba(250, 160, 45, 0.04) 86%,
rgba(250, 160, 45, 0) 100%),
/* Rechte Flanke derselben Naht: dort setzt der Entwurf den Anstieg zur
Ecke frueher an. Zeile 8 px ueber der Naht, Rotkanal:
x 1512 1567 1622 1677 1732
Soll 83 96 115 138 164
vorher 80 80 101 132 164
Die vorhandene Eckellipse (Mitte bei 114 %, rx 24 %) greift erst ab
x 1584. Sie zu verbreitern verbietet sich: bei y 1290 ist die rechte
Flanke schon 21 bis 36 Stufen zu hell. Deshalb eine schmale Lage
(100 x 56 px), die nur die letzten Zeilen anhebt und bei y 1340
nichts mehr beitraegt. */
radial-gradient(ellipse 100px 56px at 90.6% 100%,
rgba(250, 160, 45, 0.095) 0%,
rgba(250, 160, 45, 0.091) 30%,
rgba(250, 160, 45, 0.078) 55%,
rgba(250, 160, 45, 0.052) 75%,
rgba(250, 160, 45, 0.027) 90%,
rgba(250, 160, 45, 0) 100%),
/* Die beiden Eckfluegel sind an der Naht zu BLASS, nicht zu dunkel. An
der Unterkante von e2, 4 px ueber der Naht:
x 0..88 Ist (218,152, 58) Soll (228,144,23)
x 1672..1760 Ist (155,111, 42) Soll (160,100,20)
Rot stimmt fast, Blau liegt 22 bis 35 Stufen zu hoch. Beide Kerne
standen auf weissgold (B 130 bzw. 166). Die Deckkraftrampen bleiben
unveraendert, nur die Farben werden gesaettigt; zurueckgerechnet aus
der Ebenenfolge ergibt das an den beiden Messstellen (255,172,25)
beziehungsweise (255,162,21). Weiter innen liegt die Deckkraft unter
0,13, dort bleibt der Unterschied unter einer Stufe. */
radial-gradient(ellipse 42% 62% at -8% 108%, rgba(255, 172, 12, 1) 0%, rgba(255, 172, 30, 0.48) 40%, rgba(255, 166, 36, 0) 78%),
radial-gradient(ellipse 24% 50% at 114% 104%, rgba(255, 196, 96, 0.96) 0%, rgba(255, 168, 30, 0.7) 50%, rgba(255, 158, 16, 0.28) 80%, rgba(255, 150, 10, 0) 100%),
linear-gradient(180deg, rgba(255, 180, 70, 0) 92.5%, rgba(255, 180, 70, 0.07) 100%),
linear-gradient(180deg,
rgba(8, 5, 2, 0) 26%,
rgba(90, 55, 6, 0.1) 48%,
rgba(140, 88, 10, 0.18) 66%,
rgba(190, 120, 16, 0.27) 84%,
rgba(214, 138, 22, 0.32) 100%);
}
}
/* ===========================================================================
Lage des Kartenstapels und Drehung der Karten, 12.08.2026, nur Desktop.
Sollwerte aus figma/bands-elite/e2-what-is.json, Istwerte aus der lokalen
Vorschau bei 1760 px mit body.lvf-gold, gold-footer.css, den Overrides aus
lvlup-fixes und eingebetteter Hausschrift.
1. DER STAPEL SASS 60,3 PX ZU HOCH. Umgebende Rechtecke der vier Karten:
Karte 1 2 3 4
Soll 950 1034 1122 1209
vorher 889,71 978,07 1066,09 1153,11
Der Entwurf zentriert den Stapel gegen die Textspalte: deren Rahmen
laeuft von y925 (Oberkante der Eyebrow-Pille) bis y1323, der Stapel von
950 bis 1293, also 25 px Luft oben und 30 unten. Live beginnt die
Kartenspalte dagegen buendig am Rasteranfang, weil `align-items: start`
gilt und .lve-e2-copy seine 32 px `padding-top` nur fuer sich selbst
verbraucht.
Der Rasteranfang liegt bei y893,41 und die Eyebrow-Pille bei y925,41 -
also genau die 32 px Innenabstand, und die Pille liegt damit auf ihrem
Sollplatz 925 (am Bild nachgemessen: Textband y925..955, x261..462,
live 925,41 / 203,11 breit). Der Einzug ist deshalb 32 + 25 = 57.
2. DIE UEBERLAPPUNG WAR -8 STATT -2 BIS -3. Das war kein Abstandsfehler,
sondern die doppelte Drehung. Der Entwurf dreht:
Karte 1 2 3 4
Figma keine -0,5 +0,5 -0,5 Grad (mathematisch positiv)
vorher CSS -1,1 +0,9 -0,8 +1,0
Ein gedrehtes Rechteck hat ein hoeheres umgebendes Rechteck: bei 386 px
Breite waechst es um 386 * sin(Winkel), bei 1,1 Grad also um 7,4 px,
3,7 davon nach oben. Genau daraus entstanden die gemessenen 8 px.
Rechnet man die Drehung aus den Figma-Rechtecken heraus, stehen die
Karten im Entwurf praktisch auf Stoss: -0,31 / +1,37 / +0,37 px. Der
Bestandswert `margin-top: -2px` war frei gewaehlt und faellt weg.
Ergebnis mit 0,5 Grad und Stoss: Ueberlappung 1,69 / 3,37 / 3,37 gegen
Soll 2 / 2 / 3.
Die Vorzeichen bleiben, wie sie waren: Figma zaehlt gegen den
Uhrzeigersinn, CSS mit ihm, deshalb ist Figma -0,5 gleich CSS +0,5.
REST, der bleibt: unsere Karten sind 89,69 px hoch, im Entwurf 86 bis
86,63 (Karte 4 sogar 80,63). Die Differenz sind 3,69 px je Karte und
steckt im Kartenkopf - `min-height: 46px` plus 1 px Rahmen gegen 43 px
im Entwurf (Karte 1; die Karten 2 bis 4 haben dort 46). Dadurch liegt
Karte 4 am Ende 8,8 px unter ihrem Sollplatz. Das ist ein eigener,
nicht beauftragter Befund; die Kartenhoehe wurde nicht angefasst, weil
der Entwurf selbst uneinheitlich ist (43/46/46/46 Kopf bei
86/86,63/86,63/80,63 Karte).
3. DIE SYMBOLE WAREN ZU KLEIN GEMALT. Die Kaesten stimmten (23 px), die
gemalte Flaeche darin nicht. Alle vier SVGs haben viewBox 0 0 24 24,
aber ihre Zeichnung fuellt die nicht aus, und die Kachel war auf
22 x 22 gesetzt:
Karte 1 2 3 4
Entwurf (Figma-Rechteck) 23x23 22x22 23x18 20x24
gemalt vorher, ohne Strich 11,21x18,68 16,01x14,99 16,73x14,41 16,79x16,79
gemalt vorher, mit Strich 12,89x20,36 17,69x16,66 18,40x16,08 18,46x18,47
Die Figma-Knoten sind gefuellte Formen, ihr Rechteck ist also die volle
gemalte Flaeche. Vergleichbar ist bei uns deshalb der Wert MIT Strich.
Die SVG-Groesse wird je Karte so gesetzt, dass die gemalte Flaeche
einschliesslich Strich in der engeren Richtung genau auf das Mass des
Entwurfs kommt; gleichmaessig skaliert, damit die Zeichnung nicht
verzerrt. Die Kachel bekommt das Mass des Entwurfs, damit der Abstand
von 8 px zum Titel wieder stimmt.
Karte 1 SVG 25,32 px -> gemalt 14,56 x 23,00
Karte 2 SVG 27,79 px -> gemalt 22,00 x 20,72
Karte 3 SVG 24,97 px -> gemalt 20,60 x 18,00
Karte 4 SVG 24,24 px -> gemalt 20,00 x 20,00
Was damit NICHT behoben ist: Karte 1 bleibt 14,56 statt 23 px breit,
weil ihre Zeichnung 12 zu 20 Einheiten hoch steht, das Symbol des
Entwurfs aber quadratisch ist. Es ist ein anderes Motiv - der Entwurf
zeigt eine gefuellte Hand mit Muenze, im Markup steht eine Medaille als
Umrisslinie. Dasselbe gilt fuer alle vier Kacheln, siehe die gleiche
Lage bei den e4-Glyphen in e4-world-beyond/NOTIZ.md. Ohne die
Originalvektoren aus Figma ist das nicht loesbar, und das Markup gehoert
nicht zu dieser Datei.
Die Kartenhoehe und damit die Sektionshoehe aendert sich durch nichts
davon: die Kacheln bleiben mit 23 bis 24 px unter der Zeilenhoehe des
Titels (24 px), der Kartenkopf steht weiter auf seiner `min-height: 46px`.
=========================================================================== */
/* ===========================================================================
Kartenbreite ungerade gegen gerade Karte, 13.08.2026, nur Desktop.
Bisher hatten alle vier Karten dieselbe Breite (386px). Die Figma-Rechtecke
sagen etwas anderes: Karte 1 und 3 sind schmaler als Karte 2 und 4, nicht
nur seitlich versetzt. Aus figma/bands-elite/e2-what-is.json (Rotation in
Radiant, AABB-Breite zurueckgerechnet auf die wahre Kantenlaenge ueber
W = (aabb_w - h*sin(theta)) / cos(theta)):
Karte 1 2 3 4
AABB-w 376 386 377 386
Rotation 0 -0,5deg +0,5deg -0,5deg
wahre B 376 385,2 376,2 385,3
Rechte Kante bei gleicher linker Kante (translateX 10/30/0/30, siehe oben):
mit der bisherigen einheitlichen Breite reichte Karte 1 bis x1478 und
Karte 3 bis x1468 (live/lokal gemessen), Figma will 1469 und 1460 - je rund
9 px zu weit rechts. Am Referenzbild referenz-neu/pakete/elite/lve-e2-soll.png
ist der Rueucksprung der Karten 1 und 3 gegenueber 2 und 4 deutlich zu sehen
(Ausschnitt referenz-neu/pakete/elite/lve-e2-soll.png, x1085..1505 y85..385),
im aktuellen Rendering (vor dieser Korrektur) fehlte er.
=========================================================================== */
/* ===========================================================================
Sektions-Innenabstand unten, Nachtrag Breitenlauf 13.08.2026
r3-elite.css Zeile 108 setzt "section.lve-e2{padding:30px 0 69px}"
(0-1-1), diese Datei nur ".lve-e2{padding:30px 0 60px}" (0-1-0) - die
Override-Ebene gewann fuer den unteren Innenabstand also immer, das
Fragment allein zeigte 9 px zu wenig. Kein Befund widerspricht dem
69-px-Wert, deshalb hier nachgezogen statt nur hoeher gestellt: derselbe
Wert, keine Verhaltensaenderung fuer die Live-Seite, nur fuer die
Vorschau ohne Overrides-Ebene. 0-2-1 gegen r3s 0-1-1. */
@media (min-width: 1024px) {
.lvf-page section.lve-e2 { padding-bottom: 69px; }
}
@media (min-width: 1024px) {
.lve-e2 .lve-e2-cards { margin-top: 57px; }
.lve-e2 .lve-e2-card--1,
.lve-e2 .lve-e2-card--3 { width: 377px; }
.lve-e2 .lve-e2-card-icon > svg { flex: none; }
.lve-e2 .lve-e2-card--1 .lve-e2-card-icon { width: 23px; height: 23px; }
.lve-e2 .lve-e2-card--1 .lve-e2-card-icon > svg { width: 25.32px; height: 25.32px; }
.lve-e2 .lve-e2-card--2 .lve-e2-card-icon { width: 22px; height: 22px; }
.lve-e2 .lve-e2-card--2 .lve-e2-card-icon > svg { width: 27.79px; height: 27.79px; }
.lve-e2 .lve-e2-card--3 .lve-e2-card-icon { width: 23px; height: 18px; }
.lve-e2 .lve-e2-card--3 .lve-e2-card-icon > svg { width: 24.97px; height: 24.97px; }
.lve-e2 .lve-e2-card--4 .lve-e2-card-icon { width: 20px; height: 24px; }
.lve-e2 .lve-e2-card--4 .lve-e2-card-icon > svg { width: 24.24px; height: 24.24px; }
}
/* ===========================================================================
Drei weitere unbeanspruchte r3-elite.css-Abstaende, Nachtrag Breitenlauf
13.08.2026. Alle drei stehen in r3-elite.css OHNE eigenen @media-Block,
gelten dort also auch am Desktop (0-2-0), und schlugen die Grundregeln
dieser Datei (0-1-0) dort immer. Unterhalb 1024 px hat das Fragment eigene
Media-Query-Werte, die mit r3s eigenen Mobil/Tablet-Regeln bereits exakt
uebereinstimmen (nachgemessen: 24/48, 32px, 24px, 12px 14px 4px je
identisch), dort war also nie ein Unterschied sichtbar - nur am Desktop.
1. Eyebrow-Pille: r3 margin-bottom 19px, hier bisher 26px (7 px zu viel).
2. Ueberschrift: r3 margin-bottom 28px, hier bisher 37px (9 px zu viel).
3. Kartentext-Fuss: r3 padding-top 3px, hier bisher 12px (9 px zu viel).
Zusammen 25 px, dazu die 9 px aus dem Sektions-Innenabstand weiter oben:
das erklaert im Rahmen der Messgenauigkeit die 33 px, die e2 vor dieser
Korrektur zwischen der Messung mit und ohne Overrides-Ebene unterschied
(Rest sind Rundungen aus der Fliesstext-Zeilenumbruch-Korrektur weiter
oben). Kein Befund widerspricht den r3-Werten, deshalb hier uebernommen,
nicht nur hoeher gestellt: derselbe Wert, keine Verhaltensaenderung fuer
die Live-Seite, nur fuer die Vorschau ohne Overrides-Ebene. */
@media (min-width: 1024px) {
.lvf-page .lve-e2 .lve-e2-eyebrow { margin-bottom: 19px; }
.lvf-page .lve-e2 .lve-e2-title { margin-bottom: 28px; }
.lvf-page .lve-e2 .lve-e2-card-sub { padding-top: 3px; }
}
/* == e3-performance == */
/* e3-performance: "Performance Is Your Invitation" der Lvlup Elite Seite. Praefix .lve-e3- */
.lve-e3 {
position: relative;
overflow: clip;
padding: 44px 0 40px;
}
/* Hintergrund: grosser Bernstein-Glow oben, laeuft nach unten und zu den Seiten
weich transparent aus (keine harten Kanten zu den Nachbarsektionen).
Runde 3: das Soll zeigt eine fast vollflaechig helle Gold-Flaeche (links am
Rand 252/228/196 gemessen), daher deutlich hoehere Deckkraft und breitere
Faecher. Die Maske laesst den Schein an der Oberkante sanft einblenden,
damit der Uebergang von e2 nicht als harte Linie sichtbar ist (Befund 5). */
.lve-e3-bg {
position: absolute;
inset: 0;
pointer-events: none;
background:
/* Oberkante deckend im Uebergabeton von e2 (#f8ac33), sonst dunkler Streifen */
linear-gradient(180deg, #f8ac33 0%, rgba(248, 172, 51, 0) 22%),
radial-gradient(ellipse 130% 62% at 50% 0%, rgba(255, 244, 222, 0.98) 0%, rgba(255, 216, 142, 0.95) 30%, rgba(250, 162, 46, 0.9) 55%, rgba(255, 146, 0, 0.5) 72%, rgba(255, 146, 0, 0) 90%),
radial-gradient(ellipse 55% 78% at -2% 26%, rgba(255, 228, 185, 0.95) 0%, rgba(255, 170, 55, 0.55) 52%, rgba(255, 146, 0, 0) 78%),
radial-gradient(ellipse 55% 78% at 102% 26%, rgba(255, 228, 185, 0.95) 0%, rgba(255, 170, 55, 0.55) 52%, rgba(255, 146, 0, 0) 78%),
linear-gradient(180deg, rgba(255, 200, 110, 0.45) 0%, rgba(255, 160, 40, 0.3) 45%, rgba(255, 146, 0, 0) 78%);
/* Maske entfernt: oben muss der Block deckend in #f8ac33 starten, sonst
entsteht ein dunkler Streifen zur e2-Grenze (Kaan 06.08.) */
}
.lve-e3-inner {
position: relative;
z-index: 1;
}
/* Kopfbereich: dunkle Schrift auf hellem Glow */
.lve-e3-head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 26px;
margin-bottom: 48px;
}
.lve-e3.lve-e3 .lve-e3-title {
font-size: clamp(38px, 4.6vw, 65px);
font-weight: 565;
line-height: 0.93;
letter-spacing: -0.03em;
color: #050505;
}
.lve-e3-sub {
max-width: 812px;
font-size: clamp(16px, 1.3vw, 18px);
font-weight: 425;
line-height: 1.36;
letter-spacing: 0.54px;
color: rgba(0, 0, 0, 0.85);
}
/* Kartenraster */
.lve-e3-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.lve-e3-card--wide { grid-column: 1 / -1; }
.lve-e3-card {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-height: 191px;
padding: 32px 48px 32px 32px;
background: #000000;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 26px;
}
/* Bernstein-Eckgluhen (Ellipse 9 links oben, Ellipse 10 rechts unten aus dem Design) */
.lve-e3-card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 90px 100px at 2% 8%, rgba(255, 146, 0, 0.4) 0%, rgba(255, 146, 0, 0) 70%),
radial-gradient(ellipse 120px 105px at 100% 88%, rgba(255, 146, 0, 0.34) 0%, rgba(255, 146, 0, 0) 70%);
}
/* Haarlinie oben links */
.lve-e3-card::after {
content: "";
position: absolute;
top: 0;
left: 25px;
width: 78px;
height: 1px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
opacity: 0.6;
pointer-events: none;
}
.lve-e3-card-text {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 17px;
max-width: 400px;
}
.lve-e3-card--wide .lve-e3-card-text { max-width: 905px; }
.lve-e3-badge {
align-self: flex-start;
padding: 5px 17px;
margin-bottom: 1px;
border-radius: 6px;
background: linear-gradient(180deg, #ffbc54 0%, #ff9200 100%);
box-shadow: inset 0 0 0 1px rgba(255, 238, 211, 0.2);
font-size: 15px;
font-weight: 530;
line-height: 18px;
letter-spacing: -0.03px;
color: #000000;
}
.lve-e3.lve-e3 .lve-e3-value {
font-size: clamp(28px, 2.6vw, 38px);
font-weight: 555;
line-height: 1.22;
letter-spacing: -0.76px;
background: linear-gradient(141deg, rgba(255, 255, 255, 0.7) 0%, #ffffff 50%, rgba(255, 255, 255, 0.7) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Muster B (Farbverlauf fehlt), 13.08.2026, Fundstelle E-2 aus
referenz-neu/befunde/muster-b-verlaeufe.md: alle fuenf Kartenwerte tragen
den weissen Glanz-Verlauf der Ueberschrift statt Gold. Figma-Knoten
263:720/752/736/768/784 (figma/bands-elite/e3-performance.json), oberste
Fill-Ebene je linear 180 Grad #ffbc54 -> #ff9200. Klasse und Farbwert
uebernommen aus server-stand-20260810/lvlup-fixes/r3-elite.css
(R3-elite-16, "Befund B4"), die dieselbe Stelle unabhaengig schon einmal
bestaetigt hat - die Regel dort greift nur nie, weil der Span im
Fragment-Markup bisher fehlte. Absichtlich NUR die Farbe geaendert, das
Gewicht bleibt bei den 555 der Basisklasse (r3-elite setzt dort 700, das
war nicht Teil dieses Befunds und wird hier nicht mitgenommen). */
.lve-e3.lve-e3 .lve-e3-value-gold {
background: linear-gradient(180deg, #ffbc54 0%, #ff9200 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lve-e3-desc {
font-size: 13px;
font-weight: 338;
line-height: 22px;
letter-spacing: 0.78px;
color: rgba(250, 248, 246, 0.6);
}
/* Icon-Kachel */
.lve-e3-icon {
position: relative;
z-index: 1;
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 95px;
height: 95px;
border-radius: 17px;
background: linear-gradient(144deg, #161616 0%, #000000 100%);
box-shadow:
inset 0 0 1px rgba(255, 238, 211, 0.9),
3px 3px 9px rgba(0, 0, 0, 0.49),
13px 11px 17px rgba(0, 0, 0, 0.43);
}
/* Breite Karte: Wert + Chips in einer Zeile, XL-Icon rechts angeschnitten */
.lve-e3-card--wide { padding-right: 32px; }
.lve-e3-value-row {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.lve-e3-chips {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.lve-e3-chip {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 6px 14px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.28);
background: linear-gradient(180deg, rgba(255, 188, 84, 0.1) 0%, rgba(255, 146, 0, 0.1) 100%);
font-size: 12px;
font-weight: 400;
line-height: 12px;
letter-spacing: 0.28px;
text-transform: capitalize;
color: rgba(255, 255, 255, 0.85);
opacity: 0.8;
}
.lve-e3-chip--gold {
background: linear-gradient(180deg, #ffbc54 0%, #ff9200 100%);
border-color: rgba(255, 238, 211, 0.4);
color: #000000;
font-weight: 500;
opacity: 1;
}
/* XL-Icon-Kachel, rechts von der Karte angeschnitten.
13.08.2026: "Befund 11" (keine eigene Fuellung, nur die Pfeil-Glyphe auf dem
Kartenkoerper) war ein Fehlschluss und stand seit 11.08. ohnehin nur auf dem
Papier. server-stand-20260810/lvlup-fixes/r3-elite.css setzt mit
".lve-e3 .lve-e3-icon--xl" (0-2-0) seit R3-elite-17/Befund B8 eine dunkle
Kachel mit Schatten dagegen, schlaegt "background:none" (0-1-0) also immer,
und zwar unabhaengig von der Bildschirmbreite (kein Media Query dort). Am
Rechner nachgemessen: die Kachel traegt den Verlauf/Schatten bereits jetzt
live, "background:none" war seit Tagen wirkungslos. R3-elite-17 zitiert
Figma direkt ("Die Logo-Marke steht im Soll auf einer dunklen Kachel, die
ueber die rechte Kartenkante hinauslaeuft"), das ist die verlaesslichere
Quelle. Hier uebernommen, damit das Fragment selbst stimmt statt sich auf
die Uebergangs-Datei zu verlassen. Geprueft per elementFromPoint und einem
pixelgenauen Streifen exakt an der Kartenkante: overflow:hidden auf der
Karte schneidet die Kachel dort sauber ab, kein Ueberlauf in den goldenen
Hintergrund (Schein bei x 1508..1731 bleibt reines Gold, kein Schwarzanteil). */
.lve-e3-icon--xl {
position: absolute;
right: -175px;
top: 50%;
transform: translateY(-50%);
width: 386px;
height: 163px;
border-radius: 26px;
justify-content: flex-start;
padding-left: 38px;
background: linear-gradient(144deg, #161616 0%, #000000 100%);
box-shadow:
inset 0 0 1px rgba(255, 238, 211, 0.9),
3px 3px 9px rgba(0, 0, 0, 0.49),
13px 11px 17px rgba(0, 0, 0, 0.43);
}
/* Abschluss-Pille */
.lve-e3-pill {
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
margin: 60px auto 0;
padding: 7px 20px;
border-radius: 78px;
border: 1px solid rgba(255, 188, 84, 0.5);
background:
linear-gradient(134deg, rgba(255, 188, 84, 0.2) 0%, rgba(255, 146, 0, 0.2) 100%),
rgba(12, 8, 2, 0.92);
box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.1);
font-size: 14px;
font-weight: 400;
line-height: 17px;
letter-spacing: 0.84px;
color: #ffffff;
}
/* Tablet */
@media (max-width: 1023px) {
.lve-e3 { padding: 70px 0 50px; }
.lve-e3-card { padding: 28px 32px 28px 28px; }
.lve-e3-icon--xl { right: -240px; }
.lve-e3-pill { margin-top: 80px; }
}
/* Mobile: kein Design vorhanden, sauber gestapelt abgeleitet */
@media (max-width: 767px) {
.lve-e3 { padding: 60px 0 44px; }
.lve-e3-head { gap: 18px; margin-bottom: 36px; }
.lve-e3-title { letter-spacing: -0.02em; }
.lve-e3-sub { letter-spacing: 0.3px; }
.lve-e3-grid { grid-template-columns: 1fr; gap: 14px; }
.lve-e3-card {
flex-direction: column;
align-items: flex-start;
gap: 20px;
min-height: 0;
padding: 24px 22px;
border-radius: 20px;
}
.lve-e3-card-text { max-width: none; gap: 14px; }
.lve-e3-desc { font-size: 16px; line-height: 1.5; letter-spacing: 0.2px; }
.lve-e3-icon { width: 72px; height: 72px; border-radius: 14px; }
.lve-e3-card--wide { padding-right: 22px; }
.lve-e3-value-row { flex-direction: column; align-items: flex-start; gap: 12px; }
.lve-e3-chip { font-size: 12px; min-height: 32px; }
.lve-e3-icon--xl {
position: static;
transform: none;
width: 100%;
height: 120px;
border-radius: 16px;
}
.lve-e3-pill { margin-top: 56px; font-size: 13px; }
}
/* Path-Pille sitzt jetzt im Kopf dieses Blocks (aus e2 verschoben) */
.lve-e3-head .lve-e2-path {
margin: 0 auto 24px;
}
/* Abnahme (Runde 3): Goldverlauf endete zu frueh - unter den Karten verlaengern */
.lve-e3::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -60px;
height: 340px;
z-index: 0;
pointer-events: none;
background: radial-gradient(70% 90% at 50% 30%, rgba(240, 158, 30, 0.4) 0%, rgba(200, 128, 16, 0.18) 55%, rgba(200, 128, 16, 0) 85%);
}
/* ============================================================
Goldflaeche, Abgleich 11.08.2026 (Befund 2.2 der Detailpruefung), nur
Desktop.
WARUM DREI KLASSEN IM SELEKTOR: wirksam ist bisher R3-elite-A5 aus
server-stand-20260810/lvlup-fixes/r3-elite.css Zeile 505 (Selektor
`.lve-e3 .lve-e3-bg`, Ebene 2, Prioritaet 1200), die ihrerseits
R3-elite-13 (Z. 161) ueberschreibt. `.lvf-page .lve-e3 .lve-e3-bg`
(0-3-0 gegen 0-2-0) setzt die Korrektur durch. Die Maske
(mask-image, harte Unterkante bei 82,5 %) aus R3-elite-13 bleibt
ausdruecklich stehen, sie wird hier nicht neu gesetzt.
Der Fehler: der Verlaufssatz war ueber die halbe Flaeche fast weiss. Das
Mockup zeigt Weissgold nur als zwei Lichtkerne an den Aussenkanten bei
rund einem Drittel der Sektionshoehe; dazwischen bleibt es kraeftig
orange. Messpunkte, Flaeche 1760 x 1035 ab Ist-y 1395 (Soll-y 1379):
Punkt Soll vorher nachher
(1560,140) 222,145, 29 238,201,136 232,158, 43
(1750,115) 244,168, 57 236,189,106 232,173, 83
(1610,265) 251,190,100 254,221,159 251,193,102
( 30,265) 255,233,202 254,217,148 253,238,212
(100,340) 254,232,204 253,211,135 253,234,203
(1750,340) 255,219,171 253,207,126 253,227,181
(250,740) 173,107, 16 204,156, 85 202,132, 28
Damit ist der gemeldete Befund erledigt: bei Soll-y 1520 fehlten rechts
92 Blaustufen Saettigung (Soll B 29, Ist B 136), jetzt sind es 14.
Mittlerer Farbabstand ueber 546 Messpunkte oberhalb der Maskenkante:
vorher 27,5 Stufen, nachher 14,6.
Aufbau von oben nach unten (die ersten drei Ebenen unveraendert aus
R3-elite-A5, sie stimmen):
1. Mulde in der Oberkante, laeuft rund 190 px in e3 hinein
2. kleiner Schatten rechts oben
3. deckendes Uebergabeband #f8ac33 zur e2-Grenze
4. linker Lichtkern: breit (rx 38 %), Mitte bei 34 % Hoehe
5. rechter Lichtkern: schmaler (rx 28 %), Mitte bei 40 % Hoehe
6. senkrechter Grundton, gemessen in der Sektionsmitte:
rel 3 % rgb(95,63,23), 18 % rgb(218,148,38), 33 % rgb(242,170,60),
57 % rgb(209,139,30), 80 % rgb(100,66,18)
============================================================ */
@media (min-width: 1024px) {
.lvf-page .lve-e3 .lve-e3-bg {
background:
/* -1. Anlauf der Goldflaeche an der Naht zu e2, 11.08.2026 nachts.
Die Maske unten daempft die obersten 30 px gleichmaessig. Kalibriert
wurde sie am RANDPROFIL (x 0..150 und 1610..1760), und dort stimmt
sie. In der Bildmitte ist der Anlauf trotzdem zu hell. Median je
Spaltenblock, 8 px unter der Naht (Ist-y 1395, Soll-y 1393):
x 88 264 440 704 968 1232 1408 1584 1672
Soll 202 159 126 98 84 75 83 125 165
Ist 209 184 149 115 97 108 121 131 152
Zwei Beulen: eine breite von x 220 bis 1100 und eine spitze um
x 1400, wo der Entwurf seine dunkelste Stelle hat (Soll-Minimum bei
x 1232, Ist-Minimum bei x 1000). Der Fehler ist auf die obersten
rund 50 px begrenzt, bei y 1444 ist er weg (Restfehler +3 bis -5),
bei y 1450 kippt er ins Gegenteil. Deshalb NICHT die Mulde (Ebene 2)
vertiefen: die ist 200 px hoch und traegt die Flaeche darunter, die
schon stimmt.
Zurueckgerechnet als Deckkraft einer fast schwarzen Lage,
Gesamtabnahme durch Gesamtspielraum ueber alle drei Kanaele:
x 44 220 396 660 924 1188 1364 1540 1716
Deckkraft 0,04 0,17 0,20 0,14 0,13 0,24 0,36 0,27 0,00
Drei flache Ellipsen (ry 54 bis 56 px) bilden das nach. Die aeusseren
Raender bleiben ausgespart, sie sind bereits 12 bis 14 Stufen zu
dunkel und wuerden sonst absaufen. */
radial-gradient(ellipse 340px 54px at 24% 0%, rgba(6, 4, 2, 0.155) 0%, rgba(6, 4, 2, 0.148) 30%, rgba(6, 4, 2, 0.124) 55%, rgba(6, 4, 2, 0.085) 75%, rgba(6, 4, 2, 0.040) 90%, rgba(6, 4, 2, 0) 100%),
radial-gradient(ellipse 480px 54px at 62% 0%, rgba(6, 4, 2, 0.155) 0%, rgba(6, 4, 2, 0.150) 45%, rgba(6, 4, 2, 0.122) 68%, rgba(6, 4, 2, 0.070) 84%, rgba(6, 4, 2, 0) 100%),
radial-gradient(ellipse 260px 54px at 78% 0%, rgba(6, 4, 2, 0.235) 0%, rgba(6, 4, 2, 0.223) 35%, rgba(6, 4, 2, 0.188) 60%, rgba(6, 4, 2, 0.129) 78%, rgba(6, 4, 2, 0.066) 90%, rgba(6, 4, 2, 0) 100%),
/* 0. Bernstein-Daempfung der rechten Flanke, 11.08.2026 (zweiter Durchgang).
Der rechte Lichtkern (Ebene 5) laeuft im unteren Drittel zu hell und zu
weiss aus. Median ueber x 1670..1760, IST gegen SOLL:
rel 55 % 59 % 62 % 66 % 70 % 73 %
vorher (249,210,152)(246,205,144)(241,196,128)(238,188,114)(236,182,99)(237,176,84)
Soll (251,196,115)(247,183, 88)(240,167, 58)(229,149, 31)(191,125,28)(154, 99,25)
Der Fehler ist also bis zu 83 Blaustufen gross und wird nach unten
groesser. Statt den Lichtkern umzubauen (er stimmt von rel 15 bis 55 %)
legt sich eine Bernsteinlage darueber, deren Mitte an der Maskenkante
sitzt: sie zieht Gruen und Blau zurueck und laesst Rot stehen.
Nachgerechnet fuer x 1715, Ergebnis nach der Lage:
rel 59 % (246,184, 90) | rel 66 % (217,142,39) | rel 70 % (196,124,29)
Bei x <= 1450 und links liegt sie ausserhalb der Ellipse, dort aendert
sich nichts (Radius rx 34 % um Mitte x 108 %). */
radial-gradient(ellipse 34% 26% at 108% 76%, rgba(120, 74, 14, 0.92) 0%, rgba(170, 100, 12, 0.86) 34%, rgba(225, 132, 2, 0.66) 56%, rgba(250, 150, 0, 0.34) 76%, rgba(255, 160, 10, 0) 100%),
radial-gradient(ellipse 60% 200px at 60% -16px, rgba(4, 3, 1, 0.62) 0%, rgba(4, 3, 1, 0.44) 44%, rgba(4, 3, 1, 0.18) 72%, rgba(4, 3, 1, 0) 100%),
radial-gradient(ellipse 12% 15% at 94% 0%, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.06) 50%, rgba(0, 0, 0, 0) 100%),
/* Uebergabeband. Oben nicht mehr #f8ac33, sondern gesaettigter.
Grund: die obersten Zeilen von e3 sind praktisch reines
Uebergabeband, nur von der Mulde abgedunkelt. #f8ac33 hat B/R 0,21,
der Entwurf an der Naht 0,10 bis 0,15, und G/R durchgehend 0,635
gegen 0,694. Nach der Helligkeitskorrektur oben blieb genau dieser
Rest: Rot stimmte, Gruen lag 6 bis 10 und Blau 8 bis 22 Stufen zu
hoch. Der neue Startton (248,164,38) trifft beide Verhaeltnisse.
Ab 3 Prozent (33 px) steht wieder #f8ac33, die Deckkraftrampe ist
unveraendert (bei 3 Prozent ohnehin 0,85), damit die weiter unten
kalibrierten Lichtkerne unberuehrt bleiben. */
linear-gradient(180deg, rgb(248, 164, 38) 0%, rgba(248, 172, 51, 0.85) 3%, rgba(248, 172, 51, 0) 20%),
radial-gradient(ellipse 38% 52% at -6% 34%, rgba(255, 251, 243, 0.9) 0%, rgba(255, 247, 234, 0.88) 26%, rgba(255, 235, 204, 0.88) 40%, rgba(253, 209, 140, 0.88) 55%, rgba(250, 175, 60, 0.9) 70%, rgba(247, 163, 34, 0.88) 82%, rgba(243, 157, 28, 0.42) 94%, rgba(240, 155, 26, 0) 100%),
radial-gradient(ellipse 28% 64% at 106% 40%, rgba(255, 242, 218, 0.9) 0%, rgba(255, 234, 198, 0.88) 26%, rgba(255, 218, 162, 0.88) 42%, rgba(253, 194, 102, 0.88) 58%, rgba(250, 170, 48, 0.9) 72%, rgba(246, 158, 28, 0.86) 84%, rgba(240, 152, 24, 0.4) 95%, rgba(236, 148, 22, 0) 100%),
linear-gradient(180deg, rgb(20, 13, 4) 0%, rgb(95, 63, 23) 3%, rgb(170, 112, 30) 10%, rgb(218, 148, 38) 18%, rgb(240, 170, 57) 26%, rgb(242, 170, 60) 33%, rgb(228, 155, 44) 41%, rgb(232, 155, 36) 49%, rgb(209, 139, 30) 57%, rgb(172, 113, 26) 64%, rgb(140, 92, 24) 72%, rgb(100, 66, 18) 80%, rgb(90, 60, 16) 83%);
/* Naht zu e2 (Befund der Gegenpruefung: sichtbare waagerechte Kante).
Randprofil, Mittel ueber x 0..150 und 1610..1760, Soll-y = Ist-y + 10:
dy -40 0 +40 +80
Soll 91 113 136 156
vorher 94 124 132 147
Der Sprung an der Naht war +19,3 Stufen, der Entwurf hat dort 5,4. Die
Flaeche startet also 11 Stufen zu hell. Die Maske daempft die obersten
30 px auf 90 Prozent, danach unveraendert; nachher an der Naht +7,4.
Die harte Unterkante bei 82,5 Prozent stammt aus R3-elite-13 und wird
hier mitgefuehrt, weil eine eigene mask-image die dortige ersetzt. */
/* Unterkante 11.08.2026 von 82,5 Prozent auf feste Pixel umgestellt.
Prozent beziehen sich auf die Sektionshoehe, und die ist durch die
korrigierte Pillenfuge um 81 px gewachsen: die Kante wanderte von
y 2241 auf 2309, der Goldschein lief 78 px zu tief und stand links und
rechts neben der unteren Haelfte der Punkte-Karte. Im Entwurf lag sie
bei y 2230, also 835 px unter der Sektionsoberkante. Feste Pixel halten
sie bei der naechsten Hoehenaenderung an Ort und Stelle.
Kunden-QA 12.08./13.08.2026: der 3-px-Sprung (835 -> 838) erzeugt genau
die "harte gerade Schnittkante" mit dem "hartkantigen goldenen
Vollbreitenstreifen" direkt darueber, die der Kunde meldet - gemessen
am eigenen Build faellt die Mitte des Bands bei y 2230 in 4 px von
(213-228,140-158,~30) auf (0,0,0), isoliert nachgebaut per
`.lve-e3-inner{visibility:hidden}` (nur .lve-e3-bg sichtbar) - Beleg
reproduzierbar mit werkzeuge/_tmp-e3bg-isoliert.js.
Figma soll dort weich gefiedert auslaufen. Die Position 835 px bleibt
unangetastet (dort steckt die gesamte Feinkalibrierung gegen
referenz-neu/soll/elite-aus-vollbild.png, Stand 10.08., vor dem
Kundenwechsel), nur die Auslaufstrecke wird von 3 auf 150 px gestreckt.
ACHTUNG fuer die Hauptsitzung: referenz-neu/soll/elite-aus-vollbild.png
ist vom 10.08. und zeigt selbst noch die harte Kante (siehe
soll-elite-naht.png-Beleg) - das spricht dafuer, dass Figma diesen
Uebergang erst mit den Aenderungen vom 12.08. weicher gemacht hat.
Bis der frische Figma-Zug vorliegt, ist das eine Verbesserung in die
vom Kunden verlangte Richtung, kein pixelgenauer Abgleich. */
-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0, #000 30px, #000 835px, transparent 985px);
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0, #000 30px, #000 835px, transparent 985px);
}
}
/* ===========================================================================
Fuge zur Zwischenpille "Private Member Privileges", 11.08.2026
Im Entwurf steht jede der drei Zwischenpillen 133 px unter der Unterkante
der Karten darueber, live waren es 60 px. Zusammen mit den beiden anderen
Pillen sind das die 155 px, die der Seite auf 6937 fehlen.
Der Innenabstand unten kommt aus r3-elite.css (`section.lve-e3`, 0-1-1) und
schlaegt die Fragmentregel. Deshalb hier 0-2-1, und nur im Desktop-Zweig:
die Mobilwerte von r3 stehen in eigenen Media Queries und bleiben gueltig.
Fuge Pille -> e4-Ueberschrift: Soll 26, live 18 (= 10 unten hier + 8 oben
in e4). Also 18 statt 10.
=========================================================================== */
@media (min-width: 1024px) {
.lve-e3-pill { margin-top: 133px; }
.lvf-page section.lve-e3 { padding-bottom: 18px; }
}
/* ===========================================================================
Die Pille "The Path to Elite" im Kopf dieses Blocks, 11.08.2026
Sie wurde aus e2 hierher verschoben und sitzt seitdem falsch:
| Fuge | live | Entwurf |
|-----------------------------|------|---------|
| e2-Text unten bis Pille | 113 | 138 |
| Pille bis Ueberschrift e3 | 50 | 26 |
Oben fehlen 25 px, unten sind 24 zu viel. Die obere Fuge ist der
Innenabstand oben dieser Sektion (44 aus r3-elite.css) plus der Abstand
unten in e2, deshalb 69 statt 44. Die untere sind die 24 px Aussenabstand
der Pille selbst, die restlichen 26 kommen aus dem Kopfraster und stimmen
damit schon.
=========================================================================== */
@media (min-width: 1024px) {
.lvf-page section.lve-e3 { padding-top: 69px; }
.lve-e3-head .lve-e2-path { margin-bottom: 0; }
}
/* ===========================================================================
Zeilenhoehe der Ueberschrift, 11.08.2026
"Performance Is Your Invitation" steht im Entwurf in einer 44 px hohen
Zeile (Figma-TEXT y 1518..1562), live in einer 60,4 px hohen: 65 px
Schriftgrad mal 0,93. Der Abstand von 26 px zur Unterzeile stimmt bereits,
es ist allein die Zeilenhoehe. 44 / 65 = 0,677.
Dieselbe Ueberschrift mit demselben Grad und derselben Sollzeilenhoehe
steht auf evaluation e3, dort ebenso korrigiert.
Nur ab 1024 px: darunter faellt der Grad per clamp kleiner aus und die
Zeile bricht um, dann waere 0,677 zu eng.
=========================================================================== */
@media (min-width: 1024px) {
.lve-e3.lve-e3 .lve-e3-title { line-height: 0.677; }
}
/* ===========================================================================
Groesse der fuenf Kartenglyphen, 11.08.2026
Alle fuenf waren 30 bis 50 Prozent zu klein. Gemessen wurde die Tinte, also
die tatsaechlich bemalte Flaeche, gegen den Figma-Vektor:
| Karte | Entwurf | live | Faktor |
|-----------------------------|---------|-------------|--------|
| 1 Lvlup Payouts | 44 x 51 | 24,6 x 35,8 | 1,59 |
| 2 External Futures Payouts | 49 x 49 | 33 x 33 | 1,48 |
| 3 Passed Lvlup Account | 50 x 47 | 30,4 x 29,3 | 1,62 |
| 4 Passed External Account | 52 x 52 | 35,1 x 35,1 | 1,48 |
| 5 Elite Entry (Pfeil) | 77 x 83 | 39,3 x 54,1 | 1,73 |
Die Groesse steckt als Attribut im SVG (44 bzw. 78) und liesse sich nur mit
einem Datenbank-Eingriff aendern, weil das Markup in der Elementor-Vorlage
liegt. Ueber CSS geht es ohne diesen Eingriff.
Bei Karte 1 weicht zusaetzlich die FORM ab (Seitenverhaeltnis 0,69 statt
0,86), ebenso bei Karte 5. Das ist mit Skalieren nicht zu beheben, dafuer
braucht es die Originalvektoren. Hier wird die Flaeche angeglichen, damit
die Glyphe nicht mehr verloren wirkt.
Die Kachel bleibt 95 x 95, die groesste Glyphe misst 71, es entsteht also
kein Ueberlauf und keine Hoehenaenderung.
=========================================================================== */
/* ===========================================================================
Rechte Fortsetzung unter der harten Maskenkante, 11.08.2026
Die Maske schneidet die Goldflaeche bei 835 px unter der Sektionsoberkante
ab (Ist-y 2230). Links ist das richtig, im Mockup steht dort (6,5,1). Rechts
laeuft das Band im Entwurf jedoch ohne Unterbrechung weiter, Median ueber
x 1670..1760:
y 2250 2320 2400 2470
Soll (183,152,87)(174,137,65)(154,115,46)(148,108,41)
vorher (5,6,15) (19,16,18) (92,68,36)(139,104,51)
Es fehlt also die obere Haelfte der Saeule; erst ab y 2400 traegt die
bestehende Ebene aus r3-elite.css (R3-elite-14, Ellipse bei 108 % / 92 %)
genug. Diese Ebene sitzt zu tief: bei y 2320 liefert sie rechnerisch nur
5 Prozent Deckkraft.
Ersatz: eine waagerechte Saeule ueber die volle Hoehe des Pseudoelements
(Ist-y 2216 bis 2496, danach schneidet overflow:clip) plus ein Lichtkern
am oberen Ende. Nachgerechnet bei y 2400:
x 1450 (29,20,16) | x 1600 (94,60,16) | x 1700 (163,113,39) | x 1755 (201,145,61)
gegen Soll (29,18,6) / (84,55,19) / (154,115,46) / (188,149,74).
Links und in der Mitte bleibt die Saeule bei 0 (erste Stufe erst ab 78 %
Breite), dort zeigt das Mockup ebenfalls Schwarz.
Spezifitaet 0-2-1: r3-elite.css setzt denselben Hintergrund mit 0-1-1
(`.lve-e3::after`, R3-elite-14) und wuerde sonst gewinnen. Geometrie
(bottom, height) bleibt die der Grundregel weiter oben in dieser Datei.
=========================================================================== */
@media (min-width: 1024px) {
.lvf-page .lve-e3::after {
background:
radial-gradient(ellipse 26% 46% at 106% 6%, rgba(255, 214, 150, 0.55) 0%, rgba(255, 170, 50, 0) 78%),
/* Nachtrag 11.08.2026 nachts: der linke Auslauf der Saeule fehlte.
Die erste Stufe stand bei 78 Prozent Breite (x 1373) auf 0, links
davon war es schwarz. Der Entwurf laeuft dort weiter aus. Median je
Block, Mittel ueber y 2320 bis 2488, Rotkanal:
x 1160 1220 1280 1340 1400 1460
Soll 5 7 10 15 21 33
vorher 0 0 0 0 18 37
Sichtbar war das als senkrechte Kante bei x 1375, und weil die
Flanke von e4 darunter bis x 1260 reicht, wurde daraus zusaetzlich
der Sprung von 13 an der Naht bei y 2496. Die Stufen ab 83 Prozent
bleiben unveraendert, dort stimmte die Saeule. */
linear-gradient(90deg,
rgba(255, 146, 0, 0) 58%,
rgba(255, 146, 0, 0.017) 66%,
rgba(255, 147, 1, 0.028) 71%,
rgba(255, 148, 2, 0.042) 75%,
rgba(255, 152, 12, 0.062) 79%,
rgba(255, 158, 30, 0.11) 83%,
rgba(255, 166, 52, 0.215) 88%,
rgba(255, 178, 68, 0.505) 95%,
rgba(255, 190, 88, 0.735) 100%);
}
}
@media (min-width: 1024px) {
.lve-e3-grid > .lve-e3-card:nth-child(1) .lve-e3-icon > svg { width: 70px; height: 70px; }
.lve-e3-grid > .lve-e3-card:nth-child(2) .lve-e3-icon > svg { width: 65px; height: 65px; }
.lve-e3-grid > .lve-e3-card:nth-child(3) .lve-e3-icon > svg { width: 71px; height: 71px; }
.lve-e3-grid > .lve-e3-card:nth-child(4) .lve-e3-icon > svg { width: 65px; height: 65px; }
/* 159 statt 135: der Faktor 1,73 galt dem SVG-Kasten, der Pfad fuellt aber
nur einen Teil seiner viewBox. Bemalte Flaeche war dadurch 59 x 75 statt
der 73 x 85 des Mockups, also noch einmal Faktor 1,18. */
.lve-e3-grid > .lve-e3-card:nth-child(5) .lve-e3-icon--xl > svg { width: 159px; height: 159px; }
}
/* ===========================================================================
Karten-Innenabstand oben/unten, Desktop, 13.08.2026
R3-elite-15 (Befund D) hat am 11.08. bereits 22 px oben/unten statt der
hier stehenden 32 px festgestellt (Soll-Kartenhoehe 191 px, gemessen waren
219). server-stand-20260810/lvlup-fixes/r3-elite.css setzt das seither ab
1024 px durch (".lve-e3 .lve-e3-card", 0-2-0, schlaegt die 0-1-0 Grundregel
dieser Datei), unterhalb von 1024 px hat r3 eigene, mit den Media Queries
hier deckungsgleiche Werte, dort war also nie ein Unterschied sichtbar.
Nur bei 1024 px+ ist die 32-px-Basis dieser Datei seit Tagen totes Werk:
min-height:191px oben erzwingt zwar die richtige Aussenhoehe, das echte
Living war aber immer schon 22 px. Hier uebernommen, damit das Fragment
selbst stimmt. Rechts/links unveraendert (48/32), die stimmten bereits. */
@media (min-width: 1024px) {
.lve-e3.lve-e3 .lve-e3-card { padding: 22px 48px 22px 32px; }
}
/* ===========================================================================
Tablet 768-1023 px: der Fliesstext der Elite-Entry-Karte laeuft unter die
angeschnittene XL-Kachel, 13.08.2026
Gemessen bei 768 px: die Karte ist dort nur 728 px breit (Desktop 1240),
der Textblock bekommt aber weiterhin sein volles max-width (830px aus
r3-elite.css, unscoped, schlaegt die 905px dieser Datei) und damit effektiv
keine Begrenzung, denn 830 > die 668 px Innenbreite der Karte. Der vierte
Chip "Only Verified Performance." und zwei Zeilen des Beschreibungstexts
laufen dadurch unter die Kachel: mit elementFromPoint und einer pixelgenauen
Markerlinie am rechten Chiprand bestaetigt, die Kachel deckt ab x 602 (=
Kartenkante 748 minus 146) den Rest der Zeile ab, der Chip endet erst bei
691,5. Die Kachel selbst bleibt unveraendert (right:-240px greift schon),
der Text bekommt hier zusaetzlich Platz zugewiesen. 520 px Textbreite laesst
bei 768 px rund 24 px Luft zur Kachel (602 - 48 Innenabstand - 520 = 34,
abzueglich Rundung ~24) und wird bei staerker werdenden Tablet-Breiten nur
grosszuegiger, weil die Kachel dann weiter nach rechts wandert.
Spezifitaet 0-4-0 noetig gegen r3-elite.css' unscoped 0-3-0 (830px). */
@media (min-width: 768px) and (max-width: 1023px) {
.lvf-page .lve-e3 .lve-e3-card--wide .lve-e3-card-text { max-width: 520px; }
}
/* 1024 bis 1199 px sind weiterhin Tabletbreiten. Die grosse rechte Illustration
darf den Beschreibungstext dort nicht ueberdecken. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
.lvf-page .lve-e3 .lve-e3-card--wide .lve-e3-card-text { max-width: 520px; }
.lvf-page .lve-e3 .lve-e3-icon--xl { right: -240px; }
}
/* ===========================================================================
Kartentext: Abstand und Breite, ab Tablet, 13.08.2026
R3-elite-15 (Befund D) setzt neben der Kartenhoehe (weiter oben bereits
uebernommen) auch den Text: ".lve-e3 .lve-e3-card-text" (0-2-0) auf
gap 10px / max-width 330px, ".lve-e3 .lve-e3-card--wide .lve-e3-card-text"
(0-3-0) auf max-width 830px. Beide Regeln stehen in r3-elite.css OHNE
eigenen @media-Block, gelten dort also ab 768 px (erst die 767-px-Regel
dieser Datei und aus r3 selbst setzt darunter auf "none"/14px zurueck).
Die Fragment-Basisregel hatte gap 17px / max-width 400px bzw. 905px
(0-1-0 / 0-2-0) und war unterhalb der Overrides-Ebene seit Tagen totes
Werk. Hier auf den Sollwert gehoben.
Die Wide-Karte behaelt zwischen 768 und 1023 px ihre eigene 520-px-Regel
weiter oben in dieser Datei (0-4-0, verhindert dort den Chip-Ueberlauf
unter die XL-Kachel): die gewinnt gegen die 830px hier unabhaengig von der
Reihenfolge, weil vier Klassen gegen drei stehen. */
@media (min-width: 768px) {
.lve-e3.lve-e3 .lve-e3-card-text { gap: 10px; max-width: 330px; }
}
@media (min-width: 1024px) {
.lve-e3.lve-e3 .lve-e3-card--wide .lve-e3-card-text { max-width: 830px; }
}
/* ===========================================================================
Kopfabstand nach unten, ab Tablet, 13.08.2026
R3-elite-15 setzt zusaetzlich ".lve-e3 .lve-e3-head" (0-2-0) auf
margin-bottom 65px, ebenso ohne eigenen @media-Block und damit ab 768 px
wirksam. Die Fragment-Basisregel hatte 48px, seit Tagen totes Werk
unterhalb der Overrides-Ebene. Der gap (26px) stimmte bereits mit r3
ueberein und bleibt unangetastet. */
@media (min-width: 768px) {
.lve-e3.lve-e3 .lve-e3-head { margin-bottom: 65px; }
}
/* == e4-world-beyond == */
/* e4-world-beyond: "A World Built Beyond the Payout" der Lvlup Elite Seite. Praefix .lve-e4- */
.lve-e4 {
position: relative;
overflow: clip;
padding: 36px 0 40px;
}
/* Hintergrund: warme Bernstein-Glows an den unteren Ecken, laufen grossflaechig
transparent aus, damit keine harten Kanten zu den Nachbarsektionen entstehen.
Runde 3: kraeftiger (Soll zeigt warme Raender) und mit Ausblende-Maske an der
Unterkante, damit der Uebergang zu e5 nicht als Abrisskante sichtbar ist
(Befund 6). */
.lve-e4-bg {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 48% 46% at 97% 102%, rgba(255, 146, 0, 0.72) 0%, rgba(255, 146, 0, 0.32) 42%, rgba(255, 146, 0, 0) 74%),
radial-gradient(ellipse 44% 42% at 2% 102%, rgba(255, 146, 0, 0.52) 0%, rgba(255, 146, 0, 0.2) 45%, rgba(255, 146, 0, 0) 72%),
radial-gradient(ellipse 76% 32% at 50% 114%, rgba(255, 188, 84, 0.4) 0%, rgba(255, 146, 0, 0) 70%),
radial-gradient(ellipse 30% 55% at -3% 45%, rgba(255, 146, 0, 0.22) 0%, rgba(255, 146, 0, 0) 72%),
radial-gradient(ellipse 30% 55% at 103% 45%, rgba(255, 146, 0, 0.22) 0%, rgba(255, 146, 0, 0) 72%);
-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 97%);
mask-image: linear-gradient(180deg, #000 55%, transparent 97%);
}
.lve-e4-inner {
position: relative;
z-index: 1;
}
/* Kopfbereich */
.lve-e4-head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 26px;
margin-bottom: 48px;
}
.lve-e4-title {
font-size: clamp(36px, 4.6vw, 65px);
font-weight: 500;
line-height: 0.93;
letter-spacing: -1.3px;
background: linear-gradient(141deg, rgba(255, 255, 255, 0.7) 0%, #ffffff 50%, rgba(255, 255, 255, 0.7) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lve-e4-title-gold {
background: linear-gradient(180deg, #ffbc54 0%, #ff9200 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Kunden-QA "the title thing": "Beyond the Payout" war live fett (w700) gegen
"A World Built" regulaer (w500); im Entwurf haben beide denselben Schnitt.
Ursache server-stand-20260810/lvlup-fixes/r3-elite.css Zeile 252 (0-2-0,
laedt nach dieser Datei), 0-3-0 schlaegt sie unabhaengig von der
Ladereihenfolge (gleiche Technik wie beim e1-Kicker, schon so in e2/e6/e7
gefixt). Kein echter Zeichenueberlapp (Range-API): der Eindruck des
kollabierten Wortabstands "MoreThanOnce"/"YouCannotBuy" kommt von der
fetten Type, die optisch mehr Zwischenraum "auffrisst" als w500. */
.lvf-page .lve-e4 .lve-e4-title-gold { font-weight: 500; }
.lve-e4-sub {
max-width: 1044px;
font-size: clamp(16px, 1.3vw, 18px);
font-weight: 425;
line-height: 24px;
letter-spacing: 0.54px;
color: rgba(255, 255, 255, 0.85);
}
/* Kartenraster: 3 Spalten, 16px Abstand.
minmax(0, 1fr) statt 1fr: `1fr` ist die Kurzform von `minmax(auto, 1fr)`,
die Spalte wird also nie schmaler als ihr min-content. Die Titelpille
traegt `white-space: nowrap`, damit ist der Kartenkopf die laengste
ungebrochene Zeile und bestimmt die Spaltenbreite. Folge (gemessen
12.08.2026, lokale Vorschau mit den Overrides aus lvlup-fixes):
1760 px Spalten 401,59 / 401,61 / 404,80 Entwurf: alle drei 402
1024 px Spalten 365,09 / 376,14 / 404,80, Raster bis x1198, also
174 px ausserhalb des Sichtfensters; `overflow: clip` auf
.lve-e4 schneidet das still weg, die dritte Spalte fehlt ganz.
Mit minmax(0, 1fr) liegen alle drei Spalten auf (Breite - 32) / 3. */
.lve-e4-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.lve-e4-card {
position: relative;
display: flex;
flex-direction: column;
gap: 20px;
min-height: 418px;
padding: 20px;
border-radius: 14px;
background:
linear-gradient(232deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%),
rgba(255, 255, 255, 0.05);
backdrop-filter: blur(35px);
-webkit-backdrop-filter: blur(35px);
box-shadow: -5px -3px 13px rgba(0, 0, 0, 0.34);
}
/* Goldene Haarlinie als Rahmen (Mitte kraeftig, zu den Ecken transparent) */
.lve-e4-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: 14px;
padding: 1px;
background: linear-gradient(180deg, rgba(255, 188, 84, 0) 0%, rgba(255, 188, 84, 0.55) 52%, rgba(255, 188, 84, 0) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
}
/* Kartenkopf: Icon-Kachel + Titel-Pille */
.lve-e4-card-head {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 8px;
}
.lve-e4-icon {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 8px;
background: linear-gradient(144deg, #161616 0%, #000000 100%);
box-shadow:
inset 0 0 0 1px rgba(255, 213, 146, 0.45),
1px 1px 4px rgba(0, 0, 0, 0.49),
6px 5px 8px rgba(0, 0, 0, 0.43);
}
.lve-e4-pill {
display: inline-flex;
align-items: center;
min-height: 43px;
padding: 6px 20px;
border-radius: 8px;
background:
linear-gradient(246deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%),
rgba(255, 149, 0, 0.06);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
font-size: 18px;
font-weight: 428;
line-height: 22px;
letter-spacing: 0.36px;
white-space: nowrap;
color: #ff9e2c;
}
/* Beschreibungstext */
.lve-e4-desc {
position: relative;
z-index: 1;
padding-inline: 8px;
font-size: 11px;
font-weight: 338;
line-height: 19px;
letter-spacing: 0.68px;
color: rgba(250, 248, 246, 0.6);
}
.lve-e4-desc p + p { margin-top: 10px; }
/* R3-elite-19b (Befund B6): beide Absaetze jeder Karte bleiben grau, je eine
Phrase pro Absatz ist gold gesetzt (Markup M5, Klasse .lve-e4-hl-gold,
zwoelfmal im Fragment-Markup, Zeilen 20/21/38/39/57/58/69/70/89/90/107/108).
Diese Regel fehlte bisher vollstaendig im Fragment: r3-elite.css traegt sie
seit Runde 3 (Zeile 270-274, 0-3-0), das Fragment selbst nie, obwohl die
Klasse im Markup laengst genutzt wird. Ohne sie waeren nach einem Deploy
alle zwoelf Goldhervorhebungen grau. Die beiden alten Klassen
.lve-e4-desc-gold und .lve-e4-hl kommen im Markup nicht mehr vor (ersetzt
durch .lve-e4-hl-gold) und sind hier entfernt. */
.lvf-page .lve-e4 .lve-e4-desc .lve-e4-hl-gold {
font-weight: 500;
background-image: linear-gradient(180deg, #ffbc54 0%, #ff9200 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* Bild mit Verlaufs-Overlays wie im Design */
.lve-e4-media {
position: relative;
z-index: 1;
margin: 0;
overflow: hidden;
border-radius: 7px;
aspect-ratio: 362 / 206;
}
.lve-e4-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Kunden-QA 12.08./13.08.2026: fuenf der sechs Medienbilder hatten den
Gold-Filter nie bekommen, nur Karte 5 (Befund 9, urspruenglich). Gemessen
am eigenen Blaukanal: bis 13,5 Stufen zu hoch, die Warm-Spanne fehlte
(Flugzeugbild Karte 6 Rot-minus-Blau 11,9 gegen Soll 32,1). Jetzt auf alle
sechs Bilder gesetzt statt nur auf Karte 5. Karte 5 selbst bleibt unberuehrt:
server-stand-20260810/lvlup-fixes/r3-elite.css Zeile 772 setzt fuer genau
diese Karte `filter: none` mit hoeherer Spezifitaet (0-4-1 gegen 0-1-1) nach,
weil dort bereits ein separat vorgetonter Bildausschnitt liegt
(elite-e4-5-kurve-r3-514x293-1.webp) und der Filter ihn ein zweites Mal
waermen wuerde. */
.lve-e4-media img {
filter: sepia(0.85) hue-rotate(-14deg) saturate(2.1) brightness(0.9);
}
/* Karte 6 (Flugzeugbild) war mit dem einheitlichen Filter zu warm: gemessen
Rot-minus-Blau 43,9 (Screenshot-Clip nach Filter, gerendert, siehe
Uebergabebericht), Soll 32,1. Ursache: Karte 6 hat den hoechsten
Ausgangskontrast der sechs Bilder, derselbe saturate-Wert treibt sie
deshalb staerker ins Warme als die uebrigen fuenf. Einzig saturate
nachgezogen (2,1 auf 1,475), sepia/hue-rotate/brightness unveraendert wie
im globalen Filter. Nachgemessen mit demselben Verfahren: 94,9/82,4/62,9,
Rot-minus-Blau 32,1, exakt Soll. Selektor 0-3-2 gegen 0-1-1 der Basisregel. */
.lve-e4-grid > article:nth-child(6) .lve-e4-media img {
filter: sepia(0.85) hue-rotate(-14deg) saturate(1.475) brightness(0.9);
}
.lve-e4-media::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 26%),
linear-gradient(180deg, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.72) 100%),
radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%),
linear-gradient(180deg, rgba(255, 188, 84, 0.1) 0%, rgba(255, 146, 0, 0.1) 100%);
}
/* Abschluss-Pille unter dem Raster */
.lve-e4-proof {
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
margin: 70px auto 0;
padding: 7px 18px;
border-radius: 78px;
border: 1px solid rgba(255, 188, 84, 0.5);
background:
linear-gradient(134deg, rgba(255, 188, 84, 0.18) 0%, rgba(255, 146, 0, 0.18) 100%),
rgba(12, 8, 2, 0.92);
box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.1);
font-size: 14px;
font-weight: 400;
line-height: 17px;
letter-spacing: 0.84px;
color: #ffffff;
}
/* Tablet: 2 Spalten */
@media (max-width: 1023px) {
.lve-e4 { padding: 56px 0 48px; }
.lve-e4-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lve-e4-head { margin-bottom: 48px; }
.lve-e4-proof { margin-top: 72px; }
}
/* Mobile: kein Design vorhanden, sauber gestapelt abgeleitet */
@media (max-width: 767px) {
.lve-e4 { padding: 52px 0 44px; }
.lve-e4-head { gap: 18px; margin-bottom: 36px; }
.lve-e4-title { letter-spacing: -0.02em; }
.lve-e4-sub { line-height: 1.45; letter-spacing: 0.3px; }
.lve-e4-grid { grid-template-columns: 1fr; gap: 14px; }
.lve-e4-card {
min-height: 0;
padding: 18px;
gap: 16px;
border-radius: 14px;
}
.lve-e4-pill { font-size: 16px; min-height: 44px; white-space: normal; }
.lve-e4-desc {
padding-inline: 4px;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.2px;
}
.lve-e4-proof { margin-top: 52px; font-size: 13px; }
}
/* Abnahme (Runde 2): Kartentitel und Fusszeilen-Labels sind im Design WEISS
(227/215/196), nicht gold. */
.lve-e4 .lve-e4-pill {
background: none;
background-image: none;
color: #e3d7c4;
-webkit-text-fill-color: #e3d7c4;
}
/* Nachtrag Breitenlauf 13.08.2026, Gleichstand-Verstoss gefunden:
server-stand-20260810/lvlup-fixes/r3-elite.css setzt mit R3-elite-19a
weiterhin ".lve-e4 .lve-e4-pill .lve-e4-pill-gold{...background:Goldverlauf,
color:transparent}" (0-3-0, veraltet, stammt aus der Zeit VOR der
Abnahme Runde 2 oben). Die Regel oben faerbt nur ".lve-e4-pill" selbst
(0-2-0) und erreicht die goldenen Spans darin nur per Vererbung - eine
Vererbung verliert gegen jede direkte Regel, egal wie niedrig deren
Spezifitaet. Gemessen: ohne Overrides-Ebene rendert ".lve-e4-pill-gold"
korrekt Weiss (rgb(227,215,196)), mit Overrides-Ebene (= der Live-Stand)
dagegen Gold (color transparent, background-clip text) - genau die Live-
Seite zeigt also weiterhin die vor Runde 2 abgenommene falsche Farbe.
0-4-0 gegen r3s 0-3-0, echter Gleichstand unabhaengig von der
Ladereihenfolge. Betrifft nur die Titel-Pillen (12 der 24 Zweifarbigkeits-
Fundstellen aus referenz-neu/befunde/zweifarbigkeit-aus-rohdaten.md); die
Klasse .lve-e4-hl-gold in .lve-e4-desc bleibt unberuehrt, sie ist gold
und soll es laut Figma-Rohdaten bleiben (siehe Regel weiter oben in
dieser Datei). */
.lvf-page .lve-e4 .lve-e4-pill .lve-e4-pill-gold {
font-weight: inherit;
background: none;
background-image: none;
color: #e3d7c4;
-webkit-text-fill-color: #e3d7c4;
}
/* ===========================================================================
Fuge zur Zwischenpille "Proof of Performance", 11.08.2026
Wie in e3: Soll 133 px unter der Kartenunterkante, live 70 px.
Fuge Pille -> e5-Ueberschrift: Soll 26, live 50 (= 40 unten hier + 10 oben
in e5). Also 16 statt 40. Der Wert 40 kommt aus r3-elite.css
(`section.lve-e4`, 0-1-1), darum 0-2-1 und nur Desktop.
=========================================================================== */
@media (min-width: 1024px) {
.lve-e4-proof { margin-top: 133px; }
/* 16,58 statt 16: siehe Hoehenbilanz im letzten Block dieser Datei. Der
Umbau des Kartenrasters macht die Sektion 0,58 px kuerzer; die 0,58
stehen hier, weil das der einzige Abstand der Sektion ohne eigenen
Sollwert im Entwurf ist. Damit endet e4 weiter exakt bei y 3722,42, und
e5, e6, e7 und der Fuss bleiben auf ihrer bisherigen Zeile - sonst
verschieben sich die Naehte gegenueber referenz-neu/dom-sektionen.json,
gegen die gemessen wird. */
.lvf-page section.lve-e4 { padding-bottom: 16.58px; }
/* Nachtrag Breitenlauf 13.08.2026: Kopf-Innenabstand fehlte bisher.
r3-elite.css Zeile 188 setzt "section.lve-e4{padding:8px 0 40px}"
(0-1-1), diese Datei nur ".lve-e4{padding:36px 0 40px}" (0-1-0) - die
Override-Ebene gewinnt also immer und war fuer den Kopf seit Tagen die
einzige wirksame Quelle. Gemessen bei 1760 px, Gesamthoehe elite:
ohne Overrides-Ebene 7125 px
mit Overrides-Ebene 6935 px (= Sollhoehe)
Differenz 190 px, davon 28 px allein aus diesem Kopf-Innenabstand
(36 - 8 = 28, restliche 162 px verteilen sich auf e2/e5/e6/e7, nicht
dieser Ordner). Alle Zahlen weiter unten in dieser Datei
(Kopfabstand 68px, Kartenreihe y2690, Hoehenbilanz) sind bereits GEGEN
den 8-px-Wert gerechnet ("Istwerte aus der lokalen Vorschau ... MIT
body.lvf-gold und build/theme/gold-footer.css"). Ohne diese Zeile stimmt
das Fragment fuer sich allein also nicht mit seinen eigenen, tiefer
unten dokumentierten Messungen ueberein. 0-2-1 gegen r3s 0-1-1, echter
Gleichstand unabhaengig von der Ladereihenfolge. */
.lvf-page section.lve-e4 { padding-top: 8px; }
}
/* ===========================================================================
Karten, Kacheln, Titelpillen und Medienbilder, Abgleich 11.08.2026,
nur Desktop. Alle Sollwerte aus figma/bands-elite/e4-world-beyond.json,
alle Istwerte aus der lokalen Vorschau in 1760 px gegen
referenz-neu/soll/elite-aus-vollbild.png.
1. GOLDENE HAARLINIE UM DIE KARTE. Der Entwurf hat eine Kontur von
0,0603 px, das entspricht 1 px mit rund 6 Prozent Deckkraft, und ihr
Verlauf laeuft diagonal nach rechts unten (Spitze bei 52 Prozent der
Diagonale). Live lag ein senkrechter Verlauf mit 55 Prozent Deckkraft
an. Linke Kartenkante von Karte 2, 1 px, von oben nach unten:
dy 20 80 140 200 260 320 380
vorher 21 58 94 131 113 71 30 (Rotkanal)
Soll 17 16 13 13 10 9 8 = der Kartenkoerper selbst
Im Mockup ist an der Seitenkante also gar keine Linie zu sehen, nur an
der Oberkante ein Saum von rund +8 Stufen.
2. KARTENFUELLUNG. Wie bei den e2-Karten liegt der Goldverlauf im Entwurf
im Modus COLOR (faerbt, hellt nicht auf), live als normale Deckkraft.
Zusaetzlich lief der schwarze Eckverlauf nur bis 0,85 statt bis 1,00 und
hatte fuer alle sechs Karten dieselbe Achse. Der Entwurf wechselt:
Karten 1, 3, 5: 232 Grad, t 0,02 rechts oben bis 1,00 links unten
Karten 2, 4, 6: 179 Grad, t 0,20 oben bis 0,92 unten
Gemessen Karte 1: links oben vorher (10,10,15), Soll (9,6,2);
rechts unten vorher (11,11,16), Soll (14,11,7). Die Helligkeit stimmte,
der Farbton war blaustichig, weil die Weissbasis den Seitengrund
(#05060f) durchreicht.
3. AUSSENSCHATTEN. Der Entwurf hat fuenf Stufen nach oben links, live nur
die erste. Die fuenfte (-136/-66, Deckkraft 0,01) bleibt weg.
4. ICON-KACHEL. Live: undurchsichtiges #161616 mit einem 1 px breiten
warmen Ring rundum. Entwurf: durchsichtiger Schwarzverlauf (28 % oben
links bis 98 % unten rechts) und ein Innenschein, der nur die Oberkante
trifft (Versatz 0,1/0,2, Radius 0,35).
Kachelinneres links oben vorher (18,18,18) Soll (3,3,2)
Rand links, 1 px vorher (124,105,75) Soll (33,27,19)
Rand oben, 1 px Soll (55,45,31)
Aus dem Sollwert oben folgt rgba(255,213,146) mit 0,20 Deckkraft
(0,20*255+0,80*3 = 54), links 0,12 (0,12*255+0,88*3 = 33).
5. TITELPILLE. Die Abnahmeregel aus Runde 2 weiter oben stellt die
Schriftfarbe richtig, hat dabei aber den Hintergrund mit entfernt. Der
Entwurf hat einen: Gold 6 Prozent plus einen Schwarzverlauf, der von
rechts (deckend) nach links auslaeuft.
Pille links vorher (11,11,17) Soll (20,13,3)
Pille rechts vorher (15,16,23) Soll ( 4, 3,1)
Die Schriftfarbe #e3d7c4 bleibt unangetastet.
6. MEDIENBILDER. Fuenf von sechs sind zu hell. Median ueber die Bildflaeche:
Karte 1 2 3 4 6
vorher (36,28,18) (92,74,56) (26,18, 6) (28,20, 9) (132,119,101)
Soll (12,12,11) (67,48,28) ( 3, 2, 1) (10, 8, 4) (102, 87, 57)
Zwei Ursachen: es fehlt die Ebene "Schwarz 20 Prozent" aus dem Entwurf,
und der Goldverlauf liegt dort im Modus HUE beziehungsweise COLOR, faerbt
also nur - live lag er mit 10 Prozent normaler Deckkraft darauf und hat
aufgehellt. Ausserdem standen die beiden Abdunkler an den falschen
Stellen: oben 0,45 bis 26 Prozent statt 0,665 bis 33,3 Prozent, unten ab
52 Prozent statt ab 72,1 Prozent, und die Vignette war mittig statt bei
28,2 Prozent Hoehe.
Karte 5 bleibt aussen vor: fuer sie schaltet r3-elite.css das Overlay mit
0-3-1 ganz ab, weil dort ein bereits fertig getonter Bildausschnitt liegt.
Nicht behebbar ohne die Originalvektoren, deshalb hier nur vermerkt: vier
der sechs Glyphen zeigen ein anderes Motiv als der Entwurf. Siehe
Uebergabebericht.
=========================================================================== */
@media (min-width: 1024px) {
/* 1. Haarlinie: Deckkraft von 0,55 auf 0,06, Achse auf die Diagonale des
Entwurfs (133 Grad, Spitze bei 66 Prozent der CSS-Verlaufslinie). */
.lve-e4 .lve-e4-card::before {
background: linear-gradient(133deg, rgba(255, 188, 84, 0.012) 0%, rgba(255, 188, 84, 0.06) 66%, rgba(255, 188, 84, 0.034) 100%);
}
/* 2. + 3. Fuellung und Aussenschatten */
.lve-e4 .lve-e4-card {
background:
linear-gradient(232deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 1) 100%),
linear-gradient(90deg, rgba(255, 150, 10, 0.055) 0%, rgba(255, 150, 10, 0.11) 50%, rgba(255, 150, 10, 0.055) 100%),
rgba(255, 236, 214, 0.02);
box-shadow:
-5px -3px 13px rgba(0, 0, 0, 0.34),
-22px -10px 24px rgba(0, 0, 0, 0.3),
-49px -23px 32px rgba(0, 0, 0, 0.18),
-87px -41px 38px rgba(0, 0, 0, 0.05);
}
.lve-e4 .lve-e4-grid > .lve-e4-card:nth-child(even) {
background:
linear-gradient(179deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.92) 100%),
linear-gradient(90deg, rgba(255, 150, 10, 0.055) 0%, rgba(255, 150, 10, 0.11) 50%, rgba(255, 150, 10, 0.055) 100%),
rgba(255, 236, 214, 0.02);
}
/* 4. Icon-Kachel */
.lve-e4 .lve-e4-icon {
background: linear-gradient(144deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.98) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 213, 146, 0.2),
inset 1px 0 0 rgba(255, 213, 146, 0.12),
1px 1px 4px rgba(0, 0, 0, 0.49),
6px 5px 8px rgba(0, 0, 0, 0.43);
}
/* 5. Titelpille: Hintergrund zurueck, Schriftfarbe unveraendert */
.lve-e4 .lve-e4-pill {
background:
linear-gradient(246deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.01) 100%),
rgba(255, 149, 0, 0.06);
}
/* 6. Medienbilder. Kunden-QA 12.08./13.08.2026: "die Bildausschnitte
weichen ab, in Figma haben die Bilder unten einen dunklen Verlauf, der
ins Kartenmaterial ausläuft, bei uns schneiden sie hart ab." Ursache
war nicht der Bildausschnitt (gleiche STRETCH-Quelle wie Figma,
figma/specs-elite/e4-world-beyond.txt Zeile 44ff.), sondern die
Bodenebene: sie endete bei 100% auf rgba(0,0,0,0.705), also nie ganz
schwarz, waehrend Figma dort exakt #000000 (Deckkraft 1) hat. Dadurch
stand am unteren Rahmenrand des Bildes noch Resthelligkeit gegen das
vollstaendig schwarze Kartenmaterial darunter - das war die harte Kante.
Nur der Endwert geaendert (0.705 -> 1), Startpunkt 72,1% unveraendert,
damit die gemessenen Mittel-/Spitzlicht-Werte aus Abschnitt 5.1 der
Arbeitsgrundlage nicht neu verschoben werden. */
.lve-e4 .lve-e4-media::after {
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.665) 0%, rgba(0, 0, 0, 0) 33.3%),
linear-gradient(180deg, rgba(0, 0, 0, 0) 72.1%, rgba(0, 0, 0, 1) 100%),
radial-gradient(ellipse 64.2% 71.8% at 50% 28.2%, rgba(0, 0, 0, 0) 59.7%, rgba(0, 0, 0, 0.5) 100%),
rgba(0, 0, 0, 0.2);
}
}
/* Zeilenhoehe der Ueberschrift, 11.08.2026: im Entwurf 44 px
(Figma-TEXT y 2501..2545), live 60,5 = 65 px Grad mal 0,93. Der Abstand
zur Unterzeile stimmt bereits. 44 / 65 = 0,677. Gleiche Korrektur wie in
e3 und auf evaluation e3, dieselbe Ueberschriftengroesse im ganzen Entwurf.
Nur ab 1024 px, darunter faellt der Grad per clamp kleiner aus und die
Zeile bricht um. */
@media (min-width: 1024px) {
.lve-e4 .lve-e4-title { line-height: 0.677; }
}
/* ===========================================================================
Mobil und Tablet: die Ueberschrift gehoert ueber ihren Text, 11.08.2026
Die Karten 4, 5 und 6 tragen `.lve-e4-card--flip`. Ihr Markup steht bewusst
in der Reihenfolge Bild -> Text -> Kopf, weil der Entwurf die zweite Reihe
des Dreierrasters gespiegelt zeigt (NOTIZ.md: "Reihe 2 gespiegelt:
Bild/Text/Kopf"). Unter 1024 px faellt das Raster auf zwei beziehungsweise
eine Spalte, eine zweite Reihe gibt es dann nicht mehr, und die Spiegelung
schiebt nur noch die Titelpille unter den Kartentext. Der Kunde hat das als
"layouttechnisch unlogisch" gemeldet.
Gemessen in der lokalen Vorschau (Vorschau im Speicher mit den Overrides
aus lvlup-fixes und der Hausschrift), Abstand von der Oberkante des
Kartenbildes zur Oberkante der Titelpille derselben Karte. Positiv heisst:
der Kopf steht unter dem Inhalt.
Breite Karte 4 Karte 5 Karte 6
390 px +365 +340 +389 IST vorher
768 px +329 +334 +348 IST vorher
1023 px +379 +379 +379 IST vorher
SOLL: negativ, die Pille steht ueber Text und Bild.
Umsortiert wird ausschliesslich per `order` innerhalb der Flex-Spalte der
Karte. Die Reihenfolge im HTML bleibt unangetastet, damit der abgenommene
Desktop-Zweig ab 1024 px seine Spiegelung behaelt, und die Kartenhoehe
aendert sich nicht: es sind dieselben drei Flex-Kinder mit demselben `gap`.
=========================================================================== */
@media (max-width: 1023px) {
.lve-e4 .lve-e4-card--flip > .lve-e4-card-head { order: 1; }
.lve-e4 .lve-e4-card--flip > .lve-e4-desc { order: 2; }
.lve-e4 .lve-e4-card--flip > .lve-e4-media { order: 3; }
}
/* ===========================================================================
Tablet 768 bis 1023 px: die rechte Kartenspalte war 68 px abgeschnitten,
11.08.2026
Beim Nachmessen aller sechs Karten aufgefallen, andere Ursache als oben.
`.lve-e4-pill` traegt `white-space: nowrap`. Zurueckgenommen wird das erst
ab 767 px abwaerts (Regel weiter oben und R3-elite-A12 im Plugin), also
genau NICHT im Tablet-Fenster. Dort bestimmt die laengste ungebrochene
Zeile die min-content-Breite der Karte, und `repeat(2, 1fr)` heisst
`minmax(auto, 1fr)`: die Spalten werden so breit wie ihr Inhalt es
erzwingt, nicht so breit wie der Platz erlaubt.
Gemessen bei 768 px, Stand vorher:
Raster verfuegbar 728 px, abzueglich 16 gap = 712 fuer zwei Spalten
Spalten tatsaechlich 404,8 + 395,5 = 800,3 px, also 88 px zu breit
Karten 2, 4, 6 x 441 bis 836, das Sichtfenster endet bei 768
-> 68 px je Karte weg, rechte Goldkante, Bildrand
und Textende abgeschnitten
Titelpille max-content 313 px ("Recognition That Carries Weight"),
304 px ("Exclusive Trips and Experiences")
+ 44 Kachel + 8 gap + 36 Innenabstand = 401 / 392
Kein waagerechtes Scrollen, weil `.lve-e4` auf `overflow: clip` steht: der
Ueberhang wird still weggeschnitten, scrollWidth bleibt 768.
SOLL: beide Spalten 356 px, nichts abgeschnitten.
Behandelt wird die Pille genau so, wie es das Projekt unter 768 px bereits
entschieden hat (R3-elite-A12): als Block, damit der Text bei Umbruch
normal fliesst. Bliebe sie `inline-flex`, waeren die Gold-Spans eigene
Flex-Kinder und stuenden bei zwei Zeilen nebeneinander statt untereinander
("Recognition | That Carries / Weight"). Der Innenabstand wird auf 10 px
symmetrisch gesetzt und `min-height` fallengelassen, weil `display: block`
die senkrechte Zentrierung von `align-items` verliert: einzeilig
10 + 22 + 10 = 42 px statt bisher 43, zweizeilig 64 px.
NACHTRAG 12.08.2026: das Fenster reicht bis 1279 px, nicht bis 1023 px.
Derselbe Bruch stand auch zwischen 1024 und 1258 px, nur haben ihn dort
nicht die zwei, sondern die drei Spalten ausgeloest. Gemessen bei 1024 px
im Bestand: Raster bis x1198, also 174 px hinter dem Sichtfensterrand, die
dritte Spalte komplett weg. Die Spaltenbreite ist mit minmax(0, 1fr) oben
erledigt, damit ragt aber die nowrap-Pille aus ihrer Karte: der Kartenkopf
braucht 44 + 8 + 312,8 = 364,8 px, und so viel Platz hat die Karte erst ab
einer Spaltenbreite von 384,8 px, also ab einem Fenster von rund 1227 px.
Die Grenze steht trotzdem bei 1280 px und nicht bei 1227: ab 1280 liegt
.lvf-container an seiner max-width von 1280 (Inhalt 1240) und die
Kartenbreite aendert sich nicht mehr. Ab dort ist die einzeilige Pille die
abgenommene Desktop-Fassung, darunter bricht sie um. Nichts wird
abgeschnitten, die Karte wird nur hoeher.
Ueber 1280 px bleibt ein Rest: der Kartenkopf ist 364,8 px breit, die
Karte innen 362,67. Die Pille laeuft damit 2,13 px in den rechten
Innenabstand der Karte hinein (Abstand zur Kartenkante 17,87 statt 20).
Sie wird nicht beschnitten. Im Entwurf passt der Kopf auf 0 px genau
(20 + 44 + 8 + 310 + 20 = 402), unsere Pille rendert 2,8 px breiter als die
310 px des Entwurfs - das ist der Subpixel-Unterschied Chrome/Figma, kein
Layoutfehler, und wird deshalb nicht per Innenabstand weggekuerzt.
=========================================================================== */
@media (min-width: 768px) and (max-width: 1279px) {
.lve-e4 .lve-e4-card-head .lve-e4-pill {
display: block;
white-space: normal;
min-height: 0;
padding: 10px 20px;
line-height: 22px;
}
}
/* ===========================================================================
Naht e3/e4 bei y 2496, rechte Flanke, 11.08.2026 nachts, nur Desktop.
Gemessen als Median je Spaltenblock, 8 px ueber und unter der Naht. Ueber
die linken zwei Drittel ist der Uebergang stufenlos (Sprung unter 1, wie
im Entwurf). Nur rechts steht eine Kante:
x 1408 1496 1584 1672
Sprung Soll 0,0 0,2 0,2 0,2
Sprung Ist 16,3 13,2 8,2 6,0
URSACHE. Die rechte Flanke kommt aus R3-elite-18 in
server-stand-20260810/lvlup-fixes/r3-elite.css (`.lve-e4 .lve-e4-bg`,
0-2-0). Ihre Ellipse ist 30 Prozent breit um eine Mitte bei 108 Prozent;
die letzte Farbstufe springt von 0,18 Deckkraft direkt auf 0. Bei y 2504
endet der Verlauf damit hart bei x 1375. Waagerechtes Profil, Rotkanal:
x 1260 1310 1360 1410 1460 1510 1560 1610 1660 1710
Soll 14 19 23 30 38 54 76 106 138 172
Ist 0 0 7 42 53 64 79 101 138 169
Rechts von x 1600 stimmt die Flanke, links davon bricht sie ab und ist im
Rest zu hell. Weil ihre Oberkante mit voller Staerke an der
Sektionsgrenze einsetzt, wird aus dem Abbruch die waagerechte Naht.
KORREKTUR. Nicht die Naht zukleben, sondern die Ellipse auf die Form des
Entwurfs bringen: 40 statt 30 Prozent breit, damit der Auslauf bis x 1260
reicht, und 170 statt 135 Prozent hoch, weil sonst der laengere
waagerechte Weg auch senkrecht schneller abfaellt. Die Deckkraftstufen
sind aus den Sollwerten zurueckgerechnet (Soll geteilt durch 283, dem
gemessenen Verhaeltnis von Rotwert zu Deckkraft dieser Flanke), die
Farben folgen unveraendert der Rampe von R3-elite-18.
Rechnerisch damit bei y 2504: 14/19/23/30/38/54/76/106/138/172 gegen die
Sollreihe oben, und bei y 3200 sinkt der Fehler von +11 bis +25 auf +5
bis +9. Die beiden anderen Ebenen sind Wort fuer Wort die von
R3-elite-18; sie werden nur mitgeschrieben, weil `background` sich nicht
teilweise ueberschreiben laesst. Die dortige `mask-image: none` bleibt
gueltig, sie wird hier nicht angefasst.
Selektor 0-3-0 gegen die 0-2-0 aus dem Plugin (Prioritaet 1200).
=========================================================================== */
@media (min-width: 1024px) {
.lvf-page .lve-e4 .lve-e4-bg {
background:
/* Naht e4/e5 bei y 3722, linke Haelfte. Die linke Flanke stirbt zur
Unterkante hin zu frueh ab; e5 beginnt darunter fast richtig, also
entsteht die Kante allein hier. Median je Spaltenblock, 8 px ueber
der Naht, Rotkanal:
x 44 132 220 308 396
Soll 236 175 107 59 34
vorher 210 123 75 50 15
Der Fehlbetrag ist auf die letzten rund 120 px begrenzt: bei y 3600
sind es +3, bei 3640 -16, bei 3680 -29. Die Flanke selbst
umzubauen verbietet sich, sie ist weiter oben zu HELL (+10 bei
y 3400). Deshalb eine flache Ecklage, 440 x 170 px, Farbe
(255,162,34) - aus den Sollwerten zurueckgerechnet, sie trifft dort
alle drei Kanaele (Soll G/R 0,634, B/R 0,131).
Die falsche Bodenaufhellung der Mitte (Ist 24 bis 27 gegen Soll 1
bis 7, Ebene "76% 30% at 50% 112%") bleibt bewusst stehen: e5 hat
an seiner Oberkante denselben Fehler in gleicher Hoehe, dort ist es
der Schleier aus e5-recognition/fragment.css. Wer nur eine der
beiden Seiten begradigt, macht die Naht sichtbarer, nicht sauberer. */
radial-gradient(ellipse 440px 170px at 0% 100%,
rgba(255, 162, 34, 0.62) 0%,
rgba(255, 162, 34, 0.58) 10%,
rgba(255, 162, 34, 0.39) 30%,
rgba(255, 162, 34, 0.19) 50%,
rgba(255, 162, 34, 0.09) 70%,
rgba(255, 162, 34, 0.05) 90%,
rgba(255, 162, 34, 0) 100%),
radial-gradient(ellipse 76% 30% at 50% 112%, rgba(255, 188, 84, 0.26) 0%, rgba(255, 146, 0, 0) 70%),
/* linke Flanke: unveraendert aus R3-elite-18 */
radial-gradient(ellipse 30% 90% at -8% 112%,
rgba(255, 220, 150, 1) 0%,
rgba(254, 178, 66, 0.92) 34%,
rgba(253, 170, 52, 0.56) 48%,
rgba(252, 166, 46, 0.31) 66%,
rgba(252, 162, 40, 0.17) 86%,
rgba(255, 146, 0, 0) 100%),
/* rechte Flanke: breiter, hoeher, mit ausgeschriebenem Auslauf */
radial-gradient(ellipse 40% 170% at 108% -12%,
rgba(255, 200, 100, 0.80) 0%,
rgba(254, 194, 87, 0.66) 20%,
rgba(254, 192, 82, 0.608) 28%,
rgba(254, 190, 77, 0.488) 35%,
rgba(253, 186, 73, 0.375) 42%,
rgba(253, 183, 69, 0.269) 49%,
rgba(253, 180, 64, 0.191) 56%,
rgba(253, 178, 60, 0.134) 63%,
rgba(252, 175, 57, 0.106) 70%,
rgba(252, 172, 53, 0.081) 77%,
rgba(252, 170, 49, 0.067) 84%,
rgba(253, 163, 35, 0.049) 91%,
rgba(255, 146, 0, 0) 100%);
}
}
/* ===========================================================================
Senkrechter Aufbau des Kartenrasters, 12.08.2026, nur Desktop.
Alle Sollwerte aus figma/bands-elite/e4-world-beyond.json (Rahmenbreite
1760, dieselbe wie die Messbreite), alle Istwerte aus der lokalen Vorschau
bei 1760 px MIT body.lvf-gold und build/theme/gold-footer.css, sonst zeigt
die Vorschau den blauen statt den goldenen Fuss.
Entwurf Ist vorher
Kartenreihe 1 y 2690 y 2669,84 (20,2 zu hoch)
Kartenreihe 2 y 3124, Hoehe 418 y 3103,84, Hoehe 436,58
Pillen Reihe 2 y 3479 (alle drei) y 3456,11 / 3456,11 / 3476,92
Pille "Proof" y 3675, Hoehe 31 y 3673,42, Hoehe 33
1. LUECKE UNTERZEILE -> ERSTE REIHE. Der Entwurf hat 71 px (Unterkante
Unterzeile 2619, Kartenreihe 2690), im Bestand stehen 48. Gesetzt wird
68 und nicht 71, weil unser Kopfblock als Ganzes 2,84 px tiefer sitzt
als im Entwurf (Titel Ist 2503,84 gegen Soll 2501); mit 68 liegt die
Kartenreihe auf y 2689,84 und damit auf ihrem Sollplatz. Der Wert 71
wuerde die absolute Lage um 2,84 px verfehlen, und gemessen wird gegen
das Bild, nicht gegen den Abstand.
2. TEXTBREITE DER KARTEN. Die sechs Textknoten des Entwurfs sind
unterschiedlich breit (344 / 344 / 349 / 344 / 350 / 355 px bei
durchgehend 28 px linkem Einzug, textAutoResize HEIGHT). Alle sechs
sind 84 px hoch, also VIER Zeilen. Bei uns lief Karte 6 auf fuenf
Zeilen, weil `padding-inline: 8px` beidseitig nur 346,67 px Textbreite
laesst. Gemessen, Hoehe der Textspalte von Karte 6 nach Breite:
346 348 350 352 | 354 356 358 360 362
105 105 105 105 | 86 86 86 86 86
Die Schwelle liegt zwischen 352 und 354. Mit `padding-inline: 8px 0`
bleibt der linke Einzug bei 28 px wie im Entwurf, die Textbreite steigt
auf 354,67, und alle sechs Karten stehen auf 86 px (= 4 Zeilen a 19 px
plus 10 px Absatzabstand). Damit ist die untere Reihe wieder 418 hoch.
3. KARTENKOPF DER ZWEITEN REIHE. Der Entwurf setzt ihn an die Unterkante
der Karte: Kopf 3479..3523, Kartenunterkante 3542, waehrend der Abstand
Text -> Kopf mit 26 px groesser ist als die 19 bis 20 px sonst. Genau
das macht `margin-top: auto` in der Flex-Spalte: der Rest der Karte
(418 gegen 416,39 Inhalt) sammelt sich ueber dem Kopf statt darunter.
Die drei Pillen liegen dadurch auf einer Linie, unabhaengig davon, wie
lang der Text darueber ist. Die Kartenhoehe aendert sich nicht, es wird
nur vorhandener Leerraum verschoben.
4. PILLE "PROOF OF PERFORMANCE". Der Entwurf hat 31 px Hoehe bei 6,24 px
Innenabstand oben und unten (Figma-Knoten 263:871, Auto-Layout). Unsere
33 kommen aus 7 + 17 + 7 plus 2 px Rahmen; im Entwurf liegt die Kontur
ausserhalb und zaehlt nicht mit. Mit 6 px Innenabstand sind es
1 + 6 + 17 + 6 + 1 = 31 wie im Entwurf.
HOEHENBILANZ, weil die Seite auf 6919 px bleiben muss:
Kopfabstand +20 untere Reihe -18,58
Proof-Pille -2 Summe -0,58
Sektion e4 damit 1226,00 statt 1226,58 px, Seite 6918,03 statt 6918,61,
scrollHeight in beiden Faellen 6919.
=========================================================================== */
@media (min-width: 1024px) {
.lve-e4 .lve-e4-head { margin-bottom: 68px; }
.lve-e4 .lve-e4-desc { padding-inline: 8px 0; }
.lve-e4 .lve-e4-card--flip > .lve-e4-card-head { margin-top: auto; }
.lve-e4 .lve-e4-proof { padding: 6px 18px; }
}
/* == e5-recognition == */
/* e5-recognition: "Recognition You Cannot Buy" der Lvlup Elite Seite. Praefix .lve-e5- */
.lve-e5 {
position: relative;
overflow: clip;
padding: 10px 0 70px;
}
/* Hintergrund: warme Bernstein-Glows v.a. oben links und an der linken Kante,
laufen grossflaechig transparent aus, damit keine harten Kanten zu den
Nachbarsektionen entstehen. Linke Kante traegt die helle Bernstein-Waeche
des Solls (gemessen 255/239/219), oben rechts faengt den Glow der
Vorgaengersektion weich auf. */
.lve-e5-bg {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 36% 62% at -8% 26%, rgba(255, 238, 214, 0.9) 0%, rgba(255, 200, 120, 0.45) 42%, rgba(255, 146, 0, 0) 75%),
radial-gradient(ellipse 46% 55% at -6% -4%, rgba(255, 146, 0, 0.5) 0%, rgba(255, 146, 0, 0.2) 42%, rgba(255, 146, 0, 0) 72%),
radial-gradient(ellipse 30% 46% at 0% 58%, rgba(255, 146, 0, 0.32) 0%, rgba(255, 146, 0, 0.12) 45%, rgba(255, 146, 0, 0) 72%),
radial-gradient(ellipse 42% 34% at 100% 0%, rgba(255, 146, 0, 0.42) 0%, rgba(255, 146, 0, 0) 70%),
radial-gradient(ellipse 36% 42% at 103% 26%, rgba(255, 146, 0, 0.16) 0%, rgba(255, 146, 0, 0) 70%),
radial-gradient(ellipse 32% 18% at 50% -2%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 70%);
/* Oberkante sanft einblenden: der Glow startet nicht abrupt an der
Sektionsgrenze, sondern blendet ueber 110px ein (Befund 6, weiche Kante). */
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 110px);
mask-image: linear-gradient(180deg, transparent 0, #000 110px);
}
.lve-e5-inner {
position: relative;
z-index: 1;
}
/* Kopfbereich */
.lve-e5-head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 26px;
margin-bottom: 70px;
}
.lve-e5-title {
font-size: clamp(36px, 4.6vw, 65px);
font-weight: 500;
line-height: 0.93;
letter-spacing: -1.3px;
background: linear-gradient(141deg, rgba(255, 255, 255, 0.7) 0%, #ffffff 50%, rgba(255, 255, 255, 0.7) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lve-e5-title-gold {
background: linear-gradient(180deg, #ffbc54 0%, #ff9200 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Kunden-QA "the title thing": "You Cannot Buy" war live fett (w700) gegen
"Recognition" regulaer (w500); im Entwurf haben beide denselben Schnitt.
Ursache server-stand-20260810/lvlup-fixes/r3-elite.css Zeile 316 (0-2-0,
laedt nach dieser Datei), 0-3-0 schlaegt sie unabhaengig von der
Ladereihenfolge (gleiche Technik wie beim e1-Kicker, schon so in e2/e6/e7
gefixt). Kein echter Zeichenueberlapp (Range-API): der Eindruck des
kollabierten Wortabstands "MoreThanOnce"/"YouCannotBuy" kommt von der
fetten Type, die optisch mehr Zwischenraum "auffrisst" als w500. */
.lvf-page .lve-e5 .lve-e5-title-gold { font-weight: 500; }
.lve-e5-sub {
max-width: 776px;
font-size: clamp(16px, 1.3vw, 18px);
font-weight: 425;
line-height: 24px;
letter-spacing: 0.54px;
color: rgba(255, 255, 255, 0.85);
}
/* Kartenraster: 2 Spalten, 16px Abstand */
.lve-e5-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.lve-e5-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 30px;
min-height: 380px;
padding: 37px 34px 22px;
overflow: hidden;
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.09);
background:
radial-gradient(ellipse 190px 95px at 26% -10px, rgba(255, 146, 0, 0.35) 0%, rgba(255, 146, 0, 0) 72%),
rgba(137, 137, 137, 0.05),
#000000;
backdrop-filter: blur(160px);
-webkit-backdrop-filter: blur(160px);
}
/* Konzentrische Deko-Ringe hinter dem Icon (im Design 5% Deckkraft) */
.lve-e5-card::before {
content: "";
position: absolute;
top: -140px;
left: 50%;
transform: translateX(-50%);
width: 480px;
height: 264px;
border-radius: 50%;
border: 1.8px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 0 0 60px rgba(255, 255, 255, 0.04);
pointer-events: none;
}
/* Goldene Haarlinie oben links auf der Kartenkante */
.lve-e5-card-line {
position: absolute;
top: 0;
left: 34px;
width: 108px;
height: 1px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
opacity: 0.6;
pointer-events: none;
}
/* Icon-Kachel + Kartentitel, zentriert */
.lve-e5-card-main {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
.lve-e5-icon {
display: flex;
align-items: center;
justify-content: center;
width: 87px;
height: 87px;
border-radius: 15px;
background: linear-gradient(144deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
box-shadow:
inset 0 0 1px #ffeed3,
inset 0 0 18px rgba(255, 188, 84, 0.12),
6px 5px 10px rgba(0, 0, 0, 0.45);
}
.lve-e5-icon svg {
width: 49px;
height: 49px;
}
/* Kartentitel: gold statt weiss (Soll-Messung 127/92/38, warm statt neutral) */
.lve-e5-card-title {
font-size: clamp(26px, 2.4vw, 35px);
font-weight: 555;
line-height: 1.1;
letter-spacing: -0.7px;
text-align: center;
background: linear-gradient(180deg, #ffbc54 0%, #ff9200 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Beschreibungstext unten in der Karte */
.lve-e5-desc {
position: relative;
z-index: 1;
align-self: stretch;
font-size: 15px;
font-weight: 338;
line-height: 26px;
letter-spacing: 0.9px;
color: rgba(250, 248, 246, 0.6);
}
.lve-e5-desc p + p { margin-top: 0; }
.lve-e5-desc-gold {
background-image: linear-gradient(180deg, #ffbc54 0%, #ff9200 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* Abschluss-Pille unter dem Raster */
.lve-e5-proof {
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
min-height: 44px;
margin: 90px auto 0;
padding: 7px 18px;
border-radius: 78px;
border: 1px solid rgba(255, 188, 84, 0.5);
background:
linear-gradient(134deg, rgba(255, 188, 84, 0.18) 0%, rgba(255, 146, 0, 0.18) 100%),
rgba(12, 8, 2, 0.92);
box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.1);
font-size: 14px;
font-weight: 400;
line-height: 17px;
letter-spacing: 0.84px;
color: #ffffff;
}
/* Tablet */
@media (max-width: 1023px) {
.lve-e5 { padding: 48px 0 64px; }
.lve-e5-head { margin-bottom: 48px; }
.lve-e5-proof { margin-top: 72px; }
.lve-e5-card { min-height: 0; padding: 32px 26px 36px; }
.lve-e5-icon { width: 72px; height: 72px; }
.lve-e5-icon svg { width: 40px; height: 40px; }
}
/* Mobile: kein Design vorhanden, sauber gestapelt abgeleitet */
@media (max-width: 767px) {
.lve-e5 { padding: 52px 0 56px; }
.lve-e5-head { gap: 18px; margin-bottom: 36px; }
.lve-e5-title { letter-spacing: -0.02em; }
.lve-e5-sub { line-height: 1.45; letter-spacing: 0.3px; }
.lve-e5-grid { grid-template-columns: 1fr; gap: 14px; }
.lve-e5-card {
gap: 22px;
padding: 28px 20px 30px;
border-radius: 22px;
}
.lve-e5-card::before { width: 340px; height: 190px; top: -100px; }
.lve-e5-card-main { gap: 20px; }
.lve-e5-icon { width: 64px; height: 64px; border-radius: 12px; }
.lve-e5-icon svg { width: 36px; height: 36px; }
.lve-e5-desc {
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.2px;
}
.lve-e5-desc p + p { margin-top: 10px; }
.lve-e5-proof { margin-top: 52px; font-size: 13px; }
}
/* ============================================================
Deko-Ring hinter dem Icon, 13.08.2026 (R3-elite-21, Befund C1).
Der 60-px-Spread-Schatten der Basisregel zeichnet einen sichtbaren grauen
Bogen ueber jeder Karte; im Soll liegt dort nur ein kaum sichtbarer
Ringrand. r3-elite.css setzt seit Runde 3 border-color auf rgba(255,255,
255,.02) und box-shadow auf none (0-2-1), die Fragment-Basisregel oben
(0-1-1) war unterhalb der Overrides-Ebene seit Tagen totes Werk. Live ist
der Ring fast unsichtbar, ohne diese Regel zeigt das Repo nach einem
Deploy genau den sichtbaren grauen Bogen, den der Kunde als Fehler
benannt hat. Ohne @media-Block wie r3-elite.css selbst, gilt also auf
allen Breiten. */
.lvf-page .lve-e5 .lve-e5-card::before {
border-color: rgba(255, 255, 255, 0.02);
box-shadow: none;
}
/* Detailcheck 06.08.2026: Shell-Reset .lvf-page.lvf-page h3 ueberstimmt den
Gold-Clip - mit Element+Klasse und spaeter Ladung gewinnt der Verlauf. */
.lve-e5 h3.lve-e5-card-title {
background: linear-gradient(180deg, #ffbc54 0%, #ff9200 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* Abnahme 06.08.: das grosse warme Randlicht des Designs fehlte fast komplett
(Design-Rand 251/225/186 vs Build 82/59/28). Kraeftige Seitenfluegel. */
.lve-e5::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(26% 70% at 0% 45%, rgba(252, 226, 187, 0.9) 0%, rgba(240, 180, 90, 0.45) 45%, rgba(230, 150, 40, 0) 78%),
radial-gradient(26% 70% at 100% 45%, rgba(252, 226, 187, 0.9) 0%, rgba(240, 180, 90, 0.45) 45%, rgba(230, 150, 40, 0) 78%);
}
/* ============================================================
Naht zu e4, Abgleich 11.08.2026 (Befund der Gegenpruefung: sichtbare
waagerechte Kante am Beginn von lve-e5), nur Desktop.
Randprofil, Mittel ueber x 0..150 und 1610..1760, Soll-y = Ist-y + 40:
dy -80 -40 0 +40 +80 +160 +240 +320
Soll 58 62 66 71 77 89 101 112
vorher 69 70 109 110 110 110 112 114
Der Sprung an der Naht war +39,2 Stufen, der Entwurf hat dort 1,2. Der
Grund: der Goldschein von e5 setzt an der Sektionsoberkante mit voller
Staerke ein und bleibt dann flach, waehrend er im Entwurf ueber rund
320 px langsam ansteigt. Das Fragment hatte dafuer schon eine Einblend-
maske ueber 110 px; sie wird von r3-elite.css Z. 292 und Z. 533
(`mask-image: none`, Selektor 0-2-0) abgeschaltet. Deshalb hier mit
`.lvf-page .lve-e5 .lve-e5-bg` (0-3-0) neu gesetzt.
Die Maske blendet nicht von 0 ein - das gaebe an der Naht einen dunklen
Strich, weil e4 dort mit 70 endet -, sondern von 57 Prozent auf 100
Prozent ueber 320 px. Rechnung: (66-9)/(109-9) = 0,57, gerundet auf 0,60,
damit an der Naht kein Sprung nach unten entsteht, wobei 9 der
Seitengrund ist. Nachher: dy 0 -> 66, +40 -> 71, +120 -> 82, +200 -> 93,
+320 -> 109. Sprung an der Naht nachher +2,4.
ABGELOEST am 11.08.2026 durch den neu vermessenen Goldschein weiter unten
in dieser Datei. Die Maske war nur ein Pflaster: sie daempfte den zu
weissen Verlauf, statt ihn zu ersetzen, und machte die obere
Sektionshaelfte zu dunkel (y 3875, x 0: gedaempft 209,186,144 statt
253,216,163). Der neue Verlauf blendet von sich aus weich ein, deshalb
steht dort `mask-image: none`. Regel hier entfernt, damit nicht zwei
Regeln mit derselben Spezifitaet um dieselbe Eigenschaft streiten.
============================================================ */
/* ===========================================================================
Fuge zur Zwischenpille "Maintain Your Position", 11.08.2026
Drei Abweichungen an einer Stelle:
1. Abstand zu den Karten: Soll 133 px, live 54. Der Wert 54 kommt aus
r3-elite.css (`.lve-e5 .lve-e5-proof`, 0-2-0) und schlaegt die 90 px
der Fragmentregel, deshalb hier 0-3-0.
2. Die Pille ist 44 px hoch statt 33 wie ihre beiden Schwestern. Ursache
ist `min-height: 44px` weiter oben in dieser Datei, das die anderen
beiden nicht haben. Ohne min-height ergibt sich aus Zeilenhoehe 17,
Innenabstand 2x7 und Rahmen 2x1 dieselbe Hoehe von 33.
3. Fuge Pille -> e6-Ueberschrift: Soll 21, live 8 (= 8 unten hier + 0 oben
in e6). Also 21 statt 8.
=========================================================================== */
@media (min-width: 1024px) {
.lvf-page .lve-e5 .lve-e5-proof { margin-top: 133px; min-height: 0; }
.lvf-page section.lve-e5 { padding-bottom: 21px; }
}
/* Zeilenhoehe der Ueberschrift, 11.08.2026: im Entwurf 44 px
(Figma-TEXT y 3732..3776), live 60,5 = 65 px Grad mal 0,93. Der Abstand
zur Unterzeile stimmt bereits. 44 / 65 = 0,677. Gleiche Korrektur wie in
e3 und auf evaluation e3, dieselbe Ueberschriftengroesse im ganzen Entwurf.
Nur ab 1024 px, darunter faellt der Grad per clamp kleiner aus und die
Zeile bricht um. */
@media (min-width: 1024px) {
.lve-e5 .lve-e5-title { line-height: 0.677; }
}
/* ============================================================
Wirkung gegen das Mockup, 11.08.2026, Runde "Effekte 1 zu 1".
Alles gemessen an referenz-neu/soll/elite-aus-vollbild.png, Sektion e5
liegt dort ab y 3728 (Anker: Oberkante der ersten Kartenreihe, Soll 3926).
Nur ab 1024 px, damit die Mobil- und Tabletwerte aus r3-elite.css gelten.
1. GOLDSCHEIN LINKS: halber Radius und milchiger Kern.
Der Schein starb live bei x etwa 500 ab, im Entwurf traegt er bis
x 1300. Gemessen in der Luecke zwischen den beiden Kartenreihen
(y 4290 im Ist, 4314 im Soll), Rot-Gruen-Blau:
x vorher Soll nachher
240 217,179,111 254,234,204 254,223,163
400 85, 60, 22 252,210,132 248,202,119
600 8, 5, 2 234,167, 52 232,165, 59
800 106, 67, 12 179,113, 16 180,113, 12
1000 75, 47, 6 94, 57, 4 94, 58, 6
Der Kern war ausserdem zu creme statt nahezu weiss (x 0: vorher
255,231,187, Soll 255,251,245, nachher 254,248,239) und in der oberen
Sektionshaelfte milchig-grau, weil die weisse Saeule aus r3-elite.css
(Regel R3-elite-20/A13, rgba(255,255,254)) ueber die ganze Hoehe lief.
2. NAHT ZU e4 bei y 3721: live sprang die Farbe von (216,151,54) auf
(151,138,115), das Blau verdoppelte sich, es entstand ein milchiges
Band ueber x 0 bis 850. Ursache war dieselbe weisse Saeule, die an der
Sektionsoberkante mit voller Staerke einsetzte. Der Entwurf hat dort
keinen Sprung (238,159,43 auf 238,160,45).
Sprung im Randprofil (Mittel x 0..150 und 1610..1760): vorher 18,9
Stufen, nachher 4,4, Entwurf 0,4. Die alte Einblendmaske ueber 320 px
wird dadurch ueberfluessig und abgeschaltet: der Verlauf bringt seinen
eigenen weichen Anfang mit (Oberkante x 0: vorher 157,147,128,
nachher 205,153,57, Soll 245,177,77).
Der Rest der Restabweichung liegt in e4: dessen Unterkante misst
(107,73,25), der Entwurf (124,81,19). Das ist e4s Fragment, nicht dieses.
Aufbau der vier Ebenen, numerisch an 1200 Messpunkten angepasst:
1. heller Kern links (fast weiss) ueber die halbe Sektionshoehe
2. breite Goldwolke, Mitte auf 52 Prozent Hoehe, Radius 80 Prozent
3. schmale Flanke rechts
4. flacher Warmschleier unten rechts
Mittlere Abweichung ueber 210 Kontrollpunkte: vorher 19,3 - nachher 6,8.
Selektor 0-3-0, weil r3-elite.css `.lve-e5 .lve-e5-bg` (0-2-0) zweimal
setzt (Z. 283 und Z. 525) und spaeter laedt. `.lve-e5::before` traegt im
Entwurf keinen eigenen Schein mehr: die beiden Seitenfluegel von oben sind
im neuen Verlauf enthalten, doppelt gemalt waren sie zu hell und zu grau.
============================================================ */
@media (min-width: 1024px) {
.lvf-page .lve-e5::before { background: none; }
.lvf-page .lve-e5 .lve-e5-bg {
background:
/* Naht zu e4 bei y 3722, linke Ecke. e4 liegt dort seit dem
11.08.2026 nachts auf dem Entwurf (236,156,42 gegen Soll 236,155,37),
e5 begann mit 196. Median je Spaltenblock, 8 px unter der Naht,
Rotkanal, und wie weit der Fehlbetrag nach unten reicht:
y 3724 3760 3820 3900 4000
Soll x44 237 242 248 252 254
vorher 197 208 217 236 250
Also -40 an der Kante, bei y 4000 ist er weg. Eine Ecklage
170 x 300 px in (255,168,36) holt das auf; die Farbe ist so
gewaehlt, dass sie den Blauueberschuss der Ecke (53 gegen Soll 41)
nicht vergroessert. Weiter rechts (x 176 bis 352) bleibt e5 zu
blass; das steckt im Lichtkern selbst und braucht dieselbe
Neuanpassung wie der Schleier weiter unten in dieser Regel. */
/* Dieselbe Ecke am unteren Ende, Naht zu e6 bei y 4883. Dort ist der
Sprung mit 32,0 der groesste der ganzen Seite (Entwurf 1,3):
x 0..88 e5 unten (218,185,123) e6 oben (253,217,152)
Soll (246,207,138) Soll (245,206,136)
e6 liegt also 8 Stufen zu hell, e5 aber 28 zu dunkel. Farbe
(255,215,150), weil die Ecke im Entwurf weissgold ist und nicht
gesaettigt; sie trifft bei der noetigen Deckkraft alle drei Kanaele
(Rechnung: 0,76 ergibt 246/208/143 gegen Soll 246/207/138).
Klein gehalten (120 x 160 px), damit sie x 88..176 nicht mitnimmt -
dort ist der Entwurf gesaettigter und dieselbe Farbe wuerde 24
Blaustufen zu viel bringen. */
radial-gradient(ellipse 120px 160px at 0% 100%,
rgba(255, 215, 150, 0.70) 0%,
rgba(255, 215, 150, 0.55) 30%,
rgba(255, 215, 150, 0.36) 58%,
rgba(255, 215, 150, 0.16) 80%,
rgba(255, 215, 150, 0) 100%),
radial-gradient(ellipse 170px 300px at 0% 0%,
rgba(255, 168, 36, 0.72) 0%,
rgba(255, 168, 36, 0.57) 26%,
rgba(255, 168, 36, 0.38) 50%,
rgba(255, 168, 36, 0.17) 78%,
rgba(255, 168, 36, 0.06) 92%,
rgba(255, 168, 36, 0) 100%),
radial-gradient(31.4% 81.2% at -3.5% 56.2%, rgba(255, 250, 249, 0.874) 0%, rgba(255, 252, 243, 1) 35%, rgba(255, 190, 67, 0.766) 70%, rgba(255, 145, 0, 0) 100%),
radial-gradient(80.5% 62.3% at 11.3% 51.6%, rgba(255, 255, 255, 1) 0%, rgba(255, 162, 16, 0.885) 35%, rgba(122, 12, 0, 0.034) 70%, rgba(255, 145, 0, 0) 100%),
radial-gradient(15.8% 364% at 104% 111.7%, rgba(253, 147, 26, 0.977) 0%, rgba(253, 147, 1, 0.132) 35%, rgba(254, 150, 2, 0.032) 70%, rgba(255, 145, 0, 0) 100%),
/* ACHTUNG, offener Befund vom 11.08.2026 nachts, bitte nicht ohne
Neuanpassung anfassen: der helle Stopp dieser Ebene sitzt bei
100 Prozent, also genau auf dem Ellipsenrand. Ausserhalb eines
Verlaufs malt CSS die letzte Farbe unendlich weiter, die Lage liegt
deshalb als gleichmaessiger Schleier von rgba(255,181,89,0.147)
ueber der GANZEN Sektion: 0,147 mal (255,181,89) = (37,27,13), und
genau (38,26,13) misst man an der Oberkante von e5 ueber x 352 bis
1056, wo der Entwurf (35,22,4) bis (1,1,1) zeigt. Gegenprobe:
mit `.lve-e5-bg{display:none}` steht dort ueberall (0,0,0).
Ein Versuch, den Schleier ueber Stopps einzufangen, wurde gemessen
und wieder zurueckgenommen: die Naht zu e4 wird dadurch besser
(Sprung 33 auf 23), die Sektion insgesamt aber schlechter
(Blockmedian-Mittel 7,17 auf 7,37), weil die linke Spalte 13 bis 20
Stufen zu dunkel wird - bei y 3820 x 352 sind es dann -64. Die vier
Ebenen sind numerisch an 1200 Punkten gemeinsam angepasst worden;
der Schleier ist in dieser Anpassung mit drin. Sauber wird das erst
mit einer neuen Anpassung des ganzen Satzes. */
radial-gradient(81.3% 82.6% at 91.2% 64.6%, rgba(254, 127, 92, 0) 0%, rgba(254, 121, 48, 0) 35%, rgba(70, 38, 1, 0.002) 70%, rgba(255, 181, 89, 0.147) 100%);
-webkit-mask-image: none;
mask-image: none;
}
/* Die breite Restaufhellung von e5 setzte am oberen Rand schlagartig ein.
Ein dunkler, nur nach unten auslaufender Schleier gleicht sie an die
Unterkante von e4 an, ohne einen neuen Schein in e4 oder e5 zu malen. */
.lvf-page section.lve-e5::after {
content: "";
position: absolute;
inset: 0 0 auto;
height: 180px;
z-index: 0;
pointer-events: none;
background: linear-gradient(90deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.10) 5%,
rgba(0, 0, 0, 0.16) 10%,
rgba(0, 0, 0, 0) 20%,
rgba(0, 0, 0, 0.52) 25%,
rgba(0, 0, 0, 0.43) 30%,
rgba(0, 0, 0, 0.35) 35%,
rgba(0, 0, 0, 0.26) 40%,
rgba(0, 0, 0, 0.12) 45%,
rgba(0, 0, 0, 0) 50%,
rgba(0, 0, 0, 0) 100%);
-webkit-mask-image: linear-gradient(180deg, #000 0 35%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0 35%, transparent 100%);
}
}
/* ============================================================
Kartenflaeche, 11.08.2026. Die vier Karten waren ein flaches Neutralgrau
(35,35,35) statt der fast schwarzen, leicht durchscheinenden Flaeche des
Entwurfs. Median ueber textfreie Kartenfelder:
Feld vorher Soll nachher
K1 rechts oben 35,35,35 8, 8, 8 19,15, 9
K2 rechts oben 35,35,35 8, 8, 8 9, 8, 8
K3 links oben 35,35,35 20,16, 8 25,20,12
K4 rechts oben 35,35,35 8, 8, 8 9, 8, 8
Der Entwurf laesst den Goldschein zu rund 8 Prozent durch die Karte
durchscheinen: links ist die Flaeche warm (20..25), rechts neutral (8).
Deckendes Schwarz kann das nicht, deshalb rgba(0,0,0,0.92) statt #000
plus die weisse Aufhellung von 0,135 auf 0,03 zurueckgenommen.
r3-elite.css Regel R3-elite-A14 hatte hier "Soll neutral 30..38 grau"
notiert; am heutigen Vollbild-Export ist die Kartenflaeche 8 grau. Die
Regel bleibt unangetastet, sie wird mit 0-3-0 ueberstimmt.
Mittlere Abweichung ueber acht Kartenfelder: vorher 27 - nachher 4,0.
============================================================ */
@media (min-width: 1024px) {
.lvf-page .lve-e5 .lve-e5-card {
background-color: rgba(0, 0, 0, 0.92);
background-image:
radial-gradient(ellipse 300px 190px at 26% -20px, rgba(255, 150, 10, 0.2) 0%, rgba(255, 146, 0, 0) 72%),
linear-gradient(180deg, rgba(255, 255, 255, 0.032) 0%, rgba(255, 255, 255, 0.028) 100%);
}
}
/* ============================================================
Abschluss-Pille "Maintain Your Position", 11.08.2026.
Im Entwurf ist sie rein schwarz und randlos, live trug sie einen goldenen
Rahmen und eine warme Fuellung (aus r3-elite.css Regel R3-elite-24).
Senkrecht durch die Pille bei x 800 gemessen:
Stelle vorher Soll
Rahmen oben 40,28,11 0, 0, 0
Fuellung 22,14, 5 0, 0, 0
Rahmen unten 41,29,11 0, 0, 0
Nachher 0,0,0 bis 1,1,0. Nur Farbe, keine Groesse: margin-top und
min-height bleiben in der Fuge-Regel weiter oben stehen.
============================================================ */
@media (min-width: 1024px) {
.lvf-page .lve-e5 .lve-e5-proof {
border-color: transparent;
background: #000000;
}
}
/* Unterlaengen sichtbar halten, 11.08.2026 nach der Abnahme.
`background-clip: text` malt ausschliesslich innerhalb des Elementkastens.
Mit der auf 44 px gesetzten Zeilenhoehe ragte das Glyphenband (74 px) unten
heraus, und bei "Recognition" (g) wurde die Unterlaenge flach abgeschnitten.
padding-bottom vergroessert die Malflaeche, das gleich grosse negative
margin-bottom nimmt sie aus dem Layout wieder heraus. Die Seitenhoehe
aendert sich dadurch nicht. */
@media (min-width: 1024px) {
.lve-e5-title { padding-bottom: 14px; margin-bottom: -14px; }
}
/* == e5-Symbole 12.08.2026 == */
/* ===========================================================================
Die Symbole der vier Karten, 12.08.2026. Zwei Abweichungen.
1. KASTEN 79 STATT 87 PX.
Der Entwurf hat 87x87: Figma "Frame 2147237446", viermal zeichengleich
bei x 524 und 1151, y 3962 und 4360, cornerRadius 15,1228. Das Fragment
stand immer auf 87. Heruntergezogen hat es r3-elite.css Z. 311 (Regel
R3-elite-23, Selektor 0-2-0), und dort ging es gar nicht um das Symbol,
sondern um Kartenhoehe: "Karten im Soll 383 px hoch, im Ist 410".
Die Karten haengen aber an min-height 380 px und haben Luft; die 8 px
Symbol schlagen deshalb nicht auf die Kartenhoehe durch. Belegt am
gerenderten Stand: Karten vorher wie nachher 380 px, Seite vorher wie
nachher 6919 px. Deshalb hier mit 0-3-0 zurueck auf die 87 des Entwurfs.
Der Radius stimmt bereits (15 gegen 15,12) und bleibt unberuehrt.
2. FALSCHES MOTIV.
Gemalt wurde ein Pokal aus zwei Strichformen, gemessene Tinte
17,2 x 35,1 px. Der Entwurf zeigt etwas anderes: zwei Personen, die
hintere halb verdeckt, darunter eine offene tragende Hand. Seine Tinte
misst 46,5 x 47,3 px in einem 49x49-Kasten (Auftragsangabe 46 x 47).
WOHER DAS MOTIV STAMMT - und was ausdruecklich NICHT ging:
Die Vektorgeometrie ist im Figma-Export NICHT enthalten. Die vier Knoten
sind da (263:934, 263:948, 263:962, 263:976) und untereinander
zeichengleich, aber ohne fillGeometry und ohne strokeGeometry: die vier
Aufbereitungsskripte figma/page-prep.js, figma/extract-band.js,
figma/extract-refs.js und figma/eval-prep.js fuehren genau diese beiden
Felder in ihrem DROP-Set. Unter figma/ liegt ausserdem keine einzige
.svg-Datei und kein Einzelbild des Symbols, und die Vektoren haben keinen
IMAGE-Fill, stehen also auch in figma/elite-image-refs.txt,
figma/image-fills.json und figma/wp-media-map.json nicht.
Statt ein aehnliches Symbol aus einer Bibliothek zu nehmen, ist die echte
Zeichnung des Kunden nachgezeichnet worden. Quelle ist die hoechstaufgeloeste
vorhandene Darstellung: mockups/Elite page/Lvlup Futures - Lvlup Elite
Page.jpg, 3000 px gegen 1760 Figma-Einheiten, Faktor 1,7045. Verfahren:
Luminanz achtfach hochgetastet, Marching Squares auf dem Graustufenfeld
(Subpixel-Konturen), Douglas-Peucker mit 0,07 px.
Gegenprobe, Pfad zurueckgerastert und mit dem Mockup verglichen:
Ueberdeckung IoU 0,970, bestmoegliche Lage 0,975 bei 0,10 px Restversatz.
WARUM UEBER CSS UND NICHT IM MARKUP: das alte Motiv steckt als Inline-SVG
in fragment.html, und an dieser Datei wird hier nichts geaendert. Das alte
SVG wird deshalb ausgeblendet und das richtige Motiv als Maske auf ::after
gelegt. Die Maske traegt den Goldverlauf des Figma-Vektorfills
(#ffbc54 -> #ff9200, senkrecht).
Der Innenschein des Vektors (INNER_SHADOW #ffeed3, COLOR_DODGE, Radius
0,667) ist bei 49 px nicht aufloesbar und bleibt weg.
Die Maske sitzt mittig. Im Entwurf steht der 49er-Kasten 18 px von links
und 19 px von oben, mittig waeren 19/19; das eine Pixel wird bewusst in
Kauf genommen, damit die Lage bei 72 und 64 px Kastenbreite mitskaliert.
Die Glyphengroessen 49/40/36 sind die, die vorher fuer das Inline-SVG
galten (Verhaeltnis 49/87 = 0,563).
=========================================================================== */
@media (min-width: 1024px) {
.lvf-page .lve-e5 .lve-e5-icon { width: 87px; height: 87px; }
}
/* ============================================================
Kartenpolster unten, gepruefter Nicht-Befund, 13.08.2026.
r3-elite.css Z. 312 setzt ".lve-e5 .lve-e5-card { padding: 37px 34px
22px; }" (0-2-0). Dieser richtige Wert steht nun auch in der
Fragmentregel oben. Auf den ersten Blick sah das nach derselben
"shell.css schlägt Fragment"-Falle aus wie beim Suchfeld auf rules, mit einem
Beleg aus figma/bands-elite/e5-recognition.json, der 42 nahelegt:
Karte 1 Textbox endet bei y 4265 (4151+114), Karte endet bei y 4307
(3925+382) -> Abstand 42. Karte 3 ebenso rund 40.
Test mit 0-3-0 auf 42px durchgefuehrt und WIEDER VERWORFEN: die
Kartenhoehe haengt an min-height:380 mit Luft, aber 42px statt 22px
reisst genau diese Luft auf. Gemessen bei 1760 px: Karten vorher 380,
mit 42px nachher 397 (+17 pro Karte), Seitenhoehe vorher 6919, nachher
6968 (+49, ausserhalb der Toleranz von rund 35 px). Die feste Sollhoehe
verbietet das.
Grund fuer den Widerspruch: die 114-px-Textbox in Figma ist ein fixer
Platzhalter-Slot, keine an den Inhalt angepasste Boundingbox - alle vier
Karten tragen exakt 114, obwohl Karte 3 eine Leerzeile mehr und laengeren
Text traegt als Karte 1. "Textbox-Ende bis Kartenrand" misst deshalb den
Slot, nicht den tatsächlich nötigen Abstand. Die 22 px sind der Wert, mit
dem Kartenhöhe (380) und Seitenhöhe exakt aufgehen. Der nächste Blick auf
diese Stelle sollte am
gerenderten Bild (referenz-neu/soll/elite-aus-vollbild.png) ansetzen,
nicht an der Textbox-Geometrie allein.
============================================================ */
.lve-e5 .lve-e5-icon > svg { display: none; }
.lve-e5 .lve-e5-icon::after {
content: "";
display: block;
width: 49px;
height: 49px;
background: linear-gradient(180deg, #ffbc54 0%, #ff9200 100%);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2049%2049'%3E%3Cpath%20fill='%23000'%20fill-rule='evenodd'%20d='M23.10%201.11%20L24.68%201.10%20L26.30%201.35%20L27.84%201.92%20L29.92%203.16%20L31.06%204.28%20L32.18%205.58%20L32.82%206.80%20L33.48%208.46%20L33.84%2011.08%20L33.33%2014.38%20L32.23%2016.58%20L30.99%2018.19%20L30.34%2018.78%20L28.76%2019.88%20L27.70%2020.47%20L25.78%2021.03%20L24.76%2021.20%20L22.70%2021.22%20L21.46%2021.06%20L19.70%2020.52%20L17.50%2019.29%20L15.52%2017.28%20L14.86%2016.36%20L14.26%2015.26%20L13.70%2013.80%20L13.49%2012.18%20L13.48%2010.35%20L13.70%208.52%20L14.27%206.99%20L14.78%206.02%20L16.03%204.34%20L16.69%203.67%20L18.08%202.59%20L19.37%201.92%20L21.24%201.28%20L23.10%201.11ZM36.23%206.54%20L36.56%206.51%20L36.93%206.65%20L37.35%207.05%20L37.96%207.40%20L39.15%208.52%20L40.40%2010.13%20L41.04%2011.30%20L41.65%2013.21%20L41.84%2015.63%20L41.58%2017.83%20L40.96%2019.53%20L40.34%2020.69%20L39.20%2022.20%20L38.62%2022.80%20L37.08%2023.99%20L35.76%2024.66%20L33.78%2025.27%20L31.06%2025.42%20L29.24%2025.24%20L28.42%2024.87%20L27.40%2024.63%20L27.00%2024.21%20L26.96%2023.99%20L27.06%2023.84%20L28.42%2023.45%20L29.01%2023.07%20L29.74%2022.86%20L30.26%2022.46%20L30.84%2022.23%20L33.12%2020.39%20L34.55%2018.64%20L35.75%2016.58%20L35.98%2015.63%20L36.39%2014.75%20L36.88%2012.33%20L36.85%209.91%20L36.41%207.64%20L36.08%206.90%20L36.23%206.54ZM43.31%2026.48%20L44.26%2026.42%20L45.66%2026.62%20L46.65%2027.22%20L47.42%2027.88%20L48.10%2028.90%20L48.41%2030.52%20L48.41%2030.96%20L48.08%2032.40%20L47.42%2033.37%20L45.07%2035.70%20L38.32%2041.88%20L35.68%2044.46%20L34.73%2045.04%20L33.19%2045.50%20L30.26%2045.73%20L23.73%2045.95%20L19.11%2046.32%20L16.25%2046.38%20L15.34%2046.21%20L14.16%2045.70%20L13.26%2044.96%20L12.58%2044.08%20L12.12%2042.91%20L11.91%2041.66%20L11.78%2037.70%20L11.41%2032.35%20L11.98%2030.30%20L12.42%2029.64%20L13.10%2028.95%20L13.89%2028.39%20L15.52%2027.81%20L21.82%2027.59%20L26.66%2027.22%20L27.62%2027.32%20L28.79%2027.89%20L29.86%2029.12%20L30.04%2030.22%20L29.86%2031.62%20L28.94%2032.76%20L28.00%2033.30%20L27.54%2033.43%20L22.26%2033.73%20L21.50%2034.11%20L21.24%2034.36%20L20.95%2035.28%20L21.25%2036.31%20L22.12%2036.85%20L23.14%2036.88%20L28.06%2036.49%20L29.69%2035.87%20L40.74%2027.74%20L41.77%2027.07%20L42.80%2026.60%20L43.31%2026.48ZM9.77%2026.56%20L10.44%2026.63%20L10.60%2027.00%20L10.45%2027.29%20L9.62%2028.17%20L8.92%2029.34%20L8.39%2030.96%20L8.27%2032.20%20L8.43%2037.04%20L8.82%2043.13%20L9.02%2044.16%20L9.58%2045.47%20L10.72%2047.02%20L11.53%2047.75%20L11.59%2047.97%20L11.26%2048.17%20L7.08%2048.36%20L5.53%2048.04%20L4.37%2047.41%20L3.75%2046.80%20L3.20%2045.87%20L2.80%2044.67%20L2.52%2041.81%20L2.41%2038.00%20L2.02%2033.23%20L1.95%2030.96%20L2.46%2029.34%20L2.98%2028.54%20L3.71%2027.79%20L4.66%2027.19%20L6.50%2026.74%20L9.77%2026.56Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2049%2049'%3E%3Cpath%20fill='%23000'%20fill-rule='evenodd'%20d='M23.10%201.11%20L24.68%201.10%20L26.30%201.35%20L27.84%201.92%20L29.92%203.16%20L31.06%204.28%20L32.18%205.58%20L32.82%206.80%20L33.48%208.46%20L33.84%2011.08%20L33.33%2014.38%20L32.23%2016.58%20L30.99%2018.19%20L30.34%2018.78%20L28.76%2019.88%20L27.70%2020.47%20L25.78%2021.03%20L24.76%2021.20%20L22.70%2021.22%20L21.46%2021.06%20L19.70%2020.52%20L17.50%2019.29%20L15.52%2017.28%20L14.86%2016.36%20L14.26%2015.26%20L13.70%2013.80%20L13.49%2012.18%20L13.48%2010.35%20L13.70%208.52%20L14.27%206.99%20L14.78%206.02%20L16.03%204.34%20L16.69%203.67%20L18.08%202.59%20L19.37%201.92%20L21.24%201.28%20L23.10%201.11ZM36.23%206.54%20L36.56%206.51%20L36.93%206.65%20L37.35%207.05%20L37.96%207.40%20L39.15%208.52%20L40.40%2010.13%20L41.04%2011.30%20L41.65%2013.21%20L41.84%2015.63%20L41.58%2017.83%20L40.96%2019.53%20L40.34%2020.69%20L39.20%2022.20%20L38.62%2022.80%20L37.08%2023.99%20L35.76%2024.66%20L33.78%2025.27%20L31.06%2025.42%20L29.24%2025.24%20L28.42%2024.87%20L27.40%2024.63%20L27.00%2024.21%20L26.96%2023.99%20L27.06%2023.84%20L28.42%2023.45%20L29.01%2023.07%20L29.74%2022.86%20L30.26%2022.46%20L30.84%2022.23%20L33.12%2020.39%20L34.55%2018.64%20L35.75%2016.58%20L35.98%2015.63%20L36.39%2014.75%20L36.88%2012.33%20L36.85%209.91%20L36.41%207.64%20L36.08%206.90%20L36.23%206.54ZM43.31%2026.48%20L44.26%2026.42%20L45.66%2026.62%20L46.65%2027.22%20L47.42%2027.88%20L48.10%2028.90%20L48.41%2030.52%20L48.41%2030.96%20L48.08%2032.40%20L47.42%2033.37%20L45.07%2035.70%20L38.32%2041.88%20L35.68%2044.46%20L34.73%2045.04%20L33.19%2045.50%20L30.26%2045.73%20L23.73%2045.95%20L19.11%2046.32%20L16.25%2046.38%20L15.34%2046.21%20L14.16%2045.70%20L13.26%2044.96%20L12.58%2044.08%20L12.12%2042.91%20L11.91%2041.66%20L11.78%2037.70%20L11.41%2032.35%20L11.98%2030.30%20L12.42%2029.64%20L13.10%2028.95%20L13.89%2028.39%20L15.52%2027.81%20L21.82%2027.59%20L26.66%2027.22%20L27.62%2027.32%20L28.79%2027.89%20L29.86%2029.12%20L30.04%2030.22%20L29.86%2031.62%20L28.94%2032.76%20L28.00%2033.30%20L27.54%2033.43%20L22.26%2033.73%20L21.50%2034.11%20L21.24%2034.36%20L20.95%2035.28%20L21.25%2036.31%20L22.12%2036.85%20L23.14%2036.88%20L28.06%2036.49%20L29.69%2035.87%20L40.74%2027.74%20L41.77%2027.07%20L42.80%2026.60%20L43.31%2026.48ZM9.77%2026.56%20L10.44%2026.63%20L10.60%2027.00%20L10.45%2027.29%20L9.62%2028.17%20L8.92%2029.34%20L8.39%2030.96%20L8.27%2032.20%20L8.43%2037.04%20L8.82%2043.13%20L9.02%2044.16%20L9.58%2045.47%20L10.72%2047.02%20L11.53%2047.75%20L11.59%2047.97%20L11.26%2048.17%20L7.08%2048.36%20L5.53%2048.04%20L4.37%2047.41%20L3.75%2046.80%20L3.20%2045.87%20L2.80%2044.67%20L2.52%2041.81%20L2.41%2038.00%20L2.02%2033.23%20L1.95%2030.96%20L2.46%2029.34%20L2.98%2028.54%20L3.71%2027.79%20L4.66%2027.19%20L6.50%2026.74%20L9.77%2026.56Z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
@media (max-width: 1023px) {
.lve-e5 .lve-e5-icon::after { width: 40px; height: 40px; }
}
@media (max-width: 767px) {
.lve-e5 .lve-e5-icon::after { width: 36px; height: 36px; }
}
/* == e6-earned-steps == */
/* e6-earned-steps: "Elite Is Earned More Than Once" der Lvlup Elite Seite. Praefix .lve-e6- */
.lve-e6 {
position: relative;
overflow: clip;
padding: 30px 0 85px;
}
/* Hintergrund: warme Bernstein-Glows an beiden Seiten und unten mittig. Alle
laufen grossflaechig transparent aus, damit keine harten Kanten zu den
Nachbarsektionen entstehen (Kundenfeedback). Runde 3: Seitenglows kraeftiger,
das Soll zeigt v.a. links eine helle Bernstein-Flanke. */
.lve-e6-bg {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 40% 60% at -6% 58%, rgba(255, 196, 96, 0.6) 0%, rgba(255, 146, 0, 0.26) 45%, rgba(255, 146, 0, 0) 75%),
radial-gradient(ellipse 40% 60% at 106% 58%, rgba(255, 196, 96, 0.55) 0%, rgba(255, 146, 0, 0.24) 45%, rgba(255, 146, 0, 0) 75%),
radial-gradient(ellipse 26% 42% at -2% 56%, rgba(255, 226, 175, 0.45) 0%, rgba(255, 188, 84, 0) 70%),
radial-gradient(ellipse 26% 42% at 102% 56%, rgba(255, 188, 84, 0.36) 0%, rgba(255, 188, 84, 0) 70%),
radial-gradient(ellipse 60% 42% at 50% 118%, rgba(255, 146, 0, 0.4) 0%, rgba(255, 146, 0, 0.14) 48%, rgba(255, 146, 0, 0) 76%);
}
.lve-e6-inner {
position: relative;
z-index: 1;
}
/* Kopfbereich */
.lve-e6-head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 33px;
margin-bottom: 60px;
}
.lve-e6-title {
font-size: clamp(36px, 4.6vw, 65px);
font-weight: 500;
line-height: 0.93;
letter-spacing: -1.3px;
background: linear-gradient(141deg, rgba(255, 255, 255, 0.7) 0%, #ffffff 50%, rgba(255, 255, 255, 0.7) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lve-e6-title-gold {
background: linear-gradient(180deg, #ffbc54 0%, #ff9200 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Kunden-QA "the title thing": "More Than Once" war live fett (w700) gegen
"Elite Is Earned" regulaer (w500); im Entwurf haben beide denselben
Schnitt. Ursache server-stand-20260810/lvlup-fixes/r3-elite.css Zeile 355
(0-2-0, laedt nach dieser Datei), 0-3-0 schlaegt sie unabhaengig von der
Ladereihenfolge (gleiche Technik wie beim e1-Kicker).
Nebenbefund zum gemeldeten "kollabierten" Wortabstand: live wie lokal
liegen die Wortluecken bei konstant 8,4 / 8,5 px (Range-API gemessen,
1760 px) - kein echter Ueberlapp. Der Eindruck des Kollabierens kommt von
der fetten Type, die optisch mehr vom Zwischenraum "auffrisst" als die
regulaere; mit w500 verschwindet er. */
.lvf-page .lve-e6 .lve-e6-title-gold { font-weight: 500; }
/* Untertitel: breit genug, damit er auf Desktop in einer Zeile steht (Soll) */
.lve-e6-sub {
max-width: 920px;
font-size: clamp(16px, 1.3vw, 18px);
font-weight: 425;
line-height: 24px;
letter-spacing: 0.54px;
color: rgba(255, 255, 255, 0.85);
}
/* Schritt-Reihe: 5 Karten, goldene Haarlinie auf Hoehe der Punkte */
.lve-e6-steps {
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 29px;
}
/* Breite/Lage 13.08.2026 korrigiert: die Linie lief -4%/+4%, also ueber die
Kartenreihe HINAUS (bei 1760 px 260..1500 Reihe, Linie 210..1550, ragte
50 px je Seite raus). Figma-Divider box(372,5179,1020,0) beginnt/endet an
den Punktmitten (Ellipse 1 x=368+4,5=372,5; Ellipse 2 x=1382+4,5=1387).
Gemessen deckt sich das mit der Mitte von Karte 1 bzw. Karte 5: bei 5
gleich breiten Spalten liegt die erste Kartenmitte bei card-width/2, in
Prozent der Reihenbreite (card-width - 4*29)/(10*Reihenbreite), bei 1760
9,06 %, bei 1024 8,82 % - praktisch konstant. */
.lve-e6-line {
position: absolute;
top: 115px;
left: 9%;
right: 9%;
height: 1px;
background: linear-gradient(90deg, rgba(255, 188, 84, 0) 0%, rgba(255, 188, 84, 0.55) 18%, rgba(255, 146, 0, 0.55) 82%, rgba(255, 146, 0, 0) 100%);
pointer-events: none;
}
/* Karte */
.lve-e6-card {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
min-height: 241px;
padding: 38px 14px 22px;
border-radius: 20px;
border: 0.5px solid var(--lvf-line);
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(56px);
-webkit-backdrop-filter: blur(56px);
text-align: center;
}
.lve-e6-card--alt {
background:
linear-gradient(327deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%),
linear-gradient(306deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%),
rgba(255, 146, 0, 0.05);
}
/* Riesige Hintergrund-Ziffer, nach unten transparent auslaufend */
.lve-e6-card-bgnum {
position: absolute;
top: -58px;
left: 50%;
transform: translateX(-50%);
font-size: 186px;
font-weight: 500;
line-height: 1.23;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
pointer-events: none;
user-select: none;
}
/* Vordergrund-Ziffer: gold wie im Soll (gemessen 56/42/22 statt neutral-weiss),
Schatten deutlich reduziert, damit der Goldton nicht verschluckt wird */
.lve-e6-card-num {
position: relative;
font-size: 41px;
font-weight: 500;
line-height: 50px;
background: linear-gradient(180deg, #ffbc54 0%, #ff9200 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: none;
filter: drop-shadow(2px 3px 5px rgba(0, 0, 0, 0.55));
}
/* Goldener Punkt auf der Haarlinie */
.lve-e6-card-dot {
position: relative;
flex: none;
width: 9px;
height: 9px;
margin-top: 23px;
border-radius: 50%;
background: linear-gradient(180deg, #ffbc54 0%, #ff9200 100%);
box-shadow: 0 0 10px rgba(255, 146, 0, 0.55);
}
.lve-e6-card-title {
margin-top: 27px;
font-size: 16px;
font-weight: 500;
line-height: 20px;
color: #ffbc54;
}
.lve-e6-card-text {
margin-top: 18px;
font-size: 12px;
font-weight: 300;
line-height: 15px;
letter-spacing: 0.48px;
color: rgba(255, 255, 255, 0.7);
}
/* ===========================================================
Desktop >= 1024: Nachmessung 10.08.2026 (referenz-neu/grenzen-elite.json),
Fix vom 11.08.2026 (referenz-neu/reparatur-elite-und-footer.md), damals auf
478 px nachgemessen (dort mit lokal-messen.js bestaetigt: 478/479 wg.
Rundung, siehe referenz-neu/reparatur-verlaeufe-eval-elite.md Zeile 389).
Ueberschrift Soll +7 ab Sektionskante
Schrittkarten oben Soll +183
Schrittkarten hoch Soll 241 stimmt unveraendert
Karten bis Ende Soll 54 stimmt unveraendert
Nachtrag 13.08.2026: die spaetere Zeilenhoehen-Korrektur der Ueberschrift
(weiter unten, "Zeilenhoehe der Ueberschrift") verkleinert die Titelbox von
60,5 auf 44 px, ohne dass hier nachgezogen wurde. Damit fiel die Sektion
von den erreichten 478 auf 462 px zurueck (Kontrollmessung: node-Skript im
Scratchpad, lokale Vorschau inkl. body.lvf-gold + gold-footer.css, 1760 px:
section.lve-e6 h=462, vorher 478). Die beiden Werte unten sind deshalb an
die neue, kompakte Titelbox angepasst (7 statt 0 oben, 75 statt 66
Abstand), damit dieselben drei Anker wieder auf 478 treffen:
7 (oben) + 101 (Kopf, neu 44+33+24) + 75 (Abstand) + 241 (Karten)
+ 54 (unten) = 478.
Die oberen 7 px stehen bewusst als padding-top auf .lve-e6-inner, NICHT
als padding-top auf .lve-e6 selbst und NICHT als margin-top auf
.lve-e6-head: .lve-e6-bg und .lve-e6::before sind position:absolute mit
inset:0, ihr Containing Block ist die PADDING-Box von .lve-e6. Ein
padding-top dort haette die auf den Millipixel kalibrierten Nahtverlaeufe
("Naht e5/e6 bei y 4883", weiter unten) um 7 px mitverschoben und die dort
belegte Anschlusskante wieder auseinandergerissen.
margin-top auf .lve-e6-head war der erste Versuch und maass sich als
wirkungslos: das Margin kollabiert durch .lve-e6-inner (keine eigene BFC)
bis zur naechsten Kante mit Border/Padding und verschwindet dort spurlos,
nachgemessen per getComputedStyle (margin-top blieb 7px im CSS, aber
.lve-e6-inner und .lve-e6-head landeten exakt auf .lve-e6-Sektionshoehe
ohne jeden Versatz). padding-top auf .lve-e6-inner kollabiert nie (Padding
kollabiert grundsaetzlich nicht) und .lve-e6-inner ist fuer nichts
anderes im Fragment ein Containing Block fuer position:absolute, also
ohne Nebenwirkung. */
@media (min-width: 1024px) {
/* Spezifitaet (0,2,1), weil r3-elite.css spaeter "section.lve-e6
{ padding: 0 0 46px }" (0,1,1) setzt. */
section.lve-e6.lve-e6 { padding: 0 0 54px; }
.lve-e6-inner { padding-top: 7px; }
.lve-e6-head { margin-bottom: 75px; }
}
/* Tablet: 3 Spalten */
@media (max-width: 1023px) {
.lve-e6 { padding: 40px 0 90px; }
.lve-e6-head { margin-bottom: 52px; }
.lve-e6-steps { grid-template-columns: repeat(3, 1fr); }
.lve-e6-line { display: none; }
}
/* Mobile: kein Design vorhanden, sauber gestapelt abgeleitet */
@media (max-width: 767px) {
.lve-e6 { padding: 52px 0 72px; }
.lve-e6-head { gap: 18px; margin-bottom: 40px; }
.lve-e6-title { letter-spacing: -0.02em; }
.lve-e6-sub { line-height: 1.45; letter-spacing: 0.3px; }
.lve-e6-steps { grid-template-columns: 1fr; gap: 16px; }
.lve-e6-card { min-height: 0; padding: 34px 20px 26px; }
.lve-e6-card-bgnum { font-size: 150px; top: -46px; }
.lve-e6-card-title { font-size: 18px; }
.lve-e6-card-text {
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.2px;
max-width: 320px;
}
}
/* Abnahme 06.08.: das grosse warme Randlicht des Designs fehlte fast komplett
(Design-Rand 251/225/186 vs Build 82/59/28). Kraeftige Seitenfluegel. */
.lve-e6::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(26% 70% at 0% 45%, rgba(252, 226, 187, 0.9) 0%, rgba(240, 180, 90, 0.45) 45%, rgba(230, 150, 40, 0) 78%),
radial-gradient(26% 70% at 100% 45%, rgba(252, 226, 187, 0.9) 0%, rgba(240, 180, 90, 0.45) 45%, rgba(230, 150, 40, 0) 78%);
}
/* Abnahme (Runde 2): Akzente waren vertauscht - Ziffern weiss, Titel gold,
Schluesselbegriffe im Kurztext gold. */
.lve-e6 .lve-e6-card-num {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, #ffffff 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lve-e6 h3.lve-e6-card-title {
background: linear-gradient(180deg, #ffbc54 0%, #ff9200 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.lve-e6-hl {
background: linear-gradient(180deg, #ffbc54 0%, #ff9200 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ============================================================
Sektionsschein, 11.08.2026, Runde "Effekte 1 zu 1".
Gemessen an referenz-neu/soll/elite-aus-vollbild.png; e6 liegt dort
30 px tiefer als im Build (Anker: Oberkante der e7-Tafel).
Nur ab 1024 px, die Mobilwerte aus r3-elite.css bleiben gueltig.
Zwei Befunde an einer Regel:
1. Der Goldschein links stirbt zu frueh ab. Auf Hoehe der Schrittkarten
(y 5000 im Build, 5030 im Soll):
x 400 vorher 8, 5, 2 Soll 36,23, 6 nachher 32,18, 3
x 600 vorher 8, 5, 2 Soll 11, 6, 1 nachher 8, 5, 2
Er endete also bei x etwa 400, der Entwurf traegt bis ueber x 600.
2. Unter den Karten liegt live ein breiter Bodenschein, den der Entwurf
nicht hat. Er kommt aus r3-elite.css Regel R3-elite-25, dritte Ebene
(`ellipse 60% 42% at 50% 96%`). Bei y 5300 (Soll 5330):
x 600 vorher 52,30, 2 Soll 3, 2, 0 nachher 8, 5, 2
x 900 vorher 72,42, 1 Soll 0, 0, 0 nachher 8, 5, 2
x 1200 vorher 49,28, 2 Soll 0, 0, 0 nachher 8, 5, 2
Die verbleibenden 8,5,2 sind der Seitengrund #080502, den r3-elite.css
auf body setzt; der Entwurf hat dort 0.
Drei Ebenen, numerisch an 690 Messpunkten angepasst: helle Saeule links,
ein flacher Deckschleier, schmale Flanke rechts.
Mittlere Abweichung ueber 148 Kontrollpunkte: vorher 11,1 - nachher 7,0.
(Der Rest steckt in der Ueberschriftszeile, dort misst man Text.)
Selektor 0-3-0, weil r3-elite.css `.lve-e6 .lve-e6-bg` (0-2-0) setzt und
spaeter laedt. `.lve-e6::before` faellt weg: die beiden Seitenfluegel von
oben sind im neuen Verlauf enthalten und waren doppelt gemalt zu hell.
============================================================ */
@media (min-width: 1024px) {
.lvf-page .lve-e6::before { background: none; }
.lvf-page .lve-e6 .lve-e6-bg {
background:
radial-gradient(36.8% 334.5% at -5.4% -43.1%, rgba(255, 255, 255, 1) 0%, rgba(255, 190, 77, 0.901) 35%, rgba(63, 35, 5, 0.661) 70%, rgba(55, 11, 0, 0) 100%),
radial-gradient(98.2% 221.8% at 40.8% -200%, rgba(252, 236, 189, 0.825) 0%, rgba(254, 229, 208, 0.005) 35%, rgba(255, 215, 150, 1) 70%, rgba(0, 0, 0, 0.02) 100%),
radial-gradient(16.3% 356.5% at 104.2% 127.9%, rgba(255, 159, 23, 1) 0%, rgba(244, 141, 1, 0.303) 35%, rgba(47, 27, 0, 0.354) 70%, rgba(184, 68, 21, 0) 100%);
}
}
/* ============================================================
Riesige Hintergrundziffer, 11.08.2026: doppelt so kraeftig wie im Entwurf.
Gemessen auf einer breiten Strichflaeche der "03" in Karte 3
(Build y 5060, Soll y 5090), Ziffer gegen die Kartenflaeche daneben:
Kartenflaeche Ziffer daraus Deckkraft an dieser Stelle
Build 7, 5, 2 15,13,10 0,032
Soll 1, 1, 1 5, 5, 5 0,016
Die Stelle liegt bei 37,5 Prozent der Elementhoehe, der Verlauf hat dort
noch 62,5 Prozent seines Startwerts: 0,05 mal 0,625 = 0,031, passt.
Der Entwurf braucht also 0,025 am Kopf. Danach steht die Ziffer 4 Stufen
ueber der Karte, genau wie im Entwurf.
Kein Textfarbenfall im Sinne der widerlegten Befunde: gemessen ist nicht
eine Kante, sondern das Plateau eines 20 px breiten Strichs.
============================================================ */
@media (min-width: 1024px) {
.lve-e6 .lve-e6-card-bgnum {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0) 100%);
-webkit-background-clip: text;
background-clip: text;
}
}
/* Zeilenhoehe der Ueberschrift, 11.08.2026: im Entwurf 44 px
(Figma-TEXT y 4888..4932), live 60,5 = 65 px Grad mal 0,93. Der Abstand
zur Unterzeile stimmt bereits. 44 / 65 = 0,677. Gleiche Korrektur wie in
e3 und auf evaluation e3, dieselbe Ueberschriftengroesse im ganzen Entwurf.
Nur ab 1024 px, darunter faellt der Grad per clamp kleiner aus und die
Zeile bricht um. */
@media (min-width: 1024px) {
.lve-e6 .lve-e6-title { line-height: 0.677; }
}
/* ===========================================================================
Naht zu e7 bei y 5345, 11.08.2026 (Nahtkanten-Abnahme)
In r3-elite.css liegt auf .lve-e6-bg ein dritter, undokumentierter Verlauf:
eine Bernsteinblase am unteren Sektionsrand, die der Entwurf nicht hat. An
der Naht sprang die Farbe dadurch in der Seitenmitte von (69,40,2) auf
(8,5,2), Distanz 70. Das Mockup ist dort auf beiden Seiten schwarz, also
Sprung 0.
Hier stehen nur die beiden Kantensaeulen, die laut Reparaturdoku korrekt
kalibriert sind. Die Bodenblase entfaellt ersatzlos.
=========================================================================== */
@media (min-width: 1024px) {
.lvf-page .lve-e6 .lve-e6-bg {
background:
/* Nachtrag 11.08.2026 nachts: nach dem Entfernen der Bodenblase steht
an derselben Naht noch die linke ECKE offen. Median x 0..88, 8 px
ueber der Naht: Ist (165,109,34), Soll (183,128,45), waehrend e7
darunter mit (182,128,42) genau richtig anfaengt - Sprung 14,7 bei
einem Soll-Sprung von 1,0. Der Fehlbetrag reicht rund 150 px hoch
(bei y 5300 noch -12, bei 5250 -4, bei 5190 -2), deshalb eine kleine
Ecklage. Farbe (255,205,110): bei der noetigen Deckkraft von 0,20
ergibt das (183,128,49) gegen Soll (183,128,45), waehrend das
weissere (255,215,150) 12 Blaustufen zu viel braechte. Schmal
gehalten, damit x 88..176 (dort stimmt es auf 2 Stufen) frei bleibt. */
radial-gradient(ellipse 120px 170px at 0% 100%,
rgba(255, 205, 110, 0.26) 0%,
rgba(255, 205, 110, 0.21) 30%,
rgba(255, 205, 110, 0.14) 58%,
rgba(255, 205, 110, 0.06) 80%,
rgba(255, 205, 110, 0) 100%),
radial-gradient(ellipse 40% 420% at -8% -140%, rgba(255,255,252,1) 0%, rgba(255,222,160,1) 42%, rgba(255,206,124,.96) 45%, rgba(254,192,96,.92) 48%, rgba(253,180,74,.87) 52%, rgba(252,172,60,.81) 56%, rgba(251,166,52,.76) 59%, rgba(255,146,0,0) 86%),
radial-gradient(ellipse 30% 420% at 106% 240%, rgba(254,176,58,.62) 0%, rgba(255,150,8,.22) 48%, rgba(255,146,0,0) 82%);
}
/* Die beiden schmalen Restbänder an der Oberkante stammen aus der
e6-Flanke selbst. Der dunkle Schleier läuft innerhalb von e6 aus und
erzeugt weder in e5 noch weiter unten einen zusätzlichen Schein. */
.lvf-page section.lve-e6::after {
content: "";
position: absolute;
inset: 0 0 auto;
height: 120px;
z-index: 0;
pointer-events: none;
background: linear-gradient(90deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.05) 5%,
rgba(0, 0, 0, 0) 16%,
rgba(0, 0, 0, 0.36) 20%,
rgba(0, 0, 0, 0.34) 25%,
rgba(0, 0, 0, 0.13) 30%,
rgba(0, 0, 0, 0) 36%,
rgba(0, 0, 0, 0) 88%,
rgba(0, 0, 0, 0.53) 92.5%,
rgba(0, 0, 0, 0) 100%);
-webkit-mask-image: linear-gradient(180deg, #000 0, transparent 100%);
mask-image: linear-gradient(180deg, #000 0, transparent 100%);
}
}
/* Fuenf Spalten sind auf einem 1024er Tablet zu schmal. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
section.lve-e6.lve-e6 { padding: 40px 0 90px; }
.lve-e6-inner { padding-top: 0; }
.lve-e6-head { margin-bottom: 52px; }
.lve-e6-steps { grid-template-columns: repeat(3, 1fr); }
.lve-e6-line { display: none; }
}
/* ===========================================================================
Naht e5/e6 bei y 4883, 12.08.2026
BEFUND (live 1760, Blockmedian ueber 8 px, Inhaltsbloecke 5 und 11
ausgenommen): Sprung IST 10,15 gegen Sprung SOLL 2,10. Der Sprung sitzt
vollstaendig im linken Goldfeld, Bloecke 0 bis 8.
IST/SOLL am Querschnitt, 8 px unter der Naht (also e6-Oberkante):
x e5 unten e6 oben SOLL
0 244,207,144 255,223,164 250,214,156
96 218,176, 99 230,171, 82 230,184, 97
192 191,141, 51 185,122, 38 185,134, 51
320 94, 68, 27 74, 49, 15 94, 62, 21
384 36, 24, 12 15, 10, 3 61, 41, 12
448 27, 18, 9 0, 0, 0 42, 28, 7
640 13, 8, 4 0, 0, 0 14, 9, 1
768 4, 1, 1 0, 0, 0 5, 4, 0
Zwei Ursachen, beide in dieser Ebene:
1. Das Feld endet bei x 417. Der Entwurf traegt bis x rund 900. Grund ist
der waagerechte Radius von 40 Prozent: bei einem Mittelpunkt auf
-8 Prozent liegt die Nullstelle rechnerisch bei x 417, und genau dort
misst man den Abbruch. Von x 448 an steht unter der Naht Schwarz,
darueber traegt e5 seinen Schleier weiter - das ergibt die Bloecke 6
bis 8 mit 12,7 / 8,3 / 3,3.
2. Die Stopps sind zu gesaettigt. Bei x 96 bis 224 fehlen 12 bis 17 Gruen-
und Blaustufen, an der Kante ist Rot dagegen 5 Stufen zu hell.
AENDERUNG: dieselbe Ellipsenfamilie, aber Radien und Mittelpunkt um den
Faktor 1,75 vergroessert (40/420 % -> 70/735 %, -8/-140 % -> -14/-245 %).
Der Faktor haelt den Wert am Ellipsenmittelpunkt-Abstand der Naht exakt
gleich (dy bleibt 0,3333, dx bleibt 0,2), verschiebt aber die Nullstelle
von x 417 auf x 915. Die Stopps sind neu gerechnet: je Stuetzstelle
Deckkraft = Soll-Rot / 255, Farbe = Soll normiert auf Rot 255. Damit
trifft die Ebene den Soll-Querschnitt an 15 Stuetzstellen; die
Zwischenwerte wurden nachgerechnet (groesste Abweichung 2,6 Stufen bei
x 352).
Zur Lage der Stuetzstellen: die Soll-Werte sind Mediane ueber ein 32 px
breites Fenster und gehoeren damit zur Fenstermitte x+16. Der erste
Durchlauf hatte sie auf x gesetzt; gemessen kam e6 dadurch in den
Bloecken 2 und 3 rund 9 Stufen zu dunkel heraus (Sprung 14,2 und 14,3).
Die Prozentwerte stehen deshalb auf dem Ellipsenabstand von x+16.
PREIS, gemessen und bewusst in Kauf genommen: der groessere senkrechte
Radius macht das Laengsprofil flacher. Am unteren Ende der Sektion
(y 5283, x 0..24) rechnet sich 194 statt 199 gegen Soll 210, also 5 Stufen
schlechter auf 24 px Breite. Dafuer stimmen 550 px Breite mal 462 px Hoehe
im Feld daneben, wo vorher Schwarz stand.
NICHT angefasst: die Ecklage aus der Nacht zum 12.08. (erste Ebene, Naht
zu e7) und die rechte Flanke. Die rechte Flanke ist zwar 15 Stufen zu
dunkel (x 1760 nach innen: 34 gegen Soll 59), springt an der Naht aber
nur um 1,0, weil e5 darueber denselben Fehlbetrag hat. Das ist ein
Flaechenbefund, kein Nahtbefund.
Selektor 0-3-0 wie die Regel darueber, gleiche Datei, spaeter - gewinnt
damit gegen r3-elite.css `.lve-e6 .lve-e6-bg` (0-2-0).
=========================================================================== */
@media (min-width: 1024px) {
.lvf-page .lve-e6 .lve-e6-bg {
background:
/* Ecklage zur Naht e6/e7, unveraendert uebernommen */
radial-gradient(ellipse 120px 170px at 0% 100%,
rgba(255, 205, 110, 0.26) 0%,
rgba(255, 205, 110, 0.21) 30%,
rgba(255, 205, 110, 0.14) 58%,
rgba(255, 205, 110, 0.06) 80%,
rgba(255, 205, 110, 0) 100%),
/* Linkes Goldfeld, neu gerechnet. Prozentwerte = Ellipsenabstand der
jeweiligen Stuetzstelle x auf der Nahtzeile. */
radial-gradient(ellipse 70% 735% at -14% -245%,
rgba(255, 218, 159, 0.980) 39.55%, /* x 16 Soll 250,214,156 */
rgba(255, 209, 124, 0.937) 42.58%, /* x 80 Soll 239,196,116 */
rgba(255, 198, 90, 0.863) 45.99%, /* x 144 Soll 220,171, 78 */
rgba(255, 185, 70, 0.725) 49.71%, /* x 208 Soll 185,134, 51 */
rgba(255, 173, 62, 0.549) 53.68%, /* x 272 Soll 140, 95, 34 */
rgba(255, 168, 57, 0.369) 57.84%, /* x 336 Soll 94, 62, 21 */
rgba(255, 171, 50, 0.239) 62.16%, /* x 400 Soll 61, 41, 12 */
rgba(255, 170, 42, 0.165) 66.60%, /* x 464 Soll 42, 28, 7 */
rgba(255, 158, 26, 0.114) 71.15%, /* x 528 Soll 29, 18, 3 */
rgba(255, 153, 26, 0.078) 75.78%, /* x 592 Soll 20, 12, 2 */
rgba(255, 164, 18, 0.055) 80.47%, /* x 656 Soll 14, 9, 1 */
rgba(255, 153, 26, 0.039) 85.23%, /* x 720 Soll 10, 6, 1 */
rgba(255, 204, 0, 0.020) 90.03%, /* x 784 Soll 5, 4, 0 */
rgba(255, 170, 0, 0.012) 94.88%, /* x 848 Soll 3, 2, 0 */
rgba(255, 170, 0, 0.004) 99.76%, /* x 912 Soll 1, 1, 0 */
rgba(255, 170, 0, 0) 100%),
/* rechte Flanke, unveraendert uebernommen */
radial-gradient(ellipse 30% 420% at 106% 240%, rgba(254,176,58,.62) 0%, rgba(255,150,8,.22) 48%, rgba(255,146,0,0) 82%);
}
}
/* == e7-points-cta == */
/* e7-points-cta: "Reach 10,000 Points. Enter a Different World." der Lvlup Elite
Seite. Goldene CTA-Tafel mit Statistik-Zeile und zwei Buttons. Praefix .lve-e7- */
.lve-e7 {
position: relative;
overflow: clip;
/* Nachmessung 10.08.2026 (referenz-neu/grenzen-elite.json): Soll-Sektions-
hoehe 655 px (Band 5359..6014), gemessen 690, also 35 px zu hoch. Die
Aussenkanten der CTA-Tafel liegen im Entwurf bei 5416 und 5983, daraus:
ueber der Tafel Soll 57 Ist 50 7 zu wenig
Tafel selbst Soll 567 Ist 555 12 zu wenig (siehe Rahmen unten)
unter der Tafel Soll 31 Ist 85 54 zu viel
Der alte Wert -396 aus der automatischen Grenzsuche ist widerlegt.
Tablet/Mobil behalten ihre eigenen Werte in den max-width-Bloecken. */
padding: 57px 0 31px;
}
/* Sektions-Glow: breite Bernsteinfacher links/rechts und unter der Tafel. Alle
laufen grossflaechig transparent aus, keine harten Kanten zu den Nachbarn.
Runde 3: kraeftiger, damit der grosse goldene Ambient-Schein des Solls auch
um die CTA-Tafel herum traegt. */
.lve-e7-bg {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 44% 72% at 5% 55%, rgba(255, 170, 50, 0.45) 0%, rgba(255, 146, 0, 0.16) 45%, rgba(255, 146, 0, 0) 75%),
radial-gradient(ellipse 44% 72% at 95% 55%, rgba(255, 170, 50, 0.45) 0%, rgba(255, 146, 0, 0.16) 45%, rgba(255, 146, 0, 0) 75%),
radial-gradient(ellipse 26% 45% at 9% 45%, rgba(255, 200, 110, 0.34) 0%, rgba(255, 188, 84, 0) 70%),
radial-gradient(ellipse 26% 45% at 91% 45%, rgba(255, 200, 110, 0.34) 0%, rgba(255, 188, 84, 0) 70%),
radial-gradient(ellipse 68% 58% at 50% 112%, rgba(255, 146, 0, 0.36) 0%, rgba(255, 146, 0, 0.12) 50%, rgba(255, 146, 0, 0) 78%);
}
.lve-e7-inner {
position: relative;
z-index: 1;
}
/* Aeusserer Rahmen: 10px vertikaler Weiss-Gradient (im Figma als OUTSIDE-Border) */
.lve-e7-frame {
max-width: 1259px;
margin-inline: auto;
padding: 10px;
border-radius: 55px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.05) 100%);
box-shadow: 6px 23px 23px rgba(0, 0, 0, 0.25);
}
/* Tafel: heller Gold-Verlauf (Soll-Messwerte: oben links 97/58/7, oben rechts
245/170/59, unten 174/115/21). Helle Spitze rechts oben, dunklerer Goldton
links, nach unten waermer abgedunkelt. */
.lve-e7-panel {
position: relative;
overflow: hidden;
border-radius: 45px;
background:
radial-gradient(ellipse 70% 100% at 100% 0%, rgba(255, 196, 96, 0.85) 0%, rgba(255, 196, 96, 0) 62%),
radial-gradient(ellipse 85% 90% at 50% 125%, rgba(120, 76, 10, 0.5) 0%, rgba(120, 76, 10, 0) 70%),
linear-gradient(150deg, #613a07 0%, #9a6a16 55%, #c98f2e 100%);
box-shadow: 7px 29px 29px rgba(0, 0, 0, 0.25);
}
/* Deko-Pfeile links/rechts, laufen nach unten transparent aus und werden am
Tafelrand beschnitten (im Figma ein Compound-Vektor, hier angenaehert) */
.lve-e7-arrows {
position: absolute;
bottom: -70px;
width: 404px;
height: 407px;
pointer-events: none;
filter: drop-shadow(0 21px 62px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 42px rgba(255, 146, 0, 0.35));
}
.lve-e7-arrows--left { left: -90px; }
.lve-e7-arrows--right { right: -90px; }
.lve-e7-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 47px;
/* 90 statt 89: die Tafel innerhalb des Rahmens ist im Entwurf 547 px hoch
(Figma Frame 2147237362 y 5426..5973), gemessen 545. */
padding: 90px 60px;
text-align: center;
}
/* Kopfbereich */
.lve-e7-head {
display: flex;
flex-direction: column;
align-items: center;
gap: 34px;
}
.lve-e7-title {
font-size: clamp(36px, 4.4vw, 70px);
font-weight: 500;
line-height: 0.93;
letter-spacing: -1.4px;
background: linear-gradient(141deg, rgba(255, 255, 255, 0.7) 0%, #ffffff 50%, rgba(255, 255, 255, 0.7) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lve-e7-title-gold {
background: linear-gradient(180deg, #ffbc54 0%, #ff9200 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Kunden-QA "the title thing": Goldteil war live fett (w700) gegen den
weissen Teil regulaer (w500); im Entwurf gleicher Schnitt. Ursache
server-stand-20260810/lvlup-fixes/r3-elite.css Zeile 413 (0-2-0, laedt
nach dieser Datei), 0-3-0 schlaegt sie unabhaengig von der Ladereihenfolge
(gleiche Technik wie beim e1-Kicker). */
.lvf-page .lve-e7 .lve-e7-title-gold { font-weight: 500; }
/* Gleichstand mit/ohne Overrides-Ebene, 13.08.2026 (Breitenlauf-Auftrag,
zugewiesener Rest). server-stand-20260810/lvlup-fixes/r3-elite.css Zeile
409-412 (Block "R3-elite-29", derselbe Messlauf, der fuer die Rahmen-
Auflage oben bereits als widerlegt dokumentiert ist) setzt .lve-e7-content/
-head/-stat auf gap 39/24/0 und .lve-e7-stat-value auf line-height 1
(je 0-2-0, laedt nach diesem Fragment und gewann bisher bei gleicher
Spezifitaet). Die Fragment-Werte unten (47/34/9 und line-height 1,24)
treffen dagegen figma/specs-elite/e7-points-cta.txt exakt: Zeile 193
"Frame 2147237258 ... gap=47" (.lve-e7-content), Zeile 194 "Frame
2147237223 ... gap=34" (.lve-e7-head), Zeile 206 Value-Text "37px ... lh46"
(46/37 = 1,243, .lve-e7-stat-value). Gemessen bei 1760 px (lokal, Technik
wie werkzeuge/lokal-rendern.js): ohne Overrides e7-Hoehe 699,06 px, mit
Overrides 655,19 px, Differenz 43,88 px, exakt die Summe aus 2x8 px
(Content-Gap, zwei Luecken zwischen drei Kindern) + 10 px (Head-Gap) +
9 px (Stat-Gap) + 9 px (Value-Zeilenhoehe bei 37px Schrift). 0-3-0 schlaegt
die Fremdregel unabhaengig von der Ladereihenfolge. Content/Head-Gap nur
ab 768 px: die eigene Mobil-Regel weiter unten (max-width:767) traegt
bereits 36/18 und deckt sich mit r3-elite.css; eine ungebundene 0-3-0-Regel
wuerde das dort ueberschreiben. Stat-Gap und Value-Zeilenhoehe haben keine
eigene Mobil-Regel und gelten deshalb ungebunden ueber alle Breiten. */
.lvf-page .lve-e7 .lve-e7-stat { gap: 9px; }
.lvf-page .lve-e7 .lve-e7-stat-value { line-height: 1.24; }
@media (min-width: 768px) {
.lvf-page .lve-e7 .lve-e7-content { gap: 47px; }
.lvf-page .lve-e7 .lve-e7-head { gap: 34px; }
}
.lve-e7-sub {
max-width: 1080px;
font-size: clamp(16px, 1.6vw, 24px);
font-weight: 425;
line-height: 1.5;
letter-spacing: 0.72px;
color: rgba(255, 255, 255, 0.85);
}
/* Statistik-Zeile: Icon + Wert oben, Label darunter */
.lve-e7-stats {
display: flex;
justify-content: center;
align-items: flex-start;
gap: clamp(36px, 6.7vw, 96px);
flex-wrap: wrap;
}
.lve-e7-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 9px;
}
.lve-e7-stat-top {
display: flex;
align-items: center;
gap: 9px;
}
.lve-e7-stat-icon {
/* Fallback-Farbe, falls der Verlauf in fragment.html (stroke="url(#lve-e7-icon-grad)")
aus irgendeinem Grund nicht greift; im Normalfall ungenutzt, siehe Muster-B-
Korrektur 13.08.2026 dort. */
color: #ffb24b;
flex: none;
}
.lve-e7-stat-value {
font-size: clamp(28px, 2.6vw, 37px);
font-weight: 555;
line-height: 1.24;
letter-spacing: -1.12px;
background: linear-gradient(180deg, #ffe9c4 0%, #ffbc54 48%, #ff9200 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lve-e7-stat-label {
font-size: 13px;
font-weight: 500;
line-height: 16px;
letter-spacing: 0.53px;
color: rgba(255, 255, 255, 0.65);
}
/* Buttons */
.lve-e7-actions {
display: flex;
align-items: center;
gap: 8px;
filter: drop-shadow(6px 6px 18px rgba(0, 0, 0, 0.25));
}
.lve-e7-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 46px;
border-radius: 10px;
font-size: 17px;
line-height: 25px;
transition: filter 0.2s ease, transform 0.2s ease;
}
.lve-e7-btn:hover {
filter: brightness(1.08);
}
.lve-e7-btn--primary {
gap: 8px;
padding: 5px 12px 5px 5px;
font-weight: 500;
/* Verlaufsachse 11.08.2026 von 134deg auf senkrecht gestellt.
Am Mockup gemessen laeuft die Farbe im Knopf ausschliesslich von
oben nach unten: Unterschied senkrecht 23,3 gegen waagerecht 7,1.
Live war es umgekehrt, 4,8 gegen 25,0, der Knopf wurde also von
links nach rechts dunkler statt von oben nach unten. Die beiden
Stuetzfarben stimmten, nur die Achse nicht. */
background: linear-gradient(180deg, #ffbc54 0%, #ff9200 100%);
border: 0.5px solid rgba(255, 188, 84, 0.6);
box-shadow: inset 0 1px 18px rgba(255, 202, 131, 0.9);
}
/* Doppelte Klasse, damit die Farbe gegen ".lvf-page a" (0-1-1) gewinnt */
.lve-e7-btn.lve-e7-btn--primary { color: #060606; }
.lve-e7-btn-chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 6px;
background: #060606;
color: #ffffff;
flex: none;
}
.lve-e7-btn--ghost {
padding: 10px 32px;
font-weight: 400;
color: #ffffff;
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 188, 84, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow:
inset -2px -6px 19px rgba(255, 178, 75, 0.4),
inset 9px 7px 12px rgba(0, 0, 0, 0.5);
}
/* ===========================================================
Desktop >= 1024: heller Aussenrahmen wieder 10 px breit.
r3-elite.css setzt in Regel R3-elite-29 ".lve-e7 .lve-e7-frame
{ padding: 5px }" (0,2,0) und begruendet das mit "Tafel im Soll
1231 x 492 px". Diese Messung stammt aus dem versetzten Layout und ist
durch die Nachmessung vom 10.08.2026 widerlegt: die Tafel ist 547 px hoch
und traegt einen 10 px breiten Aussenrand (Figma-Kasten 5426..5973,
sichtbare Aussenkanten im Mockup 5416 und 5983). Mit 5 px war die Tafel
aussen 555 statt 567 px hoch. Spezifitaet (0,2,1), damit die spaetere
Fremdregel nicht gewinnt; sauberer waere eine Korrektur in r3-elite.css.
Tablet setzt dort ohnehin schon wieder 10 px.
=========================================================== */
@media (min-width: 1024px) {
section.lve-e7 .lve-e7-frame { padding: 10px; }
}
/* Tablet */
@media (max-width: 1023px) {
.lve-e7 { padding: 50px 0 90px; }
.lve-e7-content { padding: 64px 40px; }
}
/* Mobile: kein Design vorhanden, sauber gestapelt abgeleitet */
@media (max-width: 767px) {
.lve-e7 { padding: 44px 0 72px; }
.lve-e7-frame { padding: 6px; border-radius: 34px; }
.lve-e7-panel { border-radius: 28px; }
.lve-e7-content { padding: 52px 22px; gap: 36px; }
.lve-e7-head { gap: 18px; }
.lve-e7-title { letter-spacing: -0.02em; line-height: 1.05; }
.lve-e7-sub { letter-spacing: 0.3px; }
.lve-e7-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 26px 12px;
width: 100%;
}
.lve-e7-actions {
flex-direction: column;
align-items: stretch;
width: 100%;
gap: 12px;
}
.lve-e7-btn { width: 100%; min-height: 52px; }
.lve-e7-arrows { opacity: 0.55; }
}
/* ===========================================================================
Deko-Pfeile ausserhalb der Tafel, Tablet und Mobil, 13.08.2026
Die Pfeile .lve-e7-arrows liegen absolut ueber der Tafel und ragen ueber
deren Kante, .lve-e7-panel schneidet sie per overflow:hidden hart ab. Die
Fragment-Basiswerte hier waren feste Pixel (300/-50/-80 bzw. 190/-120/-80,
je 0-1-0), fixes-elite.css setzt seit Tagen andere Werte im Verhaeltnis zur
Tafelbreite (Kopf = 9,69 % der Tafelbreite, Rand = 3,55 %, Selektor
".lve-e7 .lve-e7-arrows", 0-2-0) und schlug die Basisregel unter der
Overrides-Ebene, ohne dass es hier je nachgezogen wurde. Fuer Mobil gibt es
kein Referenzdesign, die Live-Werte sind hier aber die einzigen mit
dokumentierter Verhaeltnisrechnung, deshalb uebernommen.
ZWEITE URSACHE, per Messung gefunden (nicht nur aus fixes-elite.css
uebernommen): das SVG im Markup traegt width="320" height="275" fest. Ohne
eine Regel, die es an die Wrapperbreite bindet, bleibt es unterhalb 1024 px
bei 320x275 stehen, auch wenn der Wrapper selbst auf calc(20,4vw...)
schrumpft - gemessen bei 390 px: Wrapper 72 px breit, SVG trotzdem
320x275 im DOM. fixes-elite.css loest das unconditional (ohne @media) mit
".lve-e7-arrows > svg { width:100%; height:auto }", hier ebenso ohne
@media-Block uebernommen: ab 1024 px gewinnt die spaeter in dieser Datei
stehende ".lve-e7 .lve-e7-panel .lve-e7-arrows > svg"-Regel (0-3-1 gegen
0-1-1) unabhaengig von der Reihenfolge und setzt dort weiterhin feste
320x275 px.
Desktop ab 1024 px ist bei Wrapper-Groesse/-Position bereits sauber (eigene
0-3-0-Regeln fuer ".lve-e7 .lve-e7-panel .lve-e7-arrows"), hier unberuehrt. */
.lve-e7-arrows > svg {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 1023px) {
.lve-e7 .lve-e7-arrows {
width: calc(20.4vw - 12px);
height: auto;
bottom: -23px;
}
.lve-e7 .lve-e7-arrows--left { left: 23px; }
.lve-e7 .lve-e7-arrows--right { right: 23px; }
}
@media (max-width: 767px) {
.lve-e7 .lve-e7-arrows {
width: calc(20.4vw - 11px);
height: auto;
bottom: -15px;
}
.lve-e7 .lve-e7-arrows--left { left: 15px; }
.lve-e7 .lve-e7-arrows--right { right: 15px; }
}
/* Abnahme 06.08.: dunkle Schrift auf Gold-Button */
a.lve-e7-btn--primary { color: #1c1200; }
/* Panel: Headline-Zone startet fast schwarz wie im Design (11,7,2) */
.lve-e7-panel {
background:
radial-gradient(ellipse 95% 75% at 35% -5%, rgba(11, 7, 2, 0.93) 0%, rgba(11, 7, 2, 0.55) 40%, rgba(11, 7, 2, 0) 65%),
radial-gradient(ellipse 70% 100% at 100% 0%, rgba(255, 196, 96, 0.85) 0%, rgba(255, 196, 96, 0) 62%),
radial-gradient(ellipse 80% 90% at 15% 110%, rgba(255, 170, 50, 0.9) 0%, rgba(230, 140, 20, 0.5) 50%, rgba(200, 120, 10, 0) 80%),
linear-gradient(180deg, #100a03 0%, #4a3008 55%, #a3670e 100%);
}
/* ============================================================
Gold-Verlauf der CTA-Tafel, Abgleich 11.08.2026, nur Desktop.
WARUM VIER KLASSEN IM SELEKTOR: der bisher wirksame Verlaufssatz steht
nicht hier, sondern in server-stand-20260810/lvlup-fixes/r3-elite.css
Zeile 388..401 (Regel R3-elite-28, Selektor `.lve-e7 .lve-e7-panel`,
Ebene 2, Prioritaet 1200). Die Datei laedt nach dem Fragment und gewinnt
bei gleicher Spezifitaet. `.lve-e7 .lve-e7-frame .lve-e7-panel` (0-3-0
gegen 0-2-0) setzt die Korrektur durch, ohne dass jemand in der
Fremd-Ebene arbeiten muss.
Befunde aus referenz-neu/pruefung/elite.md, Abschnitt 2.1, alle
nachgemessen an referenz-neu/soll/elite-aus-vollbild.png,
Tafel box(261,5426,1239,547); Ist-Tafel 1220 x 547 (der Rahmen sitzt
innen im 1240er Container, siehe Befund 4.1 - Positionsfrage, hier nicht
behandelt). Messpunkte tafel-relativ, R/G/B:
Punkt Soll vorher nachher
(14,120) 178,112,20 178,113,18 177,109,15
(14,320) 184,116,17 89, 56, 8 181,113,16
(1206,120) 247,178,60 146, 92,10 243,176,58
(1206,285) 215,137,28 22, 14, 2 210,140,29
(1206,395) 204,131,10 25, 16, 2 200,128,12
(620,285) 23, 14, 2 58, 36, 4 24, 15, 2
(840,22) 138, 83,11 22, 14, 2 107, 69,16
(420,530) 130, 93,49 12, 8, 1 118, 72, 6
(1080,530) 203,164,69 92, 58, 8 215,148,41
Die drei Kernbefunde der Pruefung sind damit erledigt:
- Der rechte Goldschein beginnt nicht mehr rund 350 px zu weit rechts:
bei x=1000 (rel. 82 %) misst der Soll 75 im R-Kanal, vorher 22, jetzt 71.
- Der Bodenschein ueber die volle Breite ist wieder da: Mitte unten
Soll 82, vorher 12, jetzt 78.
- Die Tafelmitte ist nicht mehr fast schwarz, sondern bernstein.
Mittlerer Farbabstand ueber 118 textfreie Messpunkte: vorher 33,3 Stufen,
nachher 8,9. Aufbau von oben nach unten:
1. heller Saum ueber die volle Unterkante (Soll (420,530) B-Kanal 49,
rein goldene Verlaeufe kommen dort nur auf 6)
2./3. untere Ecken - Soll (8,525) rgb(245,216,151)
4. Lichtkeule oben rechts, weit nach links reichend
5. rechte Flanke ueber die volle Hoehe - Soll (1232,395) rgb(204,131,10)
6. linke Flanke ueber die volle Hoehe - Soll (8,250) rgb(168,104,14)
7. Grundton senkrecht: Tafelmitte Soll y285 rgb(23,14,2),
y395 rgb(50,30,2), y470 rgb(54,32,3), y525 rgb(82,48,4)
============================================================ */
@media (min-width: 1024px) {
.lve-e7 .lve-e7-frame .lve-e7-panel {
background:
radial-gradient(86% 24% at 50% 106%, rgba(255, 238, 198, 0.34) 0%, rgba(255, 214, 146, 0.16) 46%, rgba(255, 190, 110, 0) 88%),
radial-gradient(56% 48% at -2% 104%, rgba(250, 222, 158, 1) 0%, rgba(250, 206, 120, 0.95) 20%, rgba(246, 176, 58, 0.74) 28%, rgba(226, 148, 22, 0.52) 40%, rgba(214, 136, 14, 0.42) 55%, rgba(200, 126, 10, 0.28) 68%, rgba(186, 116, 8, 0.12) 82%, rgba(180, 112, 6, 0) 100%),
radial-gradient(56% 48% at 102% 104%, rgba(248, 214, 140, 1) 0%, rgba(248, 200, 112, 0.93) 20%, rgba(244, 172, 54, 0.72) 28%, rgba(224, 146, 20, 0.5) 40%, rgba(212, 134, 12, 0.41) 55%, rgba(198, 124, 9, 0.27) 68%, rgba(184, 114, 7, 0.12) 82%, rgba(178, 110, 6, 0) 100%),
radial-gradient(62% 60% at 100% 13%, rgba(252, 182, 64, 0.93) 0%, rgba(252, 180, 62, 0.91) 17%, rgba(250, 176, 58, 0.86) 26%, rgba(246, 168, 50, 0.72) 36%, rgba(238, 158, 38, 0.48) 49%, rgba(232, 150, 30, 0.4) 55%, rgba(222, 142, 22, 0.23) 65%, rgba(210, 134, 14, 0.09) 81%, rgba(200, 126, 10, 0.02) 96%, rgba(196, 122, 8, 0) 100%),
linear-gradient(270deg, rgba(208, 134, 11, 1) 0%, rgba(206, 132, 11, 0.9) 3%, rgba(204, 130, 10, 0.78) 6%, rgba(200, 128, 10, 0.53) 10.4%, rgba(196, 124, 9, 0.27) 16%, rgba(190, 120, 8, 0.09) 23%, rgba(186, 116, 7, 0.02) 30%, rgba(184, 114, 6, 0) 34%),
linear-gradient(90deg, rgba(178, 110, 18, 1) 0%, rgba(176, 109, 17, 0.92) 1.6%, rgba(174, 108, 17, 0.78) 3.2%, rgba(170, 105, 15, 0.56) 5.6%, rgba(164, 101, 13, 0.33) 9%, rgba(158, 97, 11, 0.15) 13%, rgba(152, 93, 9, 0.05) 18%, rgba(150, 92, 8, 0) 24%),
linear-gradient(180deg, #060301 0%, #060301 27%, #170e02 52%, #321e02 72%, #362003 86%, #523004 96%, #583405 100%);
}
/* Pfeilkasten: 320 x 275 px an der Tafelunterkante, Kartenkoordinaten
x 40..360 bzw. 860..1180, y 300..575. Er muss Pfeil UND Quadrat fassen.
fixes-elite.css setzt fuer denselben Kasten 253 x auto bei left/right 34
und bottom -34 (Selektor 0-2-0); die Datei rechnet mit einem Kopfmass von
120 px aus einer aelteren Referenz. Im heutigen Mockup misst der Kopf
110 px, die Spitze liegt 229 px ueber der Tafelunterkante. Ohne diese
Regel wird der neue Pfeil auf 253 px gestaucht und sitzt zu hoch.
Der Weichzeichner entfaellt: im Mockup hat der Pfeil eine harte Kante
mit hellem Saum. */
.lve-e7 .lve-e7-panel .lve-e7-arrows {
width: 320px;
height: 275px;
bottom: -28px;
filter: none;
overflow: visible;
}
.lve-e7 .lve-e7-panel .lve-e7-arrows--left { left: 40px; right: auto; }
.lve-e7 .lve-e7-panel .lve-e7-arrows--right { right: 40px; left: auto; }
.lve-e7 .lve-e7-panel .lve-e7-arrows > svg { width: 320px; height: 275px; }
}
/* ============================================================
Sektions-Ambient neben der Tafel, 11.08.2026, Runde "Effekte 1 zu 1".
Ersetzt die alte Nahtmaske: die daempfte nur die obersten 60 px, waehrend
die eigentliche Abweichung ueber die ganze Sektionshoehe lag. Beide Flanken
waren zu breit und liefen ins Graue statt ins Goldene.
Gemessen an referenz-neu/soll/elite-aus-vollbild.png, Soll-y = Ist-y + 30:
Stelle vorher Soll nachher
y5340 x 120 138, 84, 10 127, 86, 33 123, 85, 31
y5340 x1620 43, 29, 9 23, 13, 2 26, 15, 2
y5340 x1755 78, 53, 15 97, 56, 2 85, 49, 2
y5700 x 160 95, 61, 14 67, 44, 15 77, 49, 10
y5700 x1620 63, 42, 13 31, 19, 2 42, 24, 2
y5700 x1720 96, 64, 18 91, 54, 2 101, 59, 2
Auffaellig ist der Blaukanal: live 9..18, im Entwurf 2. Die alten Flanken
liefen ueber Weiss aus, der Entwurf bleibt bis zum Rand goldgesaettigt.
Mittlere Abweichung ueber 181 Kontrollpunkte: vorher 11,8 - nachher 3,8.
Die Naht zu e6 bleibt dabei sauber: Sprung im Randprofil vorher 0,8,
nachher 0,3, Entwurf 0,1. Deshalb keine Maske mehr.
Drei Ebenen, numerisch an 700 Messpunkten angepasst. Selektor 0-3-0, weil
server-stand-20260810/lvlup-fixes/r3-elite.css `.lve-e7 .lve-e7-bg`
(0-2-0) in Z. 372 und Z. 560 setzt und spaeter laedt.
============================================================ */
@media (min-width: 1024px) {
.lvf-page .lve-e7 .lve-e7-bg {
background:
radial-gradient(28% 99.5% at -0.2% 2.7%, rgba(210, 149, 49, 1) 0%, rgba(224, 153, 62, 0.373) 35%, rgba(255, 162, 28, 0.051) 70%, rgba(255, 150, 20, 0) 100%),
radial-gradient(51.1% 127.2% at -35.7% 83.6%, rgba(241, 129, 128, 0.282) 0%, rgba(206, 184, 183, 0.904) 35%, rgba(219, 133, 16, 0.724) 70%, rgba(200, 120, 10, 0) 100%),
radial-gradient(22.7% 229.1% at 109.6% 100.7%, rgba(207, 136, 35, 0.156) 0%, rgba(196, 114, 3, 0.836) 35%, rgba(195, 112, 1, 0.264) 70%, rgba(190, 110, 0, 0) 100%);
-webkit-mask-image: none;
mask-image: none;
}
}
/* ============================================================
Deko-Pfeile: Deckkraft und Sitz, 11.08.2026.
GROESSE, gegengeprueft (WIDERLEGTE-BEFUNDE Nr. 5 meldete "zu klein,
Kopf 114 statt 154"). Am heutigen Build stimmt die Groesse:
Kopfspitze bis rechte Kopfecke, tafelrelativ gemessen
Build Spitze (118,308) Ecke (151,413) Laenge 110
Entwurf Spitze (124,320) Ecke (167,417) Laenge 106
Das sind 4 Prozent, also innerhalb der Messunsicherheit. Der Kasten
bleibt bei 320 x 275 px. Der alte Befund galt der Serverdatei
fixes-elite.css (253 px), die diese Datei seit dem 11.08. ueberstimmt.
SITZ: der Entwurf setzt den Pfeil 6 px weiter rechts und 12 px tiefer.
left 40 -> 46, bottom -28 -> -36.
DECKKRAFT: r3-elite.css Regel R3-elite-30 setzt `opacity: 0.5`. Am
Entwurf gegengerechnet ist der Pfeil deutlich dichter. An drei Punkten
der Kopfflaeche der Beitrag ueber dem Tafelgrund gemessen und mit einem
Render bei opacity 1 verglichen: 0,79 / 0,78 / 0,75 im Rot- und
0,86 / 0,84 / 0,80 im Gruenkanal. Also 0,8.
Mittlere Abweichung im Pfeilbereich: vorher 17,1 - nachher 12,6.
Der Rest ist Form, nicht Farbe: der Entwurfspfeil steht rund 5 Grad
steiler, und die Begleitform ist im Entwurf ein voll sichtbares gedrehtes
Quadrat, waehrend der Farbverlauf im SVG sie ab y 190 ausblendet
(gemessen Entwurf 217,128,8 gegen Build 130,79,5). Beides steckt im
Markup, nicht im Stylesheet.
============================================================ */
@media (min-width: 1024px) {
.lve-e7 .lve-e7-panel .lve-e7-arrows { opacity: 0.8; bottom: -36px; }
.lve-e7 .lve-e7-panel .lve-e7-arrows--left { left: 46px; }
.lve-e7 .lve-e7-panel .lve-e7-arrows--right { right: 46px; }
}
/* ============================================================
Knopffuellungen und Innenscheine, 11.08.2026.
Alle Werte senkrecht bzw. waagerecht durch die Knoepfe gemessen,
Soll-y = Ist-y + 32 (Anker: Oberkante des Knopfes).
1. GOLDKNOPF "Choose Your Evaluation"
Die beiden Stuetzfarben #ffbc54 / #ff9200 treffen die Mitte, aber
nicht die Enden: der Entwurf ist oben deutlich heller und unten ein
gesaettigtes Gelb ohne Blauanteil. Textfreie Spalte zwischen Chip und
Beschriftung:
Zeile vorher Soll nachher
+ 2 255,192,101 252,213,115 255,216,120
+ 8 255,186, 82 254,193, 81 255,193, 81
+16 255,174, 58 254,175, 55 255,173, 52
+32 255,161, 31 255,160, 26 255,164, 22
+42 255,166, 46 255,177, 9 255,181, 8
+44 255,168, 52 253,184, 6 255,188, 4
Der Innenschein `inset 0 1px 18px rgba(255,202,131,.9)` hellte dafuer
die ganze Flaeche cremig auf und wird durch den Verlauf ersetzt. Der
Entwurf hat stattdessen einen SEITLICHEN Saum: 2 px vor der rechten
Kante misst er 254,216,106 gegen 255,193,82 in der Flaeche, also
+23 Gruen und +24 Blau ueber rund 11 px. Das machen die beiden
waagerechten Verlaeufe.
Mittlere Abweichung: senkrecht 1,4 - rechte Kante 2,4.
2. CHIP mit dem Pfeilsymbol
Live reines Schwarz (6,6,6), im Entwurf ein dunkles Weinrot, oben
heller als unten, mit warmem Saum an der linken Kante:
Zeile +8, x 690..710 vorher 6,6,6 Soll 47..49, 9..10, 7
Zeile +38, x 690..710 vorher 6,6,6 Soll 27, 9, 7
Zeile +8, linke Kante vorher 6,6,6 Soll 65..91, 12..18, 7..10
Nachher: mittlere Abweichung 2,9 ueber acht Messpunkte.
3. GEISTERKNOPF "View the Rules"
Der Entwurf hat keinen sichtbaren Rahmen, sondern einen kraeftigen
warmen Innenschein von unten und rechts sowie einen dunklen von oben
und links. Live war beides zu schwach, dafuer lag oben eine goldene
Haarlinie, die der Entwurf nicht hat.
Senkrecht, textfreie Spalte, Abstand von der Unterkante:
Zeile vorher Soll nachher
+ 1 43,28, 9 12, 8, 4 20,13, 3 (oben, dunkel)
+28 45,29, 7 54,35, 7 52,35, 9
+34 62,41,12 103,70,23 106,73,27
+38 76,50,16 151,104,39 157,109,44
+45 123,87,35 220,153,65 219,153,65
Waagerecht 2 px vor der rechten Kante: vorher 90,60,19, Soll
227,158,65, nachher 211,147,61.
Blur und Versatz sind aus dem gemessenen Abfall zurueckgerechnet
(Sigma 6,4 px unten, 5,8 px rechts, 5,1 px oben). `border: 0` statt
einer durchsichtigen Kante, weil der Innenschein am Rahmenring
abgeschnitten wuerde und dort ein dunkler 1-px-Strich stehenbliebe.
Die Knopfbreite sinkt dadurch um 2 px auf 169; der Entwurf hat 168.
Mittlere Abweichung: senkrecht 3,7 - rechte Kante 6,1 - linke 3,4.
Selektoren 0-3-0 ueber `.lve-e7-actions`, damit spaeter geladene
Fremdregeln auf 0-2-0 nicht gewinnen.
============================================================ */
@media (min-width: 1024px) {
.lve-e7 .lve-e7-actions .lve-e7-btn--primary {
background:
linear-gradient(90deg, rgba(255, 244, 130, 0.58) 0, rgba(255, 244, 130, 0) 14px),
linear-gradient(270deg, rgba(255, 244, 130, 0.58) 0, rgba(255, 244, 130, 0) 14px),
linear-gradient(180deg, #ffde82 0%, #ffc151 17%, #ffad34 39%, #ffa728 52%, #ffa01a 70%, #ffaa0d 87%, #ffbd03 100%);
box-shadow: none;
}
.lve-e7 .lve-e7-actions .lve-e7-btn-chip {
background:
linear-gradient(90deg, rgba(90, 16, 8, 0.45) 0, rgba(90, 16, 8, 0) 6px),
linear-gradient(180deg, #300a07 0%, #1b0907 100%);
box-shadow: none;
}
.lve-e7 .lve-e7-actions .lve-e7-btn--ghost {
background: rgba(0, 0, 0, 0.33);
border: 0;
box-shadow:
inset -9px -9px 13px rgba(255, 178, 77, 0.95),
inset 7px 7px 10px rgba(0, 0, 0, 0.8);
}
}
/* ===========================================================================
Ghost-Knopf: Lichtsaum ergaenzt, 11.08.2026 (Knopf-Abnahme)
Hier war gar kein Schatten deklariert, nicht einmal einer, den eine
Fremdregel haette erschlagen koennen. Gemessen oben (44,29,9), unten
(52,34,8), also an allen vier Kanten gleich: der Knopf hatte kein
Glanzlicht. Der Entwurf zeigt oben und links fast Schwarz ((3,3,1) und
(12,9,4)) und unten ein kraeftiges Bernstein-Bloom (192,140,57).
Aufbau eins zu eins vom bewaehrten Knopf in s10, nur die beiden
Glanzlichtfarben auf das Gold dieser Seite.
=========================================================================== */
@media (min-width: 1024px) {
.lvf-page .lve-e7-btn--ghost {
box-shadow:
rgb(255, 196, 110) -2px -6px 19px 0 inset,
rgb(255, 146, 0) -5px -4px 16px 0 inset,
rgb(255, 146, 0) -1px -2px 5px 0 inset,
rgb(0, 0, 0) 9px 7px 12px 0 inset,
rgba(0, 0, 0, .36) 7px 3px 11px 0,
rgba(0, 0, 0, .25) 0 0 0 2px,
rgba(0, 0, 0, .16) 0 0 0 3px;
}
}
/* ===========================================================================
Naht zum Fuss bei y 6001, 11.08.2026 (Nahtkanten-Abnahme)
Dieselbe Ursache wie in e6: eine Bernsteinblase am unteren Sektionsrand aus
r3-elite.css, die der Entwurf nicht hat. Gemessen in der Mitte (51,30,2)
gegen (8,5,2), Distanz 50, an der Spitze bei x 150 sogar 67. Soll-Sprung
ueberall 0 bis 1. Die beiden Kantensaeulen bleiben.
=========================================================================== */
@media (min-width: 1024px) {
.lvf-page .lve-e7 .lve-e7-bg {
background:
radial-gradient(ellipse 31% 600% at -8% -220%, rgba(255,246,228,1) 0%, rgba(252,179,62,.74) 49%, rgba(251,168,44,.67) 53%, rgba(250,158,28,.61) 56%, rgba(250,150,14,.58) 58%, rgba(255,146,0,0) 84%),
radial-gradient(ellipse 30% 600% at 106% 320%, rgba(255,194,96,.72) 0%, rgba(254,172,48,.42) 46%, rgba(255,146,0,0) 84%);
}
}
/* ===========================================================================
Naht e6/e7 bei y 5345: das Randfeld fehlt in e7, 12.08.2026
ANLASS: e6 hat sein linkes Goldfeld an diesem Tag auf die Entwurfsbreite
gebracht (vorher endete es bei x 417, der Entwurf traegt bis x rund 900).
Damit trat zutage, dass e7 an derselben Stelle GAR KEIN Feld hat: seine
linke Saeule bricht bei x rund 230 ab. Die Naht ist dadurch von 2,19 auf
6,43 gestiegen, obwohl beide Seiten naeher am Entwurf liegen als vorher.
Querschnitt an der Naht, Median ueber 64 px, Rotkanal:
x e6 unten e7 oben SOLL
192 74 43 66
256 54 0 40
320 39 0 25
384 29 0 17
448 21 0 11
576 11 0 3
e7 fehlen also 30 bis 54 Stufen ueber ein 700 px breites Band. Vorher fiel
das nicht auf, weil e6 dort ebenfalls Schwarz zeigte - beide waren gleich
falsch.
AENDERUNG: eine zusaetzliche Ebene auf `.lve-e7-bg::before`, die genau
diesen Fehlbetrag traegt. Waagerecht ein linear-gradient mit den oben
gemessenen Stuetzstellen (0 bis x 160, dann der Zuschlag, ab x 832 wieder
0), rechts eine kleine Zulage um x 1450. Senkrecht eine Maske, die die
Ebene bis y 5950 auslaufen laesst.
WARUM DIE MASKE, obwohl der Entwurf das Feld bis zur Fusszeile durchzieht:
die Fusszeile hat dort keine Rinne (bei y 6001 misst man ueber x 176..528
im Fuss (1,1,0) gegen Soll (37,23,4)). Ein bis unten durchgezogenes Feld
wuerde die Naht e7/Fuss von 5,10 auf 5,58 verschlechtern - gerechnet
blockweise gegen die Fussrinne. Mit der Maske bleibt die Naht zum Fuss
unveraendert, und e7 kommt in seiner oberen Haelfte trotzdem naeher an den
Entwurf: vorher ueberall 0 im Fernfeld, jetzt oben entwurfsnah und unten
wie bisher. Schlechter wird dadurch keine Stelle.
Der Restfehler im Fernfeld der unteren e7-Haelfte bleibt damit offen und
ist ein FUSSZEILEN-Befund, nicht e7: die Rinne muesste im Fuss ueber
500 px Breite laufen statt ueber 112.
=========================================================================== */
/* ===========================================================================
Rechte Saeule von e7 auf die Nahtzeile zum Fuss, 12.08.2026
BEFUND an der Naht y 6001, Blockmedian, Bloecke 17/18/19 von innen nach
aussen:
Block e7 oben Fuss unten SOLL
17 (34,23, 6) ( 11, 7, 1) ( 21,13,1)
18 (73,49,14) ( 49,33, 7) ( 51,30,2)
19 (105,71,20) (155,91, 6) (110,64,2)
In den Bloecken 17 und 18 zeigen Entwurf und Fusszeile in dieselbe
Richtung: e7 ist dort 13 beziehungsweise 22 Stufen zu hell. Die Korrektur
verbessert also Naht UND Flaeche. Block 19 bleibt offen, dort ist die
Fusszeile mit 155 gegen Soll 110 zu hell - das ist die Fusszeile.
Zusaetzlich ist der Blaukanal durchgehend zu hoch (20/14/6 gegen Soll
2/2/1), die Saeule war zu wenig gesaettigt.
Farbe (255,148,5) ist der Soll-Ton auf Rot 255 normiert, Deckkraft je
Stuetzstelle = Soll-Rot / 255, Prozentwerte sind die Ellipsenabstaende der
Blockmitten auf der Nahtzeile.
WARUM ERST AB 1500 px: die Fusszeile ist fluid und wird nach unten hin
hoeher (1024 px Breite -> 1242 px hoch, 1440 -> 970, 1600 -> 931,
1760 -> 918). Ihre Seitenrinne hat 960 px senkrechten Radius und erreicht
die Fussoberkante deshalb erst ab rund 1470 px Breite. Darunter ist der
Fuss an der Naht deutlich heller (bei 1024: Block 18 (77,52,11) statt
(49,33,7)), und dieselbe Absenkung verschlechtert dort: gemessen bei
1024 px waere die Naht von 3,72 auf 4,96 gestiegen. Unterhalb von 1500 px
bleibt deshalb die alte Saeule stehen.
=========================================================================== */
@media (min-width: 1500px) {
.lvf-page .lve-e7 .lve-e7-bg {
background:
radial-gradient(ellipse 31% 600% at -8% -220%, rgba(255,246,228,1) 0%, rgba(252,179,62,.74) 49%, rgba(251,168,44,.67) 53%, rgba(250,158,28,.61) 56%, rgba(250,150,14,.58) 58%, rgba(255,146,0,0) 84%),
radial-gradient(ellipse 30% 600% at 106% 320%,
rgba(255, 148, 5, 0.550) 0%,
rgba(255, 148, 5, 0.471) 41.77%, /* x 1760 Soll 120 (Kante) */
rgba(255, 148, 5, 0.431) 46.34%, /* x 1716 Soll 110 */
rgba(255, 148, 5, 0.200) 58.05%, /* x 1628 Soll 51 */
rgba(255, 148, 5, 0.082) 71.74%, /* x 1540 Soll 21 */
rgba(255, 148, 5, 0.035) 86.49%, /* x 1452 Soll 9 */
rgba(255, 148, 5, 0) 100%);
}
}
/* ---------------------------------------------------------------------------
Rechte Kante derselben Ebene, erst ab 1500 px.
Am rechten Rand fehlen e7 an der Naht zu e6 nur wenige Stufen (Bloecke 17
bis 19 oben: 7 / 40 / 66 gegen e6 unten 19 / 42 / 64). Der Zuschlag ist
deshalb klein.
WARUM ERST AB 1500 px, gemessen und nicht geschaetzt: bei 1024 px liegt die
CTA-Tafel mit x 20..1004 fast randbuendig, und die Deko-Pfeile mit ihrem
42-px-Schein reichen ueber die rechte Randspalte. Jede Zulage dort trifft
auf einen ganz anderen Untergrund als bei 1760 px. Gemessen bei 1024 px:
die Fussnaht stieg von 3,72 auf 6,68. Oberhalb von 1500 px ist die Tafel
1259 px breit und die Randspalte frei.
--------------------------------------------------------------------------- */
@media (min-width: 1024px) {
.lvf-page .lve-e7 .lve-e7-bg::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(90deg,
rgba(255, 189, 115, 0) 9.09%, /* x 160 kein Zuschlag */
rgba(255, 189, 115, 0.122) 10.91%, /* x 192 +31 */
rgba(255, 170, 47, 0.212) 14.55%, /* x 256 +54 */
rgba(255, 170, 39, 0.153) 18.18%, /* x 320 +39 */
rgba(255, 158, 26, 0.114) 21.82%, /* x 384 +29 */
rgba(255, 158, 24, 0.082) 25.45%, /* x 448 +21 */
rgba(255, 170, 17, 0.059) 29.09%, /* x 512 +15 */
rgba(255, 162, 23, 0.043) 32.73%, /* x 576 +11 */
rgba(255, 182, 0, 0.027) 36.36%, /* x 640 +7 */
rgba(255, 191, 0, 0.016) 40.00%, /* x 704 +4 */
rgba(255, 128, 0, 0.008) 43.64%, /* x 768 +2 */
rgba(255, 128, 0, 0) 47.27%); /* x 832 0, Mitte bleibt frei */
/* Senkrechte Auslaufmaske, Begruendung im Kopfkommentar */
-webkit-mask-image: linear-gradient(180deg,
#000 0%, rgba(0, 0, 0, 0.72) 30%, rgba(0, 0, 0, 0.34) 60%,
rgba(0, 0, 0, 0.08) 84%, rgba(0, 0, 0, 0) 94%);
mask-image: linear-gradient(180deg,
#000 0%, rgba(0, 0, 0, 0.72) 30%, rgba(0, 0, 0, 0.34) 60%,
rgba(0, 0, 0, 0.08) 84%, rgba(0, 0, 0, 0) 94%);
}
}
/* ---------------------------------------------------------------------------
Rechte Kante derselben Ebene, erst ab 1500 px.
Am rechten Rand fehlen e7 an der Naht zu e6 nur wenige Stufen (Bloecke 17
bis 19 oben 7 / 40 / 66 gegen e6 unten 19 / 42 / 64), der Zuschlag ist
entsprechend klein. Er gilt erst ab 1500 px, weil die CTA-Tafel bei
1024 px mit x 20..1004 fast randbuendig liegt und die Deko-Pfeile dort mit
ihrem 42-px-Schein in dieselbe Randspalte reichen; der Untergrund ist also
ein voellig anderer als bei 1760 px.
--------------------------------------------------------------------------- */
@media (min-width: 1500px) {
.lvf-page .lve-e7 .lve-e7-bg::before {
background: linear-gradient(90deg,
rgba(255, 189, 115, 0) 9.09%,
rgba(255, 189, 115, 0.122) 10.91%,
rgba(255, 170, 47, 0.212) 14.55%,
rgba(255, 170, 39, 0.153) 18.18%,
rgba(255, 158, 26, 0.114) 21.82%,
rgba(255, 158, 24, 0.082) 25.45%,
rgba(255, 170, 17, 0.059) 29.09%,
rgba(255, 162, 23, 0.043) 32.73%,
rgba(255, 182, 0, 0.027) 36.36%,
rgba(255, 191, 0, 0.016) 40.00%,
rgba(255, 128, 0, 0.008) 43.64%,
rgba(255, 128, 0, 0) 47.27%,
rgba(255, 155, 20, 0) 82.00%,
rgba(255, 155, 20, 0.008) 85.00%, /* Block 17 +2 */
rgba(255, 155, 20, 0.024) 87.50%, /* Block 17 +6 */
rgba(255, 155, 20, 0.047) 90.00%, /* Block 18 +12 */
rgba(255, 155, 20, 0.067) 92.50%, /* Block 18 +17 */
rgba(255, 155, 20, 0.071) 95.00%, /* Block 19 +18 */
rgba(255, 155, 20, 0.071) 100%);
}
}