/* Lvlup Futures - Shell: Fonts, Tokens, Basis. Gilt nur innerhalb von .lvf-page */
@font-face {
font-family: 'Clash Grotesk Variable';
/* Kaan 06.08.: exakt die in Elementor hochgeladene Kundendatei verwenden */
src: url('https://lvlup2.tivaosagencytempdomains.de/wp-content/uploads/2026/07/ClashGrotesk-Variable.ttf') format('truetype');
font-weight: 200 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('https://lvlup2.tivaosagencytempdomains.de/wp-content/uploads/fonts/PlusJakartaSans-Variable.woff2') format('woff2');
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('https://lvlup2.tivaosagencytempdomains.de/wp-content/uploads/fonts/Roboto-Variable.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
.lvf-page {
/* Seitengrund, korrigiert 11.08.2026: reines Schwarz statt #05060f.
Alle vier direkt lesbaren Figma-Rahmen (home 156:182, evaluation 227:777,
rules 248:482, elite 263:465) tragen als oberste deckende Fuellung (0,0,0).
Bildmessung an referenz-neu/soll bestaetigt das auf allen acht Seiten:
haeufigster dunkler Wert (0,0,0), 14 bis 25 Prozent aller Pixel liegen in
jedem Kanal bei hoechstens 2.
#05060f steht in Figma zwar drin, aber nicht als Seitengrund: es ist die
Grundschicht des Deko-Stapels (Rectangle 21, Deckkraft 0,5) und die
Fuellung der eingebetteten Dashboard-Rahmen. Der alte Wert kam aus der
falschen Ebene. Bauteilgruende (.lvf-s02-card, .lvf-s07-vcard,
.lvf-s02-video) behalten #05060f absichtlich. */
--lvf-bg: #000000;
--lvf-white: #ffffff;
--lvf-blue: #00a2ff;
--lvf-blue-light: #8cd5ff;
--lvf-grad-blue: linear-gradient(180deg, #8cd5ff 0%, #12a9ff 100%);
/* Knopfvariante von --lvf-grad-blue, 11.08.2026.
In Figma liegt auf den blauen Knoepfen ein INNER_SHADOW #5bbce8 im
Blendmodus COLOR_DODGE, der aufhellt. In CSS lag er als gewoehnlicher
inset-Schatten darueber und hat abgedunkelt (Chip gemessen (114,199,242)
statt (163,235,255)). Dieser Verlauf hat den Blendmodus ausgerechnet und
ENTHAELT den Saum bereits; wo er anliegt, entfaellt der inset-Schatten.
Bewusst ein eigenes Token: --lvf-grad-blue tragen 214 Elemente, nur 26
davon den Saum. Wer die geteilte Variable umstellt, gibt 20 mal "OR",
16 mal "EOD" und allen Zahlenglyphen einen Lichtsaum, den der Entwurf
dort nicht hat. */
--lvf-grad-blue-btn: linear-gradient(180deg,
#b5ebff 0%, #ace8ff 3%, #9fe3ff 7%, #8fdcff 13%,
#7ad3ff 22%, #63c8ff 35%, #4fc0ff 50%, #3ebaff 65%,
#30bbff 78%, #25c2ff 88%, #1dcaff 95%, #17d1ff 100%);
--lvf-grad-btn: linear-gradient(180deg, #6ecaff 0%, #0080ca 100%);
--lvf-yellow: #ffc700;
--lvf-grad-gold: linear-gradient(180deg, #feedb6 0%, #ff9200 100%);
--lvf-line: rgba(255, 255, 255, 0.09);
--lvf-text-dim: rgba(255, 255, 255, 0.4);
--lvf-text-mid: rgba(255, 255, 255, 0.6);
--lvf-font-display: 'Clash Grotesk Variable', 'Segoe UI', sans-serif;
--lvf-font-alt: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
--lvf-font-mono-alt: 'Roboto', 'Segoe UI', sans-serif;
background: var(--lvf-bg);
color: var(--lvf-white);
font-family: var(--lvf-font-display);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
/* ==========================================================================
GRUND-RESET UND DIE ABWEHR GEGEN THEME UND ELEMENTOR
Neu geordnet am 11.08.2026. Vorher lagen Farbe, Füllung, Radius und
Textfüllung pauschal auf 0-2-1 und haben damit nicht nur das Theme,
sondern auch die eigenen Fragmentregeln (0-1-0 bis 0-2-0) erschlagen.
Folge: keine Lichtsäume an Buttons, reinweiße Menüpunkte, ein eckiger
Kopier-Knopf und flächig weiße Verlaufs-Überschriften.
Grundlage der neuen Spezifitäten ist die tatsächliche Ladereihenfolge im
, am 11.08.2026 an der Live-Seite nachgesehen:
hello-elementor/reset.css -> elementor/frontend.min.css ->
elementor/post-*.css -> ekit -> lvlup-theme.css -> lvlup-home.css ->
lvlup-fixes/*.css
Unsere Dateien kommen also NACH Theme und Elementor. Bei gleicher
Spezifität gewinnen damit wir. Jede Stufe darüber hinaus trifft nur noch
die eigenen Fragmente. Der Satz "das Theme wird später geladen" in
ANLEITUNG-FIGMA-ZU-WORDPRESS.md gilt für diesen Stand nicht mehr; Beleg:
der Kopier-Knopf misst live 23 x 23 px, mit dem Theme-Innenabstand
.5rem 1rem wäre er deutlich größer.
Die Gegner, wörtlich aus hello-elementor/assets/css/reset.css 3.4.9:
a { background-color:transparent; color:#c36; text-decoration:none } 0-0-1
a:active, a:hover { color:#336 } 0-1-1
h1..h6 { color:inherit; font-family:inherit; font-weight:500;
line-height:1.2; margin-block-start:.5rem; margin-block-end:1rem } 0-0-1
button,input,optgroup,select,textarea { font-family:inherit;
font-size:1rem; line-height:1.5; margin:0 } 0-0-1
[type=button],[type=submit],button { background-color:transparent;
border:1px solid #c36; border-radius:3px; color:#c36;
display:inline-block; font-size:1rem; font-weight:400;
padding:.5rem 1rem; text-align:center; transition:all .3s;
white-space:nowrap } 0-1-0
[type=button]:hover, [type=button]:focus, [type=submit]:hover, ...
{ background-color:#c36; color:#fff; text-decoration:none } 0-2-0
input[type=text],...,select,textarea { border:1px solid #666;
border-radius:3px; padding:.5rem 1rem; width:100% } 0-1-1
und aus elementor/assets/css/frontend.min.css 4.2.1:
.elementor a { box-shadow:none; text-decoration:none } 0-1-1
Merksatz für die Fragmente: eine Fragmentregel mit EINER Klasse (0-1-0)
gewinnt jetzt gegen Theme und Grund-Reset. Wer gegen Elementors
".elementor a" (Schatten an Links) oder gegen die Füllung von Buttons
ankommen muss, schreibt ZWEI Klassen, in der Regel als ".lvf-page .lvf-xx".
========================================================================== */
.lvf-page *, .lvf-page *::before, .lvf-page *::after { box-sizing: border-box; margin: 0; padding: 0; }
.lvf-page img { max-width: 100%; height: auto; display: block; }
.lvf-page ul, .lvf-page ol { list-style: none; }
/* Links, Ruhezustand. Gegen "a { color:#c36 }" (0-0-1) reicht 0-0-1, weil wir
später geladen werden; :where() nimmt dem .lvf-page-Anker seine Klasse.
Vorher stand hier ".lvf-page a" mit 0-1-1 - genau das hat die sieben
Menüpunkte reinweiß statt gedämpft gemacht und dem Primärknopf in s10
weiße statt schwarzer Schrift gegeben. */
:where(.lvf-page) a { color: inherit; text-decoration: none; }
/* Links, Überfahren und Klick. Hier färbt das Theme mit 0-1-1 (#336), also
braucht die Abwehr ebenfalls 0-1-1. Diese eine Regel schlägt Fragmentregeln
mit einer Klasse - aber nur im Hover-Zustand, und dort sah die Seite bisher
ohnehin so aus (alle Links geerbt weiß). Wer eine eigene Hover-Farbe will,
schreibt sie mit zwei Klassen, z. B. ".lvf-page .lvf-s01-link:hover". */
:where(.lvf-page) a:is(:hover, :active) { color: inherit; }
/* Buttons, Teil 1: Radius. Das Theme setzt border-radius nur im Ruhezustand
([type=button], 0-1-0). :is() zählt so viel wie sein stärkstes Argument,
die Regel liegt also exakt auf 0-1-0 und lässt jede Fragmentregel mit einer
Klasse gewinnen. Das ist der harte Kasten um den Kopier-Knopf: dessen
".lvf-s01-copy { border-radius: 6.24px }" hatte 0-1-0 und verlor gegen die
früheren 0-2-1. Radius bewegt kein Layout, die Sektionshöhen bleiben. */
:where(.lvf-page) :is(button, [type="button"], [type="submit"], [type="reset"]) {
border-radius: 0;
}
/* Buttons, Teil 2: Füllung und Schriftfarbe. Die färbt das Theme auch bei
:hover und :focus mit 0-2-0. Eine Regel OHNE Pseudoklasse und mit derselben
Spezifität genügt trotzdem, weil bei Gleichstand die später geladene
Datei gewinnt; so bleibt der Knopf auch beim Überfahren unverändert,
statt vom Theme pink gefüllt zu werden. Fragmentregeln brauchen hier
zwei Klassen (".lvf-page .lvf-s01-copy"). */
.lvf-page :is(button, [type="button"], [type="submit"], [type="reset"]) {
background: none; color: inherit;
}
/* Buttons, Teil 3: alles Übrige bleibt bewusst auf 0-2-1. Schriftgröße,
Schriftschnitt und Rahmenbreite verändern die Textmasse und damit die
Sektionshöhen; die sind gerade mühsam eingestellt worden und dürfen sich
durch diese Umstellung nicht bewegen. Hier also nichts lockern, sondern bei
Bedarf einzeln und mit Messung. */
.lvf-page.lvf-page button {
font-family: inherit; font-size: inherit; font-weight: inherit;
letter-spacing: inherit; border: 0;
-webkit-appearance: none; appearance: none;
cursor: pointer;
}
/* Formularfelder. Hier ist das Theme mit "input[type=text] usw." bei 0-1-1,
dagegen bleibt die doppelte Klasse nötig. Unverändert übernommen. */
.lvf-page.lvf-page input,
.lvf-page.lvf-page select,
.lvf-page.lvf-page textarea {
font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit;
background: none; border: 0; border-radius: 0; letter-spacing: inherit;
-webkit-appearance: none; appearance: none;
}
/* Überschriften. Das Theme setzt "h1..h6 { color:inherit; font-family:inherit }"
mit 0-0-1, mehr braucht die Abwehr nicht. Die früheren 0-2-1 haben die
Verlaufsfüllung aller Überschriften erschlagen: die Fragmente setzen
"color: transparent" zusammen mit "background-clip: text", und ein
erzwungenes "color: inherit" malt den Text wieder flächig weiß.
Betroffen waren home s02/s03/s04 und evaluation e3/e4/e5/e7/e8. */
:where(.lvf-page) :is(h1, h2, h3, h4, h5, h6) {
font-family: inherit; color: inherit;
}
.lvf-container { max-width: 1280px; margin-inline: auto; padding-inline: 20px; }
/* Sprungziele der Navigation. Ohne das landet der Nutzer unter der fixierten
Kopfleiste (Banner + Nav, zusammen 130px auf Desktop) und die Ueberschrift der
Zielsektion ist verdeckt. Gemessen am 03.08.2026 auf Seite 7895. */
.lvf-page #evaluations,
.lvf-page #how-it-works,
.lvf-page #calculator,
.lvf-page #platforms,
.lvf-page #community,
.lvf-page #elite,
.lvf-page #faq { scroll-margin-top: 150px; }
@media (max-width: 767px) {
.lvf-page #evaluations,
.lvf-page #how-it-works,
.lvf-page #calculator,
.lvf-page #platforms,
.lvf-page #community,
.lvf-page #elite,
.lvf-page #faq { scroll-margin-top: 120px; }
}
/* Zentrale Höhe für alle Sprungziele. Im Kopf selbst ist dieselbe Variable
enger gesetzt. Hier wird sie zusätzlich vererbt, damit auch spätere
Geschwistersektionen sie für ihren Scrollabstand verwenden können. */
.lvf-page { --lvf-s01-h: 130px; }
@media (max-width: 767.98px) {
.lvf-page { --lvf-s01-h: calc(min(1px, 100vw / 440) * 130); }
}
/* Die bekannten IDs bleiben im Selektor, damit diese spätere Regel ihre
bestehende ID-Spezifität ohne !important überstimmt. :target deckt alle
weiteren Ankerziele zentral ab. */
.lvf-page #evaluations,
.lvf-page #how-it-works,
.lvf-page #calculator,
.lvf-page #platforms,
.lvf-page #community,
.lvf-page #elite,
.lvf-page #faq,
.lvf-page :target { scroll-margin-top: calc(var(--lvf-s01-h) + 16px); }
.lvf-page .lvf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Trefferflaechen auf Touch-Geraeten. Padding vergroessert die Flaeche, der negative
Margin haelt das Layout exakt an Ort und Stelle. Nur fuer Textlinks ohne eigenen
Hintergrund, dort ist der Effekt unsichtbar. Elemente mit Hintergrund oder Rahmen
(Preis-Buttons, Konto-Umschalter, Kopier-Knopf) bleiben absichtlich so klein wie im
Figma-Entwurf, sonst waere der Design-Vergleich verfaelscht; sie sind im Bericht als
offener Punkt vermerkt. */
@media (pointer: coarse) {
.lvf-page .lvf-s04-rules,
.lvf-page .lvf-s09-link,
.lvf-page .lvf-s01-logo,
.lvf-page .lvf-s11-link,
.lvf-page .lvf-s11-legal a {
padding-block: 12px;
margin-block: -12px;
}
}
@media (prefers-reduced-motion: reduce) {
.lvf-page *, .lvf-page *::before, .lvf-page *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
/* == site-continuity.css == */
/* Eine gemeinsame Leinwand für die vier Elementor-Seiten.
Die Lichtfelder werden am Seitenwrapper statt an einzelnen Sektionen gemalt,
damit weder overflow-Clipping noch getrennte Koordinatensysteme Fugen bilden. */
body.page-id-8095 .lvab-page.lvf-page,
body.page-id-8096 .lvct-page.lvf-page,
body.page-id-8104 .lvaf-page.lvf-page {
position: relative;
isolation: isolate;
background-color: #02080d !important;
background-image:
linear-gradient(180deg, rgba(2, 8, 13, 0) calc(100% - 160px), #02080d 100%),
radial-gradient(110% 18% at -8% 9%, rgba(36, 183, 246, .72) 0%, rgba(8, 110, 166, .34) 38%, rgba(2, 28, 45, .10) 72%, transparent 100%),
radial-gradient(110% 20% at 108% 28%, rgba(18, 156, 225, .65) 0%, rgba(7, 91, 145, .32) 43%, transparent 100%),
radial-gradient(118% 23% at -10% 50%, rgba(33, 177, 239, .65) 0%, rgba(7, 93, 147, .30) 44%, transparent 100%),
radial-gradient(115% 22% at 109% 71%, rgba(28, 167, 233, .64) 0%, rgba(5, 81, 132, .30) 45%, transparent 100%),
radial-gradient(118% 22% at -8% 91%, rgba(28, 170, 237, .66) 0%, rgba(5, 81, 132, .30) 46%, transparent 100%),
linear-gradient(180deg, #02080d 0%, #04141f 20%, #03101a 43%, #041722 66%, #03111b 84%, #02080d 100%) !important;
background-repeat: no-repeat !important;
}
/* About und Contact enden direkt vor dem gemeinsamen Footer. Der zusätzliche
Seiten-Auslauf liegt über der Leinwand, aber unter sämtlichen Inhalten, und
führt das letzte Lichtfeld bis zur identischen Footer-Grundfarbe. */
body.page-id-8095 .lvab-page.lvf-page::after,
body.page-id-8096 .lvct-page.lvf-page::after {
content: "" !important;
position: absolute;
z-index: 0;
right: 0;
bottom: 0;
left: 0;
height: clamp(440px, 42vw, 700px);
pointer-events: none;
background: linear-gradient(180deg, transparent 0%, rgba(2, 8, 13, .24) 28%, rgba(2, 8, 13, .68) 62%, #02080d 100%);
}
body.page-id-8095 .lvab-page.lvf-page > *,
body.page-id-8096 .lvct-page.lvf-page > * {
position: relative;
z-index: 1;
}
/* About und Contact laufen vor dem Footer bereits in die gemeinsame dunkle
Grundfarbe aus. Die ungefilterten Desktop-Lichtsäulen des Footers dürfen
dort nicht direkt an der Blockkante als helles Querband beginnen. */
@media (min-width: 1200px) {
body.page-id-8095 .lvab-page.lvf-page::after,
body.page-id-8096 .lvct-page.lvf-page::after {
z-index: 2;
height: 120px;
background: linear-gradient(180deg, transparent 0%, rgba(2, 8, 13, .72) 55%, #02080d 86%, #02080d 100%);
}
body.page-id-8095 .lvf-s11,
body.page-id-8096 .lvf-s11 {
padding-top: 0 !important;
background: #02080d !important;
}
body.page-id-8095 .lvf-s11::before,
body.page-id-8096 .lvf-s11::before {
content: none !important;
display: none !important;
background: none !important;
filter: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
body.page-id-8095 .lvf-s11::after,
body.page-id-8096 .lvf-s11::after {
content: none !important;
display: none !important;
background: none !important;
filter: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
body.page-id-8095 .lvf-s11-shell,
body.page-id-8096 .lvf-s11-shell {
position: relative;
z-index: 2;
padding-top: 48px;
background: #02080d;
}
}
/* FAQ beginnt bewusst hell, geht aber ohne harte Blockkante in dieselbe
dunkle Seitenfläche über. Die langen Radien überlappen sich deutlich. */
body.page-id-8097 .lvfq-page.lvf-page {
background-color: #02080d !important;
background-image:
linear-gradient(180deg, rgba(2, 8, 13, 0) calc(100% - 160px), #02080d 100%),
linear-gradient(180deg, #02080d 0, rgba(2, 8, 13, .88) 72px, transparent 220px),
radial-gradient(115% 18% at 50% 0%, rgba(239, 250, 255, .98) 0%, rgba(151, 218, 244, .88) 36%, rgba(35, 146, 196, .52) 63%, transparent 100%),
radial-gradient(112% 24% at 108% 27%, rgba(25, 166, 232, .68) 0%, rgba(7, 91, 145, .32) 43%, transparent 100%),
radial-gradient(112% 24% at -8% 50%, rgba(34, 180, 241, .66) 0%, rgba(7, 93, 147, .31) 44%, transparent 100%),
radial-gradient(116% 26% at 108% 74%, rgba(27, 169, 235, .66) 0%, rgba(5, 81, 132, .30) 45%, transparent 100%),
radial-gradient(116% 20% at -8% 94%, rgba(27, 169, 235, .62) 0%, rgba(5, 81, 132, .28) 47%, transparent 100%),
linear-gradient(180deg, #bce7f7 0%, #488fad 7%, #0b3a53 13%, #041620 20%, #03111b 64%, #02080d 100%) !important;
background-repeat: no-repeat !important;
}
/* About: Sektionen und deren rein dekorative Außenlichter. */
body.page-id-8095 .lvab-page :is(.lvab-hero, .lvab-purpose, .lvab-lower, .lvab-found, .lvab-team, .lvab-contact) {
background-color: transparent !important;
background-image: none !important;
}
body.page-id-8095 .lvab-page :is(
.lvab-hero-bglow,
.lvab-hero-rglow,
.lvab-purpose-haze,
.lvab-purpose-glow-l,
.lvab-purpose-glow-c,
.lvab-purpose-glow-r,
.lvab-lower-glow-l,
.lvab-lower-glow-l2,
.lvab-lower-glow-r,
.lvab-lower-glow-r2,
.lvab-contact > .lvab-glow
) { display: none !important; }
body.page-id-8095 .lvab-page .lvab-contact::after { content: none !important; }
body.page-id-8095 .lvab-fussnaht-band { display: none !important; }
/* Contact: nur die vollflächigen Sektionslichter verschwinden. Karten- und
Formularglows bleiben erhalten. */
body.page-id-8096 .lvct-page :is(.lvct-hero, .lvct-connect, .lvct-formsec, .lvct-band2) {
background-color: transparent !important;
background-image: none !important;
}
body.page-id-8096 .lvct-page :is(
.lvct-hero-bg,
.lvct-connect-glow,
.lvct-formsec-glow,
.lvct-band2-glow,
.lvct-fussnaht-band
) { display: none !important; }
body.page-id-8096 .lvct-fussnaht-band { display: none !important; }
/* FAQ: die unabhängigen Vollflächen der vier Bänder werden durch die
gemeinsame FAQ-Leinwand ersetzt. */
body.page-id-8097 .lvfq-page :is(.lvfq-hero, .lvfq-cats, .lvfq-faq, .lvfq-b2, .lvfq-b3, .lvfq-b4, .lvfq-b5) {
background-color: transparent !important;
background-image: none !important;
}
body.page-id-8097 .lvfq-page :is(.lvfq-b2-glow, .lvfq-b3-glow, .lvfq-b4-glow, .lvfq-b5-bg) {
display: none !important;
}
body.page-id-8097 .lvfq-page .lvfq-faq::before { content: none !important; }
/* Die beiden ersten FAQ-Kategorien liegen auf dem hellen Anfang der
Seitenleinwand. Der ursprüngliche hellblaue Verlauf war dort kaum lesbar. */
body.page-id-8097 .lvfq-page .lvfq-hl {
background-image: linear-gradient(180deg, #0b4f70 0%, #006ca7 100%) !important;
}
/* Affiliate: Hintergrundebenen raus, Karten- und Formularbestandteile bleiben. */
body.page-id-8104 .lvaf-page :is(.lvaf-hero, .lvaf-part, .lvaf-rate, .lvaf-journey, .lvaf-retainer, .lvaf-aud, .lvaf-app, .lvaf-fq, .lvaf-cta) {
background-color: transparent !important;
background-image: none !important;
}
body.page-id-8104 .lvaf-page :is(
.lvaf-hero-bg,
.lvaf-part-bg,
.lvaf-aud-glow,
.lvaf-aud-glow2,
.lvaf-app-glow,
.lvaf-app-glow2,
.lvaf-fq-glow,
.lvaf-cta-glow
) { display: none !important; }
body.page-id-8104 .lvaf-page .lvaf-lower::before,
body.page-id-8104 .lvaf-page .lvaf-aud::after { content: none !important; }
/* Eingabehilfen müssen auch auf den dunklen Flächen ohne Raten lesbar sein. */
body :is(
.lvab-input,
.lvct-input,
.lvfq-b5-input,
.lvfq-b5-textarea,
.lvaf-input,
.lvaf-textarea,
.lvf-s11-nl-input,
.lvf-s12-input
)::placeholder {
color: rgba(255, 255, 255, .64) !important;
opacity: 1 !important;
}
body :is(.lvab-form, .lvct-panel, .lvfq-b5-form, .lvaf-app-card, .lvaf-form) :is(input, textarea)::placeholder {
color: rgba(255, 255, 255, .64) !important;
opacity: 1 !important;
}
body.page-id-8095 .lvab-select:invalid,
body.page-id-8104 .lvaf-select:invalid { color: rgba(255, 255, 255, .64) !important; }
body.page-id-8095 .lvab-value-text { color: rgba(225, 242, 252, .72) !important; }
body.page-id-8096 .lvct-formsec h2 { text-shadow: 0 2px 24px rgba(0, 0, 0, .82); }
body.page-id-8104 .lvaf-app-agree-t { color: rgba(255, 255, 255, .76) !important; }
body.page-id-8104 .lvaf-app-agree { min-height: 44px !important; }
body.page-id-8104 .lvaf-app-box { width: 22px !important; height: 22px !important; }
body.page-id-8104 .lvaf-card-p,
body.page-id-8104 .lvaf-card-p2 { font-size: max(12.5px, 0.74vw) !important; line-height: 1.42 !important; }
/* Die sichtbare FAQ-Karte ist hoeher als ihr innerer Button. Die gesamte
Zeile bleibt deshalb als echtes 44-px-Tastatur- und Touchziel bedienbar. */
body.page-id-8097 .lvfq-page :is(.lvfq-q, .lvfq-b2-q, .lvfq-b3-q, .lvfq-b4-q) {
min-height: 44px !important;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
body.page-id-8095 .lvab-crew-role { font-size: 13px !important; }
}
@media (max-width: 767px) {
body.page-id-8095 .lvab-page.lvf-page::after,
body.page-id-8096 .lvct-page.lvf-page::after {
height: 300px;
}
body.page-id-8095 .lvab-page.lvf-page,
body.page-id-8096 .lvct-page.lvf-page,
body.page-id-8104 .lvaf-page.lvf-page {
background-image:
linear-gradient(180deg, rgba(2, 8, 13, 0) calc(100% - 160px), #02080d 100%),
radial-gradient(150% 15% at -25% 8%, rgba(34, 179, 241, .62), transparent 75%),
radial-gradient(150% 18% at 125% 31%, rgba(23, 159, 226, .58), transparent 76%),
radial-gradient(150% 19% at -25% 55%, rgba(31, 172, 237, .60), transparent 76%),
radial-gradient(150% 20% at 125% 79%, rgba(26, 164, 231, .58), transparent 77%),
linear-gradient(180deg, #02080d 0%, #041722 25%, #03111b 52%, #041722 77%, #02080d 100%) !important;
}
body.page-id-8097 .lvfq-page.lvf-page {
background-image:
linear-gradient(180deg, rgba(2, 8, 13, 0) calc(100% - 160px), #02080d 100%),
linear-gradient(180deg, #02080d 0, rgba(2, 8, 13, .88) 72px, transparent 200px),
radial-gradient(155% 14% at 50% 0%, rgba(239, 250, 255, .98), rgba(116, 198, 230, .78) 48%, transparent 100%),
radial-gradient(150% 20% at 125% 32%, rgba(24, 163, 229, .60), transparent 76%),
radial-gradient(150% 22% at -25% 58%, rgba(31, 174, 238, .60), transparent 77%),
radial-gradient(150% 20% at 125% 86%, rgba(25, 162, 230, .58), transparent 77%),
linear-gradient(180deg, #bce7f7 0%, #4f97b4 6%, #0b3d57 12%, #041722 20%, #03111b 100%) !important;
}
}
/* Der externe Support-Launcher darf weder das mobile Menü noch ein gerade
bedientes Formular überdecken. Nach dem Schließen ist er sofort wieder da. */
body.lvf-menu-open .intercom-lightweight-app,
body:has(form:focus-within) .intercom-lightweight-app {
opacity: 0 !important;
pointer-events: none !important;
}
/* == forms.css == */
/* Gemeinsame Zustände für alle site-weiten Formulare. */
.lvf-form-hp {
position: absolute !important;
left: -10000px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
.lvf-form-status,
.lvf-s11-nl-status,
.lvfq-search-status {
width: 100%;
margin: 12px 0 0;
color: rgba(255, 255, 255, .78);
font-family: var(--lvf-font-display, inherit);
font-size: 14px;
font-weight: 500;
line-height: 1.45;
text-align: center;
}
.lvf-form-status:empty,
.lvf-s11-nl-status:empty,
.lvfq-search-status:empty { display: none; }
.lvf-form-status.is-success,
.lvf-s11-nl-status.is-success { color: #8fe4b1; }
.lvf-form-status.is-error,
.lvf-s11-nl-status.is-error { color: #ffaca9; }
.lvf-form-status.is-loading,
.lvf-s11-nl-status.is-loading { color: #9cddff; }
.lvf-form-privacy {
position: relative;
z-index: 2;
width: 100%;
max-width: 760px;
margin: 10px auto 0;
color: rgba(255, 255, 255, .68);
font: 400 12px/1.5 var(--lvf-font-display, system-ui, sans-serif);
text-align: center;
}
.lvf-form-privacy a {
color: rgba(155, 220, 255, .94);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.lvf-form-privacy a:focus-visible {
outline: 2px solid #8bd8ff;
outline-offset: 3px;
}
/* Der Hinweis sitzt im hellen unteren Bereich der Newsletterkarte. */
.lvf-s11-card .lvf-s11-nl-form + .lvf-form-privacy {
color: rgba(3, 30, 45, .84);
}
.lvf-s11-card .lvf-s11-nl-form + .lvf-form-privacy a {
color: #005783;
}
form.is-submitting button[type="submit"] {
cursor: wait;
opacity: .72;
}
form.is-submitting button[type="submit"]::before {
content: "";
flex: 0 0 auto;
width: 14px;
height: 14px;
border: 2px solid rgba(255, 255, 255, .38);
border-top-color: #fff;
border-radius: 50%;
animation: lvf-form-spin .75s linear infinite;
}
.lvf-s12-form .lvf-form-status {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 2;
margin: 0;
}
.lvfq-search-status {
position: relative;
z-index: 2;
max-width: 900px;
margin: 14px auto 0;
padding: 10px 18px;
color: #081825;
background: rgba(255, 255, 255, .5);
border-radius: 10px;
}
.lvf-toast {
position: fixed;
right: max(18px, env(safe-area-inset-right));
bottom: max(18px, env(safe-area-inset-bottom));
z-index: 1200;
width: min(420px, calc(100vw - 36px));
padding: 15px 18px;
border: 1px solid rgba(95, 200, 255, .4);
border-radius: 12px;
color: #fff;
background: rgba(3, 15, 24, .96);
box-shadow: 0 18px 50px rgba(0, 0, 0, .4);
font: 500 14px/1.45 var(--lvf-font-display, system-ui, sans-serif);
opacity: 0;
pointer-events: none;
transform: translateY(12px);
transition: opacity .2s ease, transform .2s ease;
}
.lvf-toast.is-visible { opacity: 1; transform: none; }
.lvf-toast.is-success { border-color: rgba(81, 220, 139, .62); }
.lvf-toast.is-error { border-color: rgba(255, 104, 98, .68); }
.lvf-action-ready { cursor: pointer; }
.lvf-action-disabled {
cursor: not-allowed !important;
opacity: .58;
}
.lvev-e2-availability-note,
.lvev-e3-offer-status {
margin: 12px 0 0;
color: rgba(255, 255, 255, .72);
font-family: var(--lvf-font-display, inherit);
font-size: 13px;
line-height: 1.45;
text-align: center;
}
@keyframes lvf-form-spin { to { transform: rotate(360deg); } }
@media (max-width: 767px) {
.lvf-form-status,
.lvf-s11-nl-status,
.lvfq-search-status { font-size: 13px; }
.lvf-s12-form .lvf-form-status { position: relative; top: auto; margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
form.is-submitting button[type="submit"]::before { animation-duration: 1.5s; }
.lvf-toast { transition: none; }
}
/* == s12 (theme) == */
/* == s12 Popups: Landing-Popup + Trading-Conditions-Popup == */
.lvf-s12 {
--lvf-s12-radius: 32px;
--lvf-s12-pad-x: 103px;
--lvf-s12-pad-t: 70px;
--lvf-s12-pad-b: 17.7px;
--lvf-s12-gap-1: 39px;
--lvf-s12-gap-2: 34px;
--lvf-s12-tile: 75px;
--lvf-s12-close: 79px;
--lvf-s12-card-pad-x: 32px;
--lvf-s12-card-pad-y: 24px;
--lvf-s12-card-gap: 24px;
--lvf-s12-edge: linear-gradient(90deg, rgba(0, 162, 255, 0) 0%, #00a2ff 50%, rgba(0, 162, 255, 0) 100%);
position: relative;
display: block;
}
/* ---------- Overlay ---------- */
.lvf-s12-overlay {
position: fixed;
inset: 0;
z-index: 950;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 56px 40px;
background: rgba(0, 0, 0, 0.75);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
overflow-y: auto;
overscroll-behavior: contain;
opacity: 0;
transition: opacity 0.22s ease;
}
.lvf-s12-overlay.is-open { opacity: 1; }
.lvf-s12-overlay:not(.is-open) { pointer-events: none; }
.lvf-s12-overlay[hidden] { display: none; }
.lvf-s12-overlay--conditions { z-index: 960; padding: 40px 20px; }
.lvf-s12-overlay--info { z-index: 970; align-items: center; padding: 32px 20px; }
/* ---------- Landing Popup: Rahmen ---------- */
.lvf-s12-landing-wrap {
position: relative;
width: 100%;
max-width: 880px;
margin: auto;
outline: none;
transform: translateY(14px) scale(0.985);
transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.lvf-s12-overlay.is-open .lvf-s12-landing-wrap { transform: none; }
.lvf-s12-landing {
position: relative;
overflow: hidden;
border-radius: var(--lvf-s12-radius);
padding: var(--lvf-s12-pad-t) var(--lvf-s12-pad-x) var(--lvf-s12-pad-b);
background:
linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02));
-webkit-backdrop-filter: blur(70px);
backdrop-filter: blur(70px);
box-shadow: 6.44px 25.77px 25.77px rgba(0, 0, 0, 0.25);
text-align: center;
}
/* Star-Vektoren des Designs als weiche Glows angenaehert */
.lvf-s12-landing-glow {
position: absolute;
inset: -20%;
pointer-events: none;
background:
radial-gradient(46% 58% at 128% 6%, rgba(162, 221, 255, 0.34) 0%, rgba(0, 162, 255, 0.24) 42%, rgba(0, 34, 53, 0) 74%),
radial-gradient(50% 62% at -14% 52%, rgba(167, 223, 255, 0.26) 0%, rgba(0, 162, 255, 0.2) 44%, rgba(4, 48, 74, 0) 76%);
filter: blur(46px);
}
/* ---------- Landing Popup: Inhalt ---------- */
.lvf-s12-landing-body,
.lvf-s12-landing-copy {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.lvf-s12-landing-body { gap: var(--lvf-s12-gap-1); }
.lvf-s12-landing-copy { gap: var(--lvf-s12-gap-2); width: 100%; }
.lvf-s12-discord {
display: flex;
align-items: center;
justify-content: center;
width: var(--lvf-s12-tile);
height: var(--lvf-s12-tile);
border-radius: 17.58px;
background: var(--lvf-grad-blue);
box-shadow: inset 0 1px 17px #5bbce8;
transition: filter 0.18s ease, transform 0.18s ease;
}
.lvf-s12-discord:hover,
.lvf-s12-discord:focus-visible { filter: brightness(1.1); transform: translateY(-1px); }
.lvf-s12-discord-icon { width: 42px; height: auto; fill: #000000; }
.lvf-s12-landing-title {
font-family: var(--lvf-font-display);
font-size: clamp(30px, 5.32vw, 54.4818px);
font-weight: 500;
line-height: 0.93;
letter-spacing: 0.01em;
margin-block: -0.115em;
background: linear-gradient(141deg, rgba(255, 255, 255, 0.7) 0%, #ffffff 50.5%, rgba(255, 255, 255, 0.7) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lvf-s12-landing-sub,
.lvf-s12-landing-note {
font-family: var(--lvf-font-display);
font-size: clamp(15px, 1.824vw, 18.6795px);
line-height: 1.49897;
letter-spacing: 0.02em;
margin-block: -0.39949em;
}
.lvf-s12-landing-sub {
max-width: 530px;
font-weight: 338;
color: var(--lvf-white);
}
.lvf-s12-landing-note {
font-weight: 523;
color: var(--lvf-text-mid);
}
.lvf-s12-landing-fine {
position: relative;
font-family: var(--lvf-font-display);
font-size: 9px;
font-weight: 200;
line-height: 3.11111;
letter-spacing: 0.06em;
color: var(--lvf-text-dim);
margin-top: calc(47px - 1.20556em);
margin-bottom: -1.20556em;
}
/* ---------- Landing Popup: Formular ---------- */
.lvf-s12-form {
position: relative;
width: 100%;
max-width: 662px;
height: 53px;
}
.lvf-s12-input-wrap {
position: absolute;
inset: 0 95px 0 0;
display: block;
border-radius: 11.53px;
}
.lvf-s12-input-wrap::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: var(--lvf-s12-edge);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.lvf-s12-input {
width: 100%;
height: 100%;
border: 0;
border-radius: 11.53px;
background: rgba(0, 0, 0, 0.77);
-webkit-backdrop-filter: blur(63px);
backdrop-filter: blur(63px);
padding: 0 92px 0 26px;
font-family: var(--lvf-font-display);
font-size: 14.85px;
font-weight: 400;
letter-spacing: 0.03em;
color: var(--lvf-white);
text-align: left;
outline: none;
}
.lvf-s12-input::placeholder { color: rgba(255, 255, 255, 0.5); opacity: 1; }
.lvf-s12-input:focus-visible { box-shadow: 0 0 0 2px rgba(0, 162, 255, 0.55); }
.lvf-s12-submit {
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
gap: 10px;
width: 173px;
height: 53px;
padding: 6px;
border-radius: 11.53px;
background: var(--lvf-grad-blue);
box-shadow: inset 0 1px 20px #5bbce8;
transition: filter 0.18s ease;
}
.lvf-s12-submit::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: var(--lvf-s12-edge);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.lvf-s12-submit:hover,
.lvf-s12-submit:focus-visible { filter: brightness(1.08); }
.lvf-s12-submit-icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 41px;
width: 41px;
height: 41px;
border-radius: 6.92px;
background: #060606;
color: var(--lvf-white);
}
.lvf-s12-submit-icon svg { width: 20px; height: 20px; }
.lvf-s12-submit-label {
flex: 1;
font-family: var(--lvf-font-display);
font-size: 19.185px;
font-weight: 500;
line-height: 28.78px;
color: var(--lvf-white);
text-align: center;
white-space: nowrap;
}
/* ---------- Close-Button (beide Popups) ---------- */
.lvf-s12-close {
display: flex;
align-items: center;
justify-content: center;
width: var(--lvf-s12-close);
height: var(--lvf-s12-close);
border-radius: 36.87px;
background:
linear-gradient(6deg, rgba(55, 93, 251, 0) 34.6%, rgba(55, 93, 251, 0.29) 100%),
rgba(64, 188, 254, 0.01);
border: 1px solid rgba(0, 90, 141, 0.55);
box-shadow:
15.8px 24.23px 34.97px rgba(0, 0, 0, 0.1),
0 7px 16px rgba(0, 0, 0, 0.1),
0 30px 30px rgba(0, 0, 0, 0.09),
0 67px 40px rgba(0, 0, 0, 0.05);
-webkit-backdrop-filter: blur(80px);
backdrop-filter: blur(80px);
color: var(--lvf-white);
transition: background 0.18s ease, transform 0.18s ease;
}
.lvf-s12-close:hover,
.lvf-s12-close:focus-visible {
background:
linear-gradient(6deg, rgba(55, 93, 251, 0) 30%, rgba(55, 93, 251, 0.45) 100%),
rgba(64, 188, 254, 0.06);
transform: scale(1.04);
}
.lvf-s12-close-icon { width: 32px; height: 32px; }
.lvf-s12-close--landing {
position: absolute;
top: -23px;
right: -26px;
z-index: 2;
}
/* ---------- Trading-Conditions-Popup ---------- */
.lvf-s12-conditions {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
max-width: 1240px;
margin: auto;
outline: none;
transform: translateY(14px);
transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.lvf-s12-overlay.is-open .lvf-s12-conditions { transform: none; }
.lvf-s12-conditions-bar {
position: sticky;
top: 0;
z-index: 3;
display: flex;
justify-content: flex-end;
padding-bottom: 20px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 100%);
}
.lvf-s12-close--conditions { --lvf-s12-close: 56px; border-radius: 26px; }
.lvf-s12-close--conditions .lvf-s12-close-icon { width: 24px; height: 24px; }
/* ---------- Quick-Rules-Zustände aus den Figma-Popup-Frames ---------- */
.lvf-s12-quick-head {
max-width: 860px;
margin: 0 auto;
text-align: center;
}
.lvf-s12-quick-kicker {
display: inline-flex;
min-height: 34px;
align-items: center;
border: 1px solid rgba(94, 201, 255, 0.3);
border-radius: 999px;
padding: 7px 16px;
color: #87d7ff;
background: rgba(0, 142, 220, 0.08);
font-family: var(--lvf-font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.lvf-s12-quick-title {
margin: 22px 0 0;
color: var(--lvf-white);
font-family: var(--lvf-font-display);
font-size: clamp(32px, 4.5vw, 58px);
font-weight: 500;
line-height: 1.02;
}
.lvf-s12-quick-sub {
max-width: 700px;
margin: 18px auto 0;
color: rgba(222, 239, 248, 0.7);
font-family: var(--lvf-font-body);
font-size: 16px;
line-height: 1.55;
}
.lvf-s12-quick-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
width: min(100%, 520px);
margin: 34px auto 26px;
border: 1px solid rgba(89, 191, 239, 0.22);
border-radius: 18px;
padding: 5px;
background: rgba(255, 255, 255, 0.035);
}
.lvf-s12-quick-tab {
min-height: 48px;
border: 0;
border-radius: 13px;
color: rgba(229, 241, 248, 0.56);
background: transparent;
font: 600 14px/1.2 var(--lvf-font-body);
cursor: pointer;
}
.lvf-s12-quick-tab.is-active {
color: #03101a;
background: linear-gradient(145deg, #a7dfff, #19adff);
box-shadow: 0 8px 24px rgba(0, 162, 255, 0.22);
}
.lvf-s12-quick-tab:focus-visible {
outline: 2px solid #8bd8ff;
outline-offset: 3px;
}
.lvf-s12-quick-panel[hidden] { display: none; }
.lvf-s12-quick-grid {
display: grid;
gap: 12px;
width: min(100%, 1130px);
margin: 0 auto;
}
.lvf-s12-quick-card {
position: relative;
overflow: hidden;
border: 1px solid rgba(96, 190, 231, 0.2);
border-radius: 18px;
padding: 20px 26px;
background:
radial-gradient(70% 180% at 0% 50%, rgba(0, 162, 255, 0.12), rgba(0, 162, 255, 0) 72%),
linear-gradient(145deg, rgba(11, 31, 43, 0.94), rgba(2, 11, 16, 0.94));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.lvf-s12-quick-card h4 {
margin: 0;
color: #f5fbff;
font-family: var(--lvf-font-display);
font-size: 19px;
font-weight: 500;
line-height: 1.2;
}
.lvf-s12-quick-card p {
margin: 8px 0 0;
color: rgba(218, 235, 244, 0.68);
font-family: var(--lvf-font-body);
font-size: 14px;
line-height: 1.5;
}
/* ---------- Wiederverwendbarer Info-Dialog ---------- */
.lvf-s12-info {
position: relative;
width: min(100%, 620px);
margin: auto;
overflow: hidden;
border: 1px solid rgba(91, 188, 232, 0.32);
border-radius: 26px;
padding: 58px 54px 48px;
background:
radial-gradient(90% 120% at 100% 0%, rgba(0, 162, 255, 0.2) 0%, rgba(0, 162, 255, 0) 64%),
linear-gradient(145deg, rgba(12, 31, 43, 0.98), rgba(2, 10, 15, 0.98));
box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
outline: none;
text-align: center;
transform: translateY(14px) scale(0.985);
transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.lvf-s12-overlay.is-open .lvf-s12-info { transform: none; }
.lvf-s12-info::before {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 12%;
width: 76%;
height: 1px;
background: linear-gradient(90deg, rgba(0, 162, 255, 0), rgba(110, 207, 255, 0.9), rgba(0, 162, 255, 0));
}
.lvf-s12-info-glow {
position: absolute;
inset: -45% -30% auto;
height: 300px;
pointer-events: none;
background: radial-gradient(closest-side, rgba(0, 162, 255, 0.28), rgba(0, 162, 255, 0));
filter: blur(28px);
}
.lvf-s12-close--info {
--lvf-s12-close: 48px;
position: absolute;
z-index: 3;
top: 16px;
right: 16px;
border-radius: 22px;
}
.lvf-s12-close--info .lvf-s12-close-icon { width: 21px; height: 21px; }
.lvf-s12-info-icon,
.lvf-s12-info-title,
.lvf-s12-info-text { position: relative; z-index: 2; }
.lvf-s12-info-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border: 1px solid rgba(110, 207, 255, 0.38);
border-radius: 16px;
color: #8bd8ff;
background: linear-gradient(145deg, rgba(0, 162, 255, 0.22), rgba(0, 162, 255, 0.05));
box-shadow: inset 0 1px 12px rgba(91, 188, 232, 0.14);
}
.lvf-s12-info-icon svg { width: 27px; height: 27px; }
.lvf-s12-info-title {
margin: 24px 0 0;
color: var(--lvf-white);
font-family: var(--lvf-font-display);
font-size: clamp(26px, 4vw, 38px);
font-weight: 500;
line-height: 1.08;
letter-spacing: 0.01em;
}
.lvf-s12-info-text {
max-width: 500px;
margin: 18px auto 0;
color: rgba(229, 241, 248, 0.82);
font-family: var(--lvf-font-body);
font-size: 17px;
line-height: 1.65;
}
/* Die Pseudofläche vergrößert den Klickbereich ohne das Kartenlayout zu verschieben. */
.lvf-s05-info[data-lvf-open="info"],
.lvf-s04-crow-info[data-lvf-open="info"],
.lvev-e3-info[data-lvf-open="info"] {
position: relative;
cursor: pointer;
outline: none;
}
.lvf-s05-info[data-lvf-open="info"]::before,
.lvf-s04-crow-info[data-lvf-open="info"]::before,
.lvev-e3-info[data-lvf-open="info"]::before {
content: "";
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
width: 44px;
height: 44px;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.lvf-s05-info[data-lvf-open="info"]:focus-visible::before,
.lvf-s04-crow-info[data-lvf-open="info"]:focus-visible::before,
.lvev-e3-info[data-lvf-open="info"]:focus-visible::before {
background: rgba(0, 162, 255, 0.08);
box-shadow: 0 0 0 2px rgba(139, 216, 255, 0.95), 0 0 0 6px rgba(0, 162, 255, 0.16);
}
.lvf-s12-cards {
display: flex;
flex-direction: column;
gap: 14px;
}
.lvf-s12-card {
position: relative;
overflow: hidden;
border-radius: 13px;
padding: var(--lvf-s12-card-pad-y) var(--lvf-s12-card-pad-x);
background:
linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
linear-gradient(35deg, rgba(0, 162, 255, 0) 34.6%, rgba(0, 162, 255, 0.29) 100%),
rgba(0, 162, 255, 0.05);
-webkit-backdrop-filter: blur(34px);
backdrop-filter: blur(34px);
box-shadow:
0 6px 12px rgba(0, 0, 0, 0.2),
0 0 0 1.5px rgba(0, 0, 0, 0.21);
}
/* Lichtstreifen auf der Oberkante (zwei ueberlappende Linien aus dem Design) */
.lvf-s12-card::before {
content: "";
position: absolute;
top: -1px;
left: 80px;
width: 348px;
max-width: calc(100% - 80px);
height: 2px;
border-radius: 30px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 36%, rgba(255, 255, 255, 0.28) 64%, rgba(255, 255, 255, 0) 100%);
pointer-events: none;
}
/* Blauer Diamant-Glow oben links, im Design 2 geblurrte Ellipsen bei 20% */
.lvf-s12-card-glow {
position: absolute;
top: -142px;
left: -172px;
width: 882px;
height: 285px;
max-width: 140%;
opacity: 0.2;
background: radial-gradient(closest-side, rgba(0, 162, 255, 0.45) 0%, rgba(0, 162, 255, 0) 100%);
filter: blur(60px);
pointer-events: none;
}
/* Haarlinien-Rand (0,25px Verlauf im Design) */
.lvf-s12-card-edge {
position: absolute;
inset: 0;
border-radius: 13px;
padding: 1px;
background: linear-gradient(126deg, rgba(0, 162, 255, 0.9) 0%, rgba(0, 162, 255, 0) 38%, rgba(0, 162, 255, 0) 62%, rgba(0, 162, 255, 0.9) 100%);
opacity: 0.5;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.lvf-s12-card-head { position: relative; margin: 0; font-weight: inherit; }
.lvf-s12-card-btn {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 32px;
text-align: left;
}
.lvf-s12-card-title {
flex: 1;
font-family: var(--lvf-font-display);
font-size: clamp(16px, 1.758vw, 18px);
font-weight: 400;
line-height: 1.23;
letter-spacing: 0.03em;
margin-block: -0.265em;
color: var(--lvf-white);
}
.lvf-s12-toggle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 32px;
width: 32px;
height: 32px;
border-radius: 8px;
background: linear-gradient(134deg, #6ecaff 0%, #0080ca 100%);
box-shadow:
0 7px 16px -5px rgba(0, 0, 0, 0.35),
0 0 0 2px rgba(0, 0, 0, 0.17),
inset 0 2px 2px -1px rgba(255, 255, 255, 0.27),
inset -0.8px -2.34px 9.8px #52b8f1,
inset -0.8px -1.56px 4.5px #00a4ff,
inset 3.1px 3.1px 3.9px rgba(0, 0, 0, 0.85);
color: var(--lvf-white);
}
.lvf-s12-toggle svg { width: 18px; height: 18px; }
.lvf-s12-toggle-v {
transform-origin: 9.5px 9px;
transform: scaleY(0);
opacity: 0;
transition: transform 0.26s ease, opacity 0.2s ease;
}
.lvf-s12-card-btn:hover .lvf-s12-toggle,
.lvf-s12-card-btn:focus-visible .lvf-s12-toggle { filter: brightness(1.12); }
.lvf-s12-card-btn:focus-visible { outline: 2px solid rgba(0, 162, 255, 0.7); outline-offset: 4px; border-radius: 6px; }
.lvf-s12-card-panel {
position: relative;
display: grid;
grid-template-rows: 1fr;
margin-top: var(--lvf-s12-card-gap);
padding-right: 56px;
opacity: 1;
transition: grid-template-rows 0.3s ease, margin-top 0.3s ease, opacity 0.22s ease;
}
.lvf-s12-card-panel-inner { min-height: 0; overflow: hidden; visibility: visible; }
.lvf-s12-card-text,
.lvf-s12-card-list {
font-family: var(--lvf-font-display);
font-size: clamp(15px, 1.5625vw, 16px);
font-weight: 400;
line-height: 1.54;
letter-spacing: 0.06em;
color: #858585;
margin-block: -0.42em;
}
/* Die Textbloecke im Popup waren urspruenglich ein einziger Absatz mit
.
Als echte Absaetze bzw. Liste brauchen sie den Abstand, den die Leerzeilen hatten. */
.lvf-s12-card-text + .lvf-s12-card-text,
.lvf-s12-card-text + .lvf-s12-card-list { margin-top: 1.3em; }
.lvf-s12-card-list li { margin: 0; }
.lvf-s12-card.is-collapsed .lvf-s12-card-panel {
grid-template-rows: 0fr;
margin-top: 0;
opacity: 0;
}
.lvf-s12-card.is-collapsed .lvf-s12-card-panel-inner {
visibility: hidden;
transition: visibility 0s linear 0.3s;
}
.lvf-s12-card.is-collapsed .lvf-s12-toggle-v { transform: scaleY(1); opacity: 1; }
/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
.lvf-s12 {
--lvf-s12-pad-x: clamp(24px, 11.7%, 103px);
--lvf-s12-pad-t: 56px;
--lvf-s12-gap-1: 32px;
--lvf-s12-gap-2: 28px;
--lvf-s12-card-pad-x: 26px;
}
.lvf-s12-overlay { padding: 48px 32px; }
.lvf-s12-overlay--conditions { padding: 32px 20px; }
.lvf-s12-card-panel { padding-right: 24px; }
.lvf-s12-card::before { left: 48px; width: 46%; }
}
/* ---------- Mobile ---------- */
@media (max-width: 767px) {
.lvf-s12 {
--lvf-s12-radius: 24px;
--lvf-s12-pad-x: 20px;
--lvf-s12-pad-t: 40px;
--lvf-s12-pad-b: 22px;
--lvf-s12-gap-1: 26px;
--lvf-s12-gap-2: 22px;
--lvf-s12-tile: 64px;
--lvf-s12-close: 56px;
--lvf-s12-card-pad-x: 20px;
--lvf-s12-card-pad-y: 20px;
--lvf-s12-card-gap: 18px;
}
.lvf-s12-overlay { padding: 32px 16px; }
.lvf-s12-overlay--conditions { padding: 20px 14px; }
.lvf-s12-overlay--info { padding: 18px 14px; }
.lvf-s12-quick-tabs { width: 100%; margin-top: 26px; }
.lvf-s12-quick-tab { min-height: 50px; padding: 0 8px; font-size: 13px; }
.lvf-s12-quick-title { font-size: 34px; }
.lvf-s12-quick-sub { font-size: 14px; }
.lvf-s12-quick-card { border-radius: 15px; padding: 18px; }
.lvf-s12-quick-card h4 { font-size: 17px; }
.lvf-s12-quick-card p { font-size: 13px; }
.lvf-s12-discord { border-radius: 15px; }
.lvf-s12-discord-icon { width: 34px; }
.lvf-s12-close { border-radius: 26px; }
.lvf-s12-close-icon { width: 24px; height: 24px; }
.lvf-s12-close--landing { top: -14px; right: -8px; }
/* Formular stapelt: Eingabe ueber Button, beide volle Breite */
.lvf-s12-form {
display: flex;
flex-direction: column;
gap: 10px;
height: auto;
}
.lvf-s12-input-wrap { position: relative; inset: auto; width: 100%; height: 52px; }
.lvf-s12-input { padding: 0 20px; font-size: 15px; }
.lvf-s12-submit { position: relative; width: 100%; height: 52px; }
.lvf-s12-submit-label { font-size: 17px; }
.lvf-s12-landing-fine { font-size: 10px; margin-top: calc(30px - 1.20556em); }
.lvf-s12-card-btn { min-height: 44px; align-items: center; }
.lvf-s12-card-panel { padding-right: 0; }
.lvf-s12-card::before { left: 32px; width: 44%; }
.lvf-s12-card-glow { left: -90px; top: -110px; width: 460px; height: 220px; }
.lvf-s12-info { border-radius: 22px; padding: 52px 22px 36px; }
.lvf-s12-info-title { margin-top: 20px; font-size: 28px; }
.lvf-s12-info-text { margin-top: 14px; font-size: 15px; line-height: 1.6; }
}
/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
.lvf-s12-landing-wrap,
.lvf-s12-conditions,
.lvf-s12-info { transform: none; }
}
/* == s01 (theme) == */
/* s01 Banner + Nav - Desktop 1760 (Content 1560 / Banner 1298), Mobile 440 */
.lvf-s01 {
--lvf-s01-u: 1px; /* Mobile-Skalierungseinheit, < 768px proportional */
--lvf-s01-h: 130px; /* Bauhoehe des fixierten Kopfes, siehe REPORT */
position: relative;
z-index: 100;
font-family: var(--lvf-font-display);
}
.lvf-s01-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px 0 8px;
pointer-events: none; /* Luecke zwischen den Leisten bleibt durchklickbar */
}
.lvf-s01-bar > * { pointer-events: auto; }
.lvf-s01-shell {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
max-width: 1600px;
margin-inline: auto;
padding-inline: 20px;
}
/* ---------------------------------------------------------------- Banner */
.lvf-s01-banner {
position: relative;
overflow: hidden;
width: 100%;
max-width: 1298px;
height: 45px;
margin-inline: auto;
padding-inline: 24px;
border-radius: 18px;
background-color: #000000;
background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04));
/* Pruefauftrag 13.08.2026, Fundstelle 3 (Muster A, "reduce the Stroke"):
dieser Wert war der harte Kastenschatten aus lvlup-theme.css Z. 170, den
server-stand-20260810/lvlup-fixes/fixes-header.css Abschnitt A bisher
allein weich gefahren hat (weniger Versatz, deutlich groessere
Weichzeichnung). Jetzt direkt im Fragment, damit ein Deploy ohne die
Override den heutigen Stand haelt. */
box-shadow: 0 14px 80px rgba(0, 0, 0, 0.24);
}
.lvf-s01-banner-row {
position: relative;
display: grid;
grid-template-columns: auto auto auto;
grid-template-areas: "offer code timer";
align-items: center;
justify-content: space-between;
height: 100%;
}
/* Angebot links */
.lvf-s01-offer {
grid-area: offer;
display: flex;
align-items: center;
gap: 14.82px;
}
.lvf-s01-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6.24px;
height: 23px;
padding-inline: 9.36px;
border-radius: 78px;
background: rgba(0, 0, 0, 0.1);
box-shadow:
inset -0.78px -2.34px 9.83px #f15252,
inset -0.78px -1.56px 4.53px #ff0000,
inset -0.78px -1.56px 4.53px #ff0000,
inset 3.12px 3.12px 3.9px #000000,
6.8px 2.91px 10.68px rgba(0, 0, 0, 0.36),
0 0 0 1.51px rgba(0, 0, 0, 0.25),
0 0 0 3.43px rgba(0, 0, 0, 0.16);
}
.lvf-s01-pill-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #ff0000;
flex: none;
}
.lvf-s01-pill-text {
font-size: 8.58px;
line-height: 10.56px;
font-weight: 400;
color: #ffffff;
white-space: nowrap;
}
.lvf-s01-offer-full {
font-size: 10.92px;
line-height: 13.44px;
font-weight: 500;
color: #ffffff;
text-align: center;
white-space: nowrap;
}
/* Figma-Rohknoten 156:7101 ("25% off all Evaluations"): Zeichen 0-6 tragen als
letzten (= gewinnenden) Fill-Eintrag einen echten Verlauf rgb(110,201,255)
-> rgb(0,128,202). Die diagonale Achse entspricht 126deg, nicht dem
senkrechten --lvf-grad-btn. Kein font-weight-Override im Rohknoten, die
Basis bleibt 500. */
.lvf-s01-offer-hl {
background-image: linear-gradient(126deg, #6ecaff 0%, #0080ca 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Figma-Rohknoten 156:7108 ("Ends in: ..."): Zeichen 0-7 ("Ends in:") tragen
als letzten Fill-Eintrag den Verlauf rgb(140,213,255) -> rgb(18,169,255),
bitgenau --lvf-grad-blue. Die Ziffern bleiben unveraendert #b1b1b1 (siehe
Begruendung bei .lvf-s01-timer-num unten). */
.lvf-s01-timer-hl {
background-image: var(--lvf-grad-blue);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lvf-s01-offer-short { display: none; }
/* Code + Kopierknopf */
.lvf-s01-code {
grid-area: code;
display: flex;
align-items: center;
gap: 2.34px;
}
.lvf-s01-code-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 85px;
height: 23px;
padding-inline: 11.43px;
border-radius: 6.24px;
/* Saum-Verlauf statt --lvf-grad-blue plus inset-Schatten, 11.08.2026:
Figma legt hier einen INNER_SHADOW #5bbce8 im Blendmodus COLOR_DODGE an,
der aufhellt. Der frueher benutzte inset-Schatten dunkelt ab, gemessen
(114,199,242) statt (163,235,255). Der Blendmodus steckt jetzt im
Verlauf, deshalb faellt "inset 0 0.63px 10.4px #5bbce8" darunter weg. */
background: var(--lvf-grad-blue-btn);
color: #060606;
font-size: 12.48px;
line-height: 16.23px;
font-weight: 500;
white-space: nowrap;
box-shadow:
0 0 0 0.88px rgba(0, 162, 255, 0.55),
6.8px 2.91px 10.68px rgba(0, 0, 0, 0.36),
0 0 0 1.51px rgba(0, 0, 0, 0.25),
0 0 0 3.43px rgba(0, 0, 0, 0.16);
}
.lvf-s01-copy {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 23px;
height: 23px;
flex: none;
border-radius: 6.24px;
box-shadow:
inset -0.78px -2.34px 9.83px #52b8f1,
inset -0.78px -1.56px 4.53px #00a4ff,
inset -0.78px -1.56px 4.53px #00a4ff,
inset 3.12px 3.12px 3.9px #000000,
6.8px 2.91px 10.68px rgba(0, 0, 0, 0.36),
0 0 0 1.51px rgba(0, 0, 0, 0.25),
0 0 0 3.43px rgba(0, 0, 0, 0.16);
transition: filter 0.15s ease;
}
/* Die Füllung des Kopier-Knopfes braucht zwei Klassen (0-2-0). Grund: Hello
Elementor färbt Buttons auch bei :hover und :focus ([type=button]:hover,
0-2-0), deshalb steht die Abwehr in shell.css ebenfalls auf 0-2-0. Mit nur
einer Klasse blieb der Knopf durchsichtig - zusammen mit dem damals
erzwungenen border-radius 0 war das der harte Kasten aus der Kundenmeldung.
Den in Figma zusätzlich vermerkten 134-Grad-Verlauf setze ich bewusst NICHT:
im Mockup misst der Knopf oben links 9,6 Helligkeit, ein Verlauf von #6ecaff
nach #0080ca würde ihn dort hell machen. */
.lvf-page .lvf-s01-copy { background: rgba(0, 0, 0, 0.1); }
.lvf-s01-copy::after { /* Touch-Ziel vergroessern, Optik bleibt 23px */
content: "";
position: absolute;
inset: -11px;
}
.lvf-s01-copy:hover { filter: brightness(1.15); }
.lvf-s01-copy-ico,
.lvf-s01-copy-ok {
width: 10px;
height: 10px;
display: block;
filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.45));
}
.lvf-s01-copy-ok { display: none; }
.lvf-s01-copy.is-done .lvf-s01-copy-ico { display: none; }
.lvf-s01-copy.is-done .lvf-s01-copy-ok { display: block; }
/* Countdown */
.lvf-s01-timer {
grid-area: timer;
font-size: 10.92px;
line-height: 13.44px;
font-weight: 400;
letter-spacing: 0.66px;
color: #4da3ff;
text-align: right;
white-space: nowrap;
}
.lvf-s01-timer-num {
font-variant-numeric: tabular-nums;
/* NOTIZ-R2 vom 05.08. hatte hier faelschlich auf #ffffff gestellt (Notiz:
"weiss statt #b1b1b1"), vermutlich in Analogie zur Angebotszeile, wo der
Rest tatsaechlich weiss ist. Beim Countdown stimmt die Analogie nicht:
der Figma-Textknoten "Ends in: 02d : 14h : 37m : 22s" traegt EINEN
einzigen flachen Fuellwert #b1b1b1 (Rohdaten figma/bands/s01-banner-nav-
desktop.json, Knoten 156:7108, rgb(0.694,0.694,0.694)). Das "Ends in:"
in Blau (bzw. auf elite Gold) sitzt als Zeichenformat-Override, den der
Export nicht mitschreibt, deshalb bleibt .lvf-s01-timer separat blau/gold
und nur die Ziffern kriegen den Knotenwert. Gegengeprueft an zwei
unabhaengigen Mockup-Dateien: referenz-neu/soll/home-aus-vollbild.png
(Ausschnitt 1330..1560 x 28..50) zeigt am hellsten Ziffernpixel exakt
(177,177,177) = #b1b1b1, referenz-neu/soll/elite-aus-vollbild.png zeigt
dieselben Ziffern ebenso grau, nicht weiss, obwohl "Ends in:" dort gold
ist. Live vorher/nachher: Ziffern (255,255,255) -> (177,177,177). */
color: #b1b1b1;
}
/* ------------------------------------------------------------------- Nav */
.lvf-s01-nav {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
height: 55px;
padding: 0 8.32px;
border-radius: 13px;
background-color: #000000;
background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02));
/* Pruefauftrag 13.08.2026, Fundstelle 3 (Muster A, "reduce the Stroke"):
derselbe Fall wie bei .lvf-s01-banner oben, Ursache lvlup-theme.css
Z. 333. Wert aus fixes-header.css Abschnitt A uebernommen. */
box-shadow: 0 22px 120px rgba(0, 0, 0, 0.30);
}
.lvf-s01-nav::before { /* Hairline-Verlaufsrand aus dem Design */
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(90deg, rgba(52, 174, 244, 0) 0%, #35aef4 52%, 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;
opacity: 0.55;
pointer-events: none;
}
.lvf-s01-logo {
position: relative;
display: inline-flex;
align-items: center;
padding-left: 17.68px;
}
/* Trefferfläche des Logo-Links auf 44 px, Optik unverändert. Der Link ist so
hoch wie die Bilddatei skaliert: 32 px unter 1024 (208er Breite, Datei
780x120) und 41,1 px darüber (267er Breite). Gemessen mit
werkzeuge/klickziele-messen.js an build-rules/preview.html, Zeiger "maus":
768 px und 1023 px Treffer 225,7 x 32 -> 44
1440 px und 1760 px Treffer 284,7 x 41,1 -> 44
Der Rechenweg im inset hält die Hitbox bei JEDER Bildhöhe auf 44 px:
(Höhe - 44) / 2 ist negativ, solange die Höhe darunter liegt, und wird
positiv, sobald sie darüber liegt - dann bleibt das Overlay innerhalb der
ohnehin ausreichenden Box und schrumpft nichts. Deshalb bleibt die Regel
auch richtig, falls die Bildhöhe später korrigiert wird (siehe die Notiz
zur Mobilgröße am .lvf-s01-logo-img weiter unten).
Vorbild: .lvf-s01-burger::after in dieser Datei, .lvf-s04-tab::before. */
.lvf-s01-logo::after {
content: "";
position: absolute;
inset: calc((100% - 44px) / 2) 0;
}
.lvf-s01-logo-img {
display: block;
width: 208px;
height: auto;
}
/* Pruefauftrag 13.08.2026, Fundstelle 1 (kritisch, betrifft alle acht Seiten,
s01 ist der gemeinsame Kopf aus assemble-theme.js): die serverseitige
Override server-stand-20260810/lvlup-fixes/fixes-header.css Abschnitt B
traegt diese Korrektur bisher allein, unser Fragment hatte dazu ueberhaupt
keine Deklaration. Ohne die Override kippt die Wortmarke site-weit um
14,583 % der Bildhoehe zu tief (Ursache liegt in der Bilddatei
lvlup-logo-nav.webp, 780x120, die Schrift liegt darin nur y 47 bis 108,
Tintenmitte 17,5 px tiefer als die Bildmitte). Deshalb jetzt hier fest im
Fragment statt nur in der Override, damit ein Deploy ohne lvlup-fixes den
heutigen Stand haelt.
Prozentwert bewusst weiterhin in Prozent der Elementhoehe, nicht in px:
so bleibt die Korrektur bei jeder Anzeigegroesse richtig (Tablet, Mobil,
die 440er-Skalierung inbegriffen), ohne je nachgezogen werden zu muessen. */
.lvf-page .lvf-s01-logo-img {
transform: translateY(-14.583%);
}
/* Die Gold-Fassung der Elite-Seite ist eine andere Datei mit anderem
Innenrand: lvlup-logo-nav-gold.webp ist 306x48, Tinte y 5 bis 35,
Tintenmitte 8,333 % der Hoehe zu HOCH statt zu tief. Sie braucht das
Gegenteil, sonst verschiebt die Regel oben sie erst recht in die falsche
Richtung. */
body.lvf-gold .lvf-page .lvf-s01-logo-img {
transform: translateY(8.333%);
}
.lvf-s01-menu { display: contents; }
.lvf-s01-links {
display: flex;
align-items: center;
gap: 24.97px;
}
.lvf-s01-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding-block: 8.32px;
font-size: 14.56px;
line-height: 20.81px;
font-weight: 400;
color: rgba(255, 255, 255, 0.7);
transition: color 0.15s ease;
}
/* Feste Hervorhebung von "Evaluations". In allen acht Mockups ist genau dieser
Punkt hell, auf jeder Seite - auch auf Rules und Elite. Es gibt im Entwurf
also KEINE Markierung der aktuellen Seite.
Die Klasse is-active, die das Theme-JS je nach Pfad vergibt, bekommt deshalb
bewusst keine Farbe mehr: sie war ohnehin defekt (auf home markierte sie
keinen Punkt, auf evaluation zwei, weil "Pricing" auf /evaluation/#pricing
zeigt) und hätte hier nur wieder vom Mockup weggeführt.
"Home" bleibt im Menü, obwohl es im Mockup fehlt - so von Kaan entschieden. */
.lvf-s01-link.is-active,
.lvf-s01-link[aria-current="page"] { color: #ffffff; font-weight: 550; }
.lvf-s01-link:hover,
.lvf-s01-link:focus-visible { color: #ffffff; }
.lvf-s01-menu .lvf-s01-link:focus-visible {
outline: 2px solid #7fd7ff;
outline-offset: 2px;
border-radius: 6px;
background: rgba(0, 162, 255, .12);
}
.lvf-s01-actions {
display: flex;
align-items: center;
gap: 6.56px;
}
.lvf-s01-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 121px;
height: 38px;
padding-inline: 13.65px;
border-radius: 7px;
background: rgba(0, 0, 0, 0.1);
font-size: 13.65px;
line-height: 20.47px;
font-weight: 400;
color: #ffffff;
white-space: nowrap;
transition: filter 0.15s ease;
}
.lvf-s01-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 181px;
height: 38px;
padding-inline: 13.65px;
border-radius: 7px;
/* Saum steckt im Verlauf, siehe --lvf-grad-blue-btn in shell.css */
background: var(--lvf-grad-blue-btn);
font-size: 13.65px;
line-height: 20.47px;
font-weight: 500;
color: #060606;
white-space: nowrap;
transition: filter 0.15s ease;
}
/* Die Desktop-Navigation bleibt optisch 38 px hoch. Die unsichtbaren Flächen
stellen für Links und Knöpfe mindestens 44 px bereit. Der seitliche
Überstand der kurzen Navigationslinks bleibt innerhalb der 24,97-px-Lücke. */
@media (min-width: 1200px) {
.lvf-s01-link,
.lvf-s01-ghost,
.lvf-s01-cta { position: relative; }
.lvf-s01-link::after,
.lvf-s01-ghost::after,
.lvf-s01-cta::after {
content: "";
position: absolute;
top: -3.5px;
bottom: -3.5px;
}
.lvf-s01-link::after { left: -10px; right: -10px; }
.lvf-s01-ghost::after,
.lvf-s01-cta::after { left: 0; right: 0; }
}
/* Die Schatten beider Kopfleisten-Knöpfe liegen bewusst in eigenen Regeln mit
zwei Klassen (0-2-0). Grund: Elementor liefert in frontend.min.css
".elementor a { box-shadow: none }" mit 0-1-1 und schlägt damit jede
Regel mit nur einer Klasse. Beide Knöpfe sind -Elemente, deshalb stand
"Client Area" live ohne Pille da und die CTA ohne inneren Lichtsaum.
Nur der Schatten wird angehoben, nicht der ganze Block - sonst würden die
späteren Regeln für schmale Bildschirme (0-1-0) verlieren.
Gegenprobe, die die Ursache belegt: auf der Elite-Seite war die Pille schon
immer da, weil dort "body.lvf-gold .lvf-s01-ghost" mit 0-2-1 gewinnt. */
.lvf-page .lvf-s01-ghost {
box-shadow:
inset -1.64px -4.92px 15.9px #52b8f1,
inset -4.1px -3.28px 12.87px #00a4ff,
inset -0.64px -1.28px 3.71px #00a4ff,
inset 7.38px 5.74px 9.92px #000000,
5.57px 2.39px 8.75px rgba(0, 0, 0, 0.36),
0 0 0 1.24px rgba(0, 0, 0, 0.25),
0 0 0 2.81px rgba(0, 0, 0, 0.16);
}
/* Ohne inset-Saum seit 11.08.2026, der sitzt jetzt in --lvf-grad-blue-btn. */
.lvf-page .lvf-s01-cta {
box-shadow:
0 0 0 0.41px rgba(0, 162, 255, 0.55),
5.57px 2.39px 8.75px rgba(0, 0, 0, 0.36),
0 0 0 1.24px rgba(0, 0, 0, 0.25),
0 0 0 2.81px rgba(0, 0, 0, 0.16);
}
.lvf-s01-ghost:hover,
.lvf-s01-cta:hover { filter: brightness(1.12); }
/* Burger */
.lvf-s01-burger {
position: relative;
/* Ueber dem Menue-Overlay (z 99) bleiben, sonst ist der Schliessen-X
verdeckt und das offene Menue laesst sich nicht schliessen (Kaan 06.08.) */
z-index: 110;
display: none;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex: none;
border-radius: 7px;
background: rgba(0, 0, 0, 0.1);
box-shadow:
inset -1.64px -4.92px 15.9px #52b8f1,
inset -4.1px -3.28px 12.87px #00a4ff,
inset -0.64px -1.28px 3.71px #00a4ff,
inset 7.38px 5.74px 9.92px #000000,
5.57px 2.39px 8.75px rgba(0, 0, 0, 0.36),
0 0 0 1.24px rgba(0, 0, 0, 0.25),
0 0 0 2.81px rgba(0, 0, 0, 0.16);
}
.lvf-s01-burger::after { /* Touch-Ziel >= 44px */
content: "";
position: absolute;
inset: -4px;
}
.lvf-s01-burger-ico {
position: relative;
display: block;
width: 19px;
height: 19px;
}
.lvf-s01-burger-l {
position: absolute;
left: 1px;
width: 17px;
height: 1.8px;
border-radius: 1px;
background: #ffffff;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.lvf-s01-burger-l:nth-child(1) { top: 3.6px; }
.lvf-s01-burger-l:nth-child(2) { top: 8.6px; }
.lvf-s01-burger-l:nth-child(3) { top: 13.6px; }
.lvf-s01-burger[aria-expanded="true"] .lvf-s01-burger-l:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.lvf-s01-burger[aria-expanded="true"] .lvf-s01-burger-l:nth-child(2) { opacity: 0; }
.lvf-s01-burger[aria-expanded="true"] .lvf-s01-burger-l:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.lvf-s01 :focus-visible {
outline: 2px solid var(--lvf-blue-light);
outline-offset: 2px;
}
/* ------------------------------------------------- Tablet: < 1200px Burger */
/* Schwelle am 12.08.2026 von 1023.98 auf 1199.98 gehoben. Grund, gemessen an
build/preview.html mit werkzeuge-Zaehlung ueber die drei Nav-Bloecke:
Logo 284,7 + Linkliste 455,9 + Knopfpaar 308,6 + Innenabstand 16,6
= 1065,8 px Mindestbedarf der Desktop-Navileiste.
Die Leiste bekommt Viewport minus 40 px Shell-Rand, sie passt also erst ab
1105,8 px ueberhaupt hinein, und dann ohne jeden Zwischenraum.
Bei 1024 px stand deshalb:
Nav-Inhalt 1057 px in 984 px Kasten, .lvf-s01-cta endete bei x1077,4,
also 53,4 px hinter dem Viewportrand. Weil shell.css .lvf-page auf
overflow-x: clip setzt, gibt es keinen Scrollbalken - der Knopf war
nicht erreichbar, nicht nur haesslich.
"About" endete bei x761,3 und "Client Area" begann bei x761,3: null
Abstand, die Liste klebte am Knopfpaar.
1199.98 statt 1105.98, weil erst ab 1200 px wieder Luft zwischen Liste und
Knoepfen steht: bei 1200 px sind es 47,1 px, bei 1280 px 87,1 px, bei
1760 px die Entwurfsluft von 247,1 px. Ab 1200 px aendert sich nichts. */
@media (max-width: 1199.98px) {
.lvf-s01-burger { display: inline-flex; }
.lvf-s01-menu {
display: none;
position: fixed;
inset: 0;
z-index: 99;
flex-direction: column;
gap: 28px;
padding: calc(var(--lvf-s01-h) + 24px) 24px 40px;
/* Deckschicht des Mobilmenues: folgt dem Seitengrund, der am 11.08.2026
von #05060f auf Schwarz korrigiert wurde. */
background: rgba(0, 0, 0, 0.97);
overflow-y: auto;
overscroll-behavior: contain;
animation: lvf-s01-fade 0.18s ease-out;
}
.lvf-s01-menu.is-open { display: flex; }
.lvf-s01-links {
flex-direction: column;
align-items: stretch;
gap: 4px;
}
.lvf-s01-link {
justify-content: flex-start;
min-height: 48px;
padding-block: 12px;
font-size: 20px;
line-height: 24px;
border-bottom: 1px solid var(--lvf-line);
}
.lvf-s01-actions {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.lvf-s01-ghost,
.lvf-s01-cta {
width: 100%;
min-width: 0;
height: 48px;
font-size: 15px;
}
}
@keyframes lvf-s01-fade {
from { opacity: 0; }
to { opacity: 1; }
}
/* Pruefauftrag 13.08.2026, Muster A ("reduce the Stroke"): die Navi-Haarlinie
war zwischen 768 und 1023,98px noch bei der alten Deckkraft 0.55 stehen
geblieben. Der Fund vom 12.08. ("5) Der leuchtende Rand der Navileiste war
rund viermal zu kraeftig", weiter unten in dieser Datei im Zweig
min-width:1024px) wurde nur fuer den Desktop nachgezogen, nicht fuer das
Tablet dazwischen - dort blieb die Leiste sichtbar zu hell umrandet.
Figma kennt hier keinen eigenen Tablet-Entwurf, traegt fuer .lvf-s01-nav
aber in der Mobil- wie in der Desktop-Spec denselben Randwert (0.104px,
INSIDE, identische Verlaufsfarben) - der Fall ist also nicht breitenabhaengig.
Gemessen an der lokalen Vorschau (getComputedStyle bei 900px):
Deckkraft vorher 0.55, jetzt 0.12 wie im bereits validierten Desktop-Wert.
Unter 768px greift ohnehin "display: none" auf dieses Element. */
@media (min-width: 768px) {
.lvf-s01-nav::before { opacity: 0.12; }
}
/* -------------------------------------------------- Mobile: < 768px, 440er */
@media (max-width: 767.98px) {
.lvf-s01 {
--lvf-s01-u: min(1px, 100vw / 440);
--lvf-s01-h: calc(min(1px, 100vw / 440) * 130);
}
.lvf-s01-bar {
gap: calc(var(--lvf-s01-u) * 9);
padding: calc(var(--lvf-s01-u) * 19) 0 calc(var(--lvf-s01-u) * 14);
background-color: #000000;
background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02));
/* Pruefauftrag 13.08.2026, Fundstelle 3, Mobilfassung: die Leiste traegt
mobil selbst den Schatten (die Nav ist dort ohne Hintergrund), gleiche
Ursache wie am Desktop, aus fixes-header.css Abschnitt A uebernommen,
dort bewusst fest in px statt ueber --lvf-s01-u skaliert. */
box-shadow: 0 14px 56px rgba(0, 0, 0, 0.30);
}
.lvf-s01-shell {
gap: calc(var(--lvf-s01-u) * 9);
max-width: none;
padding-inline: 0;
}
.lvf-s01-banner {
/* width:100% aus dem Desktop-Block wuerde mit den Margins 35px ueber den
Viewport ragen (Kopierknopf/Countdown abgeschnitten, belegt 06.08.2026) */
width: auto;
max-width: none;
/* Der Rahmen darf hier nicht clippen, sonst schneidet er die 44-px-
Trefferflaeche des Kopierknopfes ab. Gemessen bei 390 px mit clip:
Treffer 36,4 px statt 44 - nach oben stiess die Flaeche an die
Bannerkante (dahinter meldete elementFromPoint section.lvf-s02).
Sichtbar liegt nichts ausserhalb: der Inhalt braucht bei 440 px
302,1 von 326 px Breite und 31,4 von 47 px Hoehe, darunter skaliert
beides mit u. Im Entwurf clippt der Rahmen (Frame 2147237205 "clip"),
dort haengt aber Deko-Grafik darin, die hier gar nicht gebaut ist. */
overflow: visible;
height: max(calc(var(--lvf-s01-u) * 47), 58px);
margin-inline: max(calc(var(--lvf-s01-u) * 14), 10px);
padding-inline: max(calc(var(--lvf-s01-u) * 14), 10px);
border-radius: calc(var(--lvf-s01-u) * 12.7);
background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04));
/* Pruefauftrag 13.08.2026, Fundstelle 3, Mobilfassung: aus fixes-header.css
Abschnitt A uebernommen, dort ueber --lvf-s01-u gerechnet wie die
uebrigen Mobilwerte dieses Blocks. */
box-shadow: 0 calc(var(--lvf-s01-u) * 10) calc(var(--lvf-s01-u) * 44) rgba(0, 0, 0, 0.24);
}
.lvf-s01-banner-row {
grid-template-columns: auto auto;
grid-template-areas:
"offer code"
"offer timer";
row-gap: calc(var(--lvf-s01-u) * 4.94);
}
.lvf-s01-offer {
align-self: center;
gap: calc(var(--lvf-s01-u) * 4.94);
}
.lvf-s01-pill {
height: calc(var(--lvf-s01-u) * 19);
gap: calc(var(--lvf-s01-u) * 5.13);
padding-inline: calc(var(--lvf-s01-u) * 7.69);
box-shadow:
inset calc(var(--lvf-s01-u) * -0.64) calc(var(--lvf-s01-u) * -1.92) calc(var(--lvf-s01-u) * 8.08) #f15252,
inset calc(var(--lvf-s01-u) * -0.64) calc(var(--lvf-s01-u) * -1.28) calc(var(--lvf-s01-u) * 3.72) #ff0000,
inset calc(var(--lvf-s01-u) * -0.64) calc(var(--lvf-s01-u) * -1.28) calc(var(--lvf-s01-u) * 3.72) #ff0000,
inset calc(var(--lvf-s01-u) * 2.56) calc(var(--lvf-s01-u) * 2.56) calc(var(--lvf-s01-u) * 3.21) #000000,
calc(var(--lvf-s01-u) * 5.58) calc(var(--lvf-s01-u) * 2.39) calc(var(--lvf-s01-u) * 8.77) rgba(0, 0, 0, 0.36),
0 0 0 calc(var(--lvf-s01-u) * 1.24) rgba(0, 0, 0, 0.25),
0 0 0 calc(var(--lvf-s01-u) * 2.82) rgba(0, 0, 0, 0.16);
}
.lvf-s01-pill-dot {
width: calc(var(--lvf-s01-u) * 5);
height: calc(var(--lvf-s01-u) * 5);
}
.lvf-s01-pill-text {
/* Entwurf: 7px w400 lh9, Textkasten 63x5 bei x75. Siehe Block am Ende. */
font-size: max(calc(var(--lvf-s01-u) * 7.05), 9px);
line-height: max(calc(var(--lvf-s01-u) * 8.67), 12px);
}
.lvf-s01-offer-full { display: none; }
.lvf-s01-offer-short {
display: inline-block;
font-size: calc(var(--lvf-s01-u) * 25);
line-height: calc(var(--lvf-s01-u) * 30.74);
font-weight: 600;
text-transform: uppercase;
white-space: nowrap;
background: linear-gradient(126deg, #6ecaff 0%, #0080ca 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(calc(var(--lvf-s01-u) * 4.8) calc(var(--lvf-s01-u) * 2.06) calc(var(--lvf-s01-u) * 7.54) rgba(0, 0, 0, 0.36));
}
.lvf-s01-code {
justify-self: center;
gap: calc(var(--lvf-s01-u) * 1.65);
}
.lvf-s01-code-chip {
/* Entwurf: Button 60x17 bei x292, Text "LVLUP25" 9px w500 lh11. */
min-width: calc(var(--lvf-s01-u) * 60);
height: calc(var(--lvf-s01-u) * 17);
padding-inline: calc(var(--lvf-s01-u) * 8.07);
border-radius: calc(var(--lvf-s01-u) * 4.4);
font-size: max(calc(var(--lvf-s01-u) * 8.81), 11px);
line-height: max(calc(var(--lvf-s01-u) * 11.46), 14px);
/* Ohne inset-Saum, siehe Grundregel oben: --lvf-grad-blue-btn traegt ihn. */
box-shadow:
0 0 0 calc(var(--lvf-s01-u) * 0.62) rgba(0, 162, 255, 0.55),
calc(var(--lvf-s01-u) * 4.8) calc(var(--lvf-s01-u) * 2.06) calc(var(--lvf-s01-u) * 7.54) rgba(0, 0, 0, 0.36),
0 0 0 calc(var(--lvf-s01-u) * 1.07) rgba(0, 0, 0, 0.25),
0 0 0 calc(var(--lvf-s01-u) * 2.42) rgba(0, 0, 0, 0.16);
}
.lvf-s01-copy {
/* Entwurf: Button 17x17 bei x354. Sichtbare Groesse bleibt der Entwurf,
bedienbar wird der Knopf ueber ::after - siehe dort. */
width: calc(var(--lvf-s01-u) * 17);
height: calc(var(--lvf-s01-u) * 17);
border-radius: calc(var(--lvf-s01-u) * 4.4);
box-shadow:
inset calc(var(--lvf-s01-u) * -0.55) calc(var(--lvf-s01-u) * -1.65) calc(var(--lvf-s01-u) * 6.94) #52b8f1,
inset calc(var(--lvf-s01-u) * -0.55) calc(var(--lvf-s01-u) * -1.1) calc(var(--lvf-s01-u) * 3.19) #00a4ff,
inset calc(var(--lvf-s01-u) * -0.55) calc(var(--lvf-s01-u) * -1.1) calc(var(--lvf-s01-u) * 3.19) #00a4ff,
inset calc(var(--lvf-s01-u) * 2.2) calc(var(--lvf-s01-u) * 2.2) calc(var(--lvf-s01-u) * 2.75) #000000,
calc(var(--lvf-s01-u) * 4.8) calc(var(--lvf-s01-u) * 2.06) calc(var(--lvf-s01-u) * 7.54) rgba(0, 0, 0, 0.36),
0 0 0 calc(var(--lvf-s01-u) * 1.07) rgba(0, 0, 0, 0.25),
0 0 0 calc(var(--lvf-s01-u) * 2.42) rgba(0, 0, 0, 0.16);
}
/* Trefferflaeche des Kopierknopfes auf genau 44 px, Optik bleibt 17u.
Der feste Wert -14u brachte je nach Breite 45 px (bei 440) bis 36,8 px
(bei 360) - unter 440 px wurde die Flaeche mitskaliert, obwohl der Finger
das nicht tut. Derselbe Rechenweg wie bei .lvf-s01-burger::after:
(Optik - 44) / 2 ist negativ, solange die Optik kleiner als 44 px ist. */
.lvf-s01-copy::after { inset: calc((var(--lvf-s01-u) * 17 - 44px) / 2); }
.lvf-s01-copy-ico,
.lvf-s01-copy-ok {
/* Entwurf: copy-Filled 7x7 bei x359. */
width: calc(var(--lvf-s01-u) * 7);
height: calc(var(--lvf-s01-u) * 7);
}
.lvf-s01-timer {
/* Entwurf: "Ends in: ..." 8px w400 lh9 ls0.46, Kasten 104x5 bei x279. */
font-size: max(calc(var(--lvf-s01-u) * 7.71), 10px);
line-height: max(calc(var(--lvf-s01-u) * 9.49), 13px);
letter-spacing: calc(var(--lvf-s01-u) * 0.46);
}
.lvf-s01-nav {
height: calc(var(--lvf-s01-u) * 38);
padding: 0 calc(var(--lvf-s01-u) * 25) 0 calc(var(--lvf-s01-u) * 37);
border-radius: 0;
background: none;
}
/* Spezifitaetsleck: server-stand-20260810/lvlup-fixes/fixes-header.css setzt
.lvf-page .lvf-s01-nav (0-2-0) einen Schatten OHNE eigene Medienabfrage,
das schlaegt hier das bewusste box-shadow:none (sonst nur 0-1-0). Folge:
Nav und Bar werfen auf Mobile gleichzeitig einen Schatten, obwohl im
Entwurf nur die Bar einen hat (Nav hat background:none, siehe oben) - die
Override-Datei selbst sagt das im eigenen Kommentar ("Mobil traegt die
Leiste selbst den Schatten"), scoped ihre Nav-Regel nur nicht auf Desktop.
Fix von hier aus, ohne die tabu Override-Datei anzufassen: Spezifitaet auf
0-3-0 heben, Vorbild build/fragments/s11/fragment.css .lvf-page.lvf-page. */
.lvf-page.lvf-page .lvf-s01-nav { box-shadow: none; }
.lvf-s01-nav::before { display: none; }
.lvf-s01-logo {
padding-left: 0;
}
/* DAS WAR DER 767er-FEHLER. Repariert 12.08.2026, nachgemessen unten.
Die alte Regel ".lvf-s01-logo-img { height: 21u }" hat nie gegriffen:
shell.css setzt ".lvf-page img { height: auto }" mit 0-1-1 und schlaegt
die Klassenregel mit 0-1-0. Das Bild lief damit in sein Naturformat
780x120 und wurde nur noch von max-width: 100 % gebremst:
bei 390 px 301,4 x 46,4 statt 236,6 x 36,4
bei 440 px 340 x 52,3 statt 267 x 41,1
bei 767 px 667 x 102,6 statt 267 x 41,1
Bei 767 px reichte das Bild damit von y42,7 bis y145,3 quer ueber
x37..704. Der Banner liegt bei y19..66, die Navileiste ist
position: relative und steht nach dem Banner im Baum, malt also
darueber. Ab y43 lag das Bild also UEBER dem Banner und hat Pille,
Angebotstext und Countdown zugedeckt - genau der Befund "die Leiste ist
praktisch leer". Uebrig blieb, was oberhalb von y43 lag: Chip und
Kopierknopf. Bei 768 px faellt der Mobilzweig weg, dort gilt wieder
"width: 208px" und das Bild ist 208x32 - deshalb die harte Kante
zwischen 767 und 768 px.
Beleg im Bild: _shot 767 vorher/nachher.
Der Entwurf verlangt die Wortmarke 205 x 21 px (Group 28 box(37,84,205,21)),
also dieselbe Tintengroesse wie am Desktop. Die Datei lvlup-logo-nav.webp
ist 780x120 und traegt die Wortmarke nur bei x6..603, deshalb dieselbe
Rechnung wie im 1024er-Zweig: 205 * 780 / 598 = 267 px Bildbreite. Hier
mit u multipliziert, damit es unter 440 px massstabsgetreu mitskaliert.
Der Zusatz body:not(.lvf-gold) steht aus demselben Grund wie oben da:
die Elite-Seite tauscht
per Theme-JS auf lvlup-logo-nav-gold.webp, 306x48 und fast randlos, die
267 wuerden sie 24 Prozent zu gross machen.
max-width muss mit weg, sonst greift ".lvf-page img { max-width: 100% }". */
body:not(.lvf-gold) .lvf-page .lvf-s01-logo-img {
width: calc(var(--lvf-s01-u) * 267);
max-width: none;
height: auto;
}
body.lvf-gold .lvf-page .lvf-s01-logo-img {
width: calc(var(--lvf-s01-u) * 215);
max-width: none;
height: auto;
}
.lvf-s01-burger {
width: calc(var(--lvf-s01-u) * 38);
height: calc(var(--lvf-s01-u) * 38);
border-radius: calc(var(--lvf-s01-u) * 7);
}
.lvf-s01-burger::after { inset: calc((var(--lvf-s01-u) * 38 - 44px) / 2); } /* Hitbox immer >= 44px */
.lvf-s01-burger-ico {
width: calc(var(--lvf-s01-u) * 19);
height: calc(var(--lvf-s01-u) * 19);
}
.lvf-s01-burger-l {
left: calc(var(--lvf-s01-u) * 1);
width: calc(var(--lvf-s01-u) * 17);
height: calc(var(--lvf-s01-u) * 1.8);
}
.lvf-s01-burger-l:nth-child(1) { top: calc(var(--lvf-s01-u) * 3.6); }
.lvf-s01-burger-l:nth-child(2) { top: calc(var(--lvf-s01-u) * 8.6); }
.lvf-s01-burger-l:nth-child(3) { top: calc(var(--lvf-s01-u) * 13.6); }
.lvf-s01-burger[aria-expanded="true"] .lvf-s01-burger-l:nth-child(1) { transform: translateY(calc(var(--lvf-s01-u) * 5)) rotate(45deg); }
.lvf-s01-burger[aria-expanded="true"] .lvf-s01-burger-l:nth-child(3) { transform: translateY(calc(var(--lvf-s01-u) * -5)) rotate(-45deg); }
}
/* ---------------------------------------------- Gold-Variante (Elite-Seite) */
/* Aktiv ueber Body-Klasse lvf-gold (setzt das Plugin auf der Elite-Seite).
Referenz: Lvlup Elite Page.jpg Kopfbereich - Icon/Buttons/Countdown gold,
Nav-Hairline gold, Logo-Bild tauscht das Theme-JS. */
/* Verlauf statt Flaechenfarbe, gleiche Begruendung wie oben, Gold-Stopps aus
--lvf-grad-gold (bereits fuer .lvf-s01-offer-short so gemacht, hier
nachgezogen fuer Parität zwischen Mobil-Kurzform und Vollform). */
body.lvf-gold .lvf-s01-offer-hl {
background-image: linear-gradient(126deg, #ffbc54 0%, #ff9200 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
body.lvf-gold .lvf-s01-timer { color: #ffb43a; }
body.lvf-gold .lvf-s01-timer-hl {
background-image: linear-gradient(180deg, #ffbc54 0%, #ff9200 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
body.lvf-gold .lvf-s01-code-chip {
background: var(--lvf-grad-gold);
box-shadow:
0 0 0 0.88px rgba(255, 146, 0, 0.55),
inset 0 0.63px 10.4px #e8c25b,
6.8px 2.91px 10.68px rgba(0, 0, 0, 0.36),
0 0 0 1.51px rgba(0, 0, 0, 0.25),
0 0 0 3.43px rgba(0, 0, 0, 0.16);
}
body.lvf-gold .lvf-s01-copy {
box-shadow:
inset -0.78px -2.34px 9.83px #f1c252,
inset -0.78px -1.56px 4.53px #ffa400,
inset -0.78px -1.56px 4.53px #ffa400,
inset 3.12px 3.12px 3.9px #000000,
6.8px 2.91px 10.68px rgba(0, 0, 0, 0.36),
0 0 0 1.51px rgba(0, 0, 0, 0.25),
0 0 0 3.43px rgba(0, 0, 0, 0.16);
}
body.lvf-gold .lvf-s01-nav::before {
background: linear-gradient(90deg, rgba(244, 180, 53, 0) 0%, #f4b435 52%, rgba(238, 169, 49, 0) 100%);
}
body.lvf-gold .lvf-s01-ghost,
body.lvf-gold .lvf-s01-burger {
box-shadow:
inset -1.64px -4.92px 15.9px #f1c252,
inset -4.1px -3.28px 12.87px #ffa400,
inset -0.64px -1.28px 3.71px #ffa400,
inset 7.38px 5.74px 9.92px #000000,
5.57px 2.39px 8.75px rgba(0, 0, 0, 0.36),
0 0 0 1.24px rgba(0, 0, 0, 0.25),
0 0 0 2.81px rgba(0, 0, 0, 0.16);
}
body.lvf-gold .lvf-s01-cta {
background: var(--lvf-grad-gold);
box-shadow:
0 0 0 0.41px rgba(255, 146, 0, 0.55),
inset 0.26px 0.52px 14.43px #e8c25b,
5.57px 2.39px 8.75px rgba(0, 0, 0, 0.36),
0 0 0 1.24px rgba(0, 0, 0, 0.25),
0 0 0 2.81px rgba(0, 0, 0, 0.16);
}
body.lvf-gold .lvf-s01-offer-short {
background: linear-gradient(126deg, #ffbc54 0%, #ff9200 100%);
-webkit-background-clip: text;
background-clip: text;
}
body.lvf-gold .lvf-s01 :focus-visible { outline-color: #feedb6; }
/* Abnahme 06.08.: .lvf-page a { color: inherit } (0,1,1) schlug die Klassen-
regel (0,1,0) - CTA-Text war weiss. Element+Klasse stellt Dunkel sicher. */
a.lvf-s01-cta { color: #060606; }
/* ===========================================================
Desktop >= 1024: Logo auf Entwurfsgroesse
=========================================================== */
@media (min-width: 1024px) {
/* Dasselbe Grundproblem wie im Footer, aber mit eigenem Faktor - deshalb
getrennt gemessen. Die Datei lvlup-logo-nav.webp ist 780x120, die
Wortmarke darin nur x 6..603 und y 47..108. CSS skaliert die Datei, also
wird der Totrand mitskaliert und die Wortmarke bleibt zu klein.
Nachgemessen home-aus-vollbild.png gegen die Live-Aufnahme, beide 1760 breit:
Soll Wortmarke 205 px breit (x 126..330 in der Navileiste)
Ist Wortmarke 160 px breit, also 78 Prozent davon
Noetige Bildbreite: 205 * 780 / 598 = 267 px, davon 205 px Wortmarke.
Der Footer braucht 304 px, hier reichen 267 px - im Entwurf ist das Logo
in der Kopfleiste kleiner als im Footer-Markenband.
Anders als im Footer wird hier NUR die Breite geaendert, keine negativen
Raender und kein clip-path. Grund: die Regel .lvf-page .lvf-s01-logo-img
weiter oben in dieser Datei (Fund vom 13.08., vorher nur in
fixes-header.css Abschnitt B) korrigiert den Hochstand der Wortmarke
bereits mit transform: translateY(-14.583%), und zwar in Prozent der
Elementhoehe. Diese Korrektur waechst also von selbst mit und bleibt
richtig. Zweite Korrektur oben drauf hiesse doppelt verschoben. Es bleibt
ein waagerechter Rest von rund 2 px, weil der linke Totrand von 6 px
mitwaechst - unterhalb der Messgenauigkeit.
.lvf-page muss in den Selektor, weil shell.css mit ".lvf-page img"
(0,1,1) ein max-width: 100% setzt.
body:not(.lvf-gold) ist der wichtigste Teil der Regel. Auf der Elite-Seite
tauscht lvlup-theme.js das Logo gegen lvlup-logo-nav-gold.webp, und das
ist eine ANDERE Datei mit anderem Zuschnitt: 306 x 48 statt 780 x 120,
also fast randlos. Nachgemessen elite-aus-vollbild.png gegen die
Live-Aufnahme: Soll Wortmarke 206 px, Ist 199 px, Faktor 1,04 - die
Gold-Fassung stimmt bereits. Auf 267 px hochgezogen waere sie 255 px
breit und damit 24 Prozent zu gross. Deshalb bleibt Elite unangetastet. */
body:not(.lvf-gold) .lvf-page .lvf-s01-logo-img {
max-width: none;
width: 267px;
}
/* =========================================================
Kundenmeldung 11.08.2026: "das Icon neben LVLUP25 oben rechts"
Gemessen home-aus-vollbild.png gegen eine frische Live-Aufnahme,
beide 1760 breit, Kanten als Median der innersten Pixelreihe.
========================================================= */
/* 1) Reihenfolge der Innenschatten: Schwarz gehoert nach VORN.
CSS zeichnet den ZUERST genannten Schatten obenauf, im Entwurf liegt
die schwarze Lage ueber den blauen. Live stand sie als letzte Lage
darunter, deshalb leuchtete der blaue Schein auch an der Ober- und
der Linkskante durch: der Knopf hatte rundherum einen hellen Rahmen
statt nur unten und rechts wie im Entwurf. Genau das ist die
Kundenmeldung. Die Lagen selbst bleiben unveraendert, nur die
Reihenfolge dreht sich.
Kopierknopf oben Soll 9 Ist 67 jetzt 16
Kopierknopf links Soll 16 Ist 87 jetzt 21
Kopierknopf unten Soll 124 Ist 137 jetzt 137
Kopierknopf rechts Soll 115 Ist 124 jetzt 122
Spezifitaet 0-3-0 ist noetig: fixes-header.css setzt
".lvf-page .lvf-s01-copy" mit 0-2-0 und wird nach dem Theme geladen. */
.lvf-page .lvf-s01-code .lvf-s01-copy {
box-shadow:
inset 3.12px 3.12px 3.9px #000000,
inset -0.78px -2.34px 9.83px #52b8f1,
inset -0.78px -1.56px 4.53px #00a4ff,
inset -0.78px -1.56px 4.53px #00a4ff;
}
/* Elite-Seite, gleicher Fehler in Gold. 0-4-1 noetig, weil
fixes-header.css dort "body.lvf-gold .lvf-page .lvf-s01-copy" (0-3-1)
setzt. Gemessen elite-aus-vollbild.png gegen die Live-Aufnahme:
oben Soll 9 Ist 68 jetzt 16 links Soll 17 Ist 89 jetzt 22 */
body.lvf-gold .lvf-page .lvf-s01-code .lvf-s01-copy {
box-shadow:
inset 3.12px 3.12px 3.9px #000000,
inset -0.78px -2.34px 9.83px #f1c252,
inset -0.78px -1.56px 4.53px #ffa400,
inset -0.78px -1.56px 4.53px #ffa400;
}
/* Dieselbe Bauart, derselbe Fehler: die Pille "LIMITED TIME OFFER" und
der Knopf "Client Area". Die drei Aussenlagen bleiben unangetastet,
der Vergleich neben der Pille (x 364..378) zeigt Soll und Ist dort
auf 1 bis 2 Stufen gleich, es gibt also keinen harten Kasten.
Pille oben Soll 5 Ist 41 jetzt 9
Pille links Soll 10 Ist 69 jetzt 8
Client Area oben Soll 10 Ist 68 jetzt 14
Client Area links Soll 6 Ist 96 jetzt 11 */
.lvf-s01-pill {
box-shadow:
inset 3.12px 3.12px 3.9px #000000,
inset -0.78px -2.34px 9.83px #f15252,
inset -0.78px -1.56px 4.53px #ff0000,
inset -0.78px -1.56px 4.53px #ff0000,
6.8px 2.91px 10.68px rgba(0, 0, 0, 0.36),
0 0 0 1.51px rgba(0, 0, 0, 0.25),
0 0 0 3.43px rgba(0, 0, 0, 0.16);
}
.lvf-page .lvf-s01-ghost {
box-shadow:
inset 7.38px 5.74px 9.92px #000000,
inset -1.64px -4.92px 15.9px #52b8f1,
inset -4.1px -3.28px 12.87px #00a4ff,
inset -0.64px -1.28px 3.71px #00a4ff,
5.57px 2.39px 8.75px rgba(0, 0, 0, 0.36),
0 0 0 1.24px rgba(0, 0, 0, 0.25),
0 0 0 2.81px rgba(0, 0, 0, 0.16);
}
/* Gold-Fassung des Knopfes. 0-3-1 noetig gegen die eigene Regel
"body.lvf-gold .lvf-s01-ghost" (0-2-1) weiter oben in dieser Datei.
Elite gemessen: oben Soll 11 Ist 69 jetzt 14, links Soll 7 Ist 97 jetzt 11. */
body.lvf-gold .lvf-page .lvf-s01-ghost {
box-shadow:
inset 7.38px 5.74px 9.92px #000000,
inset -1.64px -4.92px 15.9px #f1c252,
inset -4.1px -3.28px 12.87px #ffa400,
inset -0.64px -1.28px 3.71px #ffa400,
5.57px 2.39px 8.75px rgba(0, 0, 0, 0.36),
0 0 0 1.24px rgba(0, 0, 0, 0.25),
0 0 0 2.81px rgba(0, 0, 0, 0.16);
}
/* 2) Das Kopier-Icon selbst war zu klein. Das SVG hat viewBox 12, die
bemalte Flaeche darin liegt aber nur zwischen 0,9 und 11,1, also
10,2 Einheiten. Bei 10 px Kasten sind das 8,5 px Tinte, der Entwurf
zeigt 10 px (Figma copy-Filled, Kasten x 961..971 im Knopf x 954..977).
Noetiger Kasten: 10 * 12 / 10,2 = 11,76 px.
Nachgemessen durch Differenzbild mit ausgeblendetem Icon: Tinte jetzt
10 x 10 px, Abstand zur linken Knopfkante 7 px wie im Entwurf.
Der Haken (.lvf-s01-copy-ok) waechst mit, sonst springt die Groesse
beim Kopieren. */
.lvf-s01-copy-ico,
.lvf-s01-copy-ok {
width: 11.76px;
height: 11.76px;
}
/* 3) Auf der Elite-Seite blieb das Icon blau. Die Verlaufsmarken stehen
als Praesentationsattribut im SVG, und die schlaegt jede CSS-Regel.
Gemessen elite-aus-vollbild.png, Zeile y 38 quer durch die Glyphe:
Soll (255,230,128) .. (255,181,24) .. (207,136,11)
Ist ( 98,188,240) .. ( 56,160,220)
Die Goldtoene sind die blauen mit getauschtem Rot- und Blauanteil,
#6ecaff wird #ffca6e, #0080ca wird #ca8000. Nachgemessen jetzt
(242,192,103) .. (229,172,76) .. (195,142,51). */
body.lvf-gold .lvf-s01-copy-ico stop:nth-child(1) { stop-color: #ffffff; }
body.lvf-gold .lvf-s01-copy-ico stop:nth-child(2) { stop-color: #ffca6e; }
body.lvf-gold .lvf-s01-copy-ico stop:nth-child(3) { stop-color: #ca8000; }
/* =========================================================
Zwei weitere Befunde derselben Messrunde, ausserhalb der Kundenmeldung
========================================================= */
/* 4) Banner und Navileiste sind im Entwurf blaustichig, live neutralgrau.
Figma legt ueber Schwarz und den Weissanteil eine dritte Fuellung:
einen waagerechten Verlauf in #00a2ff mit Blendmodus COLOR, Deckkraft
0,5 an den Raendern und 1,0 in der Mitte. COLOR behaelt die Helligkeit
und nimmt nur Farbton und Saettigung, aus (10,10,10) wird deshalb
(0,13,21). CSS kann den Blendmodus fuer eine einzelne Fuellung nicht
nachbauen, das Ergebnis ist aber eindeutig und wird direkt als Verlauf
gesetzt. Der Weissanteil von 4 bzw. 2 Prozent steckt in diesen Werten
schon drin, deshalb ersetzt der Verlauf den bisherigen.
Gemessen als Median ueber y 19..24 bzw. y 70..74, beide Mockup-Bauten
stimmen hier ueberein:
Banner Mitte Soll (0,13,21) Ist (10,10,10) jetzt (0,13,19)
Banner Rand Soll (4,12,15) Ist (10,10,10) jetzt (5,12,15)
Nav Mitte Soll (1, 6,10) Ist ( 5, 5, 5) jetzt (0, 7,10)
Nav Rand Soll (1, 6, 9) Ist ( 5, 5, 5) jetzt (2, 7, 9) */
.lvf-s01-banner {
background-image: linear-gradient(90deg, rgb(5, 12, 15) 0%, rgb(0, 13, 21) 50%, rgb(5, 12, 15) 100%);
}
.lvf-s01-nav {
background-image: linear-gradient(90deg, rgb(3, 6, 8) 0%, rgb(0, 7, 10) 50%, rgb(3, 6, 8) 100%);
}
/* 5) Der leuchtende Rand der Navileiste war rund viermal zu kraeftig.
Figma zeichnet ihn mit strokeWeight 0,104 px, live liegen 1 px mit
Deckkraft 0,55 an. Gemessen bei x 880, wo der Grund darueber dunkel
ist und nichts dazwischenfunkt:
Oberkante y 67 Soll (3,16,23) Ist (30,94,131) jetzt (6,26,37)
Unterkante y 121 Soll (7,27,38) Ist (30,94,131) jetzt (6,26,37)
Die beiden Mockup-Bauten sind sich hier nicht einig, der Schnipsel-Bau
liegt an der Oberkante mit (7,32,45) heller als der Vollbild-Bau.
0,12 trifft die Unterkante beider Bauten genau und laesst die Oberkante
eine Spur kraeftiger als der Vollbild-Bau, statt die Linie ganz
verschwinden zu lassen. */
.lvf-s01-nav::before { opacity: 0.12; }
}
/* ===========================================================================
Kopfbanner auf schmalen Schirmen, Stand 12.08.2026
ZURUECKGENOMMEN: die Untergrenzen per max() aus dem Vormittag.
Sie standen auf 9,5px / 10px / 10px / 24px fuer Pillentext, Chip,
Countdown und Kopierknopf. Begruendung damals: bei 390 px rechnet der
Mobilzweig 6,25 / 7,81 / 6,83 / 15,06 px, das sei unlesbar.
Warum sie weg mussten:
1. Es gibt einen Mobil-Entwurf des Kunden, figma/specs/s01-banner-nav-
mobile.txt, Frame 440 px. Er verlangt genau 7 / 9 / 8 px und 17x17 px.
Die alten calc-Werte 7.05u / 8.81u / 7.71u / 17u treffen ihn bei 440 px
und skalieren darunter massstabsgetreu. Die 6,25 px bei 390 px sind
also der Entwurf, keine Panne.
2. Die calc-Werte steigen im ganzen Mobilbereich nie ueber 7,05 px, also
hat jede Untergrenze bei JEDER Breite unter 768 px gewonnen, nicht nur
bei 390. Bei der Entwurfsbreite 440 px war der Pillentext dadurch
36 Prozent und der Kopierknopf 41 Prozent zu gross.
3. Sie waren die Ursache des Ueberlaufs bei 390 px. Der Entwurf hat bei
440 px keinen Millimeter Reserve: Angebotsgruppe 197 + Rinne 25 +
Code-Spalte 104 = 326 px, und 326 px ist genau der Innenraum des
Banners. Die Untergrenzen haben die Pille um 24 px und den Countdown
um 37 px verbreitert, macht 383 px Bedarf - der Rest lief hinten raus
und wurde von overflow: hidden abgeschnitten (bei 390 px fehlten die
Sekunden des Countdowns).
4. WCAG 2.5.8 misst die Trefferflaeche, nicht die Optik. Die lag bereits
bei rund 37 px, also ueber dem Mindestmass von 24 px. Es gab keinen
Verstoss, der die Vergroesserung erzwungen haette.
Was stattdessen gemacht wurde:
- Trefferflaeche des Kopierknopfes auf glatt 44 px, ueber ::after, ohne
die Optik anzufassen (siehe .lvf-s01-copy::after im Mobilzweig).
- Damit diese 44 px nicht am Rahmen abgeschnitten werden, clippt der
Banner unter 768 px nicht mehr (siehe .lvf-s01-banner im Mobilzweig).
OFFEN, gehoert dem Kunden, nicht der Umsetzung: bei 390 px sind die
Entwurfsgroessen rechnerisch 6,25 px (Pillentext), 7,81 px (Chip) und
6,83 px (Countdown). Das ist klein. Es ist aber der Entwurf, und der
Entwurf ist fuer 440 px gezeichnet. Eine Anhebung waere eine
Design-Entscheidung und keine Reparatur, deshalb steht sie hier nicht.
=========================================================================== */
/* == s11 (theme) == */
/* ===========================================================
s11 - Footer
Desktop-Frame 1760, Karte x=76..1684 (1608 breit), Band y=10330..11248
Mobile-Frame 440, Karte x=30..410 (380 breit)
=========================================================== */
.lvf-s11 {
position: relative;
isolation: isolate;
/* clip NACH dem ::before-Blur: schneidet den -90px-Ueberstand ab, ohne dass
die Seite hoeher wird oder die weissen Rinnen-Spitzen grau werden */
overflow: clip;
/* unten 0 statt 40: Pruefauftrag 13.08.2026 Befund 3. Unter 1024px war die
Karte nicht buendig mit dem Seitenende (40 px Luecke hier, 48 px im
768er-Zweig darunter) und alle vier Ecken der Karte gerundet, obwohl der
Kunde genau das schon einmal reklamiert hatte - nur der 1024er-Zweig
wurde damals behoben (padding dort bereits "48px 0 0", siehe unten).
Oben unveraendert, nur unten auf 0 gezogen wie im Desktop-Zweig. */
padding: 32px 0 0;
font-family: var(--lvf-font-display);
background: #02080d;
}
/* weiche Hintergrund-Glows (ersetzen die grossen Star-Vektoren);
Befund r3 Desktop 4: deutlich kraeftiger, Soll-Randstreifen RGB(13,131,187) */
.lvf-s11::before {
content: "";
position: absolute;
/* Unten -90px überstehend, damit der blur(46px) an der Seitenunterkante
nicht gegen Leere sampelt. Oben beginnt die Ebene exakt an der echten
Footerkante, damit die vertikale Maske dort wirklich bei Alpha 0 startet. */
inset: 0 -22% -90px;
z-index: -1;
pointer-events: none;
background:
radial-gradient(62% 56% at 16% 60%, rgba(0, 150, 235, 0.5) 0%, rgba(0, 150, 235, 0) 70%),
radial-gradient(62% 56% at 86% 40%, rgba(0, 150, 235, 0.42) 0%, rgba(0, 150, 235, 0) 70%),
/* Soll-Profil 06.08.2026: die SEITENRINNEN neben der Karte leuchten nach
unten zunehmend (x8: y10700 2,117,178 -> y11080 74,208,250 -> unten
235,248,255 weiss).
ENTFERNT 11.08.2026, Kundenbeanstandung "der Footer fliegt oben":
hier stand ein blauer Wash "im Uebergang vom CTA-Panel"
radial-gradient(70% 380px at 50% 0%, rgba(0,160,240,0.9), transparent).
Den kennt der Entwurf nicht. Gemessen 4 bis 40 px ueber der
Kartenoberkante, Mitte x760/x1200: Soll 0,0,0 - Ist war 3,105,157.
Weil .lvf-s11 overflow:clip hat, wurde der Verlauf an der Sektionskante
hart abgeschnitten und malte genau die 48 px ueber der Karte blau aus.
Genau dieses Band laesst die Karte aufgesetzt wirken. Befund 3.1.
ACHTUNG Geometrie: ::before hat inset 0 -22% -90px, ist also 2534px
breit. Seitenrand x0 = 15.3%, x1760 = 84.7% - nicht 0%/100%! Breite
Saeulen, weil der blur(46px) schmale Kerne stark verduennt. */
radial-gradient(180px 950px at 15.3% 100%, rgba(245, 251, 255, 1) 0%, rgba(140, 215, 252, 0.98) 24%, rgba(25, 170, 240, 0.9) 50%, rgba(2, 135, 205, 0.6) 76%, rgba(2, 120, 190, 0) 100%),
radial-gradient(180px 950px at 84.7% 100%, rgba(245, 251, 255, 1) 0%, rgba(140, 215, 252, 0.98) 24%, rgba(25, 170, 240, 0.9) 50%, rgba(2, 135, 205, 0.6) 76%, rgba(2, 120, 190, 0) 100%),
radial-gradient(150% 420px at 50% 98%, rgba(55, 145, 195, 0.92) 0%, rgba(38, 120, 170, 0.6) 45%, rgba(14, 78, 120, 0.25) 74%, rgba(14, 78, 120, 0) 96%);
filter: blur(46px);
/* Der Footer ist ein eigener Seitenblock. Die Beleuchtung muss an seiner
Oberkante weich aus dem Seitenhintergrund einlaufen. */
-webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.12) 36px, rgba(0, 0, 0, 0.52) 92px, #000000 180px, #000000 100%);
mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.12) 36px, rgba(0, 0, 0, 0.52) 92px, #000000 180px, #000000 100%);
}
.lvf-s11-shell {
max-width: 1668px; /* Abnahme: 1608er Karte + 2x30 Padding = 76px Rand wie im Design */
margin-inline: auto;
padding-inline: clamp(16px, 6.8vw, 30px);
}
/* -----------------------------------------------------------
Karte: mobil ein Grid, damit der Newsletter-Block VOR der
schwarzen Karte steht (Mobile-Spec) und der Kartenhintergrund
erst ab Zeile 2 gezeichnet wird.
----------------------------------------------------------- */
.lvf-s11-card {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto auto auto auto auto;
}
.lvf-s11-main,
.lvf-s11-colleft,
.lvf-s11-colright { display: contents; }
.lvf-s11-cardbg {
grid-column: 1;
grid-row: 2 / 7;
z-index: 0;
border: 1px solid transparent;
/* Nur oben gerundet, unten eckig: Pruefauftrag 13.08.2026 Befund 3, dieselbe
Kundenvorgabe wie im >=1024-Zweig weiter unten ("border-radius: 45px 45px
0 0"), hier nur mit dem fuer <1024 geltenden Radius 37px statt 45px. */
border-radius: 37px 37px 0 0;
background:
linear-gradient(rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.95)) padding-box,
linear-gradient(90deg, rgba(52, 176, 248, 0) 0%, #35aef4 52%, rgba(49, 169, 238, 0) 100%) border-box;
box-shadow: 5px 19px 19px rgba(0, 0, 0, 0.25);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
/* zwei sehr schwache Deko-Lichter innerhalb der Karte */
.lvf-s11-cardbg::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background:
radial-gradient(30% 26% at 72% 34%, rgba(140, 213, 255, 0.07) 0%, rgba(140, 213, 255, 0) 70%),
radial-gradient(30% 26% at 8% 68%, rgba(140, 213, 255, 0.06) 0%, rgba(140, 213, 255, 0) 70%);
}
.lvf-s11-cardbg { position: relative; }
.lvf-s11-newsletter,
.lvf-s11-strip,
.lvf-s11-links,
.lvf-s11-info,
.lvf-s11-legal,
.lvf-s11-bottom {
position: relative;
z-index: 1;
grid-column: 1;
}
.lvf-s11-newsletter { grid-row: 1; margin: 0 0 64px; }
.lvf-s11-strip { grid-row: 2; margin: 22px 21px 0; }
.lvf-s11-links { grid-row: 3; margin: 41px 21px 0; }
.lvf-s11-info { grid-row: 4; margin: 33px 21px 0; }
.lvf-s11-legal { grid-row: 5; margin: 8px 21px 0; }
.lvf-s11-bottom { grid-row: 6; margin: 9px 21px 21px; }
/* -----------------------------------------------------------
Brand-Strip (leuchtendes Blau-Band)
----------------------------------------------------------- */
.lvf-s11-strip {
border-radius: 19px;
overflow: hidden;
background-color: #eaf6fd;
background-image:
radial-gradient(90% 80% at 22% 100%, rgba(143, 205, 239, 0.85) 0%, rgba(143, 205, 239, 0) 62%),
radial-gradient(70% 60% at 96% 90%, rgba(152, 208, 238, 0.7) 0%, rgba(152, 208, 238, 0) 66%),
linear-gradient(180deg, #ffffff 0%, #f4fbff 45%, #c3e5f7 82%, #a3d6f1 100%);
box-shadow: 6px 26px 26px rgba(0, 0, 0, 0.25);
}
.lvf-s11-strip-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 29px;
padding: 23px 24px;
}
/* Logo-Pille (Mobile: Bild ca. 240px breit in schwarzer Pille ca. 284x65, Radius 16) */
.lvf-s11-logo {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 22px;
border-radius: 16px;
background: #000;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.lvf-s11-logo:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.lvf-s11-logo:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lvf-s11-logo-img { display: block; width: 240px; height: auto; }
/* Tagline: im Design blaues Verlaufs-Text auf dem Band */
.lvf-s11-tagline {
max-width: 282px;
margin: 0;
font-size: 13px;
font-weight: 425;
line-height: 17px;
letter-spacing: 0.39px;
text-align: center;
background: linear-gradient(126deg, #6ecaff 0%, #0080ca 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* auf dem hellen Mobile-Band braucht der Verlauf mehr Tiefe */
@media (max-width: 1199.98px) {
.lvf-s11-tagline {
background: none;
-webkit-background-clip: border-box;
background-clip: border-box;
color: #073c5c;
}
}
/* Social-Buttons */
.lvf-s11-social {
display: flex;
align-items: center;
gap: 11px;
}
.lvf-s11-social a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 8px;
background: #000;
color: #f2faff;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
transition: color 0.18s ease, transform 0.18s ease;
}
/* Touch-Ziel auf 44px vergroessern, ohne das Layout zu veraendern */
.lvf-s11-social a::after {
content: "";
position: absolute;
inset: -2px;
}
.lvf-s11-social a:hover { color: #b7e6ff; transform: translateY(-1px); }
.lvf-s11-social a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lvf-s11-social svg { width: 17px; height: 17px; fill: currentColor; }
.lvf-s11-social .lvf-s11-ico-stroke {
fill: none;
stroke: currentColor;
stroke-width: 1.9;
}
.lvf-s11-social .lvf-s11-ico-dot { fill: currentColor; stroke: none; }
/* -----------------------------------------------------------
Linkspalten
----------------------------------------------------------- */
.lvf-s11-links {
display: grid;
grid-template-columns: repeat(2, auto);
justify-content: center;
column-gap: 23px;
row-gap: 15px;
}
/* doppelte Klasse: gewinnt gegen ".lvf-s11-nav { display: flex }" weiter unten */
.lvf-s11-nav.lvf-s11-nav--other { display: none; }
.lvf-s11-nav {
display: flex;
flex-direction: column;
gap: 1px;
text-align: center;
}
.lvf-s11-nav ul { display: flex; flex-direction: column; gap: 1px; }
.lvf-s11-colhead {
display: flex;
align-items: center;
justify-content: center;
min-height: 33px;
padding-block: 7px;
font-size: 13px;
font-weight: 500;
line-height: 18px;
letter-spacing: 0.25px;
white-space: nowrap;
background: linear-gradient(126deg, #6ecaff 0%, #0080ca 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lvf-s11-nav a,
.lvf-s11-note {
display: flex;
align-items: center;
justify-content: center;
min-height: 33px;
font-size: 13px;
font-weight: 400;
line-height: 18px;
white-space: nowrap;
color: var(--lvf-text-mid);
transition: color 0.18s ease;
}
.lvf-s11-nav a:hover { color: #fff; }
.lvf-s11-nav a:focus-visible { outline: 2px solid var(--lvf-blue); outline-offset: 2px; border-radius: 4px; }
.lvf-s11-note { color: var(--lvf-text-mid); cursor: default; }
/* -----------------------------------------------------------
Firmendaten / Rechtstexte
----------------------------------------------------------- */
.lvf-s11-info,
.lvf-s11-legal {
border-radius: 16px;
background: rgba(255, 255, 255, 0.02);
overflow: hidden;
}
.lvf-s11-info { padding: 21px 31px; }
.lvf-s11-legal { padding: 21px 31px; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.lvf-s11-info p {
font-size: 10px;
font-weight: 400;
line-height: 13px;
letter-spacing: 0.28px;
color: rgba(255, 255, 255, 0.7);
}
.lvf-s11-info p + p { margin-top: 13px; }
.lvf-s11-info a,
.lvf-s11-blau {
background: linear-gradient(126deg, #6ecaff 0%, #0080ca 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lvf-s11-info a:hover { background: none; color: var(--lvf-blue-light); }
.lvf-s11-legal p {
font-size: 9px;
font-weight: 400;
line-height: 13px;
letter-spacing: 0.21px;
color: rgba(255, 255, 255, 0.7);
}
.lvf-s11-legal p + p { margin-top: 0; }
.lvf-s11-legal p.lvf-s11-legal-gap { margin-top: 13px; }
/* Zwei Klassen statt einer: ".lvf-s11-legal p" oben steht auf 0-1-1 und hat
sonst "color: transparent" hier ueberstimmt (0-1-0). Der Verlauf kam damit
an (background-clip:text wirkte), aber die Schrift blieb blass-weiss statt
blau, weil color/-webkit-text-fill-color am Ende bei rgba(255,255,255,0.7)
landeten. Gemessen an "Affiliate and Liability Disclaimer": vorher blasses
Weiss wie der Fliesstext darunter, nachher der Verlauf sichtbar. */
.lvf-s11-legal .lvf-s11-legal-head {
background: linear-gradient(126deg, #6ecaff 0%, #0080ca 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lvf-s11-legal a {
color: var(--lvf-blue-light);
text-decoration: underline;
text-underline-offset: 2px;
word-break: break-word;
/* Trefferhöhe des Partner-Links auf 44 px. Gemessen mit
werkzeuge/klickziele-messen.js an build-rules/preview.html, Zeiger "maus":
390 px Treffer 224 x 15 768 px Treffer 289,5 x 15
1023 px Treffer 190,5 x 15 1440 px Treffer 241,5 x 12
Der Zeilenkasten misst also nur 15 px (Schrift 11 px) bzw. 12 px auf dem
Desktop (Schrift 9 px), egal wie die Zeilenhöhe eingestellt ist: ein
Inline-Kasten ist so hoch wie die Schriftmetrik, nicht wie line-height.
Warum kein ::after mit negativem inset wie sonst im Projekt: der Link
bricht über zwei Zeilen um. Ein absolut gesetztes Overlay spannt dann
EINEN Kasten über beide Zeilen samt dem Leerraum rechts und links davon -
bei 1023 px wären das 848 px Breite quer durch den Fließtext.
Senkrechtes padding an einem Inline-Element ändert dagegen weder
Zeilenhöhe noch Umbruch (es wirkt nur auf Anstrich und Trefferbox) und
wächst pro Zeilenfragment einzeln mit. Sichtbar ändert sich nichts, weil
der Link keinen Hintergrund und keinen Rahmen hat und die Unterstreichung
an der Schrift hängt, nicht am Kasten.
z-index gehört zwingend dazu, padding allein reicht nicht. Inline-Inhalt
wird in Dokumentreihenfolge gezeichnet: der Text HINTER dem Link liegt
also über dessen Polsterung, und Chrome liefert dort beim Treffertest den
Absatz statt den Link. Mit padding allein wurden aus 15 px nur 29,5 px
statt 44. Erst position/z-index hebt den Link über die Nachbarzeilen.
Der Wert muss GANZZAHLIG sein. Mit den rechnerisch genau passenden
14,5 px saß die Oberkante des Inline-Kastens auf einem halben Pixel, und
Chrome rückte den ganzen Glyphenlauf der URL um 1 px nach unten:
1279 abweichende Pixel im Differenzbild, während 13, 14, 15 und 16 px
bitgleich rendern (Gegenprobe je zweimal gerendert, Rauschen 0 Pixel).
15 px ergeben 45,5 px Trefferhöhe - lieber einen halben Pixel zu viel
als ein verschobenes Schriftbild.
Preis dieser Lösung: die Trefferbox greift rund 14 px in die Textzeile
darüber und darunter. Im Rechtsblock steht genau EIN Link, es kann also
kein anderes Ziel verdeckt werden - die Prosa im Streifen über und unter
der URL wird aber mit anklickbar, und wer dort mit der Maus Text markiert,
greift in die URL-Zeile. Das ist der bewusst gezahlte Preis für 44 px.
0-2-1 nötig: shell.css setzt unter "@media (pointer: coarse)" für genau
diesen Selektor padding-block: 12px mit ebenfalls 0-2-1. Gleiche
Spezifität, aber das Fragment wird später geladen - deshalb gewinnt diese
Regel auf Touch-Geräten wie auf Mausgeräten. */
}
.lvf-page .lvf-s11-legal a {
position: relative;
z-index: 1;
padding-block: 16px;
}
/* -----------------------------------------------------------
Newsletter
----------------------------------------------------------- */
.lvf-s11-newsletter {
position: relative;
border-radius: 19px;
overflow: hidden;
/* Befund r3 Mobil 13: unterer Kartenrand heller, Soll RGB(126,168,189),
damit der dunkle Hinweistext lesbar bleibt */
background-color: #12303f;
background-image:
radial-gradient(110% 72% at 0% 102%, rgba(160, 214, 246, 0.95) 0%, rgba(160, 214, 246, 0) 70%),
radial-gradient(105% 74% at 100% 102%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0) 70%),
/* Soll-Profil 06.08.2026: der Panel-Boden ist QUER durchgehend weiss
(y11080-11140: 228-249 ueber die volle Breite), nicht nur in den Ecken */
radial-gradient(85% 52% at 50% 108%, rgba(255, 255, 255, 0.98) 22%, rgba(230, 244, 253, 0.8) 48%, rgba(230, 244, 253, 0) 76%),
linear-gradient(180deg, #05080c 0%, #0a1a26 52%, #7fa8c0 100%);
box-shadow: 6px 26px 26px rgba(0, 0, 0, 0.25);
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
}
.lvf-s11-newsletter::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(140, 213, 255, 0.16);
}
.lvf-s11-nl-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 21px;
padding: 36px 30px;
}
.lvf-s11-nl-discord {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
flex: 0 0 auto;
border-radius: 15px;
/* Saum-Verlauf statt --lvf-grad-blue plus inset-Schatten, 11.08.2026.
Nachgereicht: der Knopf stand nicht auf der Liste der 13 Stellen.
Gemessen im Fuss von home, Knopf 75 x 75 px, Median je Zeile auf zwei
textfreien Streifen (die Kanten des schwarzen Umschlags bleiben aussen
vor), Soll home-aus-vollbild.png:
x 1057..1069 vorher 11,01 nachher 4,08
x 1111..1123 vorher 8,42 nachher 1,98
ganze Knopfflaeche 18,62 -> 15,38
Gegenprobe im Fuss von evaluation: 11,06 -> 4,12 und 8,45 -> 1,88.
ACHTUNG: mit 75 px (mobil 60) liegt der Knopf ueber dem Feld, fuer das
der Verlauf gerechnet ist (18 bis 53 px, sigma/Hoehe 0,166 bis 0,226);
hier sind es 0,113. Er trifft trotzdem besser als der inset-Schatten,
am staerksten an der Oberkante (Soll 254, vorher 245, nachher 255).
Die Farbe des Umschlags bleibt unangetastet: sie sitzt am