/* Evaluation als eine einzige Hintergrund-Leinwand.
Alle grossen Aussenlichter liegen in Seitenkoordinaten. Die einzelnen
Sektionen tragen nur noch Inhalt, Karten und Motive. */
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) {
position: relative;
isolation: isolate;
background: #02080d;
}
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil)::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(ellipse 94% 28% at 4% 17%, rgba(118, 218, 255, 0.66) 0%, rgba(22, 155, 224, 0.42) 42%, rgba(3, 83, 132, 0.16) 72%, transparent 100%),
radial-gradient(ellipse 92% 30% at 96% 37%, rgba(106, 214, 255, 0.68) 0%, rgba(18, 153, 220, 0.42) 43%, rgba(3, 79, 126, 0.15) 73%, transparent 100%),
radial-gradient(ellipse 98% 31% at 2% 58%, rgba(128, 222, 255, 0.70) 0%, rgba(25, 163, 229, 0.44) 42%, rgba(4, 87, 137, 0.16) 73%, transparent 100%),
radial-gradient(ellipse 96% 31% at 98% 76%, rgba(111, 215, 251, 0.65) 0%, rgba(17, 148, 216, 0.40) 43%, rgba(3, 77, 124, 0.15) 74%, transparent 100%),
radial-gradient(ellipse 108% 27% at 5% 94%, rgba(91, 204, 249, 0.58) 0%, rgba(12, 139, 207, 0.36) 44%, rgba(2, 72, 116, 0.13) 75%, transparent 100%),
linear-gradient(180deg, #000000 0%, #020c13 10%, #041a27 32%, #062b3e 55%, #07364d 73%, #052638 88%, #020a10 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000000 96px, #000000 calc(100% - 160px), rgba(0, 0, 0, 0.56) calc(100% - 70px), transparent 100%);
mask-image: linear-gradient(180deg, transparent 0, #000000 96px, #000000 calc(100% - 160px), rgba(0, 0, 0, 0.56) calc(100% - 70px), transparent 100%);
}
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) > .lvev-e1,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) > .lvev-e2,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) > .lvev-e3,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) > .lvev-e4,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) > .lvev-e5,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) > .lvev-e6,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) > .lvev-e7,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) > .lvev-e8 {
position: relative;
z-index: 1;
background-color: transparent;
background-image: none;
}
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvev-e1 .lvev-e1-glow,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvev-e2 .lvev-e2-glow,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvev-e3 .lvev-e3-glow,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvev-e4 .lvev-e4-glow--left,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvev-e4 .lvev-e4-glow--right,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvev-e4 .lvev-e4-glow--bottom,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvev-e5 .lvev-e5-glow--left,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvev-e5 .lvev-e5-glow--right,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvev-e5 .lvev-e5-glow--bottom,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvev-e6 .lvev-e6-glow--center,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvev-e6 .lvev-e6-glow--left,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvev-e6 .lvev-e6-glow--right,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvev-e6 .lvev-e6-glow--bottom,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvev-e7 .lvev-e7-bg,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvev-e8 .lvev-e8-bg {
background: none;
background-image: none;
-webkit-mask-image: none;
mask-image: none;
}
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvev-e2::before,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvev-e3 .lvev-e3-glow::before,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvev-e3 .lvev-e3-glow::after,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvev-e3::after,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvev-e5::before,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvev-e5::after,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvev-e6 .lvev-e6-glow--left::before,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvev-e6 .lvev-e6-glow--left::after,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvev-e7 .lvev-e7-bg::before,
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvev-e7::after {
content: none;
background: none;
background-image: none;
}
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvev-e8 .lvev-e8-bg::before {
content: none;
background: none;
background-image: none;
}
/* e6 war fuer eine fast weisse lokale Lichtinsel gebaut. Auf der gemeinsamen
dunklen Leinwand braucht der Abschnitt seine eigene, dauerhaft lesbare
Typografie. */
body.page-id-8049 .lvf-page.lvf-page .lvev-e6 h2.lvev-e6-title,
body.page-id-8049 .lvf-page.lvf-page .lvev-e6 h3.lvev-e6-item-title {
color: #f5fbff;
}
body.page-id-8049 .lvf-page.lvf-page .lvev-e6 .lvev-e6-sub {
color: rgba(238, 248, 255, 0.84);
}
body.page-id-8049 .lvf-page.lvf-page .lvev-e6 .lvev-e6-item-desc {
color: rgba(224, 241, 250, 0.72);
font-size: max(14px, 0.74vw);
line-height: 1.45;
}
body.page-id-8049 .lvf-page.lvf-page .lvev-e6 .lvev-e6-line {
background: rgba(182, 226, 249, 0.14);
}
body.page-id-8049 .lvf-page.lvf-page .lvev-e6 .lvev-e6-dot {
background: #031018;
box-shadow: inset 0 1px 2px rgba(91, 188, 232, 0.72), 0 0 18px rgba(0, 162, 255, 0.16);
}
@media (max-width: 1199.98px) {
body.page-id-8049 .lvf-page.lvf-page:not(.lvf-theme-teil)::before {
background:
radial-gradient(ellipse 118% 25% at 50% 17%, rgba(94, 205, 252, 0.64) 0%, rgba(15, 145, 219, 0.40) 42%, rgba(1, 83, 136, 0.15) 72%, transparent 100%),
radial-gradient(ellipse 108% 27% at 0% 39%, rgba(77, 198, 247, 0.56) 0%, rgba(8, 132, 202, 0.33) 43%, rgba(1, 70, 115, 0.12) 73%, transparent 100%),
radial-gradient(ellipse 110% 28% at 100% 58%, rgba(91, 207, 251, 0.62) 0%, rgba(12, 144, 215, 0.37) 43%, rgba(1, 78, 124, 0.13) 73%, transparent 100%),
radial-gradient(ellipse 112% 27% at 0% 77%, rgba(75, 196, 242, 0.54) 0%, rgba(7, 125, 194, 0.31) 44%, rgba(1, 65, 108, 0.11) 74%, transparent 100%),
radial-gradient(ellipse 120% 24% at 50% 94%, rgba(106, 215, 255, 0.62) 0%, rgba(14, 146, 218, 0.36) 43%, rgba(1, 73, 119, 0.12) 74%, transparent 100%),
linear-gradient(180deg, #000000 0%, #03121c 18%, #052a3e 46%, #073d57 68%, #052c41 86%, #020b11 100%);
}
}
/* == e1-hero == */
/* == e1 Hero der Evaluation-Seite ==
Desktop exakt nach Figma (Frame 1760, Band y=0..860), Tablet interpoliert,
Mobile (<768px, kein Design vorhanden) sauber gestapelt. */
.lvev-e1 {
/* --- Typo / Abstaende (Mobile-Basis) --- */
--lvev-e1-pt: 150px;
--lvev-e1-pb: 48px;
--lvev-e1-badge-h: 34px;
--lvev-e1-badge-fs: 14px;
--lvev-e1-title-fs: 40px;
--lvev-e1-title-lh: 1.08;
--lvev-e1-title-mt: 26px;
--lvev-e1-sub-fs: 16px;
--lvev-e1-sub-lh: 24px;
--lvev-e1-sub-ls: 0.48px;
--lvev-e1-sub-mw: 580px;
--lvev-e1-sub-mt: 24px;
/* --- Buttons --- */
--lvev-e1-btn-h: 48px;
--lvev-e1-btn-fs: 16px;
--lvev-e1-cta-gap: 12px;
--lvev-e1-cta-mt: 32px;
/* --- Chips --- */
--lvev-e1-chips-mt: 48px;
/* --- Pille --- */
--lvev-e1-pill-mt: 64px;
/* --- Farbwerte aus dem Band --- */
--lvev-e1-grad-blue: linear-gradient(180deg, #8cd5ff 0%, #12a9ff 100%);
--lvev-e1-grad-white: linear-gradient(141deg, rgba(255, 255, 255, 0.7) 0%, #ffffff 50%, rgba(255, 255, 255, 0.7) 100%);
position: relative;
z-index: 0;
isolation: isolate;
padding-top: var(--lvev-e1-pt);
padding-bottom: var(--lvev-e1-pb);
}
.lvev-e1-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* ---------------------------------------------------------------- Hintergrund */
/* Blaue Glow-Textur (Figma: IMG 35beef64a9, STRETCH, blur 4px) ueber dem
oberen Band. Laueft nach unten und oben weich in den Seitengrund aus. */
.lvev-e1-bg {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 780px;
z-index: 0;
pointer-events: none;
/* R3-Befund 1: Der cyanfarbene Lichtbogen am Hero-Fuss war durch einen
neutralgrauen Schleier ersetzt (SOLL bei y~650: Raender rgb(236,247,254),
Mitte rgb(34,117,163)). Deshalb jetzt: cyane Bogen-Layer GANZ OBEN,
dunkle Abdunklung deutlich abgeschwaecht, Maske laeuft erst ab 80% aus. */
background-image:
radial-gradient(48% 36% at 3% 88%, rgba(230, 244, 255, 0.95) 0%, rgba(140, 213, 255, 0.5) 40%, rgba(0, 162, 255, 0) 72%),
radial-gradient(48% 36% at 97% 88%, rgba(230, 244, 255, 0.95) 0%, rgba(140, 213, 255, 0.5) 40%, rgba(0, 162, 255, 0) 72%),
radial-gradient(70% 40% at 50% 100%, rgba(46, 142, 190, 0.75) 0%, rgba(0, 162, 255, 0.3) 45%, rgba(0, 162, 255, 0) 75%),
linear-gradient(180deg, #05060f 0%, rgba(5, 6, 15, 0.55) 32%, rgba(5, 6, 15, 0.12) 62%, rgba(5, 6, 15, 0) 88%),
radial-gradient(62% 66% at 50% 46%, rgba(5, 6, 15, 0.55) 0%, rgba(5, 6, 15, 0.25) 55%, rgba(5, 6, 15, 0) 100%),
url('https://lvlup2.tivaosagencytempdomains.de/wp-content/uploads/2026/08/lvlup-35beef64a9.webp');
background-size: 100% 100%;
background-repeat: no-repeat;
filter: blur(2px);
-webkit-mask-image: linear-gradient(180deg, #000000 0%, #000000 80%, rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(180deg, #000000 0%, #000000 80%, rgba(0, 0, 0, 0) 100%);
}
/* Weichgezeichnete "Star"-Vektoren: blauer Schein, der von oben in die
Kopfleiste und seitlich in den Seitengrund auslaeuft */
.lvev-e1-glow {
position: absolute;
left: 50%;
top: -120px;
width: 180%;
height: 900px;
transform: translateX(-50%);
pointer-events: none;
z-index: 0;
background:
radial-gradient(36% 30% at 18% 30%, rgba(0, 162, 255, 0.22) 0%, rgba(0, 162, 255, 0) 100%),
radial-gradient(36% 30% at 82% 30%, rgba(0, 162, 255, 0.22) 0%, rgba(0, 162, 255, 0) 100%),
radial-gradient(28% 20% at 50% 18%, rgba(167, 223, 255, 0.1) 0%, rgba(167, 223, 255, 0) 100%);
filter: blur(70px);
opacity: 0.5;
}
/* Grosse Glas-Panels links/rechts (Figma: weisser Verlauf 345deg, 10% Deckkraft) */
.lvev-e1-panel {
position: absolute;
top: 128px;
width: 46%;
height: 864px;
z-index: 0;
pointer-events: none;
display: none;
/* Rundgang 13.08.2026, Warnung zur Panel-Aenderung: ohne Maske bricht der
345deg-Verlauf am unteren Rand (y=992 = top 128 + height 864) hart auf
Schwarz ab. Am Live-Server ist genau das bereits mit dieser Maske aus
server-stand-20260810/lvlup-fixes/fixes-evaluation.css (Befund 1,
tabu, nur gelesen) behoben, hier nur uebernommen -- Geometrie (top 128,
height 864, Unterkante 992) ist byte-gleich zu unserem Fragment.
Beleg per echtem Render (RGB-Summendifferenz Kante x=422 gegen x=100,
390 bzw. rechts x=1338 gegen x=1660):
y=780 ohne Maske 42 mit Maske 0 Mockup 0
y=860 ohne Maske 59 mit Maske 0 Mockup 0
y=940 ohne Maske 69 mit Maske 0 Mockup 6
y=980 ohne Maske 78 mit Maske 0 Mockup 3
y=992 ohne Maske 17 mit Maske 0 Mockup 3
Die heutige Rotationskorrektur (15deg -> 345deg) und das Entfernen des
unbelegten opacity:0.6-Daempfers bleiben unangetastet -- sie sind
Figma-belegt und machen die Kante staerker sichtbar (Diff bei y=980 vorher
51, jetzt 78 ohne Maske), aber die Maske allein bringt beide Faelle auf 0
und trifft damit das Mockup, ein Zurueckdrehen der Rotation nicht
(Diff bliebe bei rund 51). */
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 43%, rgba(0, 0, 0, 0) 66%);
mask-image: linear-gradient(180deg, #000 0%, #000 43%, rgba(0, 0, 0, 0) 66%);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/* Figma haelt fuer beide Panel-Vektoren dieselben Gradient-Griffe (345deg),
also NICHT gespiegelt (Beleg: gradientHandlePositions in
figma/bands-eval/e1-hero.json fuer beide Vectors byte-identisch). IST
drehte das linke Panel auf 15deg und daempfte beide zusaetzlich mit
opacity:0.6, ein Wert ohne Figma-Beleg (Figma-Fill traegt die 0.1 bereits
selbst). Vorher effektiv max. Alpha 0,06, jetzt 0,1 wie im Entwurf. */
.lvev-e1-panel--l {
left: -22%;
background: linear-gradient(345deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 60%);
}
.lvev-e1-panel--r {
right: -22%;
background: linear-gradient(345deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 60%);
}
/* ---------------------------------------------------------------- Hero-Inhalt */
.lvev-e1-hero {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.lvev-e1-badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: var(--lvev-e1-badge-h);
padding-inline: 19px;
border-radius: 67px;
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(61px);
backdrop-filter: blur(61px);
}
.lvev-e1-badge-dot {
flex: 0 0 auto;
width: 6px;
height: 6px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.14);
background: var(--lvev-e1-grad-blue);
}
.lvev-e1-badge-text {
font-family: var(--lvf-font-display);
font-size: var(--lvev-e1-badge-fs);
line-height: 20px;
font-weight: 500;
color: var(--lvf-white);
}
.lvev-e1-title {
margin-top: var(--lvev-e1-title-mt);
font-family: var(--lvf-font-display);
font-size: var(--lvev-e1-title-fs);
line-height: var(--lvev-e1-title-lh);
font-weight: 500;
letter-spacing: 0;
}
.lvev-e1-title-l1 {
background-image: var(--lvev-e1-grad-white);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* "Fits Your Trading" traegt im Soll den blauen Verlauf */
.lvev-e1-title-hl {
background-image: var(--lvev-e1-grad-blue);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lvev-e1-sub {
margin-top: var(--lvev-e1-sub-mt);
max-width: var(--lvev-e1-sub-mw);
font-family: var(--lvf-font-display);
font-size: var(--lvev-e1-sub-fs);
line-height: var(--lvev-e1-sub-lh);
font-weight: 425;
letter-spacing: var(--lvev-e1-sub-ls);
color: rgba(255, 255, 255, 0.85);
}
/* ---------------------------------------------------------------- CTAs */
.lvev-e1-cta {
margin-top: var(--lvev-e1-cta-mt);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--lvev-e1-cta-gap);
width: 100%;
}
.lvev-e1-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: min(100%, 320px);
min-height: var(--lvev-e1-btn-h);
border-radius: 10px;
font-family: var(--lvf-font-display);
font-size: var(--lvev-e1-btn-fs);
line-height: 25px;
transition: filter 0.18s ease, transform 0.18s ease;
}
.lvev-e1-btn:hover { filter: brightness(1.08); }
.lvev-e1-btn:active { transform: translateY(1px); }
.lvev-e1-btn:focus-visible { outline: 2px solid #8cd5ff; outline-offset: 3px; }
.lvev-e1-btn--primary {
gap: 8px;
padding: 5px 12px 5px 5px;
/* Saum-Verlauf statt --lvev-e1-grad-blue plus inset-Schatten, 11.08.2026.
Nachgereicht, der Knopf stand nicht auf der Liste der 13 Stellen.
Knopf 46 px hoch, damit im gerechneten Feld (18 bis 53 px).
Gemessen gegen evaluation-aus-vollbild.png, Knopfoberkante Soll y 511 /
Ist y 528, Median je Zeile im Bereich, den beide Fassungen abdecken:
x 715..870 vorher 11,25 nachher 5,93
x 760..800 vorher 13,45 nachher 8,38
Spaltenmedian zehn Bloecke vorher 6,28 nachher 1,57
ganze Flaeche x 715..870 vorher 25,25 nachher 20,02
NEBENBEFUND, hier nicht angefasst: der Knopf ist breiter als im Entwurf
(Ist x 669..896, Soll x 690..878) und traegt links eine dunkle
Symbolkachel, die der Entwurf an dieser Stelle nicht zeigt (Block 2
Soll (65,193,255) gegen Ist (6,6,6)). Das ist Geometrie, kein Saum. */
background: var(--lvf-grad-blue-btn);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow:
7px 3px 11px rgba(0, 0, 0, 0.36),
0 0 0 2px rgba(0, 0, 0, 0.25),
0 0 0 3px rgba(0, 0, 0, 0.16);
}
/* 0.5px Verlaufsrand (Figma: CENTER stroke) */
.lvev-e1-btn--primary::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 0.5px;
background: linear-gradient(90deg, rgba(0, 162, 255, 0) 0%, #00a2ff 50%, rgba(0, 162, 255, 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;
}
.lvev-e1-btn-tile {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 6px;
background: #060606;
}
.lvev-e1-btn-ico {
width: 18px;
height: 18px;
display: block;
}
.lvev-e1-btn--primary .lvev-e1-btn-label {
font-weight: 500;
color: #060606;
}
.lvev-e1-btn--ghost {
padding-inline: 17px;
font-weight: 400;
color: var(--lvf-white);
background: rgba(0, 0, 0, 0.1);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow:
inset -2px -6px 19px #52b8f1,
inset -5px -4px 16px #00a4ff,
inset -1px -2px 5px #00a4ff,
inset 9px 7px 12px #000000,
7px 3px 11px rgba(0, 0, 0, 0.36),
0 0 0 2px rgba(0, 0, 0, 0.25),
0 0 0 3px rgba(0, 0, 0, 0.16);
}
/* ---------------------------------------------------------------- Stat-Chips
Mobile/Tablet: Grid unter den CTAs. Desktop (ab 1400px): frei schwebend
nach den Figma-Koordinaten (Frame 1760). */
.lvev-e1-chips {
position: relative;
z-index: 1;
order: 3;
margin-top: var(--lvev-e1-chips-mt);
padding-inline: 20px;
display: grid;
grid-template-columns: repeat(2, auto);
justify-content: center;
gap: 14px;
}
.lvev-e1-chip {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
padding: 15px 23px;
border-radius: 14px;
background:
linear-gradient(142deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%),
linear-gradient(180deg, rgba(140, 213, 255, 0.22) 0%, rgba(18, 169, 255, 0.22) 100%),
#0a1420;
-webkit-backdrop-filter: blur(48px);
backdrop-filter: blur(48px);
box-shadow:
2px 5px 12px rgba(0, 0, 0, 0.18),
10px 19px 22px rgba(0, 0, 0, 0.12);
}
/* 0.5px Verlaufsrand um die Chips */
.lvev-e1-chip { position: relative; }
.lvev-e1-chip::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 0.5px;
background: linear-gradient(180deg, #00aaff 0%, rgba(0, 65, 103, 0) 26%, #005e8d 61%, rgba(0, 51, 88, 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;
}
/* Figma-Gap je Chip weicht leicht ab (Group 2147224199/200/204/201/202/203):
7 / 8 / 9 / 8 / 8 / 8 px. IST war einheitlich 7px auf allen sechs. */
.lvev-e1-chip--funding,
.lvev-e1-chip--payout,
.lvev-e1-chip--days,
.lvev-e1-chip--support { gap: 8px; }
.lvev-e1-chip--drawdown { gap: 9px; }
.lvev-e1-chip-top {
display: flex;
align-items: center;
gap: 8px;
}
.lvev-e1-chip-ico {
display: block;
flex: 0 0 auto;
filter: drop-shadow(0 1px 2px rgba(91, 188, 232, 0.55));
}
.lvev-e1-chip-ico--split { width: 33px; height: 31px; }
.lvev-e1-chip-ico--funding { width: 31px; height: 29px; }
.lvev-e1-chip-ico--drawdown { width: 22px; height: 23px; }
.lvev-e1-chip-ico--payout { width: 27px; height: 27px; }
.lvev-e1-chip-ico--days { width: 25px; height: 25px; }
.lvev-e1-chip-ico--support { width: 29px; height: 29px; }
.lvev-e1-chip-num {
font-family: var(--lvf-font-display);
font-size: 32px;
line-height: 40px;
font-weight: 555;
letter-spacing: -0.97px;
white-space: nowrap;
background-image: var(--lvev-e1-grad-blue);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lvev-e1-chip-num--five { font-size: 33px; line-height: 41px; letter-spacing: -0.99px; }
.lvev-e1-chip-label {
font-family: var(--lvf-font-display);
font-size: 12px;
line-height: 14px;
font-weight: 500;
letter-spacing: 0.46px;
white-space: nowrap;
background-image: var(--lvev-e1-grad-white);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ---------------------------------------------------------------- Pille "Select Your Plan" */
.lvev-e1-pill {
position: relative;
z-index: 1;
order: 4;
margin: var(--lvev-e1-pill-mt) auto 0;
display: flex;
align-items: center;
justify-content: center;
width: max-content;
max-width: calc(100% - 40px);
min-height: 31px;
padding: 6px 14px;
border-radius: 78px;
background: #00121c;
box-shadow:
7px 3px 11px rgba(0, 0, 0, 0.36),
0 0 0 2px rgba(0, 0, 0, 0.25),
0 0 0 3px rgba(0, 0, 0, 0.16);
}
/* 0.5px Verlaufsrand (Figma: OUTSIDE stroke, blau) */
.lvev-e1-pill::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 0.5px;
background: linear-gradient(90deg, rgba(52, 176, 248, 0) 0%, #35aef4 53%, rgba(49, 169, 238, 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;
}
.lvev-e1-pill-text {
font-family: var(--lvf-font-display);
font-size: 14px;
line-height: 17px;
font-weight: 400;
letter-spacing: 0.84px;
color: var(--lvf-white);
}
/* Die Sektion ist eine Flex-Spalte, damit Chips und Pille im Fluss unter dem
Hero-Inhalt liegen (Mobile/Tablet). */
.lvev-e1 { display: flex; flex-direction: column; }
/* ================================================================ Tablet ab 768px */
@media (min-width: 768px) {
.lvev-e1 {
--lvev-e1-pt: clamp(150px, calc(-90px + 31.25vw), 219px);
--lvev-e1-pb: 21px;
--lvev-e1-title-fs: clamp(40px, calc(-16px + 7.29vw), 68px);
--lvev-e1-title-lh: clamp(46px, calc(-19px + 8.46vw), 63px);
--lvev-e1-title-mt: 29px;
--lvev-e1-sub-fs: clamp(16px, calc(10px + 0.78vw), 18px);
--lvev-e1-sub-ls: 0.54px;
--lvev-e1-sub-mt: clamp(24px, calc(-12px + 4.69vw), 36px);
--lvev-e1-btn-fs: 17px;
--lvev-e1-cta-gap: 8px;
--lvev-e1-cta-mt: clamp(32px, calc(14px + 2.34vw), 37px);
--lvev-e1-chips-mt: 56px;
--lvev-e1-pill-mt: clamp(64px, calc(-140px + 23.44vw), 226px);
}
.lvev-e1-cta {
flex-direction: row;
}
.lvev-e1-btn { width: auto; }
.lvev-e1-chips {
grid-template-columns: repeat(3, auto);
}
}
/* ================================================================ Desktop ab 1024px */
@media (min-width: 1024px) {
.lvev-e1-bg { height: 860px; }
/* Server-Overlay r3-evaluation.css, Befund R3-evaluation-02 (tabu, nur
gelesen): der Lichtbogen war zu grau, zu breit und lief 157px zu weit
nach unten aus. An echten Referenzausschnitten pipettiert (PIL, 11x11
gemittelt), z. B. Rand x=11 y=600 SOLL rgb(239,248,255) IST vorher
rgb(139,177,210). Bricht im SOLL hart bei CSS y=696 ab (860px hoch,
Schnittkante 696/860 = 80,9%), IST lief bis y=853. Diese Korrektur war
bereits live ausgeliefert, aber nie in dieses Fragment zurueckgeflossen
(ARBEITSGRUNDLAGE.md 5.0). Kaans Bildtextur bleibt unterste Ebene. */
/* Die doppelte Stammklasse schlägt auch den später geladenen Legacy-Override,
der sonst wieder die alte Ein-Pixel-Schnittmaske einsetzt. */
.lvf-page .lvev-e1.lvev-e1 .lvev-e1-bg.lvev-e1-bg {
background-image:
radial-gradient(64% 26% at 0% 78%, rgba(248, 252, 255, 1) 0%, rgba(238, 248, 254, 1) 22%, rgba(196, 228, 246, .96) 36%, rgba(120, 190, 220, .88) 50%, rgba(46, 136, 182, .7) 70%, rgba(10, 70, 110, .32) 88%, rgba(4, 40, 64, 0) 100%),
radial-gradient(64% 26% at 100% 78%, rgba(248, 252, 255, 1) 0%, rgba(238, 248, 254, 1) 22%, rgba(196, 228, 246, .96) 36%, rgba(120, 190, 220, .88) 50%, rgba(46, 136, 182, .7) 70%, rgba(10, 70, 110, .32) 88%, rgba(4, 40, 64, 0) 100%),
radial-gradient(26% 58% at 0% 72%, rgba(246, 251, 255, 1) 0%, rgba(238, 248, 254, 1) 16%, rgba(170, 224, 248, .99) 26%, rgba(40, 180, 224, .96) 34%, rgba(14, 150, 200, .94) 44%, rgba(6, 104, 158, .9) 55%, rgba(2, 74, 116, .84) 64%, rgba(1, 48, 76, .62) 78%, rgba(1, 26, 42, .34) 92%, rgba(0, 14, 24, 0) 100%),
radial-gradient(26% 58% at 100% 72%, rgba(246, 251, 255, 1) 0%, rgba(238, 248, 254, 1) 16%, rgba(170, 224, 248, .99) 26%, rgba(40, 180, 224, .96) 34%, rgba(14, 150, 200, .94) 44%, rgba(6, 104, 158, .9) 55%, rgba(2, 74, 116, .84) 64%, rgba(1, 48, 76, .62) 78%, rgba(1, 26, 42, .34) 92%, rgba(0, 14, 24, 0) 100%),
radial-gradient(72% 27% at 50% 84%, rgba(8, 112, 170, .92) 0%, rgba(2, 72, 114, .5) 52%, rgba(0, 50, 80, 0) 86%),
linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .66) 30%, rgba(0, 0, 0, .2) 58%, rgba(0, 0, 0, 0) 80%),
radial-gradient(46% 46% at 50% 44%, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .34) 55%, rgba(0, 0, 0, 0) 100%),
url('https://lvlup2.tivaosagencytempdomains.de/wp-content/uploads/2026/08/lvlup-35beef64a9.webp');
-webkit-mask-image: linear-gradient(180deg, #000000 0%, #000000 64%, rgba(0, 0, 0, 0.72) 74%, rgba(0, 0, 0, 0.32) 86%, transparent 100%);
mask-image: linear-gradient(180deg, #000000 0%, #000000 64%, rgba(0, 0, 0, 0.72) 74%, rgba(0, 0, 0, 0.32) 86%, transparent 100%);
}
/* Der weiche Zusatzschein darf nicht unter die Schnittkante laufen.
Element 900px hoch, beginnt 120px ueber der Sektion -> 816/900 = 90,7%. */
.lvf-page .lvev-e1.lvev-e1 .lvev-e1-glow.lvev-e1-glow {
opacity: .34;
-webkit-mask-image: linear-gradient(180deg, #000000 0%, #000000 70%, rgba(0, 0, 0, 0.68) 80%, rgba(0, 0, 0, 0.25) 91%, transparent 100%);
mask-image: linear-gradient(180deg, #000000 0%, #000000 70%, rgba(0, 0, 0, 0.68) 80%, rgba(0, 0, 0, 0.25) 91%, transparent 100%);
}
.lvev-e1-panel { display: block; }
.lvev-e1-btn {
min-height: 46px;
}
/* --- Kennzahl-Chips: Fuellung, Rand und Schatten nach Figma ---------------
Befund 11.08.: die Chips waren deckend statt durchscheinend und trugen
oben einen hellblauen Balken, den der Entwurf nicht hat.
Fuellung IST rgb(14,44,64) bis (17,38,53) SOLL rgb(1,4,7) beim
Chip "100%" bis (2,54,84) beim Chip "5%" - der Sollwert
folgt also dem Hintergrund, der Chip ist durchsichtig.
Ursache deckende Grundfarbe #0a1420 plus blauer 22%-Verlauf.
Figma (Frame 2147224199..204) hat nur zwei Fuellungen: unten ein
Blauverlauf im Mischmodus COLOR (faerbt den Hintergrund um, hebt ihn
nicht auf) und darueber Schwarz von Deckkraft 0,896 oben links nach
0,226 unten rechts. Der Verlaufswinkel ergibt sich aus den Figma-Griffen
(-0.136,-0.169)->(1.163,1.475) im Chipformat zu 155 Grad, IST waren
142 Grad. Die COLOR-Ebene laesst sich ohne Mischmodus nicht nachbauen;
sie wuerde nur das Restrot des Hintergrunds tilgen, das hier bei 1 bis 8
liegt, deshalb bleibt sie weg. */
.lvev-e1 .lvev-e1-chip {
background:
linear-gradient(155deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.23) 100%);
/* Figma Group 2147224237: fuenf Schatten mit Deckkraft 0,05 / 0,04 /
0,03 / 0,01 / 0. IST lagen 0,18 und 0,12 an, also gut dreifach. */
box-shadow:
2px 5px 12px rgba(0, 0, 0, 0.05),
10px 19px 22px rgba(0, 0, 0, 0.04),
22px 44px 30px rgba(0, 0, 0, 0.03),
40px 78px 35px rgba(0, 0, 0, 0.01);
}
/* Rand: Figma-Stroke mit Deckkraft 0,5, Griffe (-0.247,-0.488)->(1.291,1.613)
ergeben 157 Grad; die Figma-Stops t=0/0,264/0,606/1 liegen im CSS-Fenster
bei -39% / 11% / 74% / 148%. IST war 180 Grad mit vollem #00aaff bei 0%,
daher der durchgehende hellblaue Balken an der Oberkante. */
.lvev-e1 .lvev-e1-chip::before {
background: linear-gradient(157deg,
rgba(0, 170, 255, 0.5) -39%,
rgba(0, 65, 103, 0) 11%,
rgba(0, 94, 141, 0.5) 74%,
rgba(0, 51, 88, 0) 148%);
}
}
/* ================================================================ Desktop breit (ab 1400px)
Genug Raum fuer die frei schwebenden Chips nach Figma-Koordinaten */
@media (min-width: 1400px) {
.lvev-e1-chips {
position: absolute;
inset: 0;
margin-top: 0;
padding-inline: 0;
display: block;
pointer-events: none;
z-index: 1;
}
.lvev-e1-chip {
position: absolute;
margin: 0;
}
/* Figma-Koordinaten (Frame 1760). Rotationswinkel aus den echten Node-Werten
(figma/bands-eval/e1-hero.json, Group 2147224237, Frames 2147224199-204):
CSS-Grad = -Figma-Radiant * 180/PI (Vorzeichen gedreht, weil Figmas
rotation-Feld im mathematischen Gegenuhrzeigersinn zaehlt, CSS im
Uhrzeigersinn). Vorher standen grob geschaetzte Werte (-4/-8/-5/3/-4/7),
drei davon mit falschem Vorzeichen. Gegengeprueft an vier Einzel-Crops aus
00003282-PHOTO-2026-08-12-22-32-04.jpg (100%, $1M, 5%, 10%, Five, 24/7). */
.lvev-e1-chip--split { left: 12.78%; top: 193px; transform: rotate(-10.5deg); }
.lvev-e1-chip--funding { left: 10%; top: 387px; transform: rotate(10.84deg); }
.lvev-e1-chip--drawdown { left: 18.4%; top: 520px; transform: rotate(2.59deg); }
.lvev-e1-chip--payout { left: 77.78%; top: 197px; transform: rotate(6.84deg); }
.lvev-e1-chip--days { left: 72.67%; top: 513px; transform: rotate(-1.64deg); }
.lvev-e1-chip--support { left: 80.4%; top: 374px; transform: rotate(-9.83deg); }
}
/* ================================================================ Mobile Feinschliff */
@media (max-width: 767px) {
/* Umbruch entfaellt, die Headline fliesst */
.lvev-e1-title-br { display: none; }
/* Blauer Schein als weiche Rand-Vignette um die Sektion */
.lvev-e1-glow {
width: 170%;
height: 100%;
top: 0;
opacity: 1;
filter: blur(50px);
background:
radial-gradient(70% 12% at 50% 2%, rgba(0, 162, 255, 0.7) 0%, rgba(0, 162, 255, 0) 78%),
radial-gradient(42% 18% at 4% 20%, rgba(0, 162, 255, 0.6) 0%, rgba(0, 162, 255, 0) 75%),
radial-gradient(42% 18% at 96% 20%, rgba(0, 162, 255, 0.6) 0%, rgba(0, 162, 255, 0) 75%),
radial-gradient(50% 22% at 3% 70%, rgba(0, 162, 255, 0.5) 0%, rgba(0, 162, 255, 0) 75%),
radial-gradient(50% 22% at 97% 70%, rgba(0, 162, 255, 0.5) 0%, rgba(0, 162, 255, 0) 75%);
}
}
/* Touch-Ziele: die Buttons sind auf Mobile ohnehin >= 48px hoch. */
/* ===========================================================================
Laufband im Kopf: die Animation fehlte, 12.08.2026
Live gemessen stand das Band still: animationName "none", Position ueber
vier Messungen in 900 ms unveraendert. Die Klonstruktur ist vollstaendig
vorhanden (zwei Spuren, Spur A 22 Kacheln a 88 px, Spur B 23 Kacheln, per
`left: -44px` um eine halbe Kachel versetzt, aria-hidden, pointer-events
aus) - es soll offensichtlich laufen, nur die Animation wurde vergessen.
968 px sind 11 volle Kacheln, damit ist der Rundlauf nahtlos. Die feste
Pixelstrecke gilt fuer beide Spuren, deshalb bleiben sie synchron; eine
Rechnung ueber -50 % wuerde bei Spur B (ungerade Kachelzahl) am Loop-Punkt
um eine halbe Kachel springen.
968 / 24 s = 40,3 px/s. Das Videoband auf home laeuft live mit 40,3 px/s,
das Zertifikatsband mit 56,7 px/s. Die Seite bekommt damit dieselbe Ruhe
wie ihr Vorbild.
=========================================================================== */
@media (min-width: 1400px) {
.lvev-e1 .lvev-r3-marquee-track {
animation: lvev-r3-marquee-scroll 24s linear infinite;
will-change: transform;
}
}
@keyframes lvev-r3-marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-968px); }
}
/* == e2-pricing == */
/* == e2 Pricing der Evaluation-Seite ("Choose Your Evaluation") ==
Desktop exakt nach Figma (Frame 1760, Band y=860..2190, Karten x=261..1499),
Tablet interpoliert, Mobile (<768px, kein eigenes Design) sauber gestapelt.
Bauweise nach s04 der Startseite, Werte aus specs-eval/e2-pricing.txt. */
.lvev-e2 {
/* --- Sektion --- */
--lvev-e2-pt: 8px;
--lvev-e2-pb: 48px;
/* --- Kopf --- */
--lvev-e2-title-fs: 65px;
--lvev-e2-title-lh: 60px;
--lvev-e2-sub-fs: 18px;
/* 26 statt 12: im Entwurf endet der Ueberschriftkasten bei y 909 und die
Unterzeile beginnt bei 935. Die fehlenden 14 px gab es schon vor der
Zeilenhoehen-Korrektur, sie fielen nur nicht auf, solange die Zeile
16 px zu hoch war. Der Mobilzweig setzt weiter unten eigene 14 px. */
--lvev-e2-sub-mt: 26px;
/* --- Umschalter --- */
--lvev-e2-toggle-mt: 82px;
--lvev-e2-tab-fs: 16px;
/* --- Karten --- */
--lvev-e2-cards-mt: 25px;
--lvev-e2-cards-gap: 18px;
--lvev-e2-card-r: 30px;
--lvev-e2-in-r: 25px;
/* Unten 27 statt 22: die 5 px, die der Trenner weiter unten abgibt, werden
hier wieder angehaengt, damit die Karte gleich hoch bleibt. Ohne das
verkuerzt sich die Seite von 9809 auf 9804 und saemtliche Nahtwerte
der Seite muessten neu bestimmt werden. Siehe --lvev-e2-sep-mt. */
--lvev-e2-in-pad: 25px 26px 27px;
--lvev-e2-kind-fs: 14px;
--lvev-e2-size-fs: 47px;
--lvev-e2-size-lh: 58px;
--lvev-e2-size-mt: 20px;
/* --- Preisbox --- */
--lvev-e2-plan-mt: 6px;
--lvev-e2-price-fs: 26px;
--lvev-e2-pill-fs: 8px;
--lvev-e2-chip-fs: 12px;
/* --- Spec-Zeilen --- */
/* 20 statt 25: der Tarifkasten darueber ist noch immer zu hoch, und alles
unter ihm erbt den Fehler. Am Bild gemessen, Karte 2 bei 1760 px, Lage
gegen evaluation-aus-vollbild.png (Kartenoberkante IST 1127 / SOLL 1128,
also selbe Hoehe, der Bezug stimmt):
Trenner IST 1428 SOLL 1421 +7
Merkmalszeile 1 IST 1464 SOLL 1460 +4 (Mittel ueber 8 Zeilen +4,8)
Merkmalszeile 8 IST 1704 SOLL 1698 +6
Knopf "Select" IST 1758 SOLL 1751 +7
Die Abstaende INNERHALB der Merkmalsliste stimmen (34-px-Raster hier wie
dort), es ist ein Versatz des ganzen Blocks. 5 px nach oben bringt den
Trenner auf +2, die Zeilen auf 0 und den Knopf auf +2.
Die 5 px werden in --lvev-e2-in-pad unten wieder angehaengt: die Karte
ist ohnehin 8 px zu hoch (Unterkante IST 1848 / SOLL 1840), der Ueber-
schuss bleibt also dort, wo er schon war, statt neu zu entstehen.
Sauberer waere, die 5 px ersatzlos zu streichen: die Karte kaeme von +8
auf +3 und die Seite von 9809 auf 9804, bei Soll 9802. Das aendert aber
die Seitenhoehe und damit die Bezugsgroesse aller Nahtmessungen. */
--lvev-e2-sep-mt: 20px;
--lvev-e2-sep-fs: 9px;
--lvev-e2-specs-mt: 24px;
/* 18 statt 19: die acht Merkmalszeilen stehen im Entwurf im 34-px-Raster
(Soll y 1458..1696), live im 35er. Zeilenhoehe 16 + Abstand 18 = 34. */
--lvev-e2-specs-gap: 18px;
--lvev-e2-row-fs: 12px;
--lvev-e2-row-lh: 15px;
--lvev-e2-row-ico: 16px;
/* --- CTA / Notiz / Fuss --- */
--lvev-e2-cta-mt: 40px;
--lvev-e2-cta-fs: 16px;
--lvev-e2-note-fs: 11px;
--lvev-e2-note-mt: 24px;
--lvev-e2-foot-mt: 250px;
--lvev-e2-build-fs: 14px;
/* --- wiederkehrende Verlaeufe --- */
--lvev-e2-grad-blue: linear-gradient(180deg, #8cd5ff 0%, #12a9ff 100%);
--lvev-e2-grad-soft: linear-gradient(180deg, #afd4e8 0%, #72bee8 100%);
--lvev-e2-grad-head: linear-gradient(141deg, rgba(255, 255, 255, 0.7) 0%, #ffffff 50%, rgba(255, 255, 255, 0.7) 100%);
--lvev-e2-grad-chip: linear-gradient(168deg, #8ed6ff 0%, #00a2ff 100%);
--lvev-e2-hair: rgba(20, 20, 20, 1);
position: relative;
isolation: isolate;
overflow: clip;
padding-top: var(--lvev-e2-pt);
padding-bottom: var(--lvev-e2-pb);
}
.lvev-e2 .lvev-e2-inner { position: relative; z-index: 1; }
.lvev-e2 .lvev-e2-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* ---------- Deko: weiche Glows, Glas-Rauten, Streak unten ---------- */
.lvev-e2 .lvev-e2-glow {
position: absolute;
z-index: 0;
border-radius: 50%;
pointer-events: none;
}
/* Rundgang 13.08.2026, Fundstelle 3 (R3-evaluation-04 "e2 muss schwarz
sein" in server-stand-20260810/lvlup-fixes/r3-evaluation.css, tabu, nur
gelesen): Messung SOLL von CSS y=700 bis y=1978 an drei Spalten (x=11,
880, 1752): ueberall rgb(0,0,0) bzw. rgb(1,1,1). Kein Glow, keine
Blaustichigkeit, kein heller Streifen unter den Karten. IST vorher:
Rand y=1000 (26,44,66), Fussbereich y=1900 (24,58,84). Die Glas-Rauten
(.lvev-e2-shard) bleiben, sie sind im SOLL als sehr dunkle Flaechen
erkennbar und sind nicht Teil dieses Befunds. */
.lvev-e2 .lvev-e2-glow--l {
top: -180px;
left: -14%;
width: 860px;
height: 860px;
background: none;
filter: blur(70px);
}
.lvev-e2 .lvev-e2-glow--r {
top: -140px;
right: -16%;
width: 940px;
height: 940px;
background: none;
filter: blur(80px);
}
/* horizontaler Lichtstreifen im Fussbereich (Band y~1110..1260): im SOLL
nicht vorhanden, siehe Fundstelle 3 oben. Die untenstehende
Mobil-Anpassung (max-width:767px, weiter unten in dieser Datei) setzt nur
noch Position/Filter auf ein unsichtbares Element und ist damit inert;
unangetastet gelassen, um den Diff klein zu halten. */
.lvev-e2::before {
content: "";
position: absolute;
left: 50%;
bottom: 30px;
z-index: 0;
width: 150vw;
height: 300px;
transform: translateX(-50%);
display: none;
pointer-events: none;
}
.lvev-e2 .lvev-e2-shard {
position: absolute;
z-index: 0;
border: 0.5px solid rgba(140, 213, 255, 0.05);
border-radius: 72px;
background: linear-gradient(281deg, rgba(140, 213, 255, 0.045) 0%, rgba(140, 213, 255, 0) 100%);
transform: rotate(45deg);
pointer-events: none;
}
.lvev-e2 .lvev-e2-shard--l { top: 420px; left: -260px; width: 700px; height: 740px; }
.lvev-e2 .lvev-e2-shard--r { top: 380px; right: -280px; width: 720px; height: 760px; }
/* ---------- Kopfbereich ---------- */
.lvev-e2 .lvev-e2-head { text-align: center; }
.lvev-e2 .lvev-e2-title {
font-size: clamp(38px, 4.5vw + 8px, 65px);
font-weight: 500;
line-height: 0.93;
letter-spacing: -0.02em;
text-wrap: balance;
background-image: var(--lvev-e2-grad-head);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.lvev-e2 .lvev-e2-title-hl {
background-image: var(--lvev-e2-grad-blue);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.lvev-e2 .lvev-e2-sub {
max-width: 671px;
margin: var(--lvev-e2-sub-mt) auto 0;
font-size: clamp(15px, 1.2vw + 6px, 18px);
font-weight: 425;
line-height: 24px;
letter-spacing: 0.03em;
color: rgba(255, 255, 255, 0.85);
}
/* ---------- Umschalter Lvlup / Starter ---------- */
.lvev-e2 .lvev-e2-toggle {
display: flex;
align-items: center;
width: -moz-fit-content;
width: fit-content;
margin: var(--lvev-e2-toggle-mt) auto 0;
padding: 10px 8px 10px 10px;
border: 0.6px solid transparent;
border-radius: 14px;
background:
linear-gradient(0deg, rgba(0, 24, 38, 0) 0%, #001826 100%) padding-box,
linear-gradient(rgba(0, 162, 255, 0.12), rgba(0, 162, 255, 0.12)) padding-box,
linear-gradient(#020a10, #020a10) padding-box,
/* Befund 12.08. (00003260, "reduce the Stroke"): der Sub-Pixel-Rand aus
#35aef4 wird bei 0,6px Randbreite auf einen vollen Geraetepixel
aufgerundet und damit voll deckend gemalt statt weich. Gemessen an
IST (53,173,243) auf dem Peak bei x~77% - praktisch die reine
#35aef4-Flaeche, Deckkraft 4-6x zu hoch gegen Figma. Peak-Alpha auf
0,2 gesenkt, damit der Rand wieder "praktisch unsichtbar" bleibt. */
linear-gradient(100deg, rgba(52, 176, 248, 0) 50%, rgba(53, 174, 244, 0.2) 75%, rgba(49, 169, 238, 0) 100%) border-box;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(0, 0, 0, 0.25);
}
.lvev-e2 .lvev-e2-tab {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 196px;
height: 27px;
border-radius: 134px;
color: #ffffff;
font-size: var(--lvev-e2-tab-fs);
font-weight: 500;
line-height: 20px;
transition: color 0.18s ease, background 0.18s ease;
}
/* Touch-Ziel >= 44px ohne Optik-Aenderung */
.lvev-e2 .lvev-e2-tab::before { content: ""; position: absolute; inset: -9px -2px; }
.lvev-e2 .lvev-e2-tab:hover { color: #cfeaff; }
.lvev-e2 .lvev-e2-tab.is-active {
width: 200px;
height: 38px;
border: 1.34px solid rgba(255, 255, 255, 0.06);
border-radius: 7px;
/* Rundgang 13.08.2026, Fundstelle 1 (R3B-evaluation-03 in
server-stand-20260810/lvlup-fixes/r3b-evaluation.css, tabu, nur
gelesen): der 2deg-Abdunkler linear-gradient(rgba(0,0,0,.6)->0) und der
grosse Innenschein "inset 0 1px 24px #5bbce8" dunkeln den aktiven
Zustand gegen das Mockup ab. Messreihe Spalte x=705 (aktiver Umschalter
"Lvlup Accounts", SOLL-y 1050..1088 / IST-y 1053..1091):
oben SOLL (184,233,251) IST (123,196,233)
Mitte SOLL ( 95,202,255) IST ( 66,144,188)
unten SOLL ( 35,208,254) IST ( 46,125,164)
Ersetzt durch den am Schnipsel direkt pipettierten Verlauf (11 Stufen),
Abdunkler und der 24px-Schein entfallen ersatzlos. Der 0-Offset des
kleinen Glanzes darunter ist unsere eigene, spaetere Korrektur (siehe
Kommentar zur Cyanlinie oben in der Historie) und war nicht Teil dieses
Befunds, deshalb unangetastet gelassen. */
background: linear-gradient(180deg,
rgb(190, 236, 252) 0%,
rgb(168, 231, 255) 8%,
rgb(146, 224, 254) 18%,
rgb(124, 214, 254) 29%,
rgb(103, 205, 255) 40%,
rgb(88, 198, 255) 50%,
rgb(74, 194, 254) 61%,
rgb(62, 193, 255) 71%,
rgb(50, 196, 255) 82%,
rgb(37, 202, 255) 92%,
rgb(33, 210, 254) 100%);
box-shadow:
0 8px 12px -1px rgba(0, 0, 0, 0.64),
inset 0 0 3px -1px rgba(255, 255, 255, 0.3);
color: #000000;
font-weight: 550;
}
.lvev-e2 .lvev-e2-tab.is-active::before { inset: -3px -2px; }
.lvev-e2 .lvev-e2-tab:focus-visible { outline: 2px solid #8cd5ff; outline-offset: 3px; }
/* ---------- Kartenraster ---------- */
.lvev-e2 .lvev-e2-cards {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--lvev-e2-cards-gap);
margin-top: var(--lvev-e2-cards-mt);
}
.lvev-e2 .lvev-e2-cards[hidden] { display: none; }
/* ---------- Karte ---------- */
.lvev-e2 .lvev-e2-card {
display: flex;
flex-direction: column;
padding: 4px 4px 5px;
border: 0.78px solid rgba(255, 255, 255, 0.04);
border-radius: var(--lvev-e2-card-r);
background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 53%, rgba(16, 25, 33, 0.4) 100%);
}
.lvev-e2 .lvev-e2-card-in {
position: relative;
display: flex;
flex: 1;
flex-direction: column;
overflow: hidden;
padding: var(--lvev-e2-in-pad);
border: 0.78px solid transparent;
border-radius: var(--lvev-e2-in-r);
background:
linear-gradient(rgba(64, 188, 254, 0.01), rgba(64, 188, 254, 0.01)) padding-box,
linear-gradient(180deg, #04070a 0%, #010203 30%, #010203 100%) padding-box,
/* Befund 13.08. (Muster A, Rundgang): der Rand war ein Verlauf ueber die
VOLLE Kartenhoehe (0,9 auf 0 ueber 100%), Figma hat nur einen kurzen
Lichtsaum oben, der Rest der Kante ist praktisch unsichtbar. Gemessen
an referenz/soll-evaluation/e2-pricing.png gegen die lokale Vorschau,
Kartenrand x~265, Karte 1, Blaukanal am Spitzenwert (y~300, 100 %
relativ) bis zum Verschwinden (y~500-530, 0 % relativ):
SOLL faellt von 93 auf 12 zwischen y 280 und 500, linear
extrapoliert auf 0 bei y~533, das sind rund 35 % der
713 px hohen Karte.
IST fiel vorher erst bei y~610 noch auf 44 (Verlauf lief ueber
die vollen 713 px), sichtbar blau bis fast zum Kartenfuss.
Stopp deshalb von 100 % auf 35 % gesenkt, danach bleibt die Farbe
(letzter Stop) automatisch transparent. Naeherung wie beim
Pfeil-Wasserzeichen, da die genaue Verlaufsgriff-Position in Figma
wegen des Ratenlimits nicht nachlesbar war. */
linear-gradient(180deg, rgba(0, 90, 141, 0.9) 0%, rgba(0, 91, 143, 0) 35%) border-box;
box-shadow: 0 5px 9px rgba(0, 0, 0, 0.2);
-webkit-backdrop-filter: blur(26px);
backdrop-filter: blur(26px);
}
/* Haarlinie oben (RECTANGLE "Line") */
.lvev-e2 .lvev-e2-card-in::before {
content: "";
position: absolute;
top: 0;
left: 8%;
right: 8%;
height: 2px;
border-radius: 23px;
background: linear-gradient(90deg, rgba(0, 96, 151, 0) 0%, #005f96 50%, rgba(0, 95, 148, 0) 100%);
pointer-events: none;
}
/* Befund 12.08. (Kundenliste, Muster D): auf jeder der vier Preiskarten fehlt
das grosse verblasste Pfeil-Wasserzeichen oben rechts und unten links (bei
der Preisbox). Figma-Beleg: zwei "Vector"-Knoten je Karte, box(447,1149,
100,111) und box(252,1322,106,116) relativ zum Kartenrahmen 296x722,
fill=linear-gradient(303deg, #ffffff 0% -> transparent 100%) @0.05.
Die Pfadgeometrie selbst liess sich wegen Figma-Ratenlimit (429) nicht
laden (siehe Bericht) - Position/Groesse/Deckkraft sind Sollwerte, die
Kontur ist ein weicher Blob als Naeherung, kein exakter Pfeilumriss. */
.lvev-e2 .lvev-e2-card-mark {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(22% 18% at 80% 11%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%),
radial-gradient(24% 18% at 15% 35%, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0) 100%);
}
/* weiche Kuppel oben in jeder Karte. Rundgang 13.08.2026, Fundstelle 3
(R3-evaluation-04 "e2 muss schwarz sein", wie oben, tabu, nur gelesen). */
.lvev-e2 .lvev-e2-card-glow {
position: absolute;
top: -110px;
left: 50%;
width: 165%;
height: 222px;
transform: translateX(-50%);
border-radius: 50%;
background: none;
filter: blur(28px);
pointer-events: none;
}
/* blauer Schimmer unten, nur auf der Pop-Karte. Fundstelle 3, wie oben. */
.lvev-e2 .lvev-e2-card--pop .lvev-e2-card-in::after {
content: "";
position: absolute;
top: 58%;
left: 50%;
width: 176%;
height: 44%;
transform: translateX(-50%);
background: none;
filter: blur(38px);
pointer-events: none;
}
.lvev-e2 .lvev-e2-card-head,
.lvev-e2 .lvev-e2-plan,
.lvev-e2 .lvev-e2-sep,
.lvev-e2 .lvev-e2-specs,
.lvev-e2 .lvev-e2-cta,
.lvev-e2 .lvev-e2-card-note { position: relative; z-index: 1; }
/* ---------- Kartenkopf ---------- */
.lvev-e2 .lvev-e2-card-kind {
font-size: var(--lvev-e2-kind-fs);
font-weight: 400;
line-height: 20px;
letter-spacing: 0.02em;
color: rgba(246, 248, 250, 0.5);
}
.lvev-e2 .lvev-e2-card-size {
margin-top: var(--lvev-e2-size-mt);
font-size: var(--lvev-e2-size-fs);
font-weight: 523;
line-height: var(--lvev-e2-size-lh);
letter-spacing: -0.03em;
color: #ffffff;
}
.lvev-e2 .lvev-e2-card--pop .lvev-e2-card-size {
font-weight: 543;
background-image: var(--lvev-e2-grad-blue);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* "Most Popular"-Badge (oben rechts in der Pop-Karte) */
.lvev-e2 .lvev-e2-pop {
position: absolute;
top: 20px;
right: 22px;
display: inline-flex;
align-items: center;
gap: 5px;
height: 18px;
padding: 0 10px 0 7px;
border: 0.83px solid transparent;
border-radius: 83px;
/* Saum-Verlauf statt --lvev-e2-grad-blue plus inset-Schatten, 11.08.2026.
Der Blendmodus COLOR_DODGE aus Figma steckt jetzt im Verlauf, deshalb
faellt "inset 0 1px 6px #5bbce8" weg. Der weisse Glanz darueber bleibt. */
background:
var(--lvf-grad-blue-btn) padding-box,
linear-gradient(180deg, #999999 0%, rgba(255, 255, 255, 0) 100%) border-box;
box-shadow:
2px 5px 10px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(0, 0, 0, 0.25),
inset 0 2px 8px -1px rgba(255, 255, 255, 0.3);
color: #000000;
font-size: 9px;
font-weight: 565;
line-height: 1;
letter-spacing: 0.01em;
white-space: nowrap;
}
.lvev-e2 .lvev-e2-pop-ico { width: 10px; height: 10px; flex: none; }
/* Rundgang 13.08.2026, Fundstelle 4 (R3B-evaluation-05, tabu, nur
gelesen): fragment.html setzt am Pfad fill="url(#lvev-e2-g-white)"
(Praesentationsattribut, schwaecher als jede CSS-Regel), das Mockup zeigt
aber einen SCHWARZEN Stern auf der hellblauen Pille. */
.lvev-e2 .lvev-e2-pop .lvev-e2-pop-ico,
.lvev-e2 .lvev-e2-pop .lvev-e2-pop-ico path,
.lvev-e2 .lvev-e2-pop .lvev-e2-pop-ico polygon {
fill: #000000;
}
/* ---------- Preisbox (Chip links, beide Optionen rechts) ---------- */
.lvev-e2 .lvev-e2-plan {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 12px;
align-content: center;
min-height: 141px;
margin-top: var(--lvev-e2-plan-mt);
padding: 14px 12px;
border: 0.4px solid rgba(255, 255, 255, 0.02);
border-radius: 6px;
background:
linear-gradient(rgba(0, 162, 255, 0.12), rgba(0, 162, 255, 0.12)),
linear-gradient(0deg, rgba(0, 24, 38, 0) 0%, #001826 100%),
linear-gradient(221deg, rgba(0, 0, 0, 0.34) 0%, #000000 100%);
box-shadow: 0 5px 12px -4px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(0, 0, 0, 0.17);
}
.lvev-e2 .lvev-e2-chip {
grid-row: 1 / span 2;
align-self: start;
display: inline-flex;
align-items: center;
gap: 5px;
/* 2 statt 13: der Chip stand 11 px zu tief. In allen VIER Karten gleich
gemessen, bei 1760 px gegen evaluation-aus-vollbild.png, je Karte in der
Spalte des Punktes bzw. rechts daneben:
Scheibe IST 1285..1302 SOLL 1274..1291 +11 (beide 18 px hoch)
Text IST 1288..1298 SOLL 1279..1286 + 9
Die Scheibe ist also nicht zu gross und nicht zu klein, sie sitzt zu tief.
Der Chip haengt mit align-self:start am Anfang der Tarifzeilen und ist
mit 18 px viel niedriger als die beiden Zeilen daneben, deshalb aendert
sein Aussenabstand die Hoehe des Tarifkastens nicht (min-height 141px). */
margin-top: 2px;
color: rgba(246, 248, 250, 0.9);
font-size: var(--lvev-e2-chip-fs);
font-weight: 500;
line-height: 17px;
letter-spacing: 0.02em;
white-space: nowrap;
}
.lvev-e2 .lvev-e2-chip-t {
background-image: var(--lvev-e2-grad-chip);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.lvev-e2 .lvev-e2-chip-dot {
position: relative;
flex: none;
width: 18px;
height: 18px;
border-radius: 36px;
background: rgba(140, 213, 255, 0.22);
box-shadow: inset 0 0 0 0.4px rgba(255, 255, 255, 0.25), 0 0 0 3px rgba(0, 0, 0, 0.16);
transition: background 0.18s ease, box-shadow 0.18s ease;
}
.lvev-e2 .lvev-e2-chip.is-selected .lvev-e2-chip-dot {
background:
radial-gradient(circle at 50% 50%, #ffffff 0%, rgba(255, 255, 255, 0) 42%),
linear-gradient(180deg, #8cd5ff 0%, #00a2ff 100%);
box-shadow:
6px 2px 9px rgba(0, 0, 0, 0.36),
0 0 0 1px rgba(0, 0, 0, 0.25),
inset 1px 1px 5px rgba(255, 255, 255, 0.35),
0 0 0 3px rgba(0, 0, 0, 0.16),
inset 0 1px 3px #40baff;
}
/* Befund 12.08. ("Auswahlpunkt der gewaehlten Preiskarte ist in Figma ein
blauer Kreis MIT Lvlup-Bildmarke und Glow, bei uns nur ein einfarbiger
Punkt"): der Glow/die Schatten waren schon exakt nach Figma (Frame
"Processor"), die kleine Bildmarke in der Mitte fehlte. Naeherung des
Lvlup-Pfeils als Mini-Inline-SVG - die echte Innengeometrie (Frame
2121452833, 13x13) liess sich wegen Figma-Ratenlimit nicht laden. */
.lvev-e2 .lvev-e2-chip-dot-mark {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.18s ease;
}
.lvev-e2 .lvev-e2-chip.is-selected .lvev-e2-chip-dot-mark { opacity: 0.85; }
.lvev-e2 .lvev-e2-chip:focus-visible { outline: 2px solid #8cd5ff; outline-offset: 3px; border-radius: 4px; }
.lvev-e2 .lvev-e2-opt { text-align: center; }
/* Kein Abstand zwischen den beiden Tarifzeilen: im Entwurf sitzt "$117/mo"
direkt unter dem Kaestchen von "Option 2", die Mitten der beiden Preise
liegen 57 px auseinander, live waren es 70. Genau diese 13 px sind der
Grund, warum der Tarifkasten 157 statt 141 px hoch ist. */
.lvev-e2 .lvev-e2-opt + .lvev-e2-opt { margin-top: 0; }
.lvev-e2 .lvev-e2-opt-price {
color: #ffffff;
font-size: var(--lvev-e2-price-fs);
font-weight: 500;
line-height: 32px;
letter-spacing: 0.03em;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.lvev-e2 .lvev-e2-opt-note {
display: inline-block;
margin-top: 2px;
padding: 5px 12px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.4);
color: #ffffff;
font-size: var(--lvev-e2-pill-fs);
font-weight: 300;
line-height: 10px;
letter-spacing: 0.05em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.25);
white-space: nowrap;
}
/* Muster C (Zweifarbigkeit), Breitenlauf 13.08.2026: "Option 2:"/"Option 1:"
und der Pfeil unter der Karte sind in Figma farbig abgesetzt (Knoten
227:990 ff., 227:1011 ff.), bei uns lief der ganze Satz einfarbig weiss.
Gleicher Verlaufsblock wie .lvev-e2-title-hl, hier lokal benannt, weil er
auch auf .lvev-e2-card-note angewendet wird, wo die Textfarbe abweicht. */
.lvev-e2 .lvev-e2-opt-hl {
background-image: var(--lvev-e2-grad-blue);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* ---------- "What's Included"-Trenner ---------- */
.lvev-e2 .lvev-e2-sep {
display: flex;
align-items: center;
gap: 9px;
height: 13px;
margin-top: var(--lvev-e2-sep-mt);
}
.lvev-e2 .lvev-e2-sep-l {
flex: 1;
height: 0;
border-top: 1.17px solid var(--lvev-e2-hair);
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.11);
}
.lvev-e2 .lvev-e2-sep-t {
flex: none;
font-size: var(--lvev-e2-sep-fs);
font-weight: 500;
line-height: 1;
letter-spacing: 0.02em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.3);
}
/* ---------- Kennzahlen ---------- */
.lvev-e2 .lvev-e2-specs {
display: flex;
flex-direction: column;
gap: var(--lvev-e2-specs-gap);
margin-top: var(--lvev-e2-specs-mt);
}
.lvev-e2 .lvev-e2-srow {
display: flex;
align-items: center;
gap: 9px;
min-height: var(--lvev-e2-row-ico);
}
.lvev-e2 .lvev-e2-srow-ico {
flex: none;
width: var(--lvev-e2-row-ico);
height: var(--lvev-e2-row-ico);
}
.lvev-e2 .lvev-e2-srow-k {
font-size: var(--lvev-e2-row-fs);
font-weight: 400;
line-height: var(--lvev-e2-row-lh);
letter-spacing: 0.01em;
color: #ffffff;
}
.lvev-e2 .lvev-e2-srow-v {
margin-left: auto;
padding-left: 6px;
font-size: var(--lvev-e2-row-fs);
font-weight: 500;
line-height: var(--lvev-e2-row-lh);
letter-spacing: 0.01em;
text-align: right;
white-space: nowrap;
background-image: var(--lvev-e2-grad-soft);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* ---------- CTA je Karte ---------- */
.lvev-e2 .lvev-e2-cta {
display: flex;
align-items: center;
justify-content: center;
min-height: 38px;
margin-top: var(--lvev-e2-cta-mt);
/* 8 statt 9: Textzeile 22 plus zweimal 8 ergibt die 38 px des Entwurfs,
mit 9 waren es 40. */
padding: 8px 21px;
border: 0.5px solid transparent;
border-radius: 7px;
/* Rundgang 13.08.2026, Fundstelle 2 (R3B-evaluation-02, tabu, nur
gelesen): die padding-box-Fuellung war mit Alpha 0,12 halbtransparent,
dadurch schien der blaue border-box-Streifen mittig durch die Flaeche
("heller Diagonalstreifen"). Spalte x=320 durch den Knopf "Select":
SOLL (2,24,38)..(6,28,43) durchgehend, quer bei Buttonmitte x=470
stand vorher (32,130,186) statt der SOLL-Flaeche (6,28,42). Fix macht
die Fuellung deckend, der Streifen bleibt nur noch im 0,5px-Rand
sichtbar (dort zeigt ihn die Referenz auch). */
background:
linear-gradient(180deg, rgb(2, 24, 38) 0%, rgb(6, 28, 43) 100%) padding-box,
linear-gradient(100deg, rgba(52, 176, 248, 0) 30%, rgba(53, 174, 244, 0.55) 72%, rgba(49, 169, 238, 0) 100%) border-box;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(0, 0, 0, 0.25);
transition: filter 0.18s ease, transform 0.18s ease;
}
.lvev-e2 .lvev-e2-cta-t {
font-size: var(--lvev-e2-cta-fs);
font-weight: 500;
line-height: 20px;
letter-spacing: 0.04em;
background-image: var(--lvev-e2-grad-blue);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.lvev-e2 .lvev-e2-cta:hover { filter: brightness(1.25); }
.lvev-e2 .lvev-e2-cta:active { transform: translateY(1px); }
.lvev-e2 .lvev-e2-cta:focus-visible { outline: 2px solid #8cd5ff; outline-offset: 3px; }
.lvev-e2 .lvev-e2-cta--active {
border-color: rgba(255, 255, 255, 0.06);
/* Rundgang 13.08.2026, Fundstelle 1, derselbe Befund wie
.lvev-e2-tab.is-active oben (R3B-evaluation-03, tabu, nur gelesen).
Messreihe Karten-Knopf "Selected $50K", Spalte x=640:
oben SOLL (171,231,254) IST (113,190,229)
unten SOLL ( 35,207,254) IST ( 40,117,157) */
background: linear-gradient(180deg,
rgb(190, 236, 252) 0%,
rgb(168, 231, 255) 8%,
rgb(146, 224, 254) 18%,
rgb(124, 214, 254) 29%,
rgb(103, 205, 255) 40%,
rgb(88, 198, 255) 50%,
rgb(74, 194, 254) 61%,
rgb(62, 193, 255) 71%,
rgb(50, 196, 255) 82%,
rgb(37, 202, 255) 92%,
rgb(33, 210, 254) 100%) padding-box;
box-shadow:
0 8px 12px -1px rgba(0, 0, 0, 0.64),
inset 0 2px 3px -1px rgba(255, 255, 255, 0.3);
}
.lvev-e2 .lvev-e2-cta--active .lvev-e2-cta-t {
background-image: none;
color: #000000;
-webkit-text-fill-color: #000000;
font-weight: 550;
letter-spacing: 0.02em;
}
/* ---------- Notiz unter der Karte ---------- */
.lvev-e2 .lvev-e2-card-note {
margin-top: var(--lvev-e2-note-mt);
font-size: var(--lvev-e2-note-fs);
font-weight: 300;
line-height: 15px;
letter-spacing: 0.08em;
text-align: center;
color: rgba(210, 210, 210, 0.8);
}
/* ---------- "Build Your Plan"-Pille ---------- */
.lvev-e2 .lvev-e2-foot {
display: flex;
justify-content: center;
margin-top: var(--lvev-e2-foot-mt);
}
.lvev-e2 .lvev-e2-build {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 31px;
padding: 6px 18px;
border: 0.5px solid transparent;
border-radius: 78px;
/* Rundgang 13.08.2026, Fundstelle 2 (R3B-evaluation-02, tabu, nur
gelesen): gleicher Befund wie bei .lvev-e2-cta oben, hier Alpha 0,62
statt 0,12. Spalte x=800: SOLL oben (4,33,51) unten (3,25,39). */
background:
linear-gradient(180deg, rgb(4, 33, 51) 0%, rgb(3, 25, 39) 100%) padding-box,
linear-gradient(120deg, rgba(52, 176, 248, 0) 0%, rgba(53, 174, 244, 0.6) 53%, rgba(49, 169, 238, 0) 100%) border-box;
box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.1), 10px 8px 13px rgba(0, 0, 0, 0.09);
color: #ffffff;
font-size: var(--lvev-e2-build-fs);
font-weight: 400;
line-height: 17px;
letter-spacing: 0.06em;
transition: filter 0.18s ease;
}
.lvev-e2 .lvev-e2-build:hover { filter: brightness(1.3); }
.lvev-e2 .lvev-e2-build:focus-visible { outline: 2px solid #8cd5ff; outline-offset: 4px; }
/* ============================================================
Tablet 768-1023: zwei Spalten, Kartenmasse wie Desktop
============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
.lvev-e2 .lvev-e2-cards {
grid-template-columns: repeat(2, minmax(0, 296px));
justify-content: center;
}
.lvev-e2 { --lvev-e2-foot-mt: 140px; }
/* Touch-Ziele >= 44px, 13.08.2026. Bei 768-1023px gab es dafuer bisher
keine eigene Regel: die Desktop-Masse (Tab 27/38px, Chip 18px, CTA
38px, Pille 31px) liefen unveraendert durch, obwohl das iPad im
Hochformat genau in dieser Breite liegt und ein Touchgeraet ist.
Reale Boxhoehe statt unsichtbarem Ueberstand, damit es unabhaengig
von Nachbarn und Fensterrand trifft (Nachweis: das vorhandene
::before auf .lvev-e2-tab kam per elementFromPoint nur auf 42.8px,
weil der Nachbar-Tab die Ausdehnung beschneidet). */
.lvev-e2 .lvev-e2-tab { height: 44px; }
.lvev-e2 .lvev-e2-tab::before { inset: 0; }
.lvev-e2 .lvev-e2-tab.is-active { height: 44px; }
.lvev-e2 .lvev-e2-tab.is-active::before { inset: 0; }
.lvev-e2 .lvev-e2-chip { min-height: 44px; margin-top: 0; align-self: center; }
.lvev-e2 .lvev-e2-cta { min-height: 44px; }
.lvev-e2 .lvev-e2-build { min-height: 44px; padding-inline: 24px; }
}
/* ============================================================
Mobile < 768px: gestapelt, Text >= 16px, Touch >= 44px
(kein eigenes Mobile-Design vorhanden, frei abgeleitet)
============================================================ */
@media (max-width: 767px) {
.lvev-e2 {
--lvev-e2-pt: 40px;
--lvev-e2-pb: 72px;
--lvev-e2-sub-mt: 14px;
--lvev-e2-toggle-mt: 44px;
--lvev-e2-cards-mt: 32px;
--lvev-e2-cards-gap: 26px;
--lvev-e2-card-r: 22px;
--lvev-e2-in-r: 18px;
--lvev-e2-in-pad: 22px 20px 24px;
--lvev-e2-kind-fs: 16px;
--lvev-e2-size-fs: 44px;
--lvev-e2-size-lh: 52px;
--lvev-e2-size-mt: 10px;
--lvev-e2-plan-mt: 18px;
--lvev-e2-price-fs: 28px;
--lvev-e2-pill-fs: 16px;
--lvev-e2-chip-fs: 16px;
--lvev-e2-sep-mt: 30px;
--lvev-e2-sep-fs: 16px;
--lvev-e2-specs-mt: 26px;
--lvev-e2-specs-gap: 20px;
--lvev-e2-row-fs: 16px;
--lvev-e2-row-lh: 22px;
--lvev-e2-row-ico: 20px;
--lvev-e2-cta-mt: 32px;
--lvev-e2-note-fs: 16px;
--lvev-e2-note-mt: 20px;
--lvev-e2-foot-mt: 110px;
--lvev-e2-build-fs: 16px;
}
.lvev-e2::before { bottom: 10px; height: 220px; filter: blur(30px); }
.lvev-e2 .lvev-e2-shard--l { top: 300px; left: -320px; width: 480px; height: 520px; border-radius: 48px; }
.lvev-e2 .lvev-e2-shard--r { top: 700px; right: -340px; width: 500px; height: 540px; border-radius: 48px; }
.lvev-e2 .lvev-e2-sub { max-width: 340px; line-height: 1.4; }
.lvev-e2 .lvev-e2-toggle { width: 100%; max-width: 420px; padding: 6px; gap: 6px; }
.lvev-e2 .lvev-e2-tab { flex: 1; width: auto; min-width: 0; height: 44px; font-size: 16px; }
.lvev-e2 .lvev-e2-tab::before { inset: 0; }
.lvev-e2 .lvev-e2-tab.is-active { width: auto; height: 44px; border-radius: 10px; }
.lvev-e2 .lvev-e2-tab.is-active::before { inset: 0; }
/* Rundgang 13.08.2026, Fundstelle 5 (R3-evaluation-15, tabu, nur
gelesen), ausdruecklich ein Kundenwunsch: die Kontenuebersicht laeuft
mobil nicht untereinander, sondern als wischbares Band mit angeschnitten
sichtbarer naechster Karte, Vorlage im Homepage-Mobil-Mockup. Am Mockup
gemessen (512px = 390 CSS, Faktor 1,3128): Karte 1 ref-x 37..298 ->
CSS 28,2..227,0 (Breite 198,8), Luecke 20 ref = 15,2 CSS, Karte 2 ab
ref-x 318 = CSS 242 und laeuft aus dem Bild. Unsere Karte bleibt breiter
als im Mockup (laengere Merkmalsliste), Wert direkt aus dem Override
uebernommen. Hebt Kaans Grid-Regel (minmax(0,1fr)/max-width:460px) fuer
diese Breite auf. */
.lvev-e2 .lvev-e2-cards {
display: flex;
grid-template-columns: none;
max-width: none;
margin-inline: -20px;
padding-inline: 20px;
padding-block: 6px 12px;
gap: 15px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding-left: 20px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
overscroll-behavior-x: contain;
}
.lvev-e2 .lvev-e2-cards::-webkit-scrollbar { display: none; }
.lvev-e2 .lvev-e2-cards .lvev-e2-card {
flex: 0 0 264px;
width: 264px;
min-width: 264px;
scroll-snap-align: start;
}
/* Der Anschnitt darf nicht von der Sektion weggeschnitten werden (Basis
setzt .lvev-e2 { overflow: clip } fuer die Deko-Rauten). */
.lvev-e2 { overflow: visible; }
.lvev-e2 .lvev-e2-pop { top: 18px; right: 18px; height: 28px; padding: 0 12px 0 9px; font-size: 16px; }
.lvev-e2 .lvev-e2-pop-ico { width: 13px; height: 13px; }
.lvev-e2 .lvev-e2-plan { min-height: 0; padding: 18px 14px; }
.lvev-e2 .lvev-e2-chip { min-height: 44px; margin-top: 0; align-self: center; }
.lvev-e2 .lvev-e2-opt-note { padding: 6px 12px; line-height: 1.2; white-space: normal; }
.lvev-e2 .lvev-e2-cta { min-height: 48px; }
.lvev-e2 .lvev-e2-build { min-height: 44px; padding-inline: 24px; }
}
/* Zeilenhoehe der Ueberschrift, 11.08.2026: im Entwurf 44 px
(Figma-TEXT y 865), live 60,4. Der Abstand zur naechsten Zeile
stimmt bereits, es ist allein die Zeilenhoehe. 44 / 65 = 0,677.
Dieselbe Korrektur auf allen Sektionsueberschriften dieser Seite und auf
elite; der Entwurf verwendet ueberall denselben Grad. Nur ab 1024 px,
darunter faellt der Grad per clamp kleiner aus und die Zeile bricht um. */
@media (min-width: 1024px) {
.lvev-e2 .lvev-e2-title { line-height: 0.677; }
}
/* Breitenlauf: Bei vier Spalten werden die Karten zwischen 1024 und 1279 px
schmaler als ihre 296-px-Inhalte. Ab 1280 px passen vier Karten wieder.
Im Zwischenfenster bleiben deshalb zwei Figma-breite Spalten stehen. */
@media (min-width: 1024px) and (max-width: 1279px) {
.lvf-page .lvev-e2 .lvev-e2-cards {
grid-template-columns: repeat(2, minmax(0, 296px));
justify-content: center;
}
}
/* Desktop-Trefferflächen bleiben optisch auf Figma-Maß, treffen aber auch
mit Touch mindestens 44 px. Der transparente Überstand verändert weder
Kartenhöhe noch Sollpositionen. */
@media (min-width: 1024px) {
.lvf-page .lvev-e2 .lvev-e2-tab.is-active::before { inset: -5px -2px; }
.lvf-page .lvev-e2 .lvev-e2-chip,
.lvf-page .lvev-e2 .lvev-e2-cta,
.lvf-page .lvev-e2 .lvev-e2-build { position: relative; }
.lvf-page .lvev-e2 .lvev-e2-chip::before,
.lvf-page .lvev-e2 .lvev-e2-cta::before,
.lvf-page .lvev-e2 .lvev-e2-build::before {
content: "";
position: absolute;
}
.lvf-page .lvev-e2 .lvev-e2-chip::before { inset: -13px -4px; }
.lvf-page .lvev-e2 .lvev-e2-cta::before { inset: -4px 0; }
.lvf-page .lvev-e2 .lvev-e2-build::before { inset: -9px 0; }
}
/* ============================================================
Auswahlzustand im Tarifkasten, 11.08.2026
------------------------------------------------------------
Im Entwurf tragen die drei NICHT gewaehlten Karten am Radiokreis
(Figma-Frame "Processor") und am Wort "Select" den Mischmodus
LUMINOSITY. Der nimmt vom blauen #00a2ff nur die Helligkeit und die
Saettigung vom fast neutralen Untergrund: beides wird grau. Die
gewaehlte Karte hat diesen Mischmodus nicht und bleibt blau.
Nachgemessen am Vollbild-Mockup gegen die lokale Vorschau:
Radiokreis Karte 1 SOLL (148,156,161) IST (31,52,65)
Wort "Select" SOLL (118,124,127) IST (64,155,210)
Radiokreis Karte 2 SOLL ( 91,193,249) IST (128,208,255)
"$302" oben/unten SOLL (199,244,255)/( 93,215,255) IST beides weiss
"$201/mo" SOLL (169,231,255) IST weiss
Die Preise der gewaehlten Karte haben im Entwurf vier Fuellungen:
Blauverlauf, darueber Weiss 50 % im Modus OVERLAY und Blau 50 % im
Modus COLOR. Das Ergebnis ist ein heller Blauverlauf, hier direkt aus
der Messreihe uebernommen. Die Preise der nicht gewaehlten Karten
tragen denselben Verlauf mit Deckkraft 0 und bleiben deshalb weiss.
============================================================ */
@media (min-width: 1024px) {
/* nicht gewaehlt: Radiokreis grau. Messreihe von oben nach unten
172 -> 134, extrapoliert auf die Kreiskanten. */
.lvev-e2 .lvev-e2-plan .lvev-e2-chip-dot {
background: linear-gradient(180deg, rgb(170, 180, 186) 0%, rgb(126, 130, 133) 100%);
box-shadow:
6px 2px 9px rgba(0, 0, 0, 0.36),
0 0 0 1px rgba(0, 0, 0, 0.25),
inset 1px 1px 5px rgba(255, 255, 255, 0.35),
0 0 0 3px rgba(0, 0, 0, 0.16);
}
/* nicht gewaehlt: Wort "Select" grau. LUMINOSITY von #8ed6ff ergibt 197,
von #00a2ff ergibt 124; der Untergrund gibt den leichten Blaustich. */
.lvev-e2 .lvev-e2-plan .lvev-e2-chip-t {
background-image: linear-gradient(168deg, rgb(194, 198, 201) 0%, rgb(121, 127, 130) 100%);
}
/* gewaehlt: Kreis und Wort bleiben blau. Der Kreis hatte live einen
weissen Kern in der Mitte (radial 0..42 %), im Entwurf sitzt der helle
Punkt nur ganz oben: SOLL faellt von (141,216,249) auf (42,177,252),
IST stand bis zur Mitte flach bei (120,205,255). */
.lvev-e2 .lvev-e2-chip.is-selected .lvev-e2-chip-dot {
background: linear-gradient(180deg, rgb(158, 222, 249) 0%, rgb(28, 172, 253) 100%);
}
.lvev-e2 .lvev-e2-chip.is-selected .lvev-e2-chip-t {
background-image: var(--lvev-e2-grad-chip);
}
/* gewaehlt: beide Preise hellblau statt weiss. Die Stops liegen auf der
Tinte, nicht auf dem Zeilenkasten: die Tinte laeuft im 32 px hohen
Kasten von 6 px (19 %) bis 22 px (69 %). Zeilenweise nachgemessen,
SOLL oben (204,246,255) unten (54,201,255). */
.lvev-e2 .lvev-e2-chip.is-selected ~ .lvev-e2-opt .lvev-e2-opt-price {
background-image: linear-gradient(180deg, rgb(206, 247, 255) 19%, rgb(52, 200, 255) 69%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
/* text-shadow wird bei durchsichtiger Schriftfuellung UEBER den
ausgeschnittenen Verlauf gemalt und drueckte ihn um rund ein Zehntel
herunter (Blau 230 statt 255). Der Schatten des Entwurfs, DROP_SHADOW
(0,0,0,0.25) Versatz 0/1,36 Radius 4,07, gehoert deshalb an den
Filter, der ausserhalb der Glyphe wirkt. */
text-shadow: none;
filter: drop-shadow(0 1.4px 4px rgba(0, 0, 0, 0.25));
}
}
/* == e3-configure == */
/* == e3 Configure Your Evaluation (Evaluation-Seite) ==
Desktop exakt nach Figma (Frame 1760, Band y=2190..3640, Content x=261..1499),
Tablet interpoliert, Mobile (<768px, kein Design) sauber gestapelt.
Hintergrund der Sektion transparent; lokale Glows laufen weich aus. */
.lvev-e3 {
/* --- Typo / Abstaende (Mobile-Basis) --- */
--lvev-e3-pt: 72px;
--lvev-e3-pb: 56px;
--lvev-e3-title-fs: 34px;
--lvev-e3-title-lh: 1.1;
--lvev-e3-sub-fs: 16px;
--lvev-e3-sub-mt: 18px;
--lvev-e3-grid-mt: 44px;
--lvev-e3-card-pad: 20px;
--lvev-e3-card-gap: 16px;
--lvev-e3-title2-fs: 22px;
--lvev-e3-pill-mt: 56px;
/* --- Farben aus dem Band --- */
--lvev-e3-grad-blue: linear-gradient(180deg, #8cd5ff 0%, #12a9ff 100%);
--lvev-e3-grad-white: linear-gradient(141deg, rgba(255, 255, 255, 0.7) 0%, #ffffff 50%, rgba(255, 255, 255, 0.7) 100%);
/* Figma-Randbreite ist 0,08px (Frame 2147237280/330/328/329) - beim Aufrunden
auf einen vollen Geraetepixel malt der Browser den Rand sonst voll deckend
statt "praktisch unsichtbar". Peak-Alpha deshalb wie beim e2-Umschalter
(00003260, "reduce the Stroke") auf 0,2 gesenkt. */
--lvev-e3-border-grad: linear-gradient(90deg, rgba(52, 176, 248, 0) 0%, rgba(53, 174, 244, 0.2) 52%, rgba(49, 169, 238, 0) 100%);
--lvev-e3-row-bg:
linear-gradient(231deg, rgba(0, 0, 0, 0.17) 0%, rgba(0, 0, 0, 0.5) 100%),
linear-gradient(0deg, rgba(0, 24, 38, 0) 0%, rgba(0, 24, 38, 0.2) 100%),
rgba(0, 162, 255, 0.06);
position: relative;
z-index: 0;
isolation: isolate;
padding-top: var(--lvev-e3-pt);
padding-bottom: var(--lvev-e3-pb);
}
.lvev-e3-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* ---------------------------------------------------------------- Hintergrund */
/* Blauer Umgebungsschein in den oberen Ecken und seitlich, Mitte bleibt dunkel.
Oben und unten transparent auslaufend (Kundenfeedback: keine harten Kanten).
R3-Befund 2: Der grosse cyan-weisse Glow fehlte (SOLL linker Rand
rgb(40,131,174) gegen IST rgb(5,15,28)). Das Element ist 170% breit und
zentriert, die Seitenraender der Seite liegen bei ~21%/79% der Element-
breite - die Glow-Zentren sitzen jetzt genau dort und sind deutlich
kraeftiger, dazu ein weisslicher Schleier um den Inhalt. */
.lvev-e3-glow {
position: absolute;
left: 50%;
top: -160px;
bottom: -160px;
width: 170%;
transform: translateX(-50%);
z-index: 0;
pointer-events: none;
/* Messpass 06.08.2026: der Soll-Halo ist an den Seitenraendern fast WEISS
(y2200 x0/x1617: 199-200,238,252), unsere Ecken lagen bei 4,71,114.
Weisse Kerne statt blau, deutlich groesser. */
background:
radial-gradient(30% 34% at 21.5% 24%, rgba(230, 247, 255, 0.95) 0%, rgba(120, 205, 255, 0.6) 40%, rgba(0, 162, 255, 0) 72%),
radial-gradient(30% 34% at 78.5% 24%, rgba(230, 247, 255, 0.95) 0%, rgba(120, 205, 255, 0.6) 40%, rgba(0, 162, 255, 0) 72%),
radial-gradient(26% 38% at 21% 66%, rgba(60, 180, 252, 0.7) 0%, rgba(0, 162, 255, 0) 72%),
radial-gradient(26% 38% at 79% 66%, rgba(60, 180, 252, 0.7) 0%, rgba(0, 162, 255, 0) 72%),
radial-gradient(30% 18% at 50% 4%, rgba(167, 223, 255, 0.3) 0%, rgba(167, 223, 255, 0) 75%),
radial-gradient(46% 40% at 50% 46%, rgba(170, 220, 255, 0.2) 0%, rgba(170, 220, 255, 0) 75%);
filter: blur(45px);
-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 12%, #000000 88%, rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 12%, #000000 88%, rgba(0, 0, 0, 0) 100%);
}
/* Der grosse Schein am Uebergang e2 zu e3, Abgleich 11.08.2026.
Im Entwurf liegt ueber dem ganzen Seitenschein ein deckend schwarzer
Rahmen (Figma "Frame 2147237220", box -4/695/1768/1283, letzte Fuellung
SOLID schwarz). Er endet bei y 1978, und genau dort setzt der Schein
HART ein. Nachgemessen, Blauwert, Vollbild und Schnipsel stimmen ueberein:
y x=40 x=200 x=450 x=700 x=880
1960 0 / 48 0 / 47 0 / 30 0 / 15 0 / 15 (IST zu hell)
1980 193 / 86 192 / 84 181 / 57 110 / 15 91 / 15
2040 254 /206 254 /200 222 /152 110 / 17 91 / 15
2120 255 /255 253 /253 171 /200 70 / 32 53 / 47
2300 253 /254 193 /228 69 /143 26 / 15 23 / 15
Der gebaute Schein setzt also rund 80 px zu tief ein.
Der Schein selbst kommt auf dem Desktop nicht mehr aus dieser Datei,
sondern aus lvlup-fixes/r3-evaluation.css (Regel .lvev-e3 .lvev-e3-glow,
Spezifitaet 0-2-0, wird nach dem Fragment geladen). Dort stimmen Lage und
Farben der Lichter, nur die Maske blendet sie zu spaet ein: sie laeuft von
5 % auf 11,5 % der Elementhoehe, also von y 1952 bis y 2069. Deshalb wird
hier NUR die Maske ersetzt, Verlaeufe und top bleiben unangetastet.
Elementkasten dieser Regel: top -330 px, bottom 0, also y 1862..3661,
Hoehe 1799. Die harte Kante bei y 1978 liegt bei 6,45 %.
Die Regel braucht 0-3-0, sonst gewinnt die Override. */
@media (min-width: 1024px) {
.lvf-page .lvev-e3 .lvev-e3-glow {
inset: 0;
top: -330px;
bottom: 0;
left: 0;
right: 0;
width: auto;
height: auto;
transform: none;
border-radius: 0;
filter: none;
opacity: 1;
background:
radial-gradient(720px 380px at 0px 264px, rgba(255,255,255,1) 0%,rgba(250,253,255,1) 12%,rgba(232,247,255,1) 22%,rgba(180,228,253,.98) 34%,rgba(90,200,248,.94) 48%,rgba(24,166,228,.9) 60%,rgba(10,140,200,.84) 72%,rgba(6,110,162,.7) 84%,rgba(3,70,108,.4) 94%,rgba(2,40,64,0) 100%),
radial-gradient(720px 380px at 100% 264px, rgba(255,255,255,1) 0%,rgba(250,253,255,1) 12%,rgba(232,247,255,1) 22%,rgba(180,228,253,.98) 34%,rgba(90,200,248,.94) 48%,rgba(24,166,228,.9) 60%,rgba(10,140,200,.84) 72%,rgba(6,110,162,.7) 84%,rgba(3,70,108,.4) 94%,rgba(2,40,64,0) 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.14) 6%, rgba(0, 0, 0, 0.52) 14%, #000000 25%, #000000 88%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.14) 6%, rgba(0, 0, 0, 0.52) 14%, #000000 25%, #000000 88%, transparent 100%);
}
.lvf-page .lvev-e3 .lvev-e3-glow::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
mix-blend-mode: screen;
background:
radial-gradient(300px 1400px at 0px 264px, rgba(255,255,255,1) 0%,rgba(214,240,254,1) 14%,rgba(40,186,238,.96) 25%,rgba(4,150,205,.92) 34%,rgba(2,118,178,.88) 44%,rgba(2,92,142,.8) 55%,rgba(2,72,113,.68) 65%,rgba(2,52,82,.52) 76%,rgba(2,34,54,.34) 86%,rgba(1,22,35,.16) 94%,rgba(1,14,24,0) 100%),
radial-gradient(300px 1400px at 100% 264px, rgba(255,255,255,1) 0%,rgba(214,240,254,1) 14%,rgba(40,186,238,.96) 25%,rgba(4,150,205,.92) 34%,rgba(2,118,178,.88) 44%,rgba(2,92,142,.8) 55%,rgba(2,72,113,.68) 65%,rgba(2,52,82,.52) 76%,rgba(2,34,54,.34) 86%,rgba(1,22,35,.16) 94%,rgba(1,14,24,0) 100%);
}
/* Zweitens fehlt der breite Schleier ueber der Seitenmitte. Der Entwurf hat
dort SOLL x=700 / x=880: y2000 119/100, y2100 78/61, y2200 45/32,
y2300 26/23, ab y2400 nichts mehr; gebaut waren durchgehend 15, also der
blanke Seitengrund. Die Override belegt ::before, deshalb ::after. Die
Maske des Elternelements gilt mit, die harte Oberkante bleibt also. */
.lvf-page .lvev-e3 .lvev-e3-glow::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(78% 32% at 50% 0%,
rgba(0, 162, 255, 0.5) 0%,
rgba(0, 162, 255, 0.22) 45%,
rgba(0, 162, 255, 0) 82%);
}
}
.lvev-e3 .lvf-container { position: relative; z-index: 1; }
/* ---------------------------------------------------------------- Kopf */
.lvev-e3-head { text-align: center; }
.lvev-e3-title {
font-family: var(--lvf-font-display);
font-size: var(--lvev-e3-title-fs);
line-height: var(--lvev-e3-title-lh);
font-weight: 500;
letter-spacing: -0.02em;
background-image: var(--lvev-e3-grad-white);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lvev-e3-sub {
margin-top: var(--lvev-e3-sub-mt);
max-width: 727px;
margin-inline: auto;
font-family: var(--lvf-font-display);
font-size: var(--lvev-e3-sub-fs);
line-height: 24px;
font-weight: 425;
letter-spacing: 0.03em;
color: rgba(255, 255, 255, 0.85);
}
/* ---------------------------------------------------------------- Grid */
.lvev-e3-grid {
margin-top: var(--lvev-e3-grid-mt);
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--lvev-e3-card-gap);
max-width: 611px;
margin-inline: auto;
}
.lvev-e3-col {
display: flex;
flex-direction: column;
gap: var(--lvev-e3-card-gap);
min-width: 0;
}
/* ---------------------------------------------------------------- Karten */
.lvev-e3-card {
position: relative;
border-radius: 22px;
padding: 30px var(--lvev-e3-card-pad);
background: rgba(0, 0, 0, 0.51);
-webkit-backdrop-filter: blur(46px);
backdrop-filter: blur(46px);
}
/* 0.8px Verlaufsrand (Figma: INSIDE stroke, blau mit transparenten Enden) */
.lvev-e3-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 0.8px;
background: var(--lvev-e3-border-grad);
-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;
}
.lvev-e3-card--platform { background: linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)), rgba(0, 0, 0, 0.51); overflow: hidden; }
/* Kundenwunsch 12.08. (00003286 Punkt 4, "Add the lvlup logo faded like in
figma"): grosses blasses Bildzeichen hinter den Plattformzeilen. Figma hat
dafuer keinen eigenen Bild-Node im geladenen Ausschnitt (nur eine
generische 0,04-Deckkraft-Flaeche an derselben Stelle), deshalb keine
Pixel-exakte Nachbildung - Naeherung mit der echten Kopfleisten-Bildmarke:
selbe Datei wie das Logo im Header (kein neuer Asset), auf die
Pfeil-Flaeche zugeschnitten (Crop 2,25,98,90 aus 780x120), stark
vergroessert, mix-blend-mode:screen loescht den schwarzen Bildgrund. */
.lvev-e3-platform-mark {
position: absolute;
top: 10px;
right: 0;
width: min(220px, 58%);
height: 220px;
background-image: url('https://lvlup2.tivaosagencytempdomains.de/wp-content/uploads/2026/08/lvlup-logo-nav.webp');
background-repeat: no-repeat;
background-size: 1950px auto;
background-position: -5px -67px;
opacity: 0.045;
mix-blend-mode: screen;
pointer-events: none;
transform: rotate(-6deg);
}
.lvev-e3-card--platform { overflow: hidden; }
.lvev-e3-card--addons { background: rgba(255, 255, 255, 0.05); }
/* Befund 12.08. (00003286, "Right side Full card colors"): Figma zeigt oben
links auf der Summary-Karte einen deutlichen blauen Schein (Zeile
"50K Evaluation" liegt sichtbar heller/tealer als der Rest), bei uns lief
die Karte komplett flach schwarz. Backdrop-blur allein reicht nicht, weil
der Seitenschein an dieser Stelle (x~888-1499) zu schwach ankommt - eigener
radialer Schein oben links ergaenzt, faellt vor der Kartenmitte aus. */
.lvev-e3-card--summary {
background:
radial-gradient(46% 34% at 14% 8%, rgba(80, 190, 255, 0.28) 0%, rgba(40, 140, 200, 0.12) 45%, rgba(0, 90, 140, 0) 78%),
rgba(255, 255, 255, 0.05);
}
.lvev-e3-label {
font-family: var(--lvf-font-display);
font-size: 12px;
line-height: 17px;
font-weight: 400;
letter-spacing: 0.24px;
color: rgba(246, 248, 250, 0.5);
}
.lvev-e3-card-title {
font-family: var(--lvf-font-display);
font-size: var(--lvev-e3-title2-fs);
line-height: 1.22;
font-weight: 400;
letter-spacing: 0.02em;
color: var(--lvf-white);
}
/* ---------------------------------------------------------------- Karte 1: Evaluation */
.lvev-e3-eval-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.lvev-e3-eval-titles .lvev-e3-card-title { margin-top: 6.4px; }
.lvev-e3-change {
display: inline-flex;
align-items: center;
gap: 7px;
flex: 0 0 auto;
padding-block: 10px;
margin-block: -10px;
}
.lvev-e3-change-text {
font-family: var(--lvf-font-display);
font-size: 16px;
line-height: 22px;
font-weight: 500;
letter-spacing: 0.31px;
background-image: linear-gradient(167deg, #8ed6ff 0%, #00a2ff 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lvev-e3-change:hover .lvev-e3-change-text { filter: brightness(1.15); }
/* Runde Orbs (Radio/Switch/Link-Punkt), Figma: gluehender blauer Kern */
.lvev-e3-orb {
flex: 0 0 auto;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.05);
transition: box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.lvev-e3-orb--lg { width: 24px; height: 24px; }
/* Rundgang 13.08.2026, Befund N-12: der aktive Orb (Link "Change Account
Size", gewaehlte Plattform, eingeschaltetes Add-on) traegt in der Referenz
das dunkle Lvlup-Zeichen ueber dem Glanz, live war die Kugel leer. Zeichen
als erste Ebene, der bestehende Verlauf bleibt als zweite Ebene fuer den
Glanz erhalten. */
.lvev-e3-change .lvev-e3-orb,
.lvev-e3-opt--on .lvev-e3-orb {
border-color: rgba(140, 213, 255, 0.65);
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2308131c' d='M7.3 6.3h2.2v12.2H7.3z'/%3E%3Cpath fill='%2308131c' d='M16.7 6.3h-3.4L9.6 18.5h2.1z'/%3E%3C/svg%3E"),
radial-gradient(circle at 50% 42%, #eaf7ff 0%, #8cd5ff 26%, #00a2ff 55%, rgba(0, 162, 255, 0.25) 78%, rgba(0, 162, 255, 0) 100%);
background-repeat: no-repeat, no-repeat;
background-position: 50% 50%, 0 0;
background-size: 100% 100%, 100% 100%;
box-shadow:
0 0 14px rgba(0, 162, 255, 0.55),
inset 0 1px 3px rgba(255, 255, 255, 0.5);
}
/* ---------------------------------------------------------------- Datenzeilen */
.lvev-e3-rows {
margin-top: 26px;
display: flex;
flex-direction: column;
gap: 1px;
}
.lvev-e3-card--eval .lvev-e3-rows { margin-top: 27.4px; }
.lvev-e3-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 47px;
padding: 6px 16px;
background: var(--lvev-e3-row-bg);
box-shadow: inset 0 0 0 0.4px rgba(255, 255, 255, 0.02);
}
.lvev-e3-row--top { border-radius: 8px 8px 0 0; }
.lvev-e3-row--bot { border-radius: 0 0 8px 8px; }
.lvev-e3-row-label {
font-family: var(--lvf-font-display);
font-size: 11px;
line-height: 14px;
font-weight: 340;
letter-spacing: 0.68px;
color: rgba(255, 255, 255, 0.6);
}
.lvev-e3-row-val {
font-family: var(--lvf-font-display);
font-size: 15px;
line-height: 20px;
font-weight: 300;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.7);
text-align: right;
white-space: nowrap;
}
/* Muster C (Zweifarbigkeit), Breitenlauf 13.08.2026: "EOD" in "EOD Trailing
Drawdown" (Zeilen-Label) und "(+25)" in "Applied (+25)" (Summary-Zeile,
Knoten 227:3754 bzw. 227:3476) sind in Figma farbig abgesetzt, bei uns lief
der ganze Text in der jeweiligen Grundfarbe. Gleicher Verlaufsblock wie
.lvev-e3-row--hl .lvev-e3-row-val, hier als eigene Klasse, weil sie auf
Label UND Wert angewendet wird und die Grundfarbe je Kontext wechselt. */
.lvev-e3-row-hl {
background-image: var(--lvev-e3-grad-blue);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Erste Zeile der Eval-Karte: Preis gross und blau */
.lvev-e3-row--hl .lvev-e3-row-label { font-weight: 500; letter-spacing: 0.34px; color: var(--lvf-white); }
.lvev-e3-row--hl .lvev-e3-row-val {
font-size: 20px;
line-height: 26px;
font-weight: 600;
letter-spacing: 0.02em;
background-image: var(--lvev-e3-grad-blue);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Summary: erste Zeile weiss statt blau */
.lvev-e3-rows--sum { background: none; }
.lvev-e3-rows--sum .lvev-e3-row {
background: linear-gradient(231deg, rgba(0, 0, 0, 0.17) 0%, rgba(0, 0, 0, 0.5) 100%);
}
.lvev-e3-row--lead .lvev-e3-row-label { font-weight: 400; letter-spacing: 0.34px; color: var(--lvf-white); }
.lvev-e3-row--lead .lvev-e3-row-val { font-weight: 400; letter-spacing: 0.02em; color: var(--lvf-white); }
/* ---------------------------------------------------------------- Optionen (Plattform / Add-on) */
.lvev-e3-opts {
margin-top: 30px;
display: flex;
flex-direction: column;
gap: 9px;
}
.lvev-e3-card--addons .lvev-e3-opt { margin-top: 30px; }
.lvev-e3-opt {
display: flex;
align-items: center;
gap: 16px;
width: 100%;
min-height: 64px;
padding: 10px 16px;
border-radius: 8px;
background: var(--lvev-e3-row-bg);
box-shadow: inset 0 0 0 0.4px rgba(255, 255, 255, 0.02);
text-align: left;
transition: box-shadow 0.18s ease, background 0.18s ease;
}
.lvev-e3-opt:hover { box-shadow: inset 0 0 0 1px rgba(0, 162, 255, 0.35); }
.lvev-e3-opt:focus-visible { outline: 2px solid #8cd5ff; outline-offset: 2px; }
.lvev-e3-opts .lvev-e3-opt--on.lvev-e3-opt--on {
background:
linear-gradient(161deg, rgba(0, 162, 255, 0) 0%, rgba(0, 162, 255, 0.28) 100%),
linear-gradient(231deg, rgba(0, 0, 0, 0.17) 0%, rgba(0, 0, 0, 0.5) 100%),
linear-gradient(0deg, rgba(0, 24, 38, 0) 0%, rgba(0, 24, 38, 0.2) 100%),
rgba(0, 162, 255, 0.06);
/* Befund 12.08. (00003286, "Select Trading Platform"): Rahmen war 1px bei
55% Deckkraft, Figma-Randwert liegt bei 0,375px/2% (Frame "btn",
box 295,2977). Auf einen weichen Restwert gesenkt statt ganz entfernt,
damit die Zeile bei Tastaturfokus/Hover noch auffindbar bleibt. */
box-shadow:
inset 0 0 0 0.5px rgba(255, 255, 255, 0.06),
0 0 26px rgba(0, 162, 255, 0.16);
}
/* DX-Futuretech-Logo: zwei Ausschnitte (Symbol + Wortmarke) aus derselben
Mediendatei, wie im Figma via STRETCH-Fuellung */
.lvev-e3-dx { display: inline-flex; align-items: center; gap: 10px; }
.lvev-e3-dx-icon,
.lvev-e3-dx-word {
display: block;
background-image: url('https://lvlup2.tivaosagencytempdomains.de/wp-content/uploads/2026/08/lvlup-9e83bcda12.webp');
background-repeat: no-repeat;
}
.lvev-e3-dx-icon {
width: 40px;
height: 23px;
background-size: 40px auto;
background-position: 0 0;
}
/* Befund Rundgang 13.08. (Ueberlappung DX/FUTURETECH): Quelldatei ist
1677x1228, die Wortmarke "FUTURETECH" liegt in den Zeilen 1009-1227, davor
Leerraum 908-1008. Die alte Position 0 94% / Hoehe 17px oeffnete bei
background-size 128px ein Fenster auf den Quellzeilen 952-1167 - das
schneidet die unteren 27 Prozent der Wortmarke ab und zeigt zugleich
Leerraum, wirkt dadurch wie eine Ueberlagerung mit dem DX-Symbol darueber.
Fix: Fenster auf die Unterkante legen (0 100%), eine Zeile hoeher, damit
die volle Wortmarke (Quellzeilen 1009-1227) hineinpasst. Breite und
background-size bleiben unveraendert, die Zeile wandert nicht. */
.lvev-e3-dx-word {
width: auto;
height: auto;
background-image: none;
color: #f5fbff;
font-family: var(--lvf-font-display);
font-size: 17px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.035em;
white-space: nowrap;
}
.lvev-e3-dx-word::after { content: "DX FUTURETECH"; }
/* Volumetrica: Kerzen-Symbol aus der Mediendatei + Wortmarke als Text
(im Soll-Bild steht neben dem Symbol der Schriftzug).
Befund Rundgang 13.08.: Kachel 34x26 bei background-size 63px zeigte nur
die Quellspalten 118-394 / -zeilen 120-332, die Tinte (Quellzeilen
109-402, -spalten 105-406) wurde damit an allen vier Kanten beschnitten.
Fix: Kachel auf 45x44, Bild auf 73px, Fenster mittig - die Tinte liegt
dann mit rund 1px Luft ringsum vollstaendig darin (43x42px). Die Kachel
bleibt kleiner als der Innenraum der Zeile (64-20=44px, ab 768px
76-24=52px), die Zeilenhoehe aendert sich nicht. */
.lvev-e3-vol {
display: block;
flex: 0 0 auto;
width: 45px;
height: 44px;
background-image: url('https://lvlup2.tivaosagencytempdomains.de/wp-content/uploads/2026/08/lvlup-5b26379619.webp');
background-repeat: no-repeat;
background-size: 73px auto;
background-position: 50% 50%;
opacity: 0.5;
/* Rundgang 13.08.2026, Befund N-12: Bilddatei ist blaustichig, Referenz
verlangt neutrales Grau (hellste 8 % SOLL (72,73,75), IST vorher
(10,99,134)). brightness(.88) hebt die Leuchtdichte von rund 83 auf 73,
wie im Server-Override gemessen. */
filter: grayscale(1) brightness(0.88);
}
.lvev-e3-vol-name {
font-family: var(--lvf-font-display);
font-size: 16px;
line-height: 22px;
font-weight: 300;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.5);
}
.lvev-e3-opt--on .lvev-e3-vol-name { color: rgba(255, 255, 255, 0.75); }
/* ---------------------------------------------------------------- Add-on-Zeile */
.lvev-e3-addon { gap: 18px; }
.lvev-e3-addon-body {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.lvev-e3-addon-name {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--lvf-font-display);
font-size: 15px;
line-height: 20px;
font-weight: 455;
letter-spacing: 0.35px;
color: rgba(255, 255, 255, 0.7);
}
.lvev-e3-info {
display: inline-flex;
align-items: center;
justify-content: center;
width: 17px;
height: 17px;
border-radius: 10px;
background: #000000;
font-size: 10px;
font-style: normal;
font-weight: 600;
line-height: 1;
background-image: none;
color: #8cd5ff;
}
.lvev-e3-addon-desc {
font-family: var(--lvf-font-display);
font-size: 10px;
line-height: 13px;
font-weight: 283;
letter-spacing: 0.6px;
color: rgba(255, 255, 255, 0.4);
max-width: 307px;
}
.lvev-e3-addon-val {
margin-left: auto;
flex: 0 0 auto;
font-family: var(--lvf-font-display);
font-size: 24px;
line-height: 30px;
font-weight: 600;
letter-spacing: 0.58px;
background-image: var(--lvev-e3-grad-blue);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lvev-e3-opt:not(.lvev-e3-opt--on) .lvev-e3-addon-val { opacity: 0.45; }
.lvev-e3-opt:not(.lvev-e3-opt--on) .lvev-e3-addon-body { opacity: 0.55; }
/* ---------------------------------------------------------------- Summary-Karte */
.lvev-e3-card--summary .lvev-e3-rows { margin-top: 16px; }
.lvev-e3-offer { margin-top: 31px; }
.lvev-e3-offer-row {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
.lvev-e3-offer-input {
width: 100%;
min-height: 47px;
padding: 8px 14px;
border-radius: 10px;
font-family: var(--lvf-font-display);
font-size: 13px;
line-height: 25px;
font-weight: 340;
letter-spacing: 0.78px;
color: var(--lvf-white);
}
/* Befund 12.08.: Fuellung war im Code schon auf dem Figma-Wert (Frame "Frame
7", rgba(0,0,0,0.4)) und griff trotzdem nie - shell.css setzt fuer alle
Formularfelder ".lvf-page.lvf-page input { background:none; border:0 }"
bei 0-2-1 (siehe s11-Newsletterfeld weiter unten, dort schon dokumentiert)
und schlaegt die einfache Klasse hier (0-1-0), eine verdoppelte Klasse
allein reicht nicht (0-2-0 verliert gegen 0-2-1). Dagegen sah man nur den
Kartengrund durchscheinen, der zufaellig aehnlich dunkel ist - der
fehlende Rand fiel deshalb erst richtig auf ("Enter offer code" stand frei
in der Luft). Gleiche Bauweise wie beim Newsletterfeld: .lvf-page.lvf-page
+ eigene Klasse = 0-3-0. Randfarbe naehert Figmas 0,5px-Verlauf
transparent->#00a2ff->transparent als Halbton an - echte Verlaufsraender
gehen auf nicht ueber die ::before-Maskentechnik der Karten. */
.lvf-page.lvf-page .lvev-e3-offer-input {
border: 1px solid rgba(0, 162, 255, 0.32);
background: rgba(0, 0, 0, 0.4);
}
.lvev-e3-offer-input::placeholder { color: rgba(255, 255, 255, 0.55); opacity: 1; }
.lvev-e3-offer-input:focus-visible { outline: 2px solid #00a2ff; outline-offset: 1px; }
.lvev-e3-offer-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding-inline: 20px;
border-radius: 10px;
/* Saum-Verlauf statt --lvf-grad-btn plus inset-Schatten, 11.08.2026.
Nachgereicht, der Knopf stand nicht auf der Liste der 13 Stellen.
Knopf 47 px hoch, damit im gerechneten Feld (18 bis 53 px).
Hier wechselt nicht nur der Saum, sondern die Grundfarbe: --lvf-grad-btn
laeuft auf #0080ca aus, der Blaukanal faellt also von 255 auf 202. Im
Entwurf steht der Blaukanal ueber die ganze Knopfhoehe bei 254,7 (an 20
Spalten nachgemessen, Streuung 0,6), das ist die Handschrift von
--lvf-grad-blue-btn.
Gemessen gegen evaluation-aus-vollbild.png, Knopfoberkante Soll y 2689 /
Ist y 2712, Median je Zeile auf textfreien Streifen:
x 1296..1324 vorher 25,75 nachher 2,56
x 1430..1456 vorher 25,87 nachher 2,67
Spaltenmedian zehn Bloecke vorher 28,03 nachher 2,10
ganze Knopfflaeche vorher 32,64 nachher 13,07 */
background: var(--lvf-grad-blue-btn);
font-family: var(--lvf-font-display);
font-size: 17px;
line-height: 26px;
font-weight: 555;
letter-spacing: -0.02em;
color: #060606;
transition: filter 0.18s ease;
}
.lvev-e3-offer-btn:hover { filter: brightness(1.08); }
.lvev-e3-notes {
margin-top: 30px;
font-family: var(--lvf-font-display);
font-size: 12px;
line-height: 23px;
font-weight: 340;
letter-spacing: 0.72px;
text-transform: capitalize;
color: rgba(255, 255, 255, 0.6);
}
/* Grand-Total-Band: dunkle Radial-Flaeche ueber die volle Kartenbreite */
.lvev-e3-total {
margin-top: 28px;
margin-inline: calc(-1 * var(--lvev-e3-card-pad));
min-height: 110px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
background: radial-gradient(60% 90% at 50% 50%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.34) 100%);
}
.lvev-e3-total-label {
font-family: var(--lvf-font-display);
font-size: 20px;
line-height: 23px;
font-weight: 400;
letter-spacing: 0.49px;
background-image: var(--lvev-e3-grad-white);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lvev-e3-total-val {
font-family: var(--lvf-font-display);
font-size: 34px;
line-height: 38px;
font-weight: 600;
letter-spacing: -0.02em;
background-image: var(--lvev-e3-grad-blue);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lvev-e3-fine {
margin-top: 14px;
text-align: center;
font-family: var(--lvf-font-display);
font-size: 10px;
line-height: 14px;
font-weight: 300;
letter-spacing: 0.6px;
color: rgba(246, 248, 250, 0.5);
}
.lvev-e3-continue {
display: flex;
align-items: center;
justify-content: center;
margin-top: 22px;
min-height: 60px;
border-radius: 10px;
/* Saum-Verlauf statt --lvf-grad-btn plus inset-Schatten, 11.08.2026.
Nachgereicht, der Knopf stand nicht auf der Liste der 13 Stellen.
Wie beim Gutschein-Knopf wechselt auch die Grundfarbe: der Entwurf haelt
den Blaukanal ueber die ganze Hoehe bei 254,7, --lvf-grad-btn faellt auf
202 ab.
Gemessen gegen evaluation-aus-vollbild.png, Knopfoberkante Soll y 3080 /
Ist y 3095, Median je Zeile auf textfreien Streifen:
x 930..1070 vorher 26,60 nachher 3,34
x 1310..1450 vorher 26,59 nachher 3,36
Spaltenmedian zehn Bloecke vorher 27,82 nachher 1,30
ganze Knopfflaeche vorher 27,48 nachher 5,95
ACHTUNG: der Knopf ist 73 px hoch (min-height 60 plus Zeilenkasten) und
liegt damit ueber dem Feld, fuer das der Verlauf gerechnet ist (18 bis
53 px, sigma/Hoehe 0,166 bis 0,226; hier 0,123). Sichtbar wird das nur
ganz unten: in den letzten sechs Zeilen liegt der Rotkanal 13 bis 20
Stufen zu hoch (Soll 32 bis 25, Ist 45 bis 50). Gegen die 27 Stufen
Abweichung vorher ist das der deutlich kleinere Fehler. */
background: var(--lvf-grad-blue-btn);
font-family: var(--lvf-font-display);
font-size: 19px;
line-height: 28px;
font-weight: 543;
color: #060606;
text-align: center;
transition: filter 0.18s ease, transform 0.18s ease;
}
.lvev-e3-continue:hover { filter: brightness(1.08); }
.lvev-e3-continue:active { transform: translateY(1px); }
.lvev-e3-continue:focus-visible { outline: 2px solid #8cd5ff; outline-offset: 3px; }
.lvev-e3-secure {
margin-top: 16px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 12px;
}
.lvev-e3-secure-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.lvev-e3-secure-ico { width: 15px; height: 15px; display: block; }
.lvev-e3-secure-text {
font-family: var(--lvf-font-display);
font-size: 10px;
line-height: 15px;
font-weight: 400;
letter-spacing: 0.63px;
background-image: var(--lvev-e3-grad-blue);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ---------------------------------------------------------------- Zahlungslogos */
.lvev-e3-pay {
margin-top: 30px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.lvev-e3-pay-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 14px 30px;
}
.lvev-e3-pay-logo { display: block; height: 26px; width: auto; }
.lvev-e3-pay-row:first-child .lvev-e3-pay-logo { height: 24px; }
.lvev-e3-pay-crypto {
display: inline-flex;
align-items: center;
}
.lvev-e3-pay-coin {
width: 34px;
height: 34px;
display: block;
}
.lvev-e3-pay-coin + .lvev-e3-pay-coin { margin-left: -11px; }
.lvev-e3-pay-coin text { font-family: var(--lvf-font-display); }
/* ---------------------------------------------------------------- Pille */
.lvev-e3-pillwrap {
margin-top: var(--lvev-e3-pill-mt);
display: flex;
justify-content: center;
}
.lvev-e3-pill {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 6px 18px;
border-radius: 78px;
background: #00121c;
box-shadow:
7px 3px 11px rgba(0, 0, 0, 0.36),
0 0 0 2px rgba(0, 0, 0, 0.25),
0 0 0 3px rgba(0, 0, 0, 0.16);
font-family: var(--lvf-font-display);
font-size: 14px;
line-height: 17px;
font-weight: 400;
letter-spacing: 0.84px;
color: var(--lvf-white);
transition: filter 0.18s ease;
}
.lvev-e3-pill::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 0.5px;
background: var(--lvev-e3-border-grad);
-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;
}
.lvev-e3-pill:hover { filter: brightness(1.15); }
/* ================================================================ Tablet ab 768px */
@media (min-width: 768px) {
.lvev-e3 {
--lvev-e3-pt: clamp(72px, 12vw, 110px);
--lvev-e3-pb: 70px;
--lvev-e3-title-fs: clamp(34px, 6.5vw, 65px);
--lvev-e3-sub-fs: 18px;
--lvev-e3-sub-mt: 26px;
--lvev-e3-grid-mt: 60px;
--lvev-e3-card-pad: 34px;
--lvev-e3-title2-fs: 26px;
--lvev-e3-pill-mt: 90px;
}
.lvev-e3-row { padding-inline: 30px; }
.lvev-e3-opt { min-height: 76px; padding: 12px 29px; gap: 24px; }
.lvev-e3-offer-row { flex-direction: row; gap: 0; align-items: stretch; }
.lvev-e3-offer-input { flex: 1 1 auto; border-radius: 10px 0 0 10px; padding-left: 23px; }
.lvev-e3-offer-btn { flex: 0 0 175px; border-radius: 0 10px 10px 0; }
.lvev-e3-total { flex-direction: row; gap: 77px; min-height: 140px; }
}
/* ================================================================ Desktop ab 1024px */
@media (min-width: 1024px) {
.lvev-e3 {
--lvev-e3-pt: 110px;
--lvev-e3-pb: 20px; /* Review R3: Label-Pille sass ~90px zu weit von der naechsten H2 */
--lvev-e3-title-fs: 65px;
/* 44 statt 60: im Entwurf ist die Zeile der Ueberschrift 44 px hoch
(Figma-TEXT "Configure Your Evaluation", y 2199..2243). Der Abstand
von 26 px zur Unterzeile darunter stimmt bereits, es ist allein die
Zeilenhoehe, die den Kopfbereich 16 px zu hoch macht. Einzeilig auf
dieser Breite, darum keine Ueberlappung. */
--lvev-e3-title-lh: 44px;
--lvev-e3-grid-mt: 86px;
--lvev-e3-title2-fs: 28px;
--lvev-e3-pill-mt: 196px;
}
.lvev-e3-title { letter-spacing: -1.3px; }
.lvev-e3-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: none;
}
/* 34 statt 37: die Karte "Select Evaluation" ist im Entwurf 488 px hoch
(Figma-Frame 2147237280, y 2379..2867), live waren es 514. Die Kette
darin: Innenabstand 34 oben, Beschriftung, 6,4 bis zum Kartentitel,
27,4 bis zum Zeilenblock, dessen 335 px exakt stimmen, dann 34 unten.
Die drei Fugen zusammen ergeben genau die fehlenden 26 px. */
.lvev-e3-card { padding-block: 34px; }
.lvev-e3-row-val { font-size: 19px; line-height: 24px; letter-spacing: 1.56px; }
.lvev-e3-row--hl .lvev-e3-row-val { font-size: 24px; line-height: 30px; letter-spacing: 0.49px; }
.lvev-e3-addon-name { font-size: 17px; line-height: 22px; }
.lvev-e3-addon-val { font-size: 29px; line-height: 35px; }
.lvev-e3-dx-icon { width: 51px; height: 29px; background-size: 51px auto; }
/* Fenster bleibt auf der Unterkante (0 100%, Basisregel), nur die Hoehe
waechst mit der groesseren Kachel auf 22px (Quellzeilen 1003-1228). */
.lvev-e3-dx-word { width: 164px; height: 22px; background-size: 164px auto; }
.lvev-e3-offer-btn { font-size: 19px; line-height: 28px; letter-spacing: -0.37px; }
.lvev-e3-total { min-height: 160px; }
.lvev-e3-total-label { font-size: 24px; }
.lvev-e3-total-val { font-size: 43px; line-height: 40px; letter-spacing: -0.86px; }
.lvev-e3-continue { min-height: 73px; font-size: 22px; }
.lvev-e3-pay { margin-top: 40px; gap: 20px; }
.lvev-e3-pay-row { gap: 14px 60px; }
.lvev-e3-pay-row:first-child { column-gap: 75px; }
.lvev-e3-pay-logo { height: 26px; }
.lvev-e3-pay-row:first-child .lvev-e3-pay-logo { height: 25px; }
/* Befund Rundgang 13.08. (Bedienbarkeit): min-height 31px unterschreitet
die 44px-Mindesttrefferflaeche, gemessen per elementFromPoint bei 1760px.
Breite/Padding bleiben wie vorgegeben, nur die Hoehe auf 44px angehoben -
die Basisregel (Zeile 810) hat denselben Wert, hier nur konsistent
nachgezogen. */
.lvev-e3-pill { min-height: 44px; padding: 6px 14px; }
}
/* ================================================================ Mobile Feinschliff */
@media (max-width: 767px) {
/* Kein horizontaler Ueberlauf durch die Glows */
.lvev-e3 { overflow: clip; }
.lvev-e3-eval-head { align-items: flex-start; }
.lvev-e3-change { flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
}
/* Review R3 (ev2): 'Evaluation' in der H2 traegt den cyanen Akzent. Der
Eltern-Titel clippt einen Weiss-Verlauf auf den Text, deshalb braucht der
Akzent-Span einen EIGENEN Verlaufs-Clip (color allein wirkt nicht). */
.lvev-e3-title-accent {
background-image: var(--lvf-grad-blue);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Abnahme 06.08.: Auswahlzustand war nur ein duenner Rahmen - Design fuellt
die aktive Zeile mit blauem Verlauf.
Befund 12.08. (00003286, "Select Trading Platform"): der Verlauf blieb ein
gleichfoermiges gedaemptes Blau (Peak 28,108,160), Figma geht links schwarz
nach rechts sattes #00a2ff (Frame "btn", dritter Layer
linear-gradient(161deg, rgba(0,162,255,0) 0%, #00a2ff 100%)). Peak auf den
echten Figma-Wert angehoben, Winkel und dunkler Start bleiben erhalten. */
.lvev-e3-opts .lvev-e3-opt--on.lvev-e3-opt--on {
background:
linear-gradient(161deg, rgba(0, 162, 255, 0) 0%, #00a2ff 100%),
linear-gradient(90deg, rgba(10, 36, 54, 0.95) 0%, rgba(18, 74, 112, 0.9) 55%, rgba(28, 108, 160, 0.85) 100%);
}
/* Kaan 06.08.: Add-On-Beschreibung lief einzeilig unters +25%-Label und wurde
abgeschnitten - Umbruch erzwingen, Platz zum Label lassen. */
.lvev-e3-addon .lvev-e3-addon-desc {
white-space: normal;
overflow-wrap: break-word;
max-width: 100%;
padding-right: 8px;
}
.lvev-e3-addon .lvev-e3-addon-body { flex: 1 1 auto; }
/* Add-On-Auswahl dezenter (Abnahme: +42% zu stark).
Befund 12.08.: der Selektor verlangte einen .lvev-e3-opts-Vorfahren, den der
Add-on-Button nie hatte (nur die Plattform-Radiogroup traegt diese Klasse).
Die Regel griff seit ihrer Einfuehrung nie - Beleg: IST-Pixel Zeile vs.
Kartengrund beide (13,13,13), 0 Differenz. Selector ohne die Ahnen-Klasse,
Farbwert unveraendert (weiter das Abnahme-Ergebnis vom 06.08.). */
.lvev-e3-addon.lvev-e3-opt--on {
background: rgba(6, 14, 22, 0.85);
}
/* Abnahme: seitliche Cyan-Blooms zu schwach (-55 bis -66%) - Fluegel verstaerken */
.lvev-e3::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(22% 55% at 0% 45%, rgba(140, 210, 250, 0.55) 0%, rgba(40, 150, 220, 0.25) 50%, rgba(0, 140, 220, 0) 80%),
radial-gradient(22% 55% at 100% 45%, rgba(140, 210, 250, 0.55) 0%, rgba(40, 150, 220, 0.25) 50%, rgba(0, 140, 220, 0) 80%);
}
/* Abnahme: Zahlungslogos monochrom wie im Design */
.lvev-e3-pay-logo {
filter: grayscale(1) brightness(1.35);
}
/* Rundgang 13.08.2026, Befund R3-13: derselbe Graustufenfilter machte aus den
hellen Muenzfuellungen (Bitcoin f5b300, Ethereum e9e9e9) blasse Scheiben.
Referenz zeigt alle vier Muenzen als dunkle Scheibe mit hellem Zeichen
(gemessen: Scheibe (44,47,52), Zeichen (232,238,244)). Fix wie im Server-
Override r3-evaluation.css R3-13: kein Filter mehr, stattdessen feste
Fuellfarben auf Kreis und Zeichen. */
.lvev-e3-pay-coin circle { fill: #2c2f36; }
.lvev-e3-pay-coin text,
.lvev-e3-pay-coin path { fill: #e9eef4; }
/* 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 "Configure Your" (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) {
.lvev-e3-title { padding-bottom: 14px; margin-bottom: -14px; }
}
/* Die beiden alten Lichtsaeume abraeumen, 11.08.2026.
Die Grundregeln oben stellen auf --lvf-grad-blue-btn um, aber zwei fremde
Regeln aus dem Plugin lvlup-fixes setzen den alten inset-Schatten mit
hoeherer Spezifitaet erneut. Ohne diesen Block bliebe der Saum stehen und
die Umstellung waere auf der Live-Seite nicht sichtbar:
fixes-evaluation.css .lvf-page .lvev-e3 button.lvev-e3-offer-btn 0-3-1
r3-evaluation.css .lvev-e3 a.lvev-e3-continue 0-2-1
Beide Dateien gehoeren dem Plugin und nicht diesem Repo. Deshalb hier
dieselben Selektoren mit einer wiederholten Klasse (0-4-1 und 0-3-1),
kein !important. */
.lvf-page .lvev-e3 button.lvev-e3-offer-btn.lvev-e3-offer-btn {
background-image: var(--lvf-grad-blue-btn);
box-shadow: none;
}
.lvev-e3 a.lvev-e3-continue.lvev-e3-continue {
box-shadow: none;
}
/* Rundgang 13.08. (Auftrag EV-20/T-01, Abgrenzung praezisiert): Radius,
Schriftmasse und Textfarbe des Apply-Code-Knopfes standen bisher NICHT in
diesem Repo, sondern ausschliesslich in fixes-evaluation.css (0-3-1,
tabu). Gemessen per getComputedStyle bei 1760px, live gegen lokal ohne
Overrides-Ebene:
border-radius live 10px | ohne Overrides 0px 10px 10px 0px
font-size live 19px | ohne Overrides 16px
font-weight live 555 | ohne Overrides 400
letter-spacing live -0.37px | ohne Overrides normal
color live rgb(6,6,6) | ohne Overrides rgb(255,255,255)
Ursache: der Shell-Reset .lvf-page.lvf-page button (0-2-1) schlaegt die
einfache Grundregel oben (0-1-0), plus eine eigene Fragmentregel setzt ab
768px absichtlich einen asymmetrischen Radius (0 10px 10px 0, an das
Eingabefeld angesetzt) - laut EV-20 zeigt die Referenz aber rundum 10px.
Ohne fixes-evaluation.css wuerde ein Deploy dieses Fragments den gelobten
Konfigurator-Abschluss sichtbar verschlechtern. Hintergrund und
box-shadow bleiben unangetastet (siehe Block oben, bereits korrekt und
neuer als EV-20s Originalwerte). Nach diesem Block: exakter Gleichstand,
unabhaengig davon ob die Overrides-Ebene geladen ist. */
.lvf-page .lvev-e3 button.lvev-e3-offer-btn.lvev-e3-offer-btn {
border-radius: 10px;
font-family: var(--lvf-font-display);
font-size: 17px;
line-height: 26px;
font-weight: 555;
letter-spacing: -0.02em;
color: #060606;
}
@media (min-width: 1024px) {
.lvf-page .lvev-e3 button.lvev-e3-offer-btn.lvev-e3-offer-btn {
font-size: 19px;
line-height: 28px;
letter-spacing: -0.37px;
}
}
/* == e4-compare == */
/* == e4 Vergleichstabelle der Evaluation-Seite ==
Desktop exakt nach Figma (Frame 1760, Band y=3640..4930, Content x=260..1500),
Tablet interpoliert, Mobile (<768px, kein Design) mit horizontal scrollbarer
Tabelle. Hintergrund der Sektion transparent, lokale Glows laufen weich aus. */
.lvev-e4 {
--lvev-e4-grad-white: linear-gradient(141deg, rgba(255, 255, 255, 0.7) 0%, #ffffff 50%, rgba(255, 255, 255, 0.7) 100%);
--lvev-e4-cell-bg: rgba(0, 0, 0, 0.32);
--lvev-e4-hi-bg: rgba(18, 169, 255, 0.1);
--lvev-e4-line: rgba(255, 255, 255, 0.06);
position: relative;
isolation: isolate;
padding-top: 10px;
padding-bottom: 25px;
}
/* ---------------------------------------------------------------- Glows
Figma: zwei Gruppen weichgezeichneter "Star"-Vektoren (#00a2ff blur 300,
#04304a blur 500, plus weisser Star blur 520). Als grosse radial-gradients
mit transparenten Enden angenaehert, damit nichts hart an den Raendern
der Nachbarsektionen abschneidet. */
.lvev-e4-glow {
position: absolute;
z-index: -1;
pointer-events: none;
border-radius: 50%;
}
/* R3-Befund 2: Glows waren zu schwach (Seitenraender fast schwarz statt
cyan). Deckkraft der Kerne deutlich erhoeht, weisser Anteil ergaenzt. */
.lvev-e4-glow--left {
left: -22%;
top: -6%;
width: 75%;
height: 85%;
background: radial-gradient(closest-side, rgba(60, 185, 255, 0.5) 0%, rgba(0, 162, 255, 0.28) 45%, rgba(4, 48, 74, 0) 72%);
}
.lvev-e4-glow--right {
right: -22%;
top: -4%;
width: 75%;
height: 88%;
background: radial-gradient(closest-side, rgba(60, 185, 255, 0.46) 0%, rgba(18, 169, 255, 0.26) 45%, rgba(4, 48, 74, 0) 72%);
}
.lvev-e4-glow--bottom {
left: 50%;
bottom: -14%;
width: 110%;
height: 70%;
transform: translateX(-50%);
background: radial-gradient(closest-side, rgba(140, 213, 255, 0.22) 0%, rgba(0, 162, 255, 0.12) 40%, rgba(0, 162, 255, 0) 72%);
}
/* Rundgang 13.08.2026, Befund 4: ab Desktop ersetzt die Lichtsaeulen-Technik
des Server-Overrides (r3-evaluation.css R3-evaluation-06 + r3b-evaluation.css
R3B-04, feste px-Mitten im 1760-Rahmen) den lokalen closest-side-Schein.
Unter 1024px bleibt der Bestand oben unveraendert in Kraft (dort passen die
festen Mitten nicht mehr, siehe r3-evaluation.css Kommentar Zeile 171-176:
"darunter bleiben Kaans eigene Mobil-Glows unveraendert in Kraft"). --bottom
wird ab Desktop nicht mehr gebraucht, der Auslauf des grossen Lichts deckt
die Stelle ab. */
@media (min-width: 1024px) {
.lvev-e4-glow--bottom { background: none; }
.lvev-e4-glow--left {
position: absolute;
inset: 0;
width: auto;
height: auto;
transform: none;
border-radius: 0;
filter: none;
opacity: 1;
background:
radial-gradient(300px 2600px at 0px 2563px, rgba(254,254,255,1) 0%,rgba(250,253,255,1) 8%,rgba(216,240,254,1) 15%,rgba(161,220,253,1) 23%,rgba(128,204,244,1) 31%,rgba(80,178,226,1) 38%,rgba(50,150,201,.97) 46%,rgba(38,128,178,.94) 54%,rgba(26,100,142,.88) 62%,rgba(18,78,112,.78) 69%,rgba(10,62,92,.62) 77%,rgba(5,46,70,.36) 86%,rgba(2,30,48,0) 100%),
radial-gradient(300px 2050px at 100% 2563px, rgba(254,254,255,1) 0%,rgba(250,253,255,1) 8%,rgba(216,240,254,1) 15%,rgba(161,220,253,1) 23%,rgba(128,204,244,1) 31%,rgba(80,178,226,1) 38%,rgba(50,150,201,.97) 46%,rgba(38,128,178,.94) 54%,rgba(26,100,142,.88) 62%,rgba(18,78,112,.78) 69%,rgba(10,62,92,.62) 77%,rgba(5,46,70,.36) 86%,rgba(2,30,48,0) 100%);
}
/* R3B-04: die Referenz zeigt in diesem Band nur links Licht, rechts fast
schwarz. Rechte Saeulenkopie deshalb kuerzer (2600 -> 2050), Lichtkern
bleibt an derselben Stelle. */
.lvev-e4-glow--right {
position: absolute;
inset: 0;
width: auto;
height: auto;
transform: none;
border-radius: 0;
filter: none;
opacity: 1;
mix-blend-mode: screen;
background:
radial-gradient(1350px 1400px at 0px 2613px, rgba(255,255,255,1) 0%,rgba(250,253,255,1) 16%,rgba(215,240,255,1) 30%,rgba(175,226,255,.98) 42%,rgba(110,205,250,.92) 54%,rgba(70,185,240,.85) 64%,rgba(30,150,215,.7) 76%,rgba(10,90,140,.36) 88%,rgba(4,40,64,0) 100%),
radial-gradient(1350px 1000px at 100% 2613px, rgba(255,255,255,1) 0%,rgba(250,253,255,1) 16%,rgba(215,240,255,1) 30%,rgba(175,226,255,.98) 42%,rgba(110,205,250,.92) 54%,rgba(70,185,240,.85) 64%,rgba(30,150,215,.7) 76%,rgba(10,90,140,.36) 88%,rgba(4,40,64,0) 100%);
}
}
/* ---------------------------------------------------------------- Kopf */
.lvev-e4-head {
position: relative;
text-align: center;
}
.lvev-e4-title {
font-family: var(--lvf-font-display);
font-size: clamp(32px, 5vw, 65px);
font-weight: 500;
line-height: 0.95;
letter-spacing: -1.3px;
background: var(--lvev-e4-grad-white);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lvev-e4-title-accent {
background: var(--lvf-grad-blue);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lvev-e4-sub {
margin-top: 26px;
font-family: var(--lvf-font-display);
font-size: 18px;
font-weight: 425;
line-height: 24px;
letter-spacing: 0.54px;
color: rgba(255, 255, 255, 0.85);
}
/* ---------------------------------------------------------------- Tabelle */
.lvev-e4-table-wrap {
position: relative;
margin-top: 86px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 11px;
overflow: hidden;
}
/* Blaue Lichtlinie entlang der Oberkante (Figma: fill-Gradient 90deg auf dem Rahmen) */
.lvev-e4-table-wrap::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, rgba(0, 162, 255, 0.5) 0%, #00a2ff 50%, rgba(0, 162, 255, 0.5) 100%);
opacity: 0.9;
pointer-events: none;
}
.lvev-e4-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-family: var(--lvf-font-display);
}
.lvev-e4-col-feature { width: 223px; }
.lvev-e4-cell {
padding: 8px 10px;
text-align: center;
vertical-align: middle;
font-size: 11px;
font-weight: 353;
line-height: 14px;
letter-spacing: 0.44px;
color: #f8fdff;
background: var(--lvev-e4-cell-bg);
}
.lvev-e4-cell--feature {
background: transparent;
text-align: left;
padding-left: 23px;
font-weight: 333;
letter-spacing: 0.33px;
color: #ffffff;
}
.lvev-e4-cell--feature-strong { font-weight: 425; }
/* Kopfzeilen */
.lvev-e4-row-groups .lvev-e4-cell { height: 68px; padding-top: 0; padding-bottom: 0; }
.lvev-e4-cell--group {
background: rgba(0, 0, 0, 0.6);
font-size: 17px;
font-weight: 458;
line-height: 24px;
letter-spacing: 0.5px;
}
.lvev-e4-grad {
background: var(--lvf-grad-blue);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lvev-e4-row-sizes .lvev-e4-cell { height: 68px; padding-top: 0; padding-bottom: 0; }
.lvev-e4-cell--feature-head {
font-size: 14px;
font-weight: 300;
line-height: 18px;
letter-spacing: 0.56px;
}
.lvev-e4-cell--size {
font-size: 17px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0.25px;
color: #ffffff;
}
/* Koerperzeilen */
.lvev-e4-row .lvev-e4-cell { height: 59px; }
.lvev-e4-row--tall .lvev-e4-cell { height: 83px; }
.lvev-e4-row--hi .lvev-e4-cell { background: var(--lvev-e4-hi-bg); }
.lvev-e4-cell--price {
font-size: 12px;
line-height: 15px;
letter-spacing: 0.69px;
}
.lvev-e4-cell--dim {
font-weight: 400;
letter-spacing: 0.66px;
color: rgba(248, 253, 255, 0.5);
}
/* Haarlinien zwischen den Zeilen */
.lvev-e4-row-sizes .lvev-e4-cell,
.lvev-e4-table tbody .lvev-e4-cell {
border-top: 1px solid var(--lvev-e4-line);
}
/* Gestapelte Zellinhalte (z.B. "One-Time / OR / Monthly", "6% / ($1,500)") */
.lvev-e4-stack { display: block; }
.lvev-e4-stack > span { display: block; }
.lvev-e4-stack > span + span { margin-top: 7px; }
.lvev-e4-grad--bold { font-weight: 510; }
.lvev-e4-note { color: rgba(248, 253, 255, 0.6); }
/* Screenreader-Text (die echte "Feature"-Spaltenbeschriftung steht in Zeile 2) */
.lvev-e4-vh {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* ---------------------------------------------------------------- Pille */
.lvev-e4-cta {
margin-top: 183px;
text-align: center;
}
.lvev-e4-pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 9px;
min-height: 31px;
border-radius: 78px;
border: 1px solid transparent;
/* Review R3 (ev2): dunkle Pille wie alle anderen Label-Pillen, nicht hellblau */
background:
linear-gradient(#000a10, #000a10) padding-box,
linear-gradient(90deg, rgba(52, 176, 248, 0) 0%, #35aef4 53%, rgba(49, 169, 238, 0) 100%) border-box;
box-shadow:
7px 3px 11px rgba(0, 0, 0, 0.36),
2px 2px 7px rgba(0, 0, 0, 0.1),
10px 8px 13px rgba(0, 0, 0, 0.09),
22px 19px 17px rgba(0, 0, 0, 0.05);
font-family: var(--lvf-font-display);
font-size: 14px;
font-weight: 400;
line-height: 17px;
letter-spacing: 0.84px;
color: #ffffff;
transition: filter 0.2s ease;
}
.lvev-e4-pill:hover { filter: brightness(1.12); }
@media (min-width: 1024px) {
.lvf-page .lvev-e4 .lvev-e4-pill {
position: relative;
z-index: 1;
}
.lvf-page .lvev-e4 .lvev-e4-pill::after {
content: "";
position: absolute;
inset: -9px 0;
}
}
/* ---------------------------------------------------------------- Tablet */
@media (max-width: 1023px) {
.lvev-e4-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lvev-e4-table { min-width: 940px; }
.lvev-e4-cta { margin-top: 90px; }
/* Mobil-Reparatur 11.08.2026, Befund 4: beim waagerechten Schieben lief
die erste Spalte mit weg, man sah nur noch Zahlen ohne Zeilenbeschriftung.
position: sticky haelt sie fest. Der Hintergrund muss deckend sein, sonst
scheinen die wegscrollenden Zellen durch: #12131b entspricht der bisher
durchscheinenden Fuellung (Kartenweiss 0.05 auf Seitengrund #05060f),
#122232 dasselbe mit dem Blauanteil der hi-Zeilen. (390-1023) */
.lvev-e4-cell--feature { position: sticky; left: 0; z-index: 1; }
/* Die Fuellung braucht drei Klassen, sonst kommt sie nicht an: das Theme
hello-elementor streift Tabellen in seiner reset.css mit
`table tbody > tr:nth-child(2n+1) > td` und Spezifitaet 0-2-8. Mit nur
einer Klasse (0-1-0) verlor unsere deckende Farbe gegen dieses
rgba(128,128,128,0.07), und zwar genau in jeder zweiten Zeile. Beim
Schieben liefen die Datenspalten dann sichtbar unter der Beschriftung
durch, Text auf Text. Betroffen waren Evaluation Payment, Maximum
Drawdown, Min. Trading Days, Profit Split und Payout Cycle. */
.lvev-e4 .lvev-e4-table .lvev-e4-cell--feature { background: #12131b; }
.lvev-e4 .lvev-e4-table .lvev-e4-row--hi .lvev-e4-cell--feature { background: #122232; }
/* Schiebehinweis am rechten Rand: ohne Verlauf merkt man nicht, dass die
Tabelle weitergeht. Der Verlauf sitzt auf dem ausseren Rahmen, nicht im
Scrollbehaelter, sonst wuerde er mit dem Inhalt wegrollen. (390-1023) */
.lvev-e4-table-outer { position: relative; }
.lvev-e4-table-outer::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 36px;
border-radius: 0 11px 11px 0;
background: linear-gradient(90deg, rgba(5, 6, 15, 0) 0%, rgba(5, 6, 15, 0.85) 100%);
pointer-events: none;
}
}
/* Touch-Ziel >= 44px bei 768-1023px, 13.08.2026: die Pille lief bisher mit
der Desktop-Hoehe von 31px durch (min-height:44 gab es nur unter 768px).
Gleiche Werte wie im Mobilzweig weiter unten, nur ohne max-width:1023px
Deckelung dort zu beruehren. */
@media (min-width: 768px) and (max-width: 1023px) {
.lvev-e4-pill { min-height: 44px; padding: 12px 20px; }
}
/* Ab 982 px passt die Tabelle komplett in den Rahmen (min-width 940 plus
2x20 Container-Innenabstand plus 2x1 Kartenrahmen). Ohne Schiebweg waere
der Verlauf dort ein falscher Hinweis. */
@media (min-width: 982px) and (max-width: 1023px) {
.lvev-e4-table-outer::after { display: none; }
}
/* ---------------------------------------------------------------- Mobile
Kein eigenes Design vorhanden: Tabelle bleibt als Tabelle lesbar und wird
im Rahmen horizontal scrollbar, kein Seiten-Ueberlauf. */
@media (max-width: 767px) {
.lvev-e4 { padding-top: 8px; padding-bottom: 64px; }
.lvev-e4-title { letter-spacing: -0.6px; line-height: 1.05; }
.lvev-e4-sub { margin-top: 16px; font-size: 16px; line-height: 24px; }
.lvev-e4-table-wrap { margin-top: 40px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lvev-e4-table { min-width: 780px; }
.lvev-e4-col-feature { width: 150px; }
/* Befund 4, 11.08.2026: Zellenschrift 11 -> 12 px, unter 12 px ist die
Tabelle auf dem Telefon unnoetig anstrengend. (390-767) */
.lvev-e4-cell { font-size: 12px; }
.lvev-e4-cell--feature { padding-left: 14px; }
.lvev-e4-cta { margin-top: 48px; }
.lvev-e4-pill { min-height: 44px; padding: 12px 20px; }
.lvev-e4-glow--left { left: -45%; width: 110%; }
.lvev-e4-glow--right { right: -45%; width: 110%; }
}
/* ============================================================
Fuellungen der Tabelle, Abgleich 11.08.2026 (Befunde B5 und B15), nur
Desktop. Grundlage ist figma/specs-eval/e4-compare.txt, Tabellenrahmen
box(261,3824,1238,868); jede Zahl unten ist am Mockup nachgemessen
(referenz-neu/soll/evaluation-aus-vollbild.png, Tabelle ab y=3824).
Was der Entwurf sagt und der Nachbau nicht hatte:
1. In den Koerperzeilen tragen NUR die ungeraden Datenspalten
fill=rgba(0,0,0,0.32) (Spec Z. 194, 204, 214 ...), die geraden sind
leer (Spec Z. 199, 209). Gebaut war die Fuellung auf jeder Zelle.
Gemessen Zeile "Profit Target", textfreier Streifen:
Soll Spalte 1..8: 11 16 12 17 11 16 11 15 (Gruenwert)
vorher 13 13 13 13 13 13 13 13
nachher 10 15 10 15 10 15 10 15
2. Die Groessenzeile (25K..150K) hat die Fuellung dagegen auf ALLEN acht
Zellen (Spec Z. 190 ff.), dort ist der Wechsel also richtigerweise aus.
Soll 11 11 12 12 11 11 11 10, vorher 13 durchgehend.
3. In den beiden Preiszeilen liegt rgba(18,169,255,0.1) ZWEIMAL: einmal
auf der Zeile (Spec Z. 133/161) und einmal auf jeder Datenzelle
(Z. 137, 140 ...). Die Beschriftungsspalte bekommt nur die Zeilenlage,
die vier "Not Applicable"-Zellen der Monatszeile gar keine Zelllage
(Spec Z. 177-188). Gemessen:
Beschriftung Soll rgb(7,30,44) vorher rgb(18,34,51) nachher rgb(7,30,44)
Datenzelle Soll rgb(7,45,66) vorher rgb(18,34,51) nachher rgb(8,44,65)
Not Applicable Soll rgb(4,31,48) vorher rgb(18,34,51) nachher rgb(7,30,44)
4. Die Platte unter der Tabelle: Figma nennt fill=rgba(255,255,255,0.05).
Aus 5 Prozent Weiss ueber Schwarz kann aber nur rgb(13,13,13) werden,
das gerenderte Mockup zeigt an der Beschriftungsspalte durchgehend
rgb(6,15,21) - also blaugrau statt neutralgrau. Gegenprobe: die
Gruppenkopfzelle ist im Mockup rgb(2,6,9), und 0,6 Schwarz ueber
rgb(6,15,21) ergibt genau rgb(2,6,8). Der Entwurfswert ist an dieser
Stelle nicht erreichbar, deshalb steht hier der gemessene Ton.
Vorher: rgba(255,255,255,0.05) ueber dem Seitengrund #05060f = rgb(18,19,27).
5. Die senkrechten 1-px-Linien rgba(128,128,128,0.5) zwischen den Spalten
hat das Mockup nicht (Grenzwert = Zellwert). Sie stehen weder in
fragment.css noch in lvlup-fixes, sondern kommen live aus einem
Grundstil fuer table td/th: die Fragmentregel setzt nur border-top,
damit bleiben border-left und border-right des Grundstils stehen. In
der lokalen Vorschau fehlt dieser Grundstil, der Fehler ist dort also
nicht sichtbar. Deshalb hier ausdruecklich abgeschaltet.
============================================================ */
@media (min-width: 1024px) {
.lvev-e4 .lvev-e4-table-wrap { background: #031019; }
/* 6. Die blaue Lichtlinie auf der Tabellenoberkante hat der Entwurf nicht.
Der Figma-Rahmen (Frame 2121452600, box 261/3824/1238/868) traegt nur
einen Strich Weiss 10 %, 0,7 px, INSIDE, sonst nichts; die Fuellung ist
Weiss 5 % plus ein Blauverlauf im Mischmodus COLOR, der nur umfaerbt und
nicht aufhellt. Gemessen an der Oberkante, oberste Zeile der Platte:
SOLL rgb(16,21,25) IST rgb(0,144,226)
Der weisse Rahmen liegt bereits an (.lvev-e4-table-wrap, border 1 px
rgba(255,255,255,0.1), gemessen rgb(29,40,48)); die Zusatzlinie kam
einfach obendrauf. Die Breite des Rahmens bleibt bei 1 px, damit sich
die abgenommene Hoehe nicht aendert. */
.lvev-e4 .lvev-e4-table-wrap::before { background: none; }
/* Punkt 5: nur die waagerechte Haarlinie bleibt */
.lvev-e4 .lvev-e4-table .lvev-e4-cell {
border-left: 0;
border-right: 0;
border-bottom: 0;
}
/* Punkt 1: Wechselfuellung. Kind 1 ist die Beschriftungsspalte, die
Datenspalten sind Kind 2 bis 9. Ungerade Datenspalten (1, 3, 5, 7)
sind damit die geradzahligen Kinder. */
.lvev-e4 .lvev-e4-table tbody .lvev-e4-row > .lvev-e4-cell {
background: transparent;
}
.lvev-e4 .lvev-e4-table tbody .lvev-e4-row > td.lvev-e4-cell:nth-child(even) {
background: var(--lvev-e4-cell-bg);
}
/* Punkt 3: Preiszeilen */
.lvev-e4 .lvev-e4-table tbody .lvev-e4-row--hi {
background: var(--lvev-e4-hi-bg);
}
.lvev-e4 .lvev-e4-table tbody .lvev-e4-row--hi > td.lvev-e4-cell:not(.lvev-e4-cell--dim) {
background: var(--lvev-e4-hi-bg);
}
/* Die beiden Ausnahmen brauchen dieselbe Spezifitaet wie die
Wechselfuellung oben (0-5-2 gegen 0-5-1), sonst faerbt der
nth-child-Wechsel die "Not Applicable"-Zellen mit ein. */
.lvev-e4 .lvev-e4-table tbody .lvev-e4-row--hi > .lvev-e4-cell--feature,
.lvev-e4 .lvev-e4-table tbody .lvev-e4-row--hi > td.lvev-e4-cell.lvev-e4-cell--dim {
background: transparent;
}
}
/* Zeilenhoehe der Ueberschrift, 11.08.2026: im Entwurf 44 px
(Figma-TEXT y 3644), live 61,7. Der Abstand zur naechsten Zeile
stimmt bereits, es ist allein die Zeilenhoehe. 44 / 65 = 0,677.
Dieselbe Korrektur auf allen Sektionsueberschriften dieser Seite und auf
elite; der Entwurf verwendet ueberall denselben Grad. Nur ab 1024 px,
darunter faellt der Grad per clamp kleiner aus und die Zeile bricht um. */
@media (min-width: 1024px) {
.lvev-e4-title { line-height: 0.677; }
}
/* 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 "Compare Evaluation" (p) 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) {
.lvev-e4-title { padding-bottom: 14px; margin-bottom: -14px; }
}
/* == e5-steps == */
/* == e5 Feature-Karten der Evaluation-Seite ==
"One Structure Across Every Evaluation", 6 Karten im 3x2-Raster.
Desktop exakt nach Figma (Frame 1760, Band y=4930..5840, Content x=260..1500),
Tablet 2 Spalten, Mobile (<768px, kein Design) gestapelt.
Hintergrund der Sektion transparent, lokale Glows laufen weich aus. */
.lvev-e5 {
--lvev-e5-grad-white: linear-gradient(141deg, rgba(255, 255, 255, 0.7) 0%, #ffffff 50%, rgba(255, 255, 255, 0.7) 100%);
position: relative;
isolation: isolate;
padding-top: 8px;
padding-bottom: 45px;
}
/* ---------------------------------------------------------------- Glows
Figma: weichgezeichnete "Star"-Vektoren (#00a2ff blur 300, #04304a blur 500,
weiss blur 520) links/rechts, plus heller Schein unter der Pille am unteren
Rand (rgba(121,206,255,0.69)). Als grosse radial-gradients mit transparenten
Enden, damit nichts hart an den Nachbarsektionen abschneidet. */
.lvev-e5-glow {
position: absolute;
z-index: -1;
pointer-events: none;
border-radius: 50%;
}
.lvev-e5-glow--left {
left: -24%;
top: -10%;
width: 78%;
height: 90%;
background: radial-gradient(closest-side, rgba(0, 162, 255, 0.6) 0%, rgba(18, 169, 255, 0.38) 40%, rgba(4, 48, 74, 0) 72%);
}
.lvev-e5-glow--right {
right: -24%;
top: -8%;
width: 78%;
height: 92%;
background: radial-gradient(closest-side, rgba(18, 169, 255, 0.55) 0%, rgba(18, 169, 255, 0.34) 40%, rgba(4, 48, 74, 0) 72%);
}
.lvev-e5-glow--bottom {
left: 50%;
bottom: -22%;
width: 95%;
height: 62%;
transform: translateX(-50%);
background: radial-gradient(closest-side, rgba(121, 206, 255, 0.6) 0%, rgba(0, 162, 255, 0.32) 42%, rgba(0, 162, 255, 0) 72%);
}
/* Rundgang 13.08.2026, Befund 7: ab Desktop ersetzt die Lichtsaeulen-Technik
des Server-Overrides (r3-evaluation.css R3-evaluation-07 + r3b-evaluation.css
R3B-04, feste px-Mitten im 1760-Rahmen) den lokalen closest-side-Schein.
Unter 1024px bleibt der Bestand oben unveraendert in Kraft (Kaans eigene
Mobil-Glows, siehe r3-evaluation.css Kommentar Zeile 171-176). Die Naht zu
e6 (letzte 300px) wird davon unabhaengig weiter von der Maskenschicht weiter
unten in dieser Datei ausgeblendet und mit e6s Saeule ueberblendet -- diese
Ebene bleibt unveraendert, sie setzt nur zusaetzlich eine Maske auf dieselben
Elemente und gewinnt dort mit hoeherer Spezifitaet. */
@media (min-width: 1024px) {
.lvev-e5-glow--bottom { background: none; }
.lvev-e5-glow--left {
position: absolute;
inset: 0;
width: auto;
height: auto;
transform: none;
border-radius: 0;
filter: none;
opacity: 1;
background:
radial-gradient(300px 2600px at 0px 1246px, rgba(254,254,255,1) 0%,rgba(250,253,255,1) 8%,rgba(216,240,254,1) 15%,rgba(161,220,253,1) 23%,rgba(128,204,244,1) 31%,rgba(80,178,226,1) 38%,rgba(50,150,201,.97) 46%,rgba(38,128,178,.94) 54%,rgba(26,100,142,.88) 62%,rgba(18,78,112,.78) 69%,rgba(10,62,92,.62) 77%,rgba(5,46,70,.36) 86%,rgba(2,30,48,0) 100%),
radial-gradient(300px 2050px at 100% 1246px, rgba(254,254,255,1) 0%,rgba(250,253,255,1) 8%,rgba(216,240,254,1) 15%,rgba(161,220,253,1) 23%,rgba(128,204,244,1) 31%,rgba(80,178,226,1) 38%,rgba(50,150,201,.97) 46%,rgba(38,128,178,.94) 54%,rgba(26,100,142,.88) 62%,rgba(18,78,112,.78) 69%,rgba(10,62,92,.62) 77%,rgba(5,46,70,.36) 86%,rgba(2,30,48,0) 100%);
}
/* R3B-04: die Referenz zeigt in diesem Band nur links Licht, rechts fast
schwarz. Rechte Saeulenkopie deshalb kuerzer (1400 -> 1000), Lichtkern
bleibt an derselben Stelle. */
.lvev-e5-glow--right {
position: absolute;
inset: 0;
width: auto;
height: auto;
transform: none;
border-radius: 0;
filter: none;
opacity: 1;
mix-blend-mode: screen;
background:
radial-gradient(1350px 1400px at 0px 1296px, rgba(255,255,255,1) 0%,rgba(250,253,255,1) 16%,rgba(215,240,255,1) 30%,rgba(175,226,255,.98) 42%,rgba(110,205,250,.92) 54%,rgba(70,185,240,.85) 64%,rgba(30,150,215,.7) 76%,rgba(10,90,140,.36) 88%,rgba(4,40,64,0) 100%),
radial-gradient(1350px 1000px at 100% 1296px, rgba(255,255,255,1) 0%,rgba(250,253,255,1) 16%,rgba(215,240,255,1) 30%,rgba(175,226,255,.98) 42%,rgba(110,205,250,.92) 54%,rgba(70,185,240,.85) 64%,rgba(30,150,215,.7) 76%,rgba(10,90,140,.36) 88%,rgba(4,40,64,0) 100%);
}
}
/* ---------------------------------------------------------------- Kopf */
.lvev-e5-head { text-align: center; }
.lvev-e5-title {
font-family: var(--lvf-font-display);
font-size: clamp(32px, 5vw, 65px);
font-weight: 500;
line-height: 0.95;
letter-spacing: -1.3px;
background: var(--lvev-e5-grad-white);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lvev-e5-title-accent {
background: var(--lvf-grad-blue);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lvev-e5-sub {
margin-top: 26px;
font-family: var(--lvf-font-display);
font-size: 18px;
font-weight: 425;
line-height: 24px;
letter-spacing: 0.54px;
color: rgba(255, 255, 255, 0.85);
}
/* ---------------------------------------------------------------- Panel
Figma: Rahmen 38px Radius mit blauem Verlauf (90deg, Mitte voll, Raender 50%),
darin 6 Karten 392x204, Abstand 15px, Innenabstand 16px, backdrop-blur. */
.lvev-e5-panel {
position: relative;
margin-top: 86px;
padding: 16px;
border: 3px solid transparent;
border-radius: 38px;
background:
linear-gradient(rgba(4, 6, 14, 0.72), rgba(4, 6, 14, 0.72)) padding-box,
linear-gradient(90deg, rgba(0, 162, 255, 0.5) 0%, #00a2ff 50%, rgba(0, 162, 255, 0.5) 100%) border-box;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(60px);
backdrop-filter: blur(60px);
}
.lvev-e5-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
/* ---------------------------------------------------------------- Karte
Figma: fill rgba(0,162,255,0.05) + gradient(6deg, transparent 35%, #00a2ff
@0.29) auf rgba(0,0,0,0.95), Radius 22, backdrop-blur 30, zwei weiche
Ellipsen-Scheine in der oberen Haelfte, grosse Nummer oben rechts. */
.lvev-e5-card {
position: relative;
overflow: hidden;
min-height: 204px;
padding: 25px;
border-radius: 22px;
background:
linear-gradient(6deg, rgba(0, 162, 255, 0) 35%, rgba(0, 162, 255, 0.18) 100%),
rgba(3, 5, 11, 0.95);
box-shadow:
0 5px 10px rgba(0, 0, 0, 0.2),
0 0 0 1px rgba(0, 0, 0, 0.21),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(30px);
backdrop-filter: blur(30px);
display: flex;
flex-direction: column;
}
/* Ellipsen-Licht oben (Figma Group 1000003684, opacity 0.2) */
.lvev-e5-card::before {
content: "";
position: absolute;
top: -30%;
left: -10%;
width: 120%;
height: 80%;
background: radial-gradient(closest-side, rgba(0, 162, 255, 0.22) 0%, rgba(0, 162, 255, 0) 72%);
pointer-events: none;
}
.lvev-e5-num {
position: absolute;
top: 6px;
right: 18px;
font-family: var(--lvf-font-display);
font-size: 130px;
font-weight: 500;
line-height: 1;
letter-spacing: -8px;
/* Rundgang 13.08.2026, Befund R3B-06: dieser Wert war byte-identisch mit
dem defekten IST-Zustand, den r3b-evaluation.css R3B-06 selbst als
Beleg zitiert (nur senkrecht, halbe Deckung). Unter 1024px greift kein
schaerferer Fix (der folgt erst ab 1024px weiter unten in dieser Datei),
deshalb hier direkt der diagonale Zielverlauf aus dem Override. */
background: linear-gradient(45deg,
rgba(140, 213, 255, 0) 12%,
rgba(140, 213, 255, .06) 30%,
rgba(140, 213, 255, .34) 50%,
rgba(140, 213, 255, .72) 70%,
rgba(140, 213, 255, 1) 88%,
rgba(160, 224, 255, 1) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
pointer-events: none;
user-select: none;
}
.lvev-e5-icon {
position: relative;
width: 47px;
height: 47px;
border-radius: 9px;
background: var(--lvf-grad-blue);
color: #000000;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
inset 0 2px 4px rgba(255, 255, 255, 0.35),
0 4px 12px rgba(0, 162, 255, 0.35);
}
.lvev-e5-text {
position: relative;
margin-top: 41px;
display: flex;
flex-direction: column;
gap: 6px;
}
.lvev-e5-card-title-row {
display: flex;
align-items: center;
gap: 9px;
flex-wrap: wrap;
}
.lvev-e5-card-title {
font-family: var(--lvf-font-display);
font-size: 19px;
font-weight: 500;
line-height: 27px;
letter-spacing: 0.39px;
background: var(--lvev-e5-grad-white);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Kennwort je Kartentitel farbig abgesetzt (Muster C), restlicher Titel bleibt
im weissen Eltern-Verlauf. Figma-Beleg (13.08.2026, raw-JSON characterStyle-
Overrides von figma/evaluation.json, Knoten je Kartentitel):
Karte 1 "No Daily Loss Limit" -> Akzent "Daily Loss" (chars 3-12)
Karte 2 "40% Consistency Rule" -> Akzent "40%" (chars 0-2)
Karte 3 "Payouts Every 14 Days" -> Akzent "14 Days" (chars 14-20)
Karte 4 "10% Payout Cap" -> Akzent "10%" (chars 0-2)
Karte 5 "EOD Trailing Drawdown" -> Akzent "EOD" (chars 0-2)
Karte 6 "News Trading Allowed" -> Akzent "News" (chars 0-3)
Karten 4-6 hatten im Fragment ueberhaupt kein Akzent-Span, obwohl Figma dort
denselben Style-Override (Tabellen-Eintrag 14) traegt wie bei 1-3. Dazu war
die Akzentfarbe auf 1-3 falsch: #9cd4f0->#57b8ea statt dem Figma-Fuellwert
linear-gradient(180deg, #8cd5ff 0%, #12a9ff 100%) - exakt --lvf-grad-blue,
Abweichung am unteren Stop 69 Rot-Stufen (87 statt 18). */
.lvev-e5-card-title-accent {
/* Eltern-h3 clippt Weiss-Verlauf; Akzent braucht eigenen Clip (Review R3) */
background: var(--lvf-grad-blue);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lvev-e5-card-desc {
max-width: 331px;
font-family: var(--lvf-font-display);
font-size: 12px;
font-weight: 345;
line-height: 16px;
letter-spacing: 0.47px;
color: rgba(253, 249, 249, 0.64);
}
/* Badge "Industries Biggest" (nur Karte 4): blaue Pille mit Stern */
.lvev-e5-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px 4px 7px;
border-radius: 83px;
/* Saum-Verlauf statt --lvf-grad-blue plus inset-Schatten, 11.08.2026,
dieselbe Umstellung wie beim Zwilling .lvev-e2-pop. */
background: var(--lvf-grad-blue-btn);
box-shadow:
2px 5px 10px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(0, 0, 0, 0.25),
inset 0 2px 8px -1px rgba(255, 255, 255, 0.3);
/* Schrift war weiss auf hellblauem Grund und damit kaum lesbar. Das Mockup
zeigt hier dunkle Schrift, genau wie beim Zwilling .lvev-e2-pop. Mit dem
aufgehellten Saum-Verlauf waere Weiss noch schlechter geworden. */
color: #000000;
font-family: var(--lvf-font-display);
font-size: 9px;
font-weight: 565;
line-height: 11px;
letter-spacing: 0.9px;
white-space: nowrap;
}
/* ---------------------------------------------------------------- Pille */
.lvev-e5-cta {
margin-top: 120px;
text-align: center;
}
/* Rundgang 13.08.2026, Befund R3-10: die Referenz zeigt die Pille dunkel auf
dem hellen Band (Fuellung pipettiert (1,12,18), helle Schrift, 182x31),
nicht als helle blaue Knopfoptik. Werte 1:1 aus r3-evaluation.css
R3-evaluation-10. */
.lvev-e5-pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 9px;
min-height: 31px;
min-width: 182px;
border-radius: 78px;
border: 1px solid rgba(255, 255, 255, 0.12);
background-color: #010c12;
box-shadow:
0 0 0 0.5px rgba(53, 174, 244, 0.65),
0 24px 60px rgba(121, 206, 255, 0.45),
2px 2px 7px rgba(0, 0, 0, 0.1);
font-family: var(--lvf-font-display);
font-size: 14px;
font-weight: 400;
line-height: 17px;
letter-spacing: 0.84px;
color: #e6ebee;
-webkit-text-fill-color: #e6ebee;
transition: filter 0.2s ease;
}
.lvev-e5-pill:hover { filter: brightness(1.12); }
@media (min-width: 1024px) {
.lvf-page .lvev-e5 .lvev-e5-pill {
position: relative;
z-index: 1;
}
.lvf-page .lvev-e5 .lvev-e5-pill::before {
content: "";
position: absolute;
inset: -14px 0 0;
}
}
/* ---------------------------------------------------------------- Tablet */
@media (max-width: 1023px) {
.lvev-e5-grid { grid-template-columns: repeat(2, 1fr); }
.lvev-e5-num { font-size: 104px; }
.lvev-e5-cta { margin-top: 80px; }
}
/* Touch-Ziel >= 44px bei 768-1023px, 13.08.2026: gleiche Luecke wie bei
e4-compare, die Pille blieb bisher bei der Desktop-Hoehe von 31px. */
@media (min-width: 768px) and (max-width: 1023px) {
.lvev-e5-pill { min-height: 44px; padding: 12px 20px; }
}
/* ---------------------------------------------------------------- Mobile
Kein eigenes Design vorhanden: Karten gestapelt, Fliesstext >= 16px,
Pille mit Touch-Ziel >= 44px, kein horizontaler Ueberlauf. */
@media (max-width: 767px) {
.lvev-e5 { padding-top: 8px; padding-bottom: 72px; }
.lvev-e5-title { letter-spacing: -0.6px; line-height: 1.05; }
.lvev-e5-sub { margin-top: 16px; font-size: 16px; line-height: 24px; }
.lvev-e5-panel {
margin-top: 44px;
padding: 12px;
border-width: 2px;
border-radius: 26px;
}
.lvev-e5-grid { grid-template-columns: 1fr; gap: 12px; }
.lvev-e5-card { min-height: 0; padding: 22px; }
.lvev-e5-num { font-size: 92px; top: 10px; right: 14px; letter-spacing: -5px; }
.lvev-e5-text { margin-top: 28px; gap: 8px; }
.lvev-e5-card-title { font-size: 18px; }
.lvev-e5-card-desc { font-size: 16px; line-height: 22px; max-width: none; }
.lvev-e5-badge { font-size: 10px; padding: 5px 10px 5px 8px; }
.lvev-e5-cta { margin-top: 52px; }
.lvev-e5-pill { min-height: 44px; padding: 12px 20px; }
.lvev-e5-glow--left { left: -50%; width: 120%; }
.lvev-e5-glow--right { right: -50%; width: 120%; }
}
/* ---------------------------------------------------------------- Desktop
Mockup-Abgleich 11.08.2026 (nur >=1024px, fuer Tablet/Mobile gibt es keine
Vorlage). Gemessen im Mockup referenz-neu/soll/evaluation-aus-vollbild.png
gegen den Live-Stand; Sektion lvev-e5 war 863 px hoch statt 916.
Anker im Mockup (Seitenkoordinaten): h2-Oberkante 4924, Panel 5108..5569,
Pille 5785..5816, Sektionsende 5832. Live lagen dieselben Anker bei
5061, 5258..5719, 5839..5870, 5916.
- Kopf -> Panel: Soll 72 px, war 86
- Panel -> Pille: Soll 216 px, war 120 (das ist die Hauptursache)
- Pille -> Sektionsende: Soll 16 px, war 45 */
@media (min-width: 1024px) {
/* Soll 16 px zwischen Pille und Sektionsende, gemessen waren 45 */
.lvev-e5 { padding-bottom: 16px; }
/* Soll 72 px zwischen Unterzeile und Panel, gemessen waren 86 */
.lvev-e5-panel { margin-top: 72px; }
/* Soll 216 px Luft zwischen Panel-Unterkante und Pille, gemessen waren 120 */
.lvev-e5-cta { margin-top: 216px; }
}
/* Abnahme: seitliche Cyan-Blooms zu schwach (-55 bis -66%) - Fluegel verstaerken */
.lvev-e5::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(22% 55% at 0% 45%, rgba(140, 210, 250, 0.55) 0%, rgba(40, 150, 220, 0.25) 50%, rgba(0, 140, 220, 0) 80%),
radial-gradient(22% 55% at 100% 45%, rgba(140, 210, 250, 0.55) 0%, rgba(40, 150, 220, 0.25) 50%, rgba(0, 140, 220, 0) 80%);
}
/* Zeilenhoehe der Ueberschrift, 11.08.2026: im Entwurf 44 px
(Figma-TEXT y 4932), live 61,8. Der Abstand zur naechsten Zeile
stimmt bereits, es ist allein die Zeilenhoehe. 44 / 65 = 0,677.
Dieselbe Korrektur auf allen Sektionsueberschriften dieser Seite und auf
elite; der Entwurf verwendet ueberall denselben Grad. Nur ab 1024 px,
darunter faellt der Grad per clamp kleiner aus und die Zeile bricht um. */
@media (min-width: 1024px) {
.lvev-e5-title { line-height: 0.677; }
}
/* ============================================================
Effekt-Abgleich 11.08.2026, nur Desktop (>=1024px), gemessen am
Soll-Bild referenz-neu/soll/evaluation-aus-vollbild.png gegen das
frisch gerenderte Ist (Karte 1 Soll x277..669/y5129..5333, live DOM
x279..669,7/y5149,8..5353,8).
1. Grosse Ziffern 20 Prozent zu klein: Figma-TEXT (Band e5, Knoten
"0"/"1") sagt Grad 161,6 und ls -8,08, live 130 / -8. Tinten-
Oberkante Soll card-rel 25 (Bild y5154), live 23 (y5173) - die
Lage stimmt fast, es fehlt der Grad. Tinte der "1" endet im Soll
30 px vor dem rechten Kartenrand (x639 von 669), live 19 px
(x651 von 670). Bei Grad 162 wandert die Cap-Unterkante an
dieselbe Stelle (Soll-Cap 108 px, live 87 px, beide enden y~5261).
2. Innenschein sitzt an der falschen Stelle: die Soll-Karte ist im
oberen Drittel REIN schwarz (Raster y10/40/71 quer: (1,2,4)),
Ist dort bis (2,51,83). Der Schein liegt im Soll UNTEN RECHTS:
Figma-Ellipsen (Gruppe opacity 0,2) Mitte card-rel (322,185) =
82 % / 91 %, gemessene Soll-Spitze dort (1,15,26), Ist nur
(3,7,13). Deshalb: 6deg-Blau aus dem Kartengrund raus, ::before
von oben nach unten rechts, Grundton dunkler ((3,6,12) -> (1,2,4)).
============================================================ */
@media (min-width: 1024px) {
/* Ziffern: Ist 130px/-8, Soll 161,6px/-8,08 (Figma); top/right so,
dass die Tinte auf Soll (Oberkante card-rel 25, rechts 30) faellt */
.lvev-e5-num {
font-size: 162px;
letter-spacing: -8.08px;
top: 3px;
right: 28px;
}
/* Kartengrund: Soll oben (1,2,4) statt Ist (3,25..51,43..83);
das 6deg-Blau ist im Entwurf von 95 % Schwarz ueberdeckt */
.lvev-e5-card {
background: rgb(1, 2, 4);
}
/* Innenschein nach unten rechts (Figma-Ellipsen 556x182 und 826x270,
Mitte 82 % / 91 %, Gruppe 0,2): Soll-Spitze (1,15,26) bei (322,185) */
.lvev-e5-card::before {
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(71% 45% at 82% 91%, rgba(0, 162, 255, 0.045) 0%, rgba(0, 162, 255, 0) 70%),
/* flacherer Auslauf nach oben: Soll traegt bei (322,71) noch (7,12,17)
und bei (322,110) (5,10,15), mit hartem 75%-Ende kam dort nichts an */
radial-gradient(88% 66% at 82% 91%, rgba(0, 162, 255, 0.045) 0%, rgba(0, 162, 255, 0.033) 55%, rgba(0, 162, 255, 0) 96%);
}
/* Ziffern-Verlauf: im Entwurf traegt nur die ZWEITE Ziffer den vollen
senkrechten Verlauf (Figma "1": #8cd5ff -> (29,105,150) bei 43 % ->
transparent), die fuehrende "0" steht auf 8 % Deckung. Der bisherige
45-Grad-Kompromiss aus r3b machte die "0" viel zu hell: gemessen an
Karte 1 card-rel (260,40) Soll (8,16,20), Ist (61,93,112); Zeile y71
hell Soll nur x346..362 ("1"-Stamm), Ist ab x299. Deshalb senkrechter
Verlauf plus flache dunkle "0" per ::first-letter.
Selektor 0-4-0, weil r3b-evaluation.css Z.191 (0-3-0, laedt nach den
Fragmenten) sonst gewinnt. */
.lvev-e5 .lvev-e5-panel .lvev-e5-card .lvev-e5-num {
/* Stops wie der Figma-"1"-Verlauf (43 %), Auslauf so, dass die Tinte
wie im Soll bei card-rel y103 unter die 90er-Schwelle faellt
(mit 48 %/85 % gemessen erst y110) */
background: linear-gradient(182deg, #8cd5ff 0%, rgb(29, 105, 150) 43%, rgba(8, 38, 55, 0.2) 80%, rgba(8, 38, 55, 0) 97%);
-webkit-background-clip: text;
background-clip: text;
}
/* Fuehrende "0" flach dunkel: Soll (260,40)=(8,16,20), r3b-Referenz
unten links (11,18,24); mit rgb(14,28,36) gemessen (14,28,36),
deshalb auf rgb(10,17,22) nachgeduneklt */
.lvev-e5-num::first-letter {
-webkit-text-fill-color: rgb(10, 17, 22);
color: rgb(10, 17, 22);
}
/* Icon-Kachel: der blaue Aussenschatten existiert im Entwurf nicht
(Figma-Container ohne Drop-Shadow; gemessen direkt unter dem Icon
card-rel (48,82): Soll (1,2,4), Ist (1,9,15)). Innenglanz bleibt. */
.lvev-e5-icon {
box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.35);
}
}
/* ============================================================
Naht e5/e6, 12.08.2026, nur Desktop. Gleiche Ursache wie an der Naht
e6/e7 (siehe e6-beyond/fragment.css), nur schwaecher: jede Sektion
traegt eine eigene Kopie derselben Lichtsaeule, und die Kopien passen
nicht zusammen.
Ausgerichtet ueber Inhalt, nicht ueber y: Versatz Soll zu Ist ist an
dieser Stelle 0. Sprung ueber 10 Spaltenbloecke, Median je Block,
8 px ueber gegen 8 px unter der Naht y5855:
live 1,6 3,1 4,6 4,0 2,1 7,5 8,5 23,2 18,7 8,3 Mittel 8,2
Der Ausschlag sitzt rechts (Bloecke 8 und 9). Ursache: r3b-evaluation.css
verkuerzt die RECHTE Saeule von e4 und e5 (2600 -> 2050, Querband
1400 -> 1000), e6 behaelt 2600/1400. Dazu stehen die Anker 36 px
auseinander (e5: 4956,8 + 1246 = 6202,8; e6: 5854,8 + 384 = 6238,8).
Reparatur wie bei e6: ueber die letzten 300 px wird das eigene Feld
ausgeblendet und das Feld von e6 eingeblendet, mit dessen Ankern,
umgerechnet auf die Oberkante von e5 (e5-Hoehe 898 + 384 = 1282 fuer
die Saeule, 898 + 434 = 1332 fuer das Querband). Die stillgelegte Ebene
--bottom traegt das Querband, ::before die Saeule; diese Reihenfolge ist
noetig, weil das Querband mit screen ueber der Saeule liegen muss (mit
vertauschten Rollen misst sich der Sprung 25,0 statt 2,9).
Nachher: Sprung 8,2 -> 2,9. Die mittlere Abweichung gegen das Soll-Bild
im Band 5600..5850 sinkt dabei von 40,6 auf 34,8, oberhalb davon
(4650..5540) aendert sich nichts (15,9 vorher wie nachher). Naht e4/e5
1,76 -> 1,75. Seitenhoehe bleibt 9809 px.
Spezifitaet 0-3-0 bzw. 0-3-1, weil r3/r3b (Prioritaet 1200) dieselben
Ebenen mit 0-2-0 setzen.
============================================================ */
@media (min-width: 1024px) {
/* eigenes Feld von e5 ueber die letzten 300 px ausblenden */
.lvf-page .lvev-e5 .lvev-e5-glow--left,
.lvf-page .lvev-e5 .lvev-e5-glow--right {
-webkit-mask-image: linear-gradient(180deg,
#000 0, #000 calc(100% - 300px), rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(180deg,
#000 0, #000 calc(100% - 300px), rgba(0, 0, 0, 0) 100%);
}
/* Lichtsaeule von e6, Anker 1282 = e5-Hoehe 898 plus e6-Anker 384 */
.lvf-page .lvev-e5.lvev-e5::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
border-radius: 0;
background:
radial-gradient(300px 2600px at 0px 1282px, rgba(254,254,255,1) 0%,rgba(250,253,255,1) 8%,rgba(216,240,254,1) 15%,rgba(161,220,253,1) 23%,rgba(128,204,244,1) 31%,rgba(80,178,226,1) 38%,rgba(50,150,201,.97) 46%,rgba(38,128,178,.94) 54%,rgba(26,100,142,.88) 62%,rgba(18,78,112,.78) 69%,rgba(10,62,92,.62) 77%,rgba(5,46,70,.36) 86%,rgba(2,30,48,0) 100%),
radial-gradient(300px 2600px at 100% 1282px, rgba(254,254,255,1) 0%,rgba(250,253,255,1) 8%,rgba(216,240,254,1) 15%,rgba(161,220,253,1) 23%,rgba(128,204,244,1) 31%,rgba(80,178,226,1) 38%,rgba(50,150,201,.97) 46%,rgba(38,128,178,.94) 54%,rgba(26,100,142,.88) 62%,rgba(18,78,112,.78) 69%,rgba(10,62,92,.62) 77%,rgba(5,46,70,.36) 86%,rgba(2,30,48,0) 100%);
-webkit-mask-image: linear-gradient(180deg,
rgba(0, 0, 0, 0) calc(100% - 300px), #000 100%);
mask-image: linear-gradient(180deg,
rgba(0, 0, 0, 0) calc(100% - 300px), #000 100%);
}
/* Querband von e6, Anker 1332 = 898 plus 434, wie dort mit screen */
.lvf-page .lvev-e5 .lvev-e5-glow--bottom {
position: absolute;
inset: 0;
width: auto;
height: auto;
transform: none;
border-radius: 0;
filter: none;
opacity: 1;
mix-blend-mode: screen;
background:
radial-gradient(1350px 1400px at 0px 1332px, rgba(255,255,255,1) 0%,rgba(250,253,255,1) 16%,rgba(215,240,255,1) 30%,rgba(175,226,255,.98) 42%,rgba(110,205,250,.92) 54%,rgba(70,185,240,.85) 64%,rgba(30,150,215,.7) 76%,rgba(10,90,140,.36) 88%,rgba(4,40,64,0) 100%),
radial-gradient(1350px 1400px at 100% 1332px, rgba(255,255,255,1) 0%,rgba(250,253,255,1) 16%,rgba(215,240,255,1) 30%,rgba(175,226,255,.98) 42%,rgba(110,205,250,.92) 54%,rgba(70,185,240,.85) 64%,rgba(30,150,215,.7) 76%,rgba(10,90,140,.36) 88%,rgba(4,40,64,0) 100%);
-webkit-mask-image: linear-gradient(180deg,
rgba(0, 0, 0, 0) calc(100% - 300px), #000 100%);
mask-image: linear-gradient(180deg,
rgba(0, 0, 0, 0) calc(100% - 300px), #000 100%);
}
}
/* == e6-beyond == */
/* == e6-beyond der Evaluation-Seite ==
"Know What Happens Beyond the Evaluation", 8 Features in 3 versetzten Spalten
(links/rechts je 3, Mitte 2 mit 123px Versatz), feine Verbindungslinien mit
Punkten, darunter 2 CTAs. Helle Sektion: schwarzer Text auf grossem
weiss/blau-Glow, der nach allen Seiten weich transparent auslaeuft (keine
harten Kanten zu den dunklen Nachbarsektionen).
Desktop exakt nach Figma (Frame 1760, Band y=5840..7210, Content x=260..1500),
Tablet 2 Spalten, Mobile (<768px, kein Design) gestapelt. */
.lvev-e6 {
position: relative;
isolation: isolate;
padding-top: 10px;
padding-bottom: 140px;
}
/* ---------------------------------------------------------------- Glows
Figma: riesige weichgezeichnete "Star"-Vektoren (#00a2ff blur 300,
#04304a blur 500, #ffffff blur 520), die das ganze Band hell ausleuchten.
Als grosse radial-gradients mit transparenten Enden: weisser Kern in der
Mitte, blaue Raender, tiefblauer Auslauf nach unten in Richtung FAQ. */
.lvev-e6-glow {
position: absolute;
z-index: -1;
pointer-events: none;
border-radius: 50%;
}
.lvev-e6-glow--center {
left: 50%;
top: -10%;
width: 140%;
/* Messpass 06.08.2026: die Soll-Helligkeit reicht bis UNTER die CTAs
(y6820-7040 quer 147-249), unsere Ellipsen liefen zu frueh aus */
height: 132%;
transform: translateX(-50%);
background: radial-gradient(closest-side, rgba(120, 205, 255, 0.95) 0%, rgba(80, 185, 250, 0.75) 55%, rgba(0, 162, 255, 0.4) 80%, rgba(0, 162, 255, 0) 100%);
}
.lvev-e6-glow--left {
left: -30%;
/* Soll: die Rand-Helligkeit beginnt schon VOR der Sektion (y5720 Rand
25-109,130-190,187-235) und traegt bis in die FAQ-Zone (y7260: 106,201,251) */
top: -16%;
width: 90%;
height: 148%;
background: radial-gradient(closest-side, rgba(245, 250, 255, 0.98) 0%, rgba(160, 220, 252, 0.62) 55%, rgba(4, 48, 74, 0) 85%);
}
.lvev-e6-glow--right {
right: -30%;
top: -16%;
width: 90%;
height: 148%;
background: radial-gradient(closest-side, rgba(245, 250, 255, 0.98) 0%, rgba(160, 220, 252, 0.62) 55%, rgba(4, 48, 74, 0) 85%);
}
.lvev-e6-glow--bottom {
left: 50%;
bottom: -62%;
width: 120%;
height: 55%;
transform: translateX(-50%);
background: radial-gradient(closest-side, rgba(4, 48, 74, 0.75) 0%, rgba(3, 30, 48, 0.55) 45%, rgba(5, 6, 15, 0) 78%);
}
/* ---------------------------------------------------------------- Kopf */
.lvev-e6-head { text-align: center; }
/* Element + 2 Klassen (0-2-1), gleiche Spezifitaet wie die Heading-Regel der
Shell (.lvf-page.lvf-page h2/h3), aber spaeter geladen -> gewinnt. */
.lvev-e6 h2.lvev-e6-title {
font-family: var(--lvf-font-display);
font-size: clamp(32px, 5vw, 65px);
font-weight: 525;
line-height: 0.95;
letter-spacing: -1.3px;
color: #000000;
}
.lvev-e6-sub {
margin-top: 26px;
margin-inline: auto;
max-width: 844px;
font-family: var(--lvf-font-display);
font-size: 18px;
font-weight: 425;
line-height: 24px;
letter-spacing: 0.54px;
color: rgba(0, 0, 0, 0.85);
}
/* ---------------------------------------------------------------- Features
Figma: Spaltengruppe x=367..1404 (1037px) im Feature-Rahmen x=310..1450
(1140px), Hoehe 824. Seitenspalten 248/252px mit space-between, Mittelspalte
304px um 123px nach unten versetzt. */
.lvev-e6-features {
position: relative;
width: 1140px;
max-width: 100%;
height: 824px;
margin: 86px auto 0;
display: flex;
justify-content: space-between;
}
.lvev-e6-col {
display: flex;
flex-direction: column;
align-items: center;
}
.lvev-e6-col--side {
justify-content: space-between;
height: 100%;
}
.lvev-e6-col--left { width: 248px; }
.lvev-e6-col--mid {
width: 304px;
padding-top: 123px;
gap: 211px;
justify-content: flex-start;
}
.lvev-e6-col--right { width: 252px; }
.lvev-e6-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 19px;
text-align: center;
}
.lvev-e6-icon {
width: 50px;
height: 50px;
border-radius: 10px;
background: #060606;
color: #4fbfff;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
inset 0 1px 2px rgba(91, 188, 232, 0.55),
0 6px 18px rgba(0, 30, 60, 0.25);
}
/* SERVER BESSER, nachziehen: Befund EV-29 (r3-evaluation.css Zeile 617-627,
ausserhalb jeder @media-Abfrage, gilt also auf allen Breiten). Die acht
Symbole trugen reines Weiss statt des Themeverlaufs --lvf-grad-blue (am
Schnipsel gemessen: R 146 -> 23, G 216 -> 177, B 255 durchgehend ueber die
Glyphenhoehe). Unsere Icons sind Strichzeichnungen (stroke, nicht fill wie
im r3-Symbolsatz), deshalb der Verlauf am Strich, gleiches Prinzip wie die
geteilte SVG-Gradient-Definition in e8-cta (lvev-e8-ico-grad). Faellt die
Referenz aus, traegt #4fbfff weiter (Farbe oben, EV-29-Fallback). */
.lvev-e6 .lvev-e6-icon svg {
stroke: url(#lvev-e6-icon-grad) #4fbfff;
}
.lvev-e6 h3.lvev-e6-item-title {
font-family: var(--lvf-font-display);
font-size: 21px;
font-weight: 545;
line-height: 29px;
color: #000000;
}
.lvev-e6-item-title--2l { line-height: 21.5px; }
.lvev-e6-item-desc {
max-width: 207px;
font-family: var(--lvf-font-display);
font-size: 12px;
font-weight: 468;
line-height: 16px;
letter-spacing: 0.25px;
color: rgba(0, 0, 0, 0.64);
}
/* ---------------------------------------------------------------- Deko
Figma "Lines": 1px Linien rgba(0,0,0,0.08) zwischen den Spalten plus 17/18px
Punkte an den Kreuzungen. Liegt hinter dem Inhalt, nur Desktop.
WAAGERECHT IN PROZENT, NICHT IN PIXELN. Der Rahmen .lvev-e6-features ist
1140px breit, aber nur bis herunter zu 1180px Fensterbreite; darunter greift
sein max-width:100% und er schrumpft mit dem Container (Fenster minus 40px
Rinne). Die Deko stand mit festen Figma-Pixeln drin und wanderte dadurch
relativ nach rechts, waehrend die Spalten zusammenrueckten. Gemessen bei
1024px vor dieser Aenderung:
dot--4 lag mit 18x18px voll auf der Ueberschrift "Up to $1M Total
Allocation" und verdeckte das M (Punkt x766..784, Titel x711..953)
h2, h4 ragten 116px aus dem Rahmen, davon 96px ueber den Fensterrand
dot--5, dot--6 ragten 157px aus dem Rahmen, davon 137px hinaus
Schon ab unter 1160px fielen die beiden rechten Punkte aus dem Bild.
Die Schreibweise calc(100% * / 1140) laesst die Figma-Koordinate
stehen und rechnet sie auf die tatsaechliche Rahmenbreite um. Bei vollen
1140px kommt exakt der alte Pixelwert heraus, darunter bleiben Punkte und
Linien in den Spaltenrinnen stehen, in denen sie gezeichnet sind.
Die Senkrechten bleiben in Pixeln: die Rahmenhoehe ist mit 824px fest, die
Spalten haben feste Breiten und brechen deshalb nicht um. */
.lvev-e6-deco {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.lvev-e6-line { position: absolute; background: rgba(0, 0, 0, 0.08); }
.lvev-e6-line--v1 { left: calc(100% * 363 / 1140); top: 23px; width: 1px; height: 757px; }
.lvev-e6-line--v2 { left: calc(100% * 775 / 1140); top: 23px; width: 1px; height: 757px; }
.lvev-e6-line--h1 { left: calc(100% * 50 / 1140); top: 230px; width: calc(100% * 264 / 1140); height: 1px; }
.lvev-e6-line--h2 { left: calc(100% * 836 / 1140); top: 230px; width: calc(100% * 264 / 1140); height: 1px; }
.lvev-e6-line--h3 { left: calc(100% * 50 / 1140); top: 561px; width: calc(100% * 264 / 1140); height: 1px; }
.lvev-e6-line--h4 { left: calc(100% * 836 / 1140); top: 561px; width: calc(100% * 264 / 1140); height: 1px; }
.lvev-e6-line--h5 { left: calc(100% * 435 / 1140); top: 401px; width: calc(100% * 264 / 1140); height: 1px; }
.lvev-e6-dot {
position: absolute;
width: 18px;
height: 18px;
border-radius: 50%;
background: #05060f;
box-shadow: inset 0 1px 2px rgba(91, 188, 232, 0.5);
}
/* Die beiden mittleren Punkte sitzen auf ihrer Senkrechten, deshalb der halbe
Durchmesser Abzug: sonst wandert ihre Mitte beim Schrumpfen von der Linie
weg. Bei 1140px ergibt das wieder 354 und 766. */
.lvev-e6-dot--1 { left: 0; top: 221px; }
.lvev-e6-dot--2 { left: 0; top: 552px; }
.lvev-e6-dot--3 { left: calc(100% * 363 / 1140 - 9px); top: 392px; }
.lvev-e6-dot--4 { left: calc(100% * 775 / 1140 - 9px); top: 392px; }
/* Rechte Punkte am rechten Rand verankert. Figma setzt sie auf x1123, also
1px ueber die Rahmenkante hinaus; right:-1px haelt genau das bei voller
Breite und laesst sie darunter mitwandern statt aus dem Bild zu laufen. */
.lvev-e6-dot--5 { right: -1px; top: 222px; }
.lvev-e6-dot--6 { right: -1px; top: 552px; }
/* ---------------------------------------------------------------- CTAs
Figma Frame 65 y=6931: Primaer-Button mit Verlauf, schwarzer Icon-Kachel und
dunklem Text; Ghost-Button dunkel-translucent mit blauem Innenschein. */
.lvev-e6-cta {
margin-top: 85px;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.lvev-e6-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 46px;
border-radius: 10px;
font-family: var(--lvf-font-display);
font-size: 17px;
line-height: 25px;
transition: filter 0.2s ease;
}
.lvev-e6-btn:hover { filter: brightness(1.1); }
.lvev-e6-btn--primary {
padding: 8px 12px 8px 5px;
font-weight: 500;
color: #060606;
background: linear-gradient(134deg, #6ecaff 0%, #0080ca 100%);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
/* Rundgang 13.08.2026, tote Reparatur: der Schatten oben stand nie an. Grund
ist Elementors frontend.min.css: ".elementor a { box-shadow: none }" hat
0-1-1 und schlaegt eine Ein-Klassen-Regel (0-1-0) IMMER, unabhaengig von der
Ladereihenfolge. Sichtbar war der Schatten bislang ausschliesslich durch
server-stand-20260810/lvlup-fixes/r3-evaluation.css Zeile 510-518 (Befund
R3-evaluation-12, Selektor ".lvev-e6 a.lvev-e6-btn--primary", 0-2-1) - die
Overrides-Ebene, die beim Deploy nicht mitkommt. Deshalb hier derselbe
Selektor (0-2-1, schlaegt den Elementor-Reset selbst) mit denselben Werten:
bei geladener Overrides-Ebene bleibt r3 fuehrend (gleiche Spezifitaet, laedt
spaeter, keine Aenderung am heutigen Live-Bild), ohne sie traegt jetzt diese
Regel allein und der Glow bleibt erhalten statt zu verschwinden. */
.lvev-e6 a.lvev-e6-btn--primary {
box-shadow:
0 7px 16px -5px rgba(0, 0, 0, 0.35),
0 0 9px rgba(0, 150, 255, 0.22),
inset 0 2px 2px -1px rgba(255, 255, 255, 0.12),
0 0 0 2px rgba(0, 0, 0, 0.17),
inset 4px 5px 7px rgba(0, 0, 0, 0.85),
inset -1px -2px 10px #52b8f1,
inset -1px -2px 5px #00a4ff;
}
.lvev-e6-btn-tile {
width: 36px;
height: 36px;
border-radius: 6px;
background: #060606;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
.lvev-e6-btn--ghost {
padding: 8px 17px;
font-weight: 400;
color: #ffffff;
background: rgba(4, 8, 18, 0.55);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow:
inset -2px -6px 19px rgba(82, 184, 241, 0.55),
inset -1px -2px 5px rgba(0, 164, 255, 0.5),
inset 9px 7px 12px rgba(0, 0, 0, 0.45);
}
/* ---------------------------------------------------------------- Tablet */
@media (max-width: 1023px) {
.lvev-e6-features {
width: auto;
height: auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 48px 24px;
}
.lvev-e6-col { display: contents; }
.lvev-e6-deco { display: none; }
.lvev-e6-cta { margin-top: 64px; }
}
/* ---------------------------------------------------------------- Mobile
Kein eigenes Design vorhanden: alles gestapelt, Fliesstext >= 16px,
Touch-Ziele >= 44px, kein horizontaler Ueberlauf. */
@media (max-width: 767px) {
.lvev-e6 { padding-top: 8px; padding-bottom: 90px; }
.lvev-e6-title { letter-spacing: -0.6px; line-height: 1.05; }
.lvev-e6-sub { margin-top: 16px; font-size: 16px; line-height: 24px; }
.lvev-e6-features {
margin-top: 48px;
grid-template-columns: 1fr;
gap: 44px;
}
.lvev-e6-item { gap: 14px; }
.lvev-e6-icon { width: 52px; height: 52px; }
.lvev-e6-item-title { font-size: 20px; line-height: 26px; }
.lvev-e6-item-title--2l { line-height: 24px; }
.lvev-e6-item-desc { max-width: 300px; font-size: 16px; line-height: 22px; }
.lvev-e6-cta {
margin-top: 52px;
flex-direction: column;
gap: 12px;
}
.lvev-e6-btn {
width: 100%;
max-width: 340px;
min-height: 48px;
}
.lvev-e6-glow--left { left: -60%; width: 130%; }
.lvev-e6-glow--right { right: -60%; width: 130%; }
.lvev-e6-glow--center { width: 160%; }
}
/* ---------------------------------------------------------------- Desktop
Mockup-Abgleich 11.08.2026 (nur >=1024px, fuer Tablet/Mobile gibt es keine
Vorlage). Sektion lvev-e6 war 1309 px hoch statt 1263.
Anker im Mockup: h2-Oberkante 5836, erstes Feature-Icon 6022, letzte
Beschreibungszeile endet 6849, Buttonzeile 6931..6977, Sektionsende 7095.
Live: 5925, 6123, 6947, 7032..7084, 7224. Die Spaltengruppe selbst ist
massgenau (Soll 827, gebaut 824), falsch sind nur die Raender:
- Sektionsanfang -> h2: Soll 4 px, war 10
- Unterzeile -> Features: Soll 74 px, war 86
- Primaerbutton: Soll 46 px hoch, war 52 (Kachel 36 + 2x8 Rand)
- Buttonzeile -> Ende: Soll 118 px, war 140 */
@media (min-width: 1024px) {
.lvev-e6 {
/* Soll 4 px ueber der Ueberschrift, gemessen waren 10 */
padding-top: 4px;
/* Soll 118 px unter der Buttonzeile, gemessen waren 140 */
padding-bottom: 118px;
}
/* Soll 74 px zwischen Unterzeile und Spaltengruppe, gemessen waren 86 */
.lvev-e6-features { margin-top: 74px; }
/* Soll 46 px Buttonhoehe wie beim Ghost-Button daneben; mit 8 px oben und
unten kam die 36-px-Kachel auf 52 und zog die ganze Zeile mit. */
.lvev-e6-btn--primary { padding: 5px 12px 5px 5px; }
}
/* ============================================================
Naht e6/e7, Kundenbefund 12.08.2026: quer ueber die ganze Breite eine
harte waagerechte Linie unter den beiden Knoepfen. Nur Desktop.
AUSRICHTUNG: nicht ueber y-Werte, sondern ueber Inhalt. Unterkante der
Knopfzeile Soll 6976 / live 6981,8; Oberkante der FAQ-Pille Soll 7160 /
live 7159,8. Soll und Ist decken sich hier also auf 0 bis 6 px, der
Versatz ist 0. (Die alte Angabe "Soll-y = Ist-y - 199" stammt von VOR
den Hoehenkorrekturen vom 11.08. und gilt nicht mehr.)
BEFUND: der Entwurf hat an dieser Stelle KEINE Kante. Sprung ueber
10 Spaltenbloecke, Median je Block, 8 px ueber gegen 8 px unter der Naht:
Soll 1,5 2,9 1,9 1,5 1,8 2,3 2,0 2,1 2,7 1,6 Mittel 2,0
live 22,9 31,4 32,9 32,7 19,5 19,5 21,0 22,8 26,7 18,8 Mittel 24,8
Links wird es an der Naht schlagartig dunkler, rechts schlagartig heller.
URSACHE: e6 und e7 tragen je eine eigene Kopie derselben Lichtsaeule
(r3-evaluation.css, Plugin lvlup-fixes). Die Kopien passen nicht mehr
zusammen, aus drei Gruenden:
1. Der Anker von e6 steht bei "at 0px 384px", der von e7 bei
"at 0px -925px". 384 = 1309 - 925, also genau die ALTE Hoehe von
e6. Am 11.08. ist e6 von 1309 auf 1245 px gekuerzt worden, der
Anker ist mitgewandert: die beiden Saeulen liegen jetzt 64 px
auseinander.
2. r3b-evaluation.css hat NUR die rechte Saeule von e7 verlaengert
(2600 -> 3400, Querband 1400 -> 2000). e6 blieb bei 2600/1400,
daher der Sprung nach hell auf der rechten Seite.
3. Der weisse Saum, der hier vorher stand (Weiss 0,105 am
Sektionsende), endete selbst hart an der Naht und trug rund
14 Stufen zum Sprung bei. Er ist deshalb entfallen.
REPARATUR: ueber die letzten 300 px von e6 wird das eigene Lichtfeld
ausgeblendet und exakt das Feld von e7 eingeblendet (Anker und Radien
von e7, umgerechnet auf die Oberkante von e6: 1245 - 925 = 320 bzw.
1245 - 875 = 370). Die Endstaerke 0,967 entspricht dem ersten Stopp der
Maske, die e7 auf seinem Feld liegen hat.
Dafuer dienen die beiden Ebenen --right und --bottom, die r3 mit
"background: none" stillgelegt hat und die sonst ungenutzt sind.
Aussenhalb dieser 300 px aendert sich nichts: die Naht e5/e6 und das
Band darueber messen sich vorher wie nachher gleich, die Seitenhoehe
bleibt 9809 px.
Nachher: Sprung 24,8 -> 1,6 (Entwurf 2,0). Mittlere Abweichung von e6
gegen das Soll-Bild im Band 5870..7099: 26,8 -> 26,0.
Spezifitaet 0-3-0, weil r3-evaluation.css (Prioritaet 1200) dieselben
Ebenen mit 0-2-0 setzt.
============================================================ */
@media (min-width: 1024px) {
/* Die tragenden Lichtfelder lagen bisher nur in der spaeter geladenen
Overrides-Ebene. Hier stehen dieselben Endwerte mit hoeherer Spezifitaet,
damit der Verlauf auch ohne diese Ebene identisch bleibt. */
.lvf-page .lvev-e6 .lvev-e6-glow--center {
position: absolute;
inset: 0;
width: auto;
height: auto;
transform: none;
border-radius: 0;
filter: none;
opacity: 1;
background:
radial-gradient(300px 2600px at 0px 384px, rgba(254,254,255,1) 0%,rgba(250,253,255,1) 8%,rgba(216,240,254,1) 15%,rgba(161,220,253,1) 23%,rgba(128,204,244,1) 31%,rgba(80,178,226,1) 38%,rgba(50,150,201,.97) 46%,rgba(38,128,178,.94) 54%,rgba(26,100,142,.88) 62%,rgba(18,78,112,.78) 69%,rgba(10,62,92,.62) 77%,rgba(5,46,70,.36) 86%,rgba(2,30,48,0) 100%),
radial-gradient(300px 2600px at 100% 384px, rgba(254,254,255,1) 0%,rgba(250,253,255,1) 8%,rgba(216,240,254,1) 15%,rgba(161,220,253,1) 23%,rgba(128,204,244,1) 31%,rgba(80,178,226,1) 38%,rgba(50,150,201,.97) 46%,rgba(38,128,178,.94) 54%,rgba(26,100,142,.88) 62%,rgba(18,78,112,.78) 69%,rgba(10,62,92,.62) 77%,rgba(5,46,70,.36) 86%,rgba(2,30,48,0) 100%);
}
.lvf-page .lvev-e6 .lvev-e6-glow--left {
position: absolute;
inset: 0;
width: auto;
height: auto;
transform: none;
border-radius: 0;
filter: none;
opacity: 1;
mix-blend-mode: screen;
}
/* eigenes Feld von e6 ueber die letzten 300 px ausblenden */
.lvf-page .lvev-e6 .lvev-e6-glow--center,
.lvf-page .lvev-e6 .lvev-e6-glow--left {
-webkit-mask-image: linear-gradient(180deg,
#000 0, #000 calc(100% - 300px), rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(180deg,
#000 0, #000 calc(100% - 300px), rgba(0, 0, 0, 0) 100%);
}
/* zwei stillgelegte Ebenen tragen im selben Bereich das Feld von e7 herein */
.lvf-page .lvev-e6 .lvev-e6-glow--right,
.lvf-page .lvev-e6 .lvev-e6-glow--bottom {
position: absolute;
inset: 0;
width: auto;
height: auto;
transform: none;
border-radius: 0;
filter: none;
opacity: 1;
-webkit-mask-image: linear-gradient(180deg,
rgba(0, 0, 0, 0) calc(100% - 300px), rgba(0, 0, 0, 0.967) 100%);
mask-image: linear-gradient(180deg,
rgba(0, 0, 0, 0) calc(100% - 300px), rgba(0, 0, 0, 0.967) 100%);
}
/* Lichtsaeule von e7, Anker 320 = e6-Hoehe 1245 minus e7-Anker 925 */
.lvf-page .lvev-e6 .lvev-e6-glow--right {
background:
radial-gradient(300px 2600px at 0px 320px, rgba(254,254,255,1) 0%,rgba(250,253,255,1) 8%,rgba(216,240,254,1) 15%,rgba(161,220,253,1) 23%,rgba(128,204,244,1) 31%,rgba(80,178,226,1) 38%,rgba(50,150,201,.97) 46%,rgba(38,128,178,.94) 54%,rgba(26,100,142,.88) 62%,rgba(18,78,112,.78) 69%,rgba(10,62,92,.62) 77%,rgba(5,46,70,.36) 86%,rgba(2,30,48,0) 100%),
radial-gradient(300px 3400px at 100% 320px, rgba(254,254,255,1) 0%,rgba(250,253,255,1) 8%,rgba(216,240,254,1) 15%,rgba(161,220,253,1) 23%,rgba(128,204,244,1) 31%,rgba(80,178,226,1) 38%,rgba(50,150,201,.97) 46%,rgba(38,128,178,.94) 54%,rgba(26,100,142,.88) 62%,rgba(18,78,112,.78) 69%,rgba(10,62,92,.62) 77%,rgba(5,46,70,.36) 86%,rgba(2,30,48,0) 100%);
}
/* Querband von e7, Anker 370 = 1245 minus 875, wie dort mit screen.
Radien und Sockel am 12.08.2026 mitgezogen: e7 hat das Querband auf
rx 700 links / rx 500 mal ry 1700 rechts verengt und den flachen Sockel
der Seitenmitte bekommen (Begruendung und Messwerte im Fragment e7-faq).
Ohne dieselbe Aenderung hier springt die Naht von 1,6 auf 80,4.
Der Sockel steht als Flaeche und nicht als Verlauf, weil die Maske oben
ihn ohnehin ueber die letzten 300 px einblendet; an der Naht liegt damit
auf beiden Seiten derselbe Wert (7,49,72) mal 0,967 an. */
.lvf-page .lvev-e6 .lvev-e6-glow--bottom {
mix-blend-mode: screen;
background:
radial-gradient(700px 1400px at 0px 370px, rgba(255,255,255,1) 0%,rgba(250,253,255,1) 16%,rgba(215,240,255,1) 30%,rgba(175,226,255,.98) 42%,rgba(110,205,250,.92) 54%,rgba(70,185,240,.85) 64%,rgba(30,150,215,.7) 76%,rgba(10,90,140,.36) 88%,rgba(4,40,64,0) 100%),
radial-gradient(500px 1700px at 100% 370px, rgba(255,255,255,1) 0%,rgba(250,253,255,1) 16%,rgba(215,240,255,1) 30%,rgba(175,226,255,.98) 42%,rgba(110,205,250,.92) 54%,rgba(70,185,240,.85) 64%,rgba(30,150,215,.7) 76%,rgba(10,90,140,.36) 88%,rgba(4,40,64,0) 100%),
linear-gradient(180deg, rgba(7,49,72,1) 0%, rgba(7,49,72,1) 100%);
}
}
/* Der alte Weisssaum .lvev-e6::after ist ersatzlos entfallen, er war
selbst Teil der Kante (Grund 3 oben). Kein anderer Stil setzt ihn. */
/* ============================================================
Querband e6, Abgleich 12.08.2026, nur Desktop. Die Sektionsmitte war zu
DUNKEL und der dunkelste Punkt lag rund 130 px zu weit rechts.
BEFUND. Querprofil ueber die volle Breite, 20 Spaltenbloecke, Median je
Block ueber 16 Bildzeilen, gegen evaluation-aus-vollbild.png:
y 6400, Block 8 (x 616.. 704): Soll (172,225,255) live (128,205,243)
y 6400, Block 13 (x 1056..1144): Soll (134,212,253) live ( 72,163,212)
Block 8 und Block 13 liegen beide 220 px von der Mitte entfernt. Im
Entwurf unterscheiden sie sich um 38 Stufen, live um 78, und zwar zur
falschen Seite. Der dunkelste Block liegt im Entwurf bei x 880..968,
live bei x 968..1056.
URSACHE. r3-evaluation.css legt in .lvev-e6-glow--left ZWEI Verlaeufe in
EINE Ebene ("at 0px" und "at 100%"). Innerhalb eines background stapeln
sich Ebenen aber NORMAL, nicht per screen: der zuerst genannte linke
Verlauf deckt den rechten dort ab, wo beide teildurchsichtig sind. Bei
1350 px waagerechtem Radius ueberlappen sie sich ueber x 410..1350, also
ueber die ganze Mitte. Dort gewinnt links, und rechts fehlt entsprechend
Licht. Gegenprobe: mit nur .lvev-e6-glow--center (den 300-px-Saeulen) ist
das Profil exakt spiegelgleich (Block 2 und 19 beide (53,150,199)), der
Fehler steckt also allein in dieser einen Ebene.
REPARATUR. Dieselben zwei Verlaeufe, aber per background-blend-mode mit
screen verrechnet statt gestapelt. Damit ist das Ergebnis spiegelgleich,
wie es die Rezeptur immer gemeint hat.
WARUM ZWEI PSEUDOELEMENTE. Voll eingeschaltet hebt die Symmetrie die
Oberkante von e6 an, waehrend e5 darueber unveraendert bleibt: die Naht
e5/e6 springt dann von 2,6 auf 9,8 (naht-pruefen.py meldet BEFUND). Der
alte Stapel steht deshalb unmaskiert in ::before, die symmetrische
Fassung darueber in ::after und wird ueber die ersten 200 px eingeblendet.
Oben liegt also unveraendert der bisherige Zustand an, ab y 6054 die
Symmetrie, dazwischen eine weiche Rampe. Die untere Ebene bleibt dabei
voll deckend, sonst faellt die Summe im Uebergang durch (mit beidseitiger
Maske gemessen: y 6000 von 30,0 auf 40,2 verschlechtert).
ERGEBNIS, gleiche Messweise
Querprofil y 6400: 17,7 -> 6,9 y 6800: 23,1 -> 18,7
Band 5870..7099 gegen Soll: 26,85 -> 20,47
Naht e5/e6 2,6 -> 2,8 (Entwurf 3,9), Naht e6/e7 1,6 -> 1,7.
OFFEN und hier bewusst NICHT angefasst: im oberen Band (y 5880..6060) ist
e6 an allen fuenf Messspalten zu hell (y 5880 linker Rand Soll
(187,230,255) gegen (244,253,255)). Derselbe Fehler steht in der
Unterkante von e5, deshalb springt die Naht dort trotzdem nicht. Wer das
korrigiert, muss e5 mitziehen, sonst reisst die Naht auf.
Spezifitaet 0-3-0, weil r3-evaluation.css Z. 323 dieselbe Ebene mit
0-2-0 setzt (Plugin lvlup-fixes, Prioritaet 1200).
============================================================ */
@media (min-width: 1024px) {
.lvf-page .lvev-e6 .lvev-e6-glow--left { background: none; }
.lvf-page .lvev-e6 .lvev-e6-glow--left::before,
.lvf-page .lvev-e6 .lvev-e6-glow--left::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(1350px 1400px at 0px 434px, rgba(255,255,255,1) 0%,rgba(250,253,255,1) 16%,rgba(215,240,255,1) 30%,rgba(175,226,255,.98) 42%,rgba(110,205,250,.92) 54%,rgba(70,185,240,.85) 64%,rgba(30,150,215,.7) 76%,rgba(10,90,140,.36) 88%,rgba(4,40,64,0) 100%),
radial-gradient(1350px 1400px at 100% 434px, rgba(255,255,255,1) 0%,rgba(250,253,255,1) 16%,rgba(215,240,255,1) 30%,rgba(175,226,255,.98) 42%,rgba(110,205,250,.92) 54%,rgba(70,185,240,.85) 64%,rgba(30,150,215,.7) 76%,rgba(10,90,140,.36) 88%,rgba(4,40,64,0) 100%);
}
/* ::before bleibt der bisherige, normal gestapelte Zustand und traegt
unmaskiert durch, damit im Uebergang keine Deckungsluecke entsteht. */
/* ::after ist dieselbe Rezeptur spiegelgleich verrechnet, eingeblendet
ueber die ersten 200 px, damit die Naht zu e5 stehen bleibt. */
.lvf-page .lvev-e6 .lvev-e6-glow--left::after {
background-blend-mode: screen;
-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0px, #000 200px);
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0px, #000 200px);
}
}
/* Zeilenhoehe der Ueberschrift, 11.08.2026: im Entwurf 44 px
(Figma-TEXT y 5842), live 61,7. Der Abstand zur naechsten Zeile
stimmt bereits, es ist allein die Zeilenhoehe. 44 / 65 = 0,677.
Dieselbe Korrektur auf allen Sektionsueberschriften dieser Seite und auf
elite; der Entwurf verwendet ueberall denselben Grad. Nur ab 1024 px,
darunter faellt der Grad per clamp kleiner aus und die Zeile bricht um. */
@media (min-width: 1024px) {
.lvev-e6 h2.lvev-e6-title { line-height: 0.677; }
}
/* ============================================================
Aussenspalten 11.08.2026, nur Desktop: die Figma-Spaltenrahmen
liegen bei x367..615 (links) und x1152..1404 (rechts) IM 1140er-
Kasten x310..1450. Live standen sie buendig am Kastenrand
(DOM: links x310, rechts x1198..1450), also 57 bzw. 46 px zu weit
aussen. Einrueckung per Margin, NICHT per schmalerem Kasten: die
Deko haengt mit inset:0 am Kasten und stimmt heute schon (Linien
kastenrelativ x363/775 = Soll x673/1085 minus 310). Die Mittel-
spalte landet per space-between auf x731,5 (Soll x731).
============================================================ */
@media (min-width: 1024px) {
/* Soll x367, gemessen x310 */
.lvev-e6-col--left { margin-left: 57px; }
/* Soll rechte Kante x1404, gemessen x1450 */
.lvev-e6-col--right { margin-right: 46px; }
}
/* ===========================================================================
Primaerknopf in e6, 11.08.2026 (Abnahme "Knoepfe alle Seiten")
Gleiches falsches Blau-Rezept wie in e8: diagonal mit #6ecaff nach #0080ca
statt senkrecht mit rgb(140,213,255) nach rgb(18,169,255). Der Entwurf
verwendet auf der ganzen Seite dasselbe senkrechte Rezept.
Der Ghost-Knopf dieser Sektion bleibt vorerst unveraendert: er liegt mit
(19,64,94) gegen Soll (21,109,159) zwar zu dunkel, aber in derselben
Farbfamilie, nicht im Fast-Schwarz-Muster der anderen Ghost-Knoepfe. Ein
Rezeptwechsel waere hier ein Schuss ins Blaue, das gehoert erst gemessen.
=========================================================================== */
@media (min-width: 1024px) {
.lvf-page .lvev-e6 .lvev-e6-btn--primary {
background-image: linear-gradient(rgb(140, 213, 255) 0%, rgb(18, 169, 255) 100%);
}
}
/* == e7-faq == */
/* ============================================================
Lvlup Futures Evaluation - e7 FAQ
Masse: Desktop-Band 1760 (Content-Spalte 1240, x=260..1500),
Band y=7210..8380. Mobile (< 768px) ohne Designvorlage,
sauber gestapelt abgeleitet.
Basis-Regeln = Mobile, 768-1023px interpoliert, >=1024px Desktop.
============================================================ */
.lvev-e7 {
/* --- Mobile-Werte (< 768px) --- */
/* R3-Befund 9: Seite kumuliert zu hoch, Sektionsabstand unten reduziert */
--e7-pt: 56px;
--e7-pb: 56px;
--e7-head-gap: 18px;
--e7-title-fs: 40px;
--e7-sub-fs: 16px;
--e7-sub-lh: 24px;
--e7-list-gap-top: 44px;
--e7-item-gap: 11px;
--e7-radius: 16px;
--e7-pad-y: 18px;
--e7-pad-x: 20px;
--e7-row-gap: 12px;
--e7-q-fs: 16px;
--e7-btn: 32px;
--e7-btn-radius: 9px;
--e7-ico: 15px;
--e7-a-fs: 16px;
--e7-a-lh: 1.6;
--e7-a-max: none;
--e7-line-w: 190px;
--e7-line-a: 61px;
--e7-line-b: 138px;
--e7-cta-gap-top: 34px;
--e7-pill-h: 41px;
--e7-pill-fs: 14px;
--e7-link-fs: 13px;
--e7-btn-shadow:
0 7px 16px -5px rgba(0, 0, 0, 0.35),
0 0 9px rgba(0, 150, 255, 0.22),
inset 0 2px 2px -1px rgba(255, 255, 255, 0.12),
0 0 0 2px rgba(0, 0, 0, 0.17),
inset 4px 5px 7px rgba(0, 0, 0, 0.85),
inset -1px -2px 10px #52b8f1,
inset -1px -2px 5px #00a4ff,
inset -1px -2px 5px #00a4ff;
position: relative;
isolation: isolate;
padding-block: var(--e7-pt) var(--e7-pb);
}
/* Tablet: 768-1023px, linear interpoliert (bei 1024px exakt Desktop) */
@media (min-width: 768px) {
.lvev-e7 {
--e7-pt: clamp(56px, calc(8.594vw - 10px), 78px);
--e7-pb: clamp(72px, calc(11.719vw - 18px), 102px);
--e7-head-gap: clamp(18px, calc(5.859vw - 27px), 33px);
--e7-title-fs: clamp(40px, calc(9.766vw - 35px), 65px);
--e7-sub-fs: clamp(16px, calc(0.781vw + 10px), 18px);
--e7-list-gap-top: clamp(44px, calc(16.016vw - 79px), 85px);
--e7-item-gap: clamp(11px, calc(1.172vw + 2px), 14px);
--e7-radius: clamp(16px, calc(1.953vw + 1px), 21px);
--e7-pad-y: clamp(18px, 2.344vw, 24px);
--e7-pad-x: clamp(20px, calc(4.688vw - 16px), 32px);
--e7-row-gap: 10px;
--e7-q-fs: clamp(16px, calc(0.781vw + 10px), 18px);
--e7-btn: 32px;
--e7-btn-radius: clamp(9px, calc(0.781vw + 3px), 11px);
--e7-ico: clamp(15px, calc(1.172vw + 6px), 18px);
--e7-a-fs: 16px;
--e7-a-lh: 1.55;
--e7-a-max: 1120px;
--e7-line-w: clamp(190px, calc(22.656vw + 16px), 248px);
--e7-line-a: clamp(61px, calc(7.422vw + 4px), 80px);
--e7-line-b: clamp(138px, calc(16.406vw + 12px), 180px);
--e7-cta-gap-top: clamp(34px, calc(7.813vw - 26px), 54px);
--e7-pill-fs: 13.71px;
--e7-link-fs: 13.24px;
}
}
/* Desktop: >= 1024px, Werte 1:1 aus dem Desktop-Band */
@media (min-width: 1024px) {
.lvev-e7 {
/* Mockup-Abgleich 11.08.2026: Soll 65 px bis zur FAQ-Pille, gemessen 78 */
--e7-pt: 65px;
/* Mockup-Abgleich: Soll rund 80 px unter der Buttonzeile, gemessen 102 */
--e7-pb: 78px;
/* Mockup-Abgleich: Pille -> Titel 11 px, gemessen 51 (18 Rand + 33 Abstand).
Die Unterzeile holt sich die fehlenden 14 px unten wieder (siehe unten). */
--e7-head-gap: 11px;
--e7-title-fs: 65px;
--e7-sub-fs: 18px;
--e7-list-gap-top: 85px;
--e7-item-gap: 14px;
--e7-radius: 21px;
--e7-pad-y: 24px;
--e7-pad-x: 32px;
--e7-row-gap: 10px;
--e7-q-fs: 18px;
--e7-btn-radius: 11px;
--e7-ico: 18px;
--e7-a-lh: 1.5375;
--e7-line-w: 248px;
--e7-line-a: 80px;
--e7-line-b: 180px;
--e7-cta-gap-top: 54px;
}
}
/* --- Hintergrund-Glows (Naeherung der "Star"-Vektoren, rein dekorativ).
Grosse radial-gradients mit transparenten Enden: laufen weich in die
Nachbarsektionen aus, keine harten Kanten. --- */
/* R3-Befund 2: Glow zu schwach (SOLL linker Rand rgb(23,98,139) gegen
IST rgb(4,25,45)). Kerne kraeftiger und etwas weisslicher. */
.lvev-e7 .lvev-e7-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(46% 42% at 6% 20%, rgba(40, 180, 255, 0.5) 0%, rgba(0, 162, 255, 0.22) 42%, rgba(0, 162, 255, 0) 72%),
radial-gradient(46% 42% at 94% 24%, rgba(40, 180, 255, 0.46) 0%, rgba(18, 169, 255, 0.2) 42%, rgba(18, 169, 255, 0) 72%),
radial-gradient(70% 46% at 50% 108%, rgba(167, 223, 255, 0.2) 0%, rgba(4, 48, 74, 0) 72%);
}
@media (max-width: 767px) {
.lvev-e7 .lvev-e7-bg {
background:
radial-gradient(90% 30% at 0% 12%, rgba(40, 180, 255, 0.44) 0%, rgba(0, 162, 255, 0) 72%),
radial-gradient(90% 30% at 100% 18%, rgba(40, 180, 255, 0.4) 0%, rgba(18, 169, 255, 0) 72%),
radial-gradient(110% 26% at 50% 106%, rgba(167, 223, 255, 0.16) 0%, rgba(4, 48, 74, 0) 72%);
}
}
.lvev-e7 .lvev-e7-inner {
position: relative;
z-index: 1;
}
/* ============================ Kopfblock ============================ */
.lvev-e7 .lvev-e7-head {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--e7-head-gap);
}
.lvev-e7 .lvev-e7-title {
margin: 0;
font-family: var(--lvf-font-display);
font-size: var(--e7-title-fs);
font-weight: 500;
line-height: 0.93;
letter-spacing: -0.02em;
text-align: center;
text-wrap: balance;
background-image: 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;
}
/* "Questions" in Blau-Verlauf (hell oben -> satt unten), wie im Soll */
.lvev-e7 .lvev-e7-title-accent {
background-image: linear-gradient(180deg, #8fd6ff 0%, #14a6fa 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Mobile: Zeilenfall "Frequently Asked" / "Questions" */
@media (max-width: 767px) {
.lvev-e7 .lvev-e7-title-accent { display: block; }
}
.lvev-e7 .lvev-e7-sub {
font-family: var(--lvf-font-display);
font-size: var(--e7-sub-fs);
font-weight: 425;
line-height: var(--e7-sub-lh);
letter-spacing: 0.03em;
text-align: center;
color: rgba(255, 255, 255, 0.85);
}
/* ============================ Akkordeon ============================ */
.lvev-e7 .lvev-e7-list {
display: flex;
flex-direction: column;
gap: var(--e7-item-gap);
margin-top: var(--e7-list-gap-top);
}
.lvev-e7 .lvev-e7-item {
position: relative;
overflow: hidden;
border-radius: var(--e7-radius);
background: rgba(0, 0, 0, 0.75);
box-shadow:
0 6px 12px rgba(0, 0, 0, 0.2),
0 0 0 1.5px rgba(0, 0, 0, 0.21);
}
/* Feine blaue Innen-Kontur, die nach unten auslaeuft (Spec: 0.25px,
Verlauf #00a2ff -> transparent) */
.lvev-e7 .lvev-e7-item::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
border-radius: inherit;
padding: 1px;
background: linear-gradient(165deg, rgba(0, 162, 255, 0.5) 0%, rgba(0, 162, 255, 0.14) 34%, rgba(0, 162, 255, 0) 68%);
-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;
transition: opacity 0.25s ease;
}
.lvev-e7 .lvev-e7-item.is-open {
background:
linear-gradient(6deg, rgba(0, 162, 255, 0) 35%, rgba(0, 162, 255, 0.29) 100%),
linear-gradient(0deg, rgba(0, 162, 255, 0.05), rgba(0, 162, 255, 0.05)),
rgba(0, 0, 0, 0.75);
-webkit-backdrop-filter: blur(34px);
backdrop-filter: blur(34px);
}
/* Ellipsen-Glow im Karteninneren, dezent blau (Spec: Ellipsen opacity 0.06,
offene Karte 0.2) */
.lvev-e7 .lvev-e7-glow {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(ellipse 70% 260px at 62% 6px,
rgba(0, 162, 255, 0.06) 0%, rgba(0, 162, 255, 0) 68%);
}
.lvev-e7 .lvev-e7-item.is-open .lvev-e7-glow {
background: radial-gradient(ellipse 71% 285px at 22% 2px,
rgba(0, 162, 255, 0.16) 0%, rgba(0, 162, 255, 0) 70%);
}
/* Zwei Licht-Striche auf der Oberkante der offenen Karte */
.lvev-e7 .lvev-e7-line {
position: absolute;
top: -1px;
z-index: 2;
width: var(--e7-line-w);
height: 2px;
border-radius: 30px;
opacity: 0.3;
pointer-events: none;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 50%, rgba(255, 255, 255, 0) 100%);
}
.lvev-e7 .lvev-e7-line--a { left: var(--e7-line-a); }
.lvev-e7 .lvev-e7-line--b { left: var(--e7-line-b); }
.lvev-e7 .lvev-e7-qh { margin: 0; font: inherit; font-weight: inherit; }
.lvev-e7 .lvev-e7-q {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: var(--e7-row-gap);
width: 100%;
min-height: 44px;
padding: var(--e7-pad-y) var(--e7-pad-x);
text-align: left;
white-space: normal;
}
.lvev-e7 .lvev-e7-qtext {
flex: 1 1 auto;
min-width: 0;
white-space: normal;
overflow-wrap: break-word;
font-family: var(--lvf-font-display);
font-size: var(--e7-q-fs);
font-weight: 400;
line-height: 1.23;
letter-spacing: 0.03em;
color: var(--lvf-white);
}
.lvev-e7 .lvev-e7-btn {
position: relative;
flex: 0 0 auto;
display: grid;
place-items: center;
width: var(--e7-btn);
height: var(--e7-btn);
border-radius: var(--e7-btn-radius);
/* Dunkler Kern oben links, Blau laeuft nach unten rechts aus (Soll-Optik) */
background:
radial-gradient(145% 145% at 25% 16%, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.66) 52%, rgba(0, 0, 0, 0.14) 82%, rgba(0, 0, 0, 0) 96%),
linear-gradient(134deg, #6ecaff 0%, #0080ca 100%);
box-shadow: var(--e7-btn-shadow);
transition: filter 0.2s ease;
}
.lvev-e7 .lvev-e7-ico {
grid-area: 1 / 1;
width: var(--e7-ico);
height: var(--e7-ico);
}
.lvev-e7 .lvev-e7-ico--minus { display: none; }
.lvev-e7 .lvev-e7-item.is-open .lvev-e7-ico--plus { display: none; }
.lvev-e7 .lvev-e7-item.is-open .lvev-e7-ico--minus { display: block; }
.lvev-e7 .lvev-e7-panel {
position: relative;
z-index: 1;
display: grid;
grid-template-rows: 0fr;
visibility: hidden;
transition: grid-template-rows 0.32s ease, visibility 0s linear 0.32s;
}
.lvev-e7 .lvev-e7-item.is-open .lvev-e7-panel {
grid-template-rows: 1fr;
visibility: visible;
transition: grid-template-rows 0.32s ease, visibility 0s linear 0s;
}
.lvev-e7 .lvev-e7-panel-in {
min-height: 0;
overflow: hidden;
}
.lvev-e7 .lvev-e7-answer {
max-width: var(--e7-a-max);
padding: 0 var(--e7-pad-x) var(--e7-pad-y);
font-family: var(--lvf-font-display);
font-size: var(--e7-a-fs);
font-weight: 400;
line-height: var(--e7-a-lh);
letter-spacing: 0.06em;
color: #858585;
}
.lvev-e7 .lvev-e7-answer p + p { margin-top: calc(1em * var(--e7-a-lh)); }
/* Zustaende */
.lvev-e7 .lvev-e7-q:hover .lvev-e7-btn,
.lvev-e7 .lvev-e7-q:focus-visible .lvev-e7-btn { filter: brightness(1.12); }
.lvev-e7 .lvev-e7-item:hover::after { opacity: 0.75; }
.lvev-e7 .lvev-e7-q:focus-visible {
outline: 2px solid var(--lvf-blue-light);
outline-offset: -3px;
border-radius: var(--e7-radius);
}
/* ============================ CTAs ============================ */
.lvev-e7 .lvev-e7-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px 28px;
margin-top: var(--e7-cta-gap-top);
}
.lvev-e7 .lvev-e7-pill {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 198px;
max-width: 100%;
height: var(--e7-pill-h);
padding: 6px 9px;
border-radius: 12px;
background:
linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
linear-gradient(134deg, rgba(110, 202, 255, 0.1) 0%, rgba(0, 128, 202, 0.1) 100%);
box-shadow:
7px 3px 11px rgba(0, 0, 0, 0.36),
0 0 0 2px rgba(0, 0, 0, 0.25),
0 0 0 3px rgba(0, 0, 0, 0.16);
-webkit-backdrop-filter: blur(41px);
backdrop-filter: blur(41px);
transition: filter 0.2s ease;
}
/* Touch-Ziel >= 44px, ohne die gezeichnete Hoehe zu veraendern */
.lvev-e7 .lvev-e7-pill::before,
.lvev-e7 .lvev-e7-link::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 44px;
transform: translateY(-50%);
}
.lvev-e7 .lvev-e7-pill-ico {
flex: 0 0 auto;
width: 12px;
height: 13px;
}
.lvev-e7 .lvev-e7-pill-text {
font-family: var(--lvf-font-display);
font-size: var(--e7-pill-fs);
font-weight: 400;
line-height: 1.23;
letter-spacing: 0.02em;
color: var(--lvf-blue);
background-image: linear-gradient(180deg, #87d3ff 0%, #14a6fa 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.lvev-e7 .lvev-e7-link {
position: relative;
display: inline-flex;
align-items: center;
min-height: 44px;
font-family: var(--lvf-font-display);
font-size: var(--e7-link-fs);
font-weight: 400;
line-height: 1.23;
color: rgba(210, 210, 210, 0.92);
transition: color 0.2s ease;
}
.lvev-e7 .lvev-e7-pill:hover { filter: brightness(1.35); }
.lvev-e7 .lvev-e7-link:hover { color: var(--lvf-blue-light); }
.lvev-e7 .lvev-e7-pill:focus-visible,
.lvev-e7 .lvev-e7-link:focus-visible {
outline: 2px solid var(--lvf-blue-light);
outline-offset: 3px;
border-radius: 12px;
}
/* Sehr schmale Geraete: Karten-Innenabstand leicht reduzieren */
@media (max-width: 380px) {
.lvev-e7 { --e7-pad-x: 16px; }
}
/* Abnahme: seitliche Cyan-Blooms zu schwach (-55 bis -66%) - Fluegel verstaerken */
.lvev-e7::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(22% 55% at 0% 45%, rgba(140, 210, 250, 0.55) 0%, rgba(40, 150, 220, 0.25) 50%, rgba(0, 140, 220, 0) 80%),
radial-gradient(22% 55% at 100% 45%, rgba(140, 210, 250, 0.55) 0%, rgba(40, 150, 220, 0.25) 50%, rgba(0, 140, 220, 0) 80%);
}
/* Abnahme: FAQ'S-Kicker-Pille fehlte als einzige der Sektionen */
.lvev-e7-kicker {
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
margin: 0 auto 18px;
padding: 7px 20px;
border: 1px solid transparent;
border-radius: 78px;
background:
linear-gradient(#000a10, #000a10) padding-box,
linear-gradient(90deg, rgba(52, 176, 248, 0) 0%, #35aef4 53%, rgba(49, 169, 238, 0) 100%) border-box;
box-shadow: 7px 3px 11px rgba(0, 0, 0, 0.36), 0 0 0 2px rgba(0, 0, 0, 0.25);
font-family: var(--lvf-font-display);
font-size: 13px;
font-weight: 400;
letter-spacing: 0.8px;
color: #ffffff;
}
/* ============================================================
Mockup-Abgleich 11.08.2026, nur Desktop (>=1024px). Fuer Tablet und
Mobile gibt es keine Vorlage, dort bleibt alles wie gehabt.
Sektion lvev-e7 war 1239 px hoch statt 1142.
Anker im Mockup (Seitenkoordinaten): FAQ-Pille 7158..7194, Titel 7205..7265,
Unterzeile 7290..7314, erste Karte ab 7399, Buttonzeile 8112..8156,
Sektionsende 8237. Live lagen dieselben Anker bei 7302..7338, 7389..7449,
7482..7506, 7591, 8317..8361, 8463.
- Kopfblock: Soll 156 px, war 204 (die Pille klebte 51 px ueber dem Titel)
- Karten: Abstand und Hoehe der geschlossenen Karten stimmen (94 px
Raster); nur die offene Karte ist 12 px zu hoch
- Raender: oben 65 statt 78, unten rund 80 statt 102
============================================================ */
@media (min-width: 1024px) {
/* Kopfblock: Pille -> Titel soll 11 px sein. Der Abstand kam bisher aus
18 px Rand der Pille plus 33 px Flex-Abstand. Rand raus, Abstand 11. */
.lvev-e7 .lvev-e7-kicker { margin-bottom: 0; }
/* Titel -> Unterzeile soll 25 px sein: 11 px Flex-Abstand plus 14 hier. */
.lvev-e7 .lvev-e7-sub { margin-top: 14px; }
/* Offene Karte: im Mockup 190 px hoch, gebaut waren 202. Gemessen fehlen
7 px zwischen Frage und Antwort und 5 px unter der Antwort. Die
geschlossenen Karten bleiben unangetastet, ihr Raster stimmt. */
.lvev-e7 .lvev-e7-item.is-open .lvev-e7-q { padding-bottom: 17px; }
.lvev-e7 .lvev-e7-answer { padding-bottom: 19px; }
}
/* ============================================================
Uebergaenge e6/e7 und e7/e8, Abgleich 11.08.2026 (Befund der
Gegenpruefung: harte Kanten bei lvev-e7 und lvev-e8), nur Desktop.
Gemessen wird der Helligkeitsmittelwert der Hintergrundraender
(x 0..150 und 1610..1760). Soll-y = Ist-y - 199.
dy ab Sektionsoberkante 0 200 400 600 800 1000 1140
Soll 203 169 130 93 61 40 33
vorher 209 179 145 118 89 59 44
Der Umgebungsschein von e7 faellt also viel zu langsam ab: an der Naht zu
e8 ist er 11 Stufen zu hell, in der Sektionsmitte 26. Daraus die beiden
gemeldeten Kanten: +10,7 am Beginn von e7 (Entwurf -1,2) und -10,5 am
Beginn von e8 (Entwurf -0,2).
Die Maske daempft den Schein hoehenabhaengig genau um den gemessenen
Faktor; der Seitengrund #05060f (Helligkeit 9) ist dabei herausgerechnet:
Faktor = (Soll - 9) / (Ist - 9)
Nachher: Naht e6/e7 +2,7, Naht e7/e8 +1,2.
Der Selektor ist 0-3-0, weil `.lvev-e7 .lvev-e7-bg` in
server-stand-20260810/lvlup-fixes/r3b-evaluation.css Z. 241 (Ebene 2,
Prioritaet 1200, 0-2-0) den Verlauf setzt.
============================================================ */
@media (min-width: 1024px) {
.lvf-page .lvev-e7 .lvev-e7-bg {
background:
radial-gradient(300px 2600px at 0px -925px, rgba(254,254,255,1) 0%,rgba(250,253,255,1) 8%,rgba(216,240,254,1) 15%,rgba(161,220,253,1) 23%,rgba(128,204,244,1) 31%,rgba(80,178,226,1) 38%,rgba(50,150,201,.97) 46%,rgba(38,128,178,.94) 54%,rgba(26,100,142,.88) 62%,rgba(18,78,112,.78) 69%,rgba(10,62,92,.62) 77%,rgba(5,46,70,.36) 86%,rgba(2,30,48,0) 100%),
radial-gradient(300px 3400px at 100% -925px, rgba(254,254,255,1) 0%,rgba(250,253,255,1) 8%,rgba(216,240,254,1) 15%,rgba(161,220,253,1) 23%,rgba(128,204,244,1) 31%,rgba(80,178,226,1) 38%,rgba(50,150,201,.97) 46%,rgba(38,128,178,.94) 54%,rgba(26,100,142,.88) 62%,rgba(18,78,112,.78) 69%,rgba(10,62,92,.62) 77%,rgba(5,46,70,.36) 86%,rgba(2,30,48,0) 100%);
-webkit-mask-image: linear-gradient(180deg,
rgba(0, 0, 0, 0.967) 0%,
rgba(0, 0, 0, 0.94) 17.5%,
rgba(0, 0, 0, 0.89) 35%,
rgba(0, 0, 0, 0.77) 52.5%,
rgba(0, 0, 0, 0.65) 70%,
rgba(0, 0, 0, 0.62) 87.5%,
rgba(0, 0, 0, 0.66) 100%);
mask-image: linear-gradient(180deg,
rgba(0, 0, 0, 0.967) 0%,
rgba(0, 0, 0, 0.94) 17.5%,
rgba(0, 0, 0, 0.89) 35%,
rgba(0, 0, 0, 0.77) 52.5%,
rgba(0, 0, 0, 0.65) 70%,
rgba(0, 0, 0, 0.62) 87.5%,
rgba(0, 0, 0, 0.66) 100%);
}
}
/* ============================================================
Lichtsaeulen e7, Abgleich 12.08.2026, nur Desktop. Die Sektion war quer
ueber die Mitte deutlich heller als der Entwurf.
BEFUND. Querprofil ueber die volle Breite, 20 Spaltenbloecke, Median je
Block ueber 16 Bildzeilen, gegen evaluation-aus-vollbild.png:
y 7105, Block 14 (x 1144..1232): Soll ( 7, 44, 66) live ( 68,160,204)
y 7300, Block 16 (x 1320..1408): Soll ( 2, 26, 40) live ( 65,155,198)
y 7600, Block 17 (x 1408..1496): Soll ( 1, 4, 6) live ( 22, 87,121)
Mittlere Abweichung der drei Querprofile: 51,8 / 44,0 / 24,1.
URSACHE, an drei Stellen nachgerechnet und am Bild bestaetigt: das
Querband in .lvev-e7-bg::before (r3-evaluation.css, von r3b rechts auf
2000 px verlaengert) hat einen WAAGERECHTEN Radius von 1350 px. Von x=0
reicht es damit bis x 1350, von rechts bis x 410; die beiden Kopien
ueberlappen sich also ueber die ganze Seitenmitte und addieren sich dort
per screen. Der Entwurf zeigt das Licht nur in den aeusseren rund 350 px.
Nicht die Deckkraft ist zu hoch und nicht der Mittelpunkt falsch: an der
Stelle x=0 ist der Radialverlauf von rx unabhaengig, die Raender bleiben
also unveraendert, wenn nur rx sinkt. Nachgemessen: Block 1 und 20 aendern
sich um weniger als 1,5 Stufen.
REPARATUR
1. rx links 1350 -> 700, rx rechts 1350 -> 500. Rechts enger, weil der
Entwurf dort schneller abfaellt (y 7300: Soll faellt von (134,212,252)
bei x 1716 auf (2,26,40) bei x 1364, also ueber 350 px).
2. ry rechts 2000 -> 1700. Mit 2000 blieb der rechte Auslauf bis
y 7600 zu breit (Block 19 dort 32,7 gegen 10,3).
3. Die Mitte ist im Entwurf nicht schwarz, sondern traegt oben einen
flachen Sockel, der nach unten schnell ausgeht:
y 7100 ( 7, 46, 69) y 7200 ( 3, 32, 48)
y 7350 ( 2, 20, 31) y 7500 ( 0, 4, 7)
Den lieferte bisher der viel zu breite Auslauf mit. Er steht jetzt
als eigener senkrechter Verlauf in derselben Ebene, damit er die
Seitenmitte trifft, ohne die Raender mitzuziehen. Die Prozentwerte
sind Sektionshoehe 1143 px; die Maske darueber ist eingerechnet.
ERGEBNIS, gleiche Messweise
Querprofil y 7105: 51,8 -> 8,9 y 7300: 44,0 -> 4,6
Querprofil y 7600: 24,1 -> 5,2
Band 7105..8240 gegen Soll: 21,65 -> 8,43
Naht e6/e7 1,52 -> 1,63 (Entwurf 1,89), Naht e7/e8 unveraendert 1,09.
Die Gegenkopie in e6 (Fragment e6-beyond, Ebenen --right und --bottom)
traegt dieselben Radien und denselben Sockel, sonst bricht die Naht.
Spezifitaet 0-3-0 plus Pseudoelement, weil r3-evaluation.css Z. 361 und
r3b-evaluation.css Z. 247 dieselbe Ebene mit 0-2-0 setzen (Plugin
lvlup-fixes, Prioritaet 1200).
============================================================ */
@media (min-width: 1024px) {
.lvf-page .lvev-e7 .lvev-e7-bg::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
mix-blend-mode: screen;
background:
/* linkes Querband: rx 1350 -> 700 */
radial-gradient(700px 1400px at 0px -875px, rgba(255,255,255,1) 0%,rgba(250,253,255,1) 16%,rgba(215,240,255,1) 30%,rgba(175,226,255,.98) 42%,rgba(110,205,250,.92) 54%,rgba(70,185,240,.85) 64%,rgba(30,150,215,.7) 76%,rgba(10,90,140,.36) 88%,rgba(4,40,64,0) 100%),
/* rechtes Querband: rx 1350 -> 500, ry 2000 -> 1700 */
radial-gradient(500px 1700px at 100% -875px, rgba(255,255,255,1) 0%,rgba(250,253,255,1) 16%,rgba(215,240,255,1) 30%,rgba(175,226,255,.98) 42%,rgba(110,205,250,.92) 54%,rgba(70,185,240,.85) 64%,rgba(30,150,215,.7) 76%,rgba(10,90,140,.36) 88%,rgba(4,40,64,0) 100%),
/* Sockel der Seitenmitte, Soll (7,46,69) an der Naht bis (0,4,7) bei y 7500 */
linear-gradient(180deg, rgba(7,49,72,1) 0%, rgba(3,34,51,1) 9%, rgba(2,21,33,1) 22%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 100%);
}
}
/* Zeilenhoehe der Ueberschrift, 11.08.2026: im Entwurf 44 px
(Figma-TEXT y 7213), live 60,5. Der Abstand zur naechsten Zeile
stimmt bereits, es ist allein die Zeilenhoehe. 44 / 65 = 0,677.
Dieselbe Korrektur auf allen Sektionsueberschriften dieser Seite und auf
elite; der Entwurf verwendet ueberall denselben Grad. Nur ab 1024 px,
darunter faellt der Grad per clamp kleiner aus und die Zeile bricht um. */
/* ZURUECKGENOMMEN nach der Abnahme.
Hier war 0,93 richtig und 0,677 falsch. Am Soll-BILD nachgemessen:
Pille -> Ueberschrift Soll 32 mit 0,93: 29,4 mit 0,677: 20,5
Ueberschrift -> Unterzeile Soll 27 mit 0,93: 27,8 mit 0,677: 19,0
Der Figma-Knoten gibt zwar auch fuer diese Zeile 44 an, das gerenderte
Mockup widerspricht. Wo Knoten und Bild sich widersprechen, gilt das Bild:
das ist der Stand, den der Kunde gesehen hat. */
/* ============================================================
Effekt-Abgleich 11.08.2026, nur Desktop (>=1024px), gemessen am
Soll-Bild gegen das frisch gerenderte Ist.
1. FAQ-Pille: Soll-Kern im Bild x828..933 (105 breit) und
y7160..7191 (31 hoch), live DOM 79 x 35,5 bei y7164,8 - also
26 px zu schmal, 4 px zu hoch und 5 px zu tief. Der Text selbst
stimmt (Tinte Soll 37 px breit, fs 13). Border-Spitze im Soll
nur (8,45,67), live (52,173,243); Fuellung Soll (0,18,28),
live (0,10,16).
Hoehenbilanz, damit die abgenommene Sektionshoehe steht:
pt 65->60 (-5), Pillenhoehe 35,5->31,5 (-4), Kicker-Margin
0->9 (+9) = 0; der Titel bleibt bei y7211.
2. Offener FAQ-Eintrag zu blau: Randstreifen der offenen Karte
(card-rel, links x18 / rechts x1221):
y8 links Soll (2,13,19) Ist (1,43,69)
rechts Soll (0,17,25) Ist (9,76,111)
y120 links Soll (0,7,10) Ist (2,21,31)
rechts Soll (1,9,12) Ist (9,52,77)
Die drei Blau-Schichten (6deg 0,29 + Flaeche 0,05 + Glow 0,16)
liefern rund das Vierfache des Solls; auf ein Viertel gedaempft.
3. Antwortspalte 64 px zu schmal: Soll-Text x292..1412 (1120 breit,
Figma-TEXT), live 292..1348 (1056): max-width 1120 sass auf dem
Element MIT 2x32 Innenabstand, richtig sind 1120 + 64 = 1184.
============================================================ */
@media (min-width: 1024px) {
/* Pille 5 px hoeher: Soll-Oberkante y7160, gemessen y7164,8 */
.lvev-e7 {
--e7-pt: 60px;
/* Antworttext: Soll 1120 px breit, gemessen 1056 */
--e7-a-max: 1184px;
}
/* Pille: Soll 105 x 31 (Text 39 + 2x32 Innenabstand + Rand),
gemessen 79 x 35,5; Border und Fuellung auf Soll-Intensitaet */
.lvev-e7 .lvev-e7-kicker {
padding: 5px 32px;
/* Hoehenausgleich: pt -5 und Pille -4 kommen hier wieder drauf,
Titel-Oberkante bleibt y7211 */
margin-bottom: 9px;
background:
linear-gradient(#00101a, #00101a) padding-box,
/* Soll-Borderspitze (8,45,67) liegt nur ~12 Stufen ueber dem
Umgebungsglow (6,36,55); mit 0,12 gemessen noch (20,93,137) */
linear-gradient(90deg, rgba(52, 176, 248, 0) 0%, rgba(53, 174, 244, 0.06) 53%, rgba(49, 169, 238, 0) 100%) border-box;
}
/* Offene Karte: Blau-Schichten auf Soll-Niveau (siehe Tabelle oben).
Die Restblaue rechts kam durch die 0,75-Deckung: der Sektionsglow
scheint durch (Messrunde 2 rechts y175: Soll (2,7,11), mit 0,75 noch
(9,33,44)); Deckung deshalb auf 0,92. */
.lvev-e7 .lvev-e7-item.is-open {
background:
linear-gradient(6deg, rgba(0, 162, 255, 0) 35%, rgba(0, 162, 255, 0.07) 100%),
rgba(0, 0, 0, 0.92);
}
.lvev-e7 .lvev-e7-item.is-open .lvev-e7-glow {
background: radial-gradient(ellipse 71% 285px at 22% 2px,
rgba(0, 162, 255, 0.05) 0%, rgba(0, 162, 255, 0) 70%);
}
}
/* == e8-cta == */
/* ============================================================
Lvlup Futures Evaluation - e8 CTA
Masse: Desktop-Band 1760 (Content-Spalte 1240, x=260..1500),
Karte box(261,8298,1239,547), Radius 45, 10px Aussenkontur.
Mobile (< 768px) ohne Designvorlage, sauber gestapelt.
Basis-Regeln = Mobile, 768-1023px interpoliert, >=1024px Desktop.
============================================================ */
.lvev-e8 {
/* --- Mobile-Werte (< 768px) --- */
--e8-pt: 56px;
--e8-pb: 72px;
--e8-card-radius: 24px;
--e8-card-pad-y: 48px;
--e8-card-pad-x: 20px;
--e8-head-gap: 16px;
--e8-title-fs: 40px;
--e8-title-lh: 1.02;
--e8-sub-fs: 16px;
--e8-sub-lh: 24px;
--e8-block-gap: 36px;
--e8-stats-gap-y: 26px;
--e8-stats-gap-x: 20px;
--e8-num-fs: 30px;
--e8-label-fs: 12px;
--e8-ico: 24px;
--e8-btn-h: 48px;
--e8-btn-fs: 16px;
position: relative;
isolation: isolate;
padding-block: var(--e8-pt) var(--e8-pb);
}
/* Tablet: 768-1023px, linear interpoliert (bei 1024px exakt Desktop) */
@media (min-width: 768px) {
.lvev-e8 {
--e8-pt: clamp(56px, calc(7.031vw + 2px), 74px);
--e8-pb: clamp(72px, calc(9.766vw - 3px), 97px);
--e8-card-radius: clamp(24px, calc(8.203vw - 39px), 45px);
--e8-card-pad-y: clamp(48px, calc(16.016vw - 75px), 89px);
--e8-card-pad-x: clamp(20px, calc(7.813vw - 40px), 40px);
--e8-head-gap: clamp(16px, calc(7.031vw - 38px), 34px);
--e8-title-fs: clamp(40px, calc(11.719vw - 50px), 70px);
--e8-title-lh: 0.95;
--e8-sub-fs: clamp(16px, calc(3.125vw - 8px), 24px);
--e8-sub-lh: clamp(24px, calc(4.688vw - 12px), 36px);
--e8-block-gap: clamp(36px, calc(4.297vw + 3px), 47px);
--e8-stats-gap-y: 32px;
--e8-stats-gap-x: clamp(20px, calc(29.688vw - 208px), 96px);
--e8-num-fs: clamp(30px, calc(2.734vw + 9px), 37px);
--e8-label-fs: clamp(12px, calc(0.391vw + 9px), 13px);
--e8-ico: clamp(24px, calc(2.344vw + 6px), 30px);
--e8-btn-h: 46px;
--e8-btn-fs: 17px;
}
}
/* Desktop: >= 1024px, Werte 1:1 aus dem Desktop-Band */
@media (min-width: 1024px) {
.lvev-e8 {
/* Mockup-Abgleich 11.08.2026: Soll 60 px bis zur Kartenoberkante, war 74 */
--e8-pt: 60px;
/* Mockup-Abgleich: Soll rund 40 px unter der Karte, war 97. Die Grenze
zum Fuss ist die unsicherste der Seite (Spanne 61 bis 149 px zu viel),
darum die Mitte der Spanne und nicht der letzte Pixel. */
--e8-pb: 42px;
--e8-card-radius: 45px;
--e8-card-pad-y: 89px;
--e8-card-pad-x: 40px;
/* Mockup-Abgleich: Soll 25 px zwischen Titel und Unterzeile, war 34 */
--e8-head-gap: 25px;
--e8-title-fs: 70px;
--e8-sub-fs: 24px;
--e8-sub-lh: 36px;
/* Mockup-Abgleich: Kopf -> Kennzahlen 37, Kennzahlen -> Buttons 44,
gebaut waren beide 47. Ein Wert fuer beide, also 40. */
--e8-block-gap: 40px;
--e8-stats-gap-x: 96px;
--e8-num-fs: 37px;
--e8-label-fs: 13px;
--e8-ico: 30px;
}
}
/* --- Hintergrund-Glows hinter der Karte (Naeherung der "Star"-Vektoren,
rein dekorativ). Grosse radial-gradients mit transparenten Enden:
laufen weich in die Nachbarsektionen aus, keine harten Kanten. --- */
.lvev-e8 .lvev-e8-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
/* R3-Befund 2: Seitenglow verstaerkt (cyan-weiss statt fast schwarz) */
background:
radial-gradient(42% 58% at 7% 52%, rgba(50, 185, 255, 0.46) 0%, rgba(0, 162, 255, 0.2) 42%, rgba(0, 162, 255, 0) 72%),
radial-gradient(42% 58% at 93% 52%, rgba(50, 185, 255, 0.42) 0%, rgba(18, 169, 255, 0.18) 42%, rgba(18, 169, 255, 0) 72%),
radial-gradient(64% 42% at 50% 112%, rgba(167, 223, 255, 0.2) 0%, rgba(4, 48, 74, 0) 72%);
}
@media (max-width: 767px) {
.lvev-e8 .lvev-e8-bg {
background:
radial-gradient(95% 34% at 0% 30%, rgba(50, 185, 255, 0.4) 0%, rgba(0, 162, 255, 0) 72%),
radial-gradient(95% 34% at 100% 44%, rgba(50, 185, 255, 0.36) 0%, rgba(18, 169, 255, 0) 72%),
radial-gradient(110% 26% at 50% 108%, rgba(167, 223, 255, 0.16) 0%, rgba(4, 48, 74, 0) 72%);
}
}
.lvev-e8 .lvev-e8-inner {
position: relative;
z-index: 1;
}
/* ============================ Karte ============================ */
.lvev-e8 .lvev-e8-card {
position: relative;
overflow: hidden;
isolation: isolate;
border-radius: var(--e8-card-radius);
background: #000000;
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.45),
0 0 70px rgba(0, 162, 255, 0.10);
}
/* 10px Aussenkontur als Verlauf (Spec: rgba(255,255,255,0.32) ->
rgba(255,255,255,0.05), OUTSIDE). Ueber Maske als Ring gezeichnet. */
.lvev-e8 .lvev-e8-card::before {
content: "";
position: absolute;
inset: -10px;
z-index: 4;
border-radius: calc(var(--e8-card-radius) + 10px);
padding: 10px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.05) 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;
}
/* Innen-Glows der Karte (Spec: Star-Gruppen #002235 / #00a2ff / #a2ddff
mit grossem Blur). R3-Befund 3: Die Karte war oben schwarz statt cyan
gefuellt und das Cyan setzte unten mit harter Kante ein (SOLL bei
x=1350 rgb(94,183,235), Mittelhelligkeit 62 statt 28). Jetzt ein
durchgehender, weicher cyan-weisser Verlauf von der Mitte nach unten,
ohne dunklen Deck-Layer und ohne harte Kante. */
.lvev-e8 .lvev-e8-card-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
/* Abnahme 06.08.: obere Kartenhaelfte war reines Schwarz - Design zeigt
einen durchgehenden Marineblau-Verlauf von oben (wie Home-CTA). */
linear-gradient(180deg, rgba(7, 50, 78, 0.9) 0%, rgba(8, 62, 98, 0.85) 30%, rgba(18, 100, 155, 0.7) 52%, rgba(0, 0, 0, 0) 72%),
radial-gradient(130% 110% at 50% 112%, rgba(120, 205, 255, 0.85) 0%, rgba(60, 170, 235, 0.5) 38%, rgba(0, 140, 220, 0.2) 62%, rgba(0, 120, 200, 0) 85%),
radial-gradient(60% 90% at 12% 115%, rgba(0, 162, 255, 0.5) 0%, rgba(0, 162, 255, 0) 70%),
radial-gradient(60% 90% at 88% 115%, rgba(0, 162, 255, 0.5) 0%, rgba(0, 162, 255, 0) 70%),
radial-gradient(40% 55% at 50% 118%, rgba(190, 228, 255, 0.3) 0%, rgba(162, 221, 255, 0) 70%);
}
/* Deko-Pfeile links/rechts unten (Spec: 404x407, von der Karte beschnitten) */
.lvev-e8 .lvev-e8-arrow {
position: absolute;
z-index: 0;
bottom: -169px;
width: 404px;
height: 407px;
opacity: 0.9;
filter: drop-shadow(0 0 34px rgba(0, 162, 255, 0.30));
pointer-events: none;
}
.lvev-e8 .lvev-e8-arrow--l { left: -90px; }
.lvev-e8 .lvev-e8-arrow--r { right: -90px; }
@media (max-width: 767px) {
.lvev-e8 .lvev-e8-arrow {
bottom: -112px;
width: 260px;
height: 262px;
opacity: 0.5;
}
.lvev-e8 .lvev-e8-arrow--l { left: -120px; }
.lvev-e8 .lvev-e8-arrow--r { right: -120px; }
}
.lvev-e8 .lvev-e8-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--e8-block-gap);
padding: var(--e8-card-pad-y) var(--e8-card-pad-x);
}
/* ============================ Kopfblock ============================ */
.lvev-e8 .lvev-e8-head {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--e8-head-gap);
}
.lvev-e8 .lvev-e8-title {
margin: 0;
font-family: var(--lvf-font-display);
font-size: var(--e8-title-fs);
font-weight: 500;
line-height: var(--e8-title-lh);
letter-spacing: -0.02em;
text-align: center;
text-wrap: balance;
background-image: 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;
}
/* "Build Toward $1M" in Blau-Verlauf (hell oben -> satt unten), wie im Soll */
.lvev-e8 .lvev-e8-title-accent {
background-image: linear-gradient(180deg, #8fd6ff 0%, #14a6fa 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lvev-e8 .lvev-e8-sub {
max-width: 1060px;
font-family: var(--lvf-font-display);
font-size: var(--e8-sub-fs);
font-weight: 425;
line-height: var(--e8-sub-lh);
letter-spacing: 0.03em;
text-align: center;
color: rgba(255, 255, 255, 0.85);
}
/* ============================ Kennzahlen ============================ */
.lvev-e8 .lvev-e8-stats {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: var(--e8-stats-gap-y) var(--e8-stats-gap-x);
}
/* Mobile: festes 2x2-Raster statt umbrechender Flex-Zeile */
@media (max-width: 767px) {
.lvev-e8 .lvev-e8-stats {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center;
}
}
.lvev-e8 .lvev-e8-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.lvev-e8 .lvev-e8-stat-row {
display: inline-flex;
align-items: center;
gap: 10px;
}
.lvev-e8 .lvev-e8-stat-ico {
flex: 0 0 auto;
width: var(--e8-ico);
height: var(--e8-ico);
}
.lvev-e8 .lvev-e8-stat-num {
font-family: var(--lvf-font-display);
font-size: var(--e8-num-fs);
font-weight: 550;
line-height: 1.1;
letter-spacing: -0.03em;
/* Muster B, 13.08.2026: trug den weissen Glanz-Verlauf der Ueberschrift statt
des blauen Kennzahl-Verlaufs. Figma-Knoten 227:1674/1679/1684/1689, oberste
sichtbare Fill-Ebene GRADIENT_LINEAR 180 Grad #8cd5ff -> #12a9ff, identisch
mit dem Token, das dieselben vier Kennzahlen auf home (s10) und rules
(r9b-cta) bereits tragen. Beleg in referenz-neu/befunde/muster-b-verlaeufe.md
Abschnitt 2, Fundstelle E-1. */
background-image: var(--lvf-grad-blue);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lvev-e8 .lvev-e8-stat-label {
font-family: var(--lvf-font-display);
font-size: var(--e8-label-fs);
font-weight: 500;
line-height: 1.23;
letter-spacing: 0.04em;
text-align: center;
color: rgba(255, 255, 255, 0.6);
}
/* ============================ CTAs ============================ */
.lvev-e8 .lvev-e8-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px 8px;
}
.lvev-e8 .lvev-e8-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: var(--e8-btn-h);
border-radius: 10px;
font-family: var(--lvf-font-display);
font-size: var(--e8-btn-fs);
line-height: 1.47;
transition: filter 0.2s ease;
}
.lvev-e8 .lvev-e8-btn--primary {
padding: 5px 12px 5px 5px;
font-weight: 500;
color: var(--lvf-white);
/* Saum-Verlauf statt eigenem Rezept plus inset-Schatten, 11.08.2026.
Der Schatten galt fuer alle Breiten, deshalb muss auch diese Grundregel
auf das Token wechseln, sonst stuende der Knopf unter 1024 px ganz ohne
Saum da. Zum falschen 134-Grad-Rezept siehe den Block ab
"Verlaufs-Reparaturen e8" weiter unten. */
background: var(--lvf-grad-blue-btn);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
/* Feine blaue Mittelkontur (Spec: 0.5px Verlauf, CENTER) */
.lvev-e8 .lvev-e8-btn--primary::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(90deg, rgba(0, 162, 255, 0) 0%, #00a2ff 50%, rgba(0, 162, 255, 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;
}
/* Schwarzer Icon-Kasten mit weissem Pfeil (Spec: 36x36, #060606, Radius 6) */
.lvev-e8 .lvev-e8-btn-ico {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 6px;
background: #060606;
}
.lvev-e8 .lvev-e8-btn-ico svg {
width: 18px;
height: 18px;
}
.lvev-e8 .lvev-e8-btn--ghost {
padding: 5px 17px;
font-weight: 400;
color: var(--lvf-white);
background:
linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
linear-gradient(134deg, rgba(110, 202, 255, 0.14) 0%, rgba(0, 128, 202, 0.14) 100%);
box-shadow:
inset -2px -6px 19px #52b8f1,
inset -5px -4px 16px #00a4ff,
inset -1px -2px 5px #00a4ff,
inset 9px 7px 12px #000000,
0 6px 18px rgba(0, 0, 0, 0.25);
}
.lvev-e8 .lvev-e8-btn:hover { filter: brightness(1.12); }
.lvev-e8 .lvev-e8-btn:focus-visible {
outline: 2px solid var(--lvf-blue-light);
outline-offset: 3px;
}
/* Mobile: Buttons ueber volle Breite, Touch-Ziele >= 44px */
@media (max-width: 767px) {
.lvev-e8 .lvev-e8-cta {
flex-direction: column;
align-items: stretch;
width: 100%;
max-width: 340px;
}
.lvev-e8 .lvev-e8-btn {
width: 100%;
min-height: 48px;
}
}
/* ============================================================
Mockup-Abgleich 11.08.2026, nur Desktop (>=1024px). Fuer Tablet und
Mobile gibt es keine Vorlage. Sektion lvev-e8 war 757 px hoch statt 646,
die Karte selbst 586 statt 547.
Anker im Mockup (Seitenkoordinaten): Karte 8297..8844, Titelzeile 1 ab 8379,
Unterzeile 8537..8573, Kennzahlen 8610..8666, Buttonzeile 8710..8755.
Live: Karte 8537..9123, Titel ab 8626, Unterzeile 8793..8829, Kennzahlen
8876..8941, Buttons 8988..9034.
- Innenrand oben: Soll 82 px, war 89 (unten stimmen die 89 px)
- Kennzahlblock: Soll 56 px, war 65
============================================================ */
@media (min-width: 1024px) {
/* Oben 82, unten 89: im Mockup sitzt der Titel enger am Kartenrand als die
Buttons. Der x-Wert bleibt --e8-card-pad-x. */
.lvev-e8 .lvev-e8-content {
padding: 82px var(--e8-card-pad-x) var(--e8-card-pad-y);
}
/* Kennzahl: Zeilenkasten war 41 px hoch (37 x 1.1) und schob das Label
nach unten. Im Mockup liegen Zahl und Label 9 px enger beieinander,
die Zahl selbst ist gleich gross (Tintenhoehe 25 px hier wie dort). */
.lvev-e8 .lvev-e8-stat-num { line-height: 0.87; }
}
/* ============================================================
Verlaufs-Abgleich 11.08.2026 (Befund B3 der Detailpruefung), nur Desktop.
WARUM DREI KLASSEN IM SELEKTOR: der bisher wirksame Verlauf steht nicht
hier, sondern in server-stand-20260810/lvlup-fixes/r3-evaluation.css
Zeile 562 (`.lvev-e8 .lvev-e8-card-bg`, Ebene 2, Prioritaet 1200). Diese
Datei laedt NACH dem Fragment und gewinnt bei gleicher Spezifitaet. Mit
`.lvev-e8 .lvev-e8-card .lvev-e8-card-bg` (0-3-0 gegen 0-2-0) wirkt die
Korrektur, ohne dass jemand in der Fremd-Ebene arbeiten muss.
Was der alte Stapel falsch machte: eine fast deckende schwarze Scheibe
(`radial-gradient(56% 52% at 50% 44%, rgba(0,3,7,.94) ...)`) ueber der
Kartenmitte, dazu zwei riesige weisse Ecken unten (60% x 44%). Ergebnis:
Mitte zu dunkel, Ecken zu hell und zu wenig gesaettigt.
Messpunkte karten-relativ (Karte 1240 x 547), Soll aus
referenz-neu/soll/evaluation-aus-vollbild.png box(261,8298,1239,547):
Punkt Soll vorher nachher
(14,120) 33,116,165 11,108,162 27,110,161
(14,220) 16,106,157 3, 30, 52 21,105,153
(1226,120) 135,205,246 47,110,150 132,201,242
(1226,220) 89,180,232 7, 45, 71 48,161,222
(620,285) 2, 15, 23 2, 23, 39 2, 16, 25
(620,470) 3, 35, 54 3, 30, 50 3, 37, 57
(20,530) 112,215,245 90,191,246 61,186,248
(700,530) 11, 64, 94 43,105,141 11, 70,107
Mittlerer Farbabstand ueber 118 textfreie Messpunkte: vorher 33,1 Stufen,
nachher 10,9. Groesster Einzelabstand: vorher 167, nachher 72.
Aufbau des neuen Stapels von oben nach unten:
1./2. untere Ecken - Soll (8,525) rgb(107,215,245)
3. Lichtkeule oben rechts, weit nach links reichend
- Soll (980,22) rgb(64,154,206), vorher rgb(16,54,76)
4. obere rechte Ecke - Soll (1232,110) rgb(135,207,247)
5. rechte Flanke ueber die volle Hoehe - Soll (1232,350) rgb(27,143,205)
6. linke Flanke ueber die volle Hoehe - Soll (8,230) rgb(17,111,164)
7. Grundton, senkrecht: Kartenmitte Soll y285 rgb(2,15,23),
y395 rgb(2,33,51), y470 rgb(3,35,54), y525 rgb(3,54,83)
============================================================ */
@media (min-width: 1024px) {
.lvev-e8 .lvev-e8-card .lvev-e8-card-bg {
background:
radial-gradient(56% 48% at -2% 104%, rgba(140, 220, 250, 1) 0%, rgba(108, 208, 244, 0.95) 20%, rgba(64, 182, 234, 0.74) 28%, rgba(46, 158, 214, 0.52) 40%, rgba(40, 142, 198, 0.42) 55%, rgba(30, 128, 186, 0.28) 68%, rgba(14, 114, 172, 0.12) 82%, rgba(0, 105, 165, 0) 100%),
radial-gradient(56% 48% at 102% 104%, rgba(134, 216, 248, 1) 0%, rgba(102, 204, 242, 0.93) 20%, rgba(60, 180, 232, 0.72) 28%, rgba(44, 156, 212, 0.5) 40%, rgba(38, 140, 196, 0.41) 55%, rgba(28, 126, 184, 0.27) 68%, rgba(13, 112, 170, 0.12) 82%, rgba(0, 105, 165, 0) 100%),
radial-gradient(30% 16% at 79% 0%, rgba(120, 200, 248, 0.8) 0%, rgba(60, 175, 240, 0.5) 42%, rgba(10, 135, 210, 0.18) 74%, rgba(0, 125, 200, 0) 100%),
/* Ecke oben rechts horizontal 58 % -> 48 %: der Auslauf reichte bis in
die Kartenmitte und hellte sie auf (Mitte x620, y160: Ist (0,12,19)
gegen Soll (1,4,6)); an der Flanke selbst (x1226, dx nur 1 %) aendert
die Stauchung nichts (y120: Ist (137,207,246), Soll (135,205,246)) */
radial-gradient(48% 42% at 100% 21%, rgba(152, 216, 252, 0.9) 0%, rgba(140, 210, 250, 0.86) 20%, rgba(96, 192, 246, 0.63) 37%, rgba(66, 178, 240, 0.55) 46%, rgba(30, 152, 224, 0.35) 58%, rgba(10, 132, 208, 0.18) 76%, rgba(0, 120, 198, 0.08) 88%, rgba(0, 118, 196, 0) 100%),
linear-gradient(270deg, rgba(28, 146, 208, 1) 0%, rgba(27, 144, 206, 0.92) 2.4%, rgba(25, 140, 202, 0.76) 5.6%, rgba(20, 132, 196, 0.5) 10.5%, rgba(14, 124, 188, 0.27) 16%, rgba(8, 116, 180, 0.12) 23%, rgba(2, 110, 175, 0.04) 31%, rgba(0, 108, 172, 0) 36%),
linear-gradient(90deg, rgba(30, 118, 170, 1) 0%, rgba(29, 116, 168, 0.9) 1.6%, rgba(27, 112, 164, 0.76) 3.2%, rgba(23, 106, 158, 0.55) 5.6%, rgba(18, 100, 152, 0.32) 9%, rgba(12, 94, 146, 0.11) 13%, rgba(6, 90, 142, 0.01) 18%, rgba(0, 88, 140, 0) 20%),
/* Grundton oben: der Verlauf begann mit reinem Schwarz bis 20 %, im
Mockup traegt die obere Kartenmitte aber einen Marineblau-Schimmer
(x620 card-rel: y30 Soll (1,20,34) Ist (0,5,8); y55 Soll (1,17,25)
Ist (0,8,13); y65 Soll (1,16,23) Ist (0,9,14); y90 stimmt wieder:
Soll (1,10,17) Ist (0,11,18)). Ab 52 % unveraendert, dort passte
die Messung (y285 Soll (2,14,23) Ist (2,15,23)). */
linear-gradient(180deg, rgb(1, 21, 36) 0%, rgb(1, 19, 32) 6%, rgb(1, 17, 25) 10%, rgb(1, 16, 23) 12%, rgb(1, 10, 17) 16.5%, rgb(1, 6, 10) 22%, rgb(1, 4, 8) 29%, rgb(1, 5, 8) 37.5%, rgb(1, 6, 11) 41%, #020f17 52%, #022133 72%, #032336 86%, #032f4a 91%, #04384f 100%);
}
/* Pfeilkasten: 320 x 275 px, Kartenkoordinaten x 40..360 bzw. 880..1200,
y 300..575. Er muss Pfeil UND Quadrat fassen, deshalb breiter als der
Kasten aus r3-evaluation.css Z. 494 (118 x 256, left/right 58, bottom -28).
Dessen Kopfmass 110 px und die Spitze 240 px ueber der Kartenunterkante
sind uebernommen, nur der Zeichenbereich ist groesser. Ohne diese Regel
bleibt r3 wirksam und der neue Pfeil wird auf 118 px gestaucht.
Weichzeichner und Deckkraft entfallen: im Mockup hat der Pfeil eine harte
Kante mit hellem Saum. */
.lvev-e8 .lvev-e8-card .lvev-e8-arrow {
width: 320px;
height: 275px;
bottom: -28px;
opacity: 1;
filter: none;
}
.lvev-e8 .lvev-e8-card .lvev-e8-arrow--l { left: 40px; right: auto; }
.lvev-e8 .lvev-e8-card .lvev-e8-arrow--r { right: 40px; left: auto; }
}
/* ===========================================================================
Knoepfe in e8, 11.08.2026 (Abnahme "Knoepfe alle Seiten")
1. Falsches Blau-Rezept. Der Primaerknopf lief diagonal mit #6ecaff nach
#0080ca. Das Mockup zeigt hier denselben senkrechten, helleren Verlauf
wie ueberall sonst auf der Seite (Kopf, e1, home, rules):
rgb(140,213,255) nach rgb(18,169,255). Zwei Blau-Rezepte im selben
Projekt, und dieses ist das falsche.
2. Zu transparente Ghost-Fuellung. rgba(0,0,0,0.1) plus ein 0,14er Verlauf
reichen nicht, um den 16 bis 19 px breiten Weichzeichner-Glow zu halten:
der flutet dadurch den ganzen Knopf, statt nur den Rand zu saeumen.
Gemessen oben (11,47,68) gegen Soll (3,18,27), unten (37,127,178) gegen
(17,76,108). Ab etwa 0,85 Deckkraft bleibt der Glow ein Saum, deshalb
dasselbe rgba(6,18,24,0.9) wie beim bewaehrten Knopf in s10.
3. Weisse Schrift auf hellem Knopf. Alle uebrigen hellen Primaerknoepfe des
Projekts tragen schwarze Schrift, das Mockup hier auch. Einziger
Ausreisser im ganzen Bestand.
=========================================================================== */
@media (min-width: 1024px) {
.lvf-page .lvev-e8 .lvev-e8-btn--primary {
/* 11.08.2026 auf die Saum-Fassung desselben Rezepts umgestellt, siehe
--lvf-grad-blue-btn in shell.css. */
background-image: var(--lvf-grad-blue-btn);
}
.lvf-page .lvev-e8 .lvev-e8-btn--primary .lvev-e8-btn-text { color: rgb(6, 6, 6); }
.lvf-page .lvev-e8 .lvev-e8-btn--ghost {
background-color: rgba(6, 18, 24, 0.9);
background-image: none;
}
}
/* ===========================================================================
Naht e8/Fuss bei y 8891, 12.08.2026
BEFUND (live 1760, Blockmedian ueber 8 px): Sprung IST 5,70 gegen Sprung
SOLL 0,06. Er sitzt vollstaendig in den beiden Seitenrinnen; ueber die
Seitenmitte springt nichts.
Querschnitt links, 8 px ueber und unter der Naht, Blaukanal:
x e8 oben Fuss unten SOLL
0 124 100 114
64 95 68 69
112 60 1 43
160 29 0 25
224 1 0 14
304 3 0 7
Zwei getrennte Fehler:
1. e8s Rinne ist am Kern 10 bis 12 Stufen ZU HELL und faellt danach zu
schnell ab: bei x 112 stehen 60 statt 43, bei x 224 ist sie mit 1 schon
tot, wo der Entwurf noch 14 zeigt. Das ist dieser Datei zuzurechnen.
2. Die Fussrinne endet links bei x 112, im Entwurf laeuft sie bis x 500.
Das ist die Fusszeile, nicht e8, und bleibt hier unangetastet.
AENDERUNG: nur Punkt 1. Die Ebene `.lvev-e8-bg::before` traegt die Rinne
(r3-evaluation.css, Ellipse 260x1500 mit Mittelpunkt 1286 px UNTER der
Sektionsoberkante). Sie wird durch eine Ellipse ersetzt, deren Mittelpunkt
in der unteren Ecke der Sektion sitzt. Dadurch faellt an der Nahtzeile der
senkrechte Anteil weg und der Ellipsenabstand ist dort schlicht x/400 -
der Querschnitt laesst sich also direkt als Stoppliste hinschreiben.
Radien: waagerecht 400 px, weil der Entwurf bei x 400 auf 0 ist.
Senkrecht 1700 px, gerechnet aus der Sektionsoberkante: dort soll die Ebene
33,6 beitragen (Soll 62 abzueglich der 32,7, die die Ebene darunter liefert,
Deckung ueber screen), und 33,6 steht im Querschnitt bei x 153, also
649/0,3825 = 1697.
Stopps: Deckkraft = Soll-Blau / 254 bei fester Farbe rgb(5,160,254). Diese
Farbe trifft alle drei Kanaele: bei 0,449 ergibt sie (2,72,114) gegen Soll
(2,72,114), bei 0,098 (0,16,25) gegen Soll (2,16,25). Die Prozentwerte
liegen auf x+16, weil die Soll-Werte Mediane ueber ein 32 px breites
Fenster sind und damit zur Fenstermitte gehoeren.
Gerechnete Wirkung auf das Laengsprofil der Rinne (x 0..16, Blau):
y vorher nachher SOLL
8250 48 62 62
8346 47 63 70
8562 62 77 86
8730 87 100 102
8874 122 114 114
Also an fuenf von fuenf Stellen naeher am Entwurf.
Selektor 0-3-0 (Klasse doppelt), weil r3-evaluation.css dieselbe Regel mit
0-2-0 setzt und spaeter laedt. `mix-blend-mode: screen` bleibt dort stehen
und ist in der Rechnung oben enthalten.
=========================================================================== */
@media (min-width: 1024px) {
.lvev-e8 .lvev-e8-bg.lvev-e8-bg::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
mix-blend-mode: screen;
background:
radial-gradient(400px 1200px at 0% 100%,
rgba(5, 160, 254, 0.474) 0%, /* x 0 Soll 121 (fortgeschrieben) */
rgba(5, 160, 254, 0.449) 4%, /* x 16 Soll 114 */
rgba(5, 160, 254, 0.354) 12%, /* x 48 Soll 90 */
rgba(5, 160, 254, 0.272) 20%, /* x 80 Soll 69 */
rgba(5, 160, 254, 0.201) 28%, /* x 112 Soll 51 */
rgba(5, 160, 254, 0.146) 36%, /* x 144 Soll 37 */
rgba(5, 160, 254, 0.098) 44%, /* x 176 Soll 25 */
rgba(5, 160, 254, 0.059) 56%, /* x 224 Soll 15 */
rgba(5, 160, 254, 0.039) 68%, /* x 272 Soll 10 */
rgba(5, 160, 254, 0.028) 76%, /* x 304 Soll 7 */
rgba(5, 160, 254, 0.024) 84%, /* x 336 Soll 6 */
rgba(5, 160, 254, 0.016) 92%, /* x 368 Soll 4 */
rgba(5, 160, 254, 0) 100%),
radial-gradient(400px 1200px at 100% 100%,
rgba(5, 160, 254, 0.504) 0%, /* rechte Rinne, Kern 7 Stufen heller */
rgba(5, 160, 254, 0.476) 4%, /* Soll 121 */
rgba(5, 160, 254, 0.374) 12%, /* Soll 95 */
rgba(5, 160, 254, 0.280) 20%, /* Soll 71 */
rgba(5, 160, 254, 0.205) 28%, /* Soll 52 */
rgba(5, 160, 254, 0.146) 36%, /* Soll 37 */
rgba(5, 160, 254, 0.098) 44%, /* Soll 25 */
rgba(5, 160, 254, 0.059) 56%, /* Soll 15 */
rgba(5, 160, 254, 0.039) 68%, /* Soll 10 */
rgba(5, 160, 254, 0.028) 76%, /* Soll 7 */
rgba(5, 160, 254, 0.024) 84%, /* Soll 6 */
rgba(5, 160, 254, 0.016) 92%, /* Soll 4 */
rgba(5, 160, 254, 0) 100%);
}
}
/* ===========================================================================
Rundgang 13.08.2026, Punkt 1 (Geometrie): Ghost-Knopf "View the Rules" zu
schmal, nur Desktop (>=1024px, kein Mobil-Entwurf fuer diese Seite vorhanden,
siehe ARBEITSGRUNDLAGE.md Abschnitt 4).
Figma-Knoten 227:1695 ("Frame 64", Sektion e8-cta): Knopf box(919,8710,168,46),
einziges Kind der Text "View the Rules" box(951,8720,104,25) - Innenabstand
symmetrisch 32 px links wie rechts ((919->951)=32, (1087-1055)=32).
Gemessen (dieses Skript, hasTouch:true, 1760 px breit): Knopf-Box war 139,4 px
statt 168, weil `padding: 5px 17px` nur 17 statt 32 px Seitenabstand gibt.
Der Primaerknopf daneben stimmt bereits (Figma 236, gemessen 239,4).
Einzige Aenderung: Seitenabstand auf 32px, Vertikalabstand bleibt (die Hoehe
haengt an --e8-btn-h/align-items:center, nicht an padding-top/bottom). */
@media (min-width: 1024px) {
.lvev-e8 .lvev-e8-btn--ghost {
padding-inline: 32px;
}
}
/* ===========================================================================
Rundgang 13.08.2026, Punkt 2 (Server besser): Seitenglow-Basisebene ohne
::before, nur Desktop. Betrifft NICHT die Rinne (.lvev-e8-bg::before weiter
oben, "Naht e8/Fuss") - die ist separat bereits gefixt und bleibt unveraendert.
BEFUND. Unsere Basisebene (oben, Zeile 103-113) baut den Seitenglow als
zwei feststehende Ellipsen bei 42/58/64 % Groesse. server-stand-20260810/
lvlup-fixes/r3-evaluation.css Zeile 371-383 (Befund R3-evaluation-09) und
r3b-evaluation.css Zeile 253-257 (Befund R3B-evaluation-07) ersetzen das
durch dieselbe Saeulentechnik wie e6/e7: zwei schmale radiale Verlaeufe
(300 px breit), weit oberhalb der Sektion verankert (-2164 px), die erst im
unteren Kartenbereich ausdaempfen. r3b macht danach nur die rechte Saeule
hoeher (2600 -> 3100 px), analog zur rechten Saeule in e7 (2600 -> 3400,
selbes Prinzip, siehe Kommentar in e6-beyond/fragment.css).
SPEZIFITAET. Beide Fremdregeln stehen auf ".lvev-e8 .lvev-e8-bg" (0-2-0),
genau wie unsere eigene Basisregel oben - ein Gleichstand, den nur die
Ladereihenfolge entscheidet (r3/r3b laden nach dem Fragment und gewinnen).
Ohne die Overrides-Ebene faellt das auf unsere Ellipsen-Technik zurueck,
die "keine Anhebung ueber .lvf-page" hat und deshalb nach dem Deploy
sichtbar schlechter waere als der heutige Server-Stand. Selektor deshalb
mit verdoppelter Klasse auf 0-3-0 gehoben, wie schon bei
".lvev-e8-bg.lvev-e8-bg::before" weiter oben in dieser Datei. */
@media (min-width: 1024px) {
.lvev-e8 .lvev-e8-bg.lvev-e8-bg {
background:
radial-gradient(300px 2600px at 0px -2164px, rgba(254,254,255,1) 0%,rgba(250,253,255,1) 8%,rgba(216,240,254,1) 15%,rgba(161,220,253,1) 23%,rgba(128,204,244,1) 31%,rgba(80,178,226,1) 38%,rgba(50,150,201,.97) 46%,rgba(38,128,178,.94) 54%,rgba(26,100,142,.88) 62%,rgba(18,78,112,.78) 69%,rgba(10,62,92,.62) 77%,rgba(5,46,70,.36) 86%,rgba(2,30,48,0) 100%),
radial-gradient(300px 3100px at 100% -2164px, rgba(254,254,255,1) 0%,rgba(250,253,255,1) 8%,rgba(216,240,254,1) 15%,rgba(161,220,253,1) 23%,rgba(128,204,244,1) 31%,rgba(80,178,226,1) 38%,rgba(50,150,201,.97) 46%,rgba(38,128,178,.94) 54%,rgba(26,100,142,.88) 62%,rgba(18,78,112,.78) 69%,rgba(10,62,92,.62) 77%,rgba(5,46,70,.36) 86%,rgba(2,30,48,0) 100%);
}
}