/* ============================================================================================ Venocix Hero-System: gemeinsame Bausteine der Marketing-Seiten. Geladen auf allen Lagom-2-Seiten über includes/hooks/vnx_lagom2_theme.php (nach vnx-site.css). Präfix .vx- Hell/Dunkel (Tim, Abnahme 08.11.2026): Kopfleiste, Hero und alle .vx-dark/.vx-dark2-Abschnitte folgen dem Modus des Nutzers (html.lagom-dark-mode). Hell: weißer Hero mit schwarzer Typo, Grün als Akzent (Kennzahlen-Marken, blassgrüne Statement-Abschnitte), Karten mit Rand und Schatten. Dunkel: schwarzer Hero wie bisher. Farben kommen aus Variablen (unten), Seiten-CSS (z. B. Blickfang-Karten) nutzt dieselben: --vx-bg Fläche --vx-fg Überschriften/Werte --vx-fg2 Fließtext --vx-fg3 leise Texte --vx-ln Linien --vx-card / --vx-card-ln / --vx-shadow Karten --vx-link / --vx-link-ul Links Bausteine: 2 .vx-dark / .vx-dark2 Statement- bzw. Band-Abschnitte (hell: blassgrün bzw. hellgrau, dunkel: schwarz/dunkelgrau) 3 .vx-hero Hero: große Typo links, Blickfang rechts (Handy: darunter). Groß nur auf der Startseite. 4 .vx-figs Kennzahlen-Band (Startseite) 5 .vx-light / .vx-tint helle Abschnitte für den Rhythmus (weiß / hellgrau) 6 .vx-reco „Empfohlen“: einzige Karte mit grüner Kante 7 .vx-hero--kompakt kompakter Hero der Unterseiten (KVM, Dedicated, Webhosting, Reseller, Partner, Gameserver) 8 aktiver Hauptmenüpunkt grün (hell #5a7d0a, dunkel #a3d133) 9 .vx-figline Kennzahlen-Zeile unten im kompakten Hero .vx-only-hell / .vx-only-dunkel Inhalte nur in einem Modus (z. B. helles und dunkles Kundencenter-Bild) Markup des kompakten Hero:
h1, p.vx-hero-sub, .m-ctas …
WertBeschriftung
… (4×)
CI-Grün #a3d133 mit schwarzer Schrift für die Hauptaktion; als Text auf Weiß nur #5a7d0a (Kontrast). ============================================================================================ */ /* Variablen: hell (Standard) ─────────────────────────────────────────────────────────────── */ .vx-dark,.vx-dark2{--vx-fg:#0e1113;--vx-fg2:#3f474e;--vx-fg3:#5f676e;--vx-ln:#dfe3e8;--vx-card:#ffffff;--vx-card-ln:#d9dee4; --vx-shadow:0 1px 2px rgba(15,20,25,.06),0 18px 48px rgba(15,20,25,.12);--vx-link:#1f2328;--vx-link-ul:#9aa1a8; --vx-btn2-ln:#bfc5cc;--vx-btn2-fg:#0e1113;--vx-accent:#a3d133;--vx-accent-t:#5a7d0a;--vx-shot-shadow:0 -2px 12px rgba(15,20,25,.06)} .vx-dark{--vx-bg:#f5f9ea} .vx-dark2{--vx-bg:#f3f4f6} .vx-hero.vx-dark{--vx-bg:#ffffff} /* dunkel ─────────────────────────────────────────────────────────────────────────────────── */ html.lagom-dark-mode .vx-dark,html.lagom-dark-mode .vx-dark2{--vx-fg:#ffffff;--vx-fg2:#cccccc;--vx-fg3:#999999;--vx-ln:#333333; --vx-card:#242424;--vx-card-ln:#333333;--vx-shadow:0 30px 80px rgba(0,0,0,.45);--vx-link:#e8eaec;--vx-link-ul:#5a6066; --vx-btn2-ln:#4a5056;--vx-btn2-fg:#ffffff;--vx-accent-t:#a3d133;--vx-shot-shadow:0 -10px 60px rgba(0,0,0,.5)} /* Dunkel in Lagoms Tönen (Tim, Abnahme): Hero = Seitenfläche #1e1e1e wie live, Statement-Abschnitte #161616 wie die Kopfleiste, Bänder #191919, Karten #242424, Linien #333 – kein blaustichiges Schwarz, das gegen Leiste und Seite absticht. */ html.lagom-dark-mode .vx-dark{--vx-bg:#161616} html.lagom-dark-mode .vx-hero.vx-dark{--vx-bg:#1e1e1e} html.lagom-dark-mode .vx-dark2{--vx-bg:#191919} .vx-only-dunkel{display:none!important} html.lagom-dark-mode .vx-only-dunkel{display:block!important} html.lagom-dark-mode .vx-only-hell{display:none!important} /* 1 ── Kopfleiste: folgt überall dem Modus (Tim, Abnahme). Hero hell: Linie unter der Leiste trennt beide Weißflächen; dunkel: Leiste #161616 über dem schwarzen Hero mit feiner Linie. */ html.lagom-dark-mode .vx-hero{border-top:1px solid #2a2a2a} /* 2 ── Abschnitte und Links ──────────────────────────────────────────────────────────────── */ .vx-dark,.vx-dark2{background:var(--vx-bg);color:var(--vx-fg)} .vnx-home .vx-dark h1,.vnx-home .vx-dark h2,.vnx-home .vx-dark h3, .vnx-home .vx-dark2 h1,.vnx-home .vx-dark2 h2,.vnx-home .vx-dark2 h3{color:var(--vx-fg)} .vx-dark .h-lead,.vx-dark2 .h-lead{color:var(--vx-fg2)} /* Linkregeln: vnx-site.css setzt hell html:not(.lagom-dark-mode) .vnx-home p a:not(.h-btn){color:#1f2328!important}. Gleiche Präzedenz plus Abschnittsklasse, Farbe aus der Variable. */ html .vnx-home .vx-dark p a:not(.h-btn),html .vnx-home .vx-dark2 p a:not(.h-btn), html:not(.lagom-dark-mode) .vnx-home .vx-dark p a:not(.h-btn),html:not(.lagom-dark-mode) .vnx-home .vx-dark2 p a:not(.h-btn), html:not(.lagom-dark-mode) .vnx-home .vx-dark .m-crumb a,html .vnx-home .vx-dark .m-crumb a{color:var(--vx-link)!important;text-decoration:underline!important;text-underline-offset:3px;text-decoration-color:var(--vx-link-ul)!important} /* Zweitknopf: umrandet (Grün bleibt der Hauptaktion vorbehalten) */ html .vnx-home .vx-dark a.h-btn-sec,html .vnx-home .vx-dark a.h-btn-sec:hover, html:not(.lagom-dark-mode) .vnx-home .vx-dark a.h-btn-sec,html:not(.lagom-dark-mode) .vnx-home .vx-dark .h-btn-sec{background:transparent!important;color:var(--vx-btn2-fg)!important;border-color:var(--vx-btn2-ln)!important} /* 3 ── Hero ──────────────────────────────────────────────────────────────────────────────── */ .vx-hero{padding:72px 0 0;overflow:hidden;position:relative} .vx-hero.vx-dark{border-bottom:1px solid var(--vx-ln)} .vx-hero .vx-hero-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:end} .vx-hero.is-center .vx-hero-g{align-items:center} .vx-hero-t{padding-bottom:72px} .vx-hero.is-center .vx-hero-t{padding-bottom:0} .vx-hero .m-crumb{color:var(--vx-fg3);margin:0 0 20px} .vnx-home .vx-hero h1{margin:0;font-size:clamp(40px,4.6vw,68px);line-height:.98;font-weight:900;letter-spacing:-2px;color:var(--vx-fg);max-width:13ch;text-wrap:balance} .vx-hero-sub{margin:22px 0 0;font-size:18px;line-height:1.55;color:var(--vx-fg2);max-width:34em} .vx-hero .m-ctas{margin-top:30px} .vx-facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin:26px 0 0;padding:0;list-style:none;font-size:14px;color:var(--vx-fg2)} .vx-facts li{display:flex;align-items:center;gap:8px} .vx-facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--vx-fg3)} /* Blickfang: echtes Bild/Video, rechts bis an den Rand angeschnitten */ .vx-shot{align-self:end;min-width:0;margin-right:0!important} .vx-shot img,.vx-shot video{display:block;width:100%;height:auto;border:1px solid var(--vx-card-ln);border-bottom:0;border-radius:12px 12px 0 0;box-shadow:var(--vx-shot-shadow);background:var(--vx-card)} /* Blickfang als Karte (z. B. Konfigurator): steht frei im Hero */ .vx-card{align-self:center;margin-bottom:72px;background:var(--vx-card);border:1px solid var(--vx-card-ln);border-radius:14px;color:var(--vx-fg);box-shadow:var(--vx-shadow)} /* 4 ── Kennzahlen-Band ───────────────────────────────────────────────────────────────────── */ .vx-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px;border-top:1px solid var(--vx-ln)} .vx-figs.is-4{grid-template-columns:repeat(4,minmax(0,1fr))} .vx-figs>div{padding:30px 28px 30px 0;border-bottom:1px solid var(--vx-ln)} .vx-figs>div+div{padding-left:28px;border-left:1px solid var(--vx-ln)} .vx-figs:not(.is-4)>div:nth-child(3n+1),.vx-figs.is-4>div:nth-child(4n+1){padding-left:0;border-left:0} .vx-figs strong{display:block;font-size:clamp(38px,4vw,56px);line-height:1;font-weight:900;letter-spacing:-1.5px;color:var(--vx-fg);white-space:nowrap} .vx-figs b{display:block;margin-top:12px;font-size:17px;color:var(--vx-fg)} .vx-figs p{margin:6px 0 0;font-size:15px;color:var(--vx-fg2)} .vx-claim{margin:28px 0 0;font-size:clamp(24px,2.4vw,34px);line-height:1.2;font-weight:900;letter-spacing:-.6px;max-width:28ch;color:var(--vx-fg)} .vx-claim span{color:var(--vx-fg3)} /* 5 ── Helle Abschnitte für den Rhythmus ────────────────────────────────────────────────── */ .vx-light{background:#fff} .vx-tint{background:#f3f4f6} html.lagom-dark-mode .vx-light{background:#1e1e1e} html.lagom-dark-mode .vx-tint{background:#191919} /* Handy ─────────────────────────────────────────────────────────────────────────────────── */ @media (max-width:900px){ .vx-hero{padding-top:40px} .vx-hero .vx-hero-g{grid-template-columns:1fr;gap:32px} .vx-hero-t{padding-bottom:0} .vnx-home .vx-hero h1{letter-spacing:-1.2px} .vx-hero-sub{font-size:16px} .vx-card{margin-bottom:40px} .vx-figs,.vx-figs.is-4{grid-template-columns:1fr 1fr} .vx-figs>div,.vx-figs>div+div{padding:22px 12px 22px 0;border-left:0} .vx-figs>div:nth-child(2n){padding-left:12px;border-left:1px solid var(--vx-ln)} .vx-figs:not(.is-4)>div:nth-child(3n+1),.vx-figs.is-4>div:nth-child(4n+1){padding-left:0} .vx-figs>div:nth-child(2n+1){padding-left:0;border-left:0} .vx-figs strong{font-size:34px;white-space:normal} } /* Konfigurator als Blickfang (Startseite): Token im Formular aus den Variablen, kein grüner Zierstrich */ .vx-dark .m-cfg{--h-line:var(--vx-ln);--h-card:var(--vx-card);--vnx-text:var(--vx-fg);--vnx-text-secondary:var(--vx-fg2);--vnx-text-muted:var(--vx-fg3); background:var(--vx-card)!important;border:1px solid var(--vx-card-ln)!important;box-shadow:var(--vx-shadow)!important;color:var(--vx-fg);padding:30px} .vx-dark .m-cfg h2{color:var(--vx-fg)} .vx-dark .m-cfg .m-steps-b button{color:var(--vx-fg2)} .vx-dark .m-cfg .m-steps-b button[aria-pressed="true"]{border-color:var(--vx-fg);color:var(--vx-fg)} /* Belege im Hero (Trustpilot) */ .vx-dark .m-proof b{color:var(--vx-fg)} .vx-dark .m-proof li>span{color:var(--vx-fg2)} /* Token in den Abschnitten: vorhandene Bausteine (m-dl, m-kc, m-who, h-card …) übernehmen die Farben ohne Einzelregeln */ .vx-dark,.vx-dark2{--vnx-text:var(--vx-fg);--vnx-text-secondary:var(--vx-fg2);--vnx-text-muted:var(--vx-fg3);--vnx-text-faint:var(--vx-fg3);--h-line:var(--vx-ln);--h-line-2:var(--vx-ln);--h-card:var(--vx-card);--h-band:var(--vx-card);--vnx-border:var(--vx-ln)} .vx-dark .h-card,.vx-dark2 .h-card{background:var(--vx-card);border-color:var(--vx-card-ln);color:var(--vx-fg)} .vnx-home .vx-dark dd,.vnx-home .vx-dark2 dd,.vnx-home .vx-dark dt,.vnx-home .vx-dark2 dt{color:inherit} .vx-dark .m-dl dt,.vx-dark2 .m-dl dt,.vx-dark .m-kc-l dt,.vx-dark2 .m-kc-l dt{color:var(--vx-fg3)} .vx-dark .m-dl dd,.vx-dark2 .m-dl dd,.vx-dark .m-kc-l dd,.vx-dark2 .m-kc-l dd{color:var(--vx-fg)} .vx-dark .m-v,.vx-dark2 .m-v{border-color:var(--vx-ln)} /* Vier Werte nebeneinander: kleinere Ziffern, damit „400 Mbit/s“ nicht in die Nachbarspalte läuft */ .vx-figs.is-4 strong{font-size:clamp(30px,3vw,44px);letter-spacing:-1px} /* Links in Listen (z. B. Trustpilot im Hero) */ html .vnx-home .vx-dark li a:not(.h-btn),html:not(.lagom-dark-mode) .vnx-home .vx-dark li a:not(.h-btn), html .vnx-home .vx-dark2 small a,html:not(.lagom-dark-mode) .vnx-home .vx-dark2 small a{color:var(--vx-link)!important;text-decoration:underline!important;text-underline-offset:3px;text-decoration-color:var(--vx-link-ul)!important} /* Preisanker und Sprungnavigation im Hero (KVM-Seite) */ .vx-dark .m-anchor b{color:var(--vx-fg)} .vx-dark .m-anchor span{color:var(--vx-fg2)} html .vnx-home .vx-dark .m-jump a,html:not(.lagom-dark-mode) .vnx-home .vx-dark .m-jump a{color:var(--vx-fg2)!important;border-color:var(--vx-ln)!important;background:transparent!important} html .vnx-home .vx-dark .m-jump a:hover{color:var(--vx-fg)!important} /* 6 ── Kein grüner Zierstrich an Karten (Tim, 08.11.2026). Ausnahme: die als „Empfohlen“ markierte Karte (.vx-reco), z. B. das erste Webhosting-Paket, behält die grüne Kante als Hervorhebung. */ .vnx-home .m-kvm,.vnx-home .m-cfg,.vnx-home .m-loc,.vnx-home .m-pk>article{box-shadow:none} .vnx-home .m-pk>article.vx-reco,.vnx-home .vx-reco{box-shadow:inset 0 3px 0 #a3d133} /* 7 ── Kompakter Hero (Tim, 08.11.2026): Unterseiten (KVM, Dedicated, Webhosting, Reseller, Partner, Gameserver) ca. 2/3 der Höhe, damit Preise und Pakete früher sichtbar sind. Groß bleibt nur die Startseite. Gleiche Bausteine, nur Maße. */ .vx-hero.vx-hero--kompakt{padding-top:44px} .vx-hero--kompakt .vx-hero-g{gap:48px} .vx-hero--kompakt .vx-hero-t{padding-bottom:44px} .vnx-home .vx-hero--kompakt h1{font-size:clamp(34px,3.4vw,50px);letter-spacing:-1.4px;max-width:16ch} .vx-hero--kompakt .vx-hero-sub{margin-top:14px;font-size:16px} .vx-hero--kompakt .m-ctas{margin-top:20px} .vx-hero--kompakt .m-anchor{margin:16px 0 0} .vx-hero--kompakt .m-jump{margin-top:18px} .vx-hero--kompakt .vx-shot img,.vx-hero--kompakt .vx-shot video{max-height:380px;object-fit:cover;object-position:left top} @media (max-width:900px){ .vx-hero.vx-hero--kompakt{padding-top:28px} .vx-hero--kompakt .vx-hero-t{padding-bottom:0} .vnx-home .vx-hero--kompakt h1{font-size:32px} .vx-hero--kompakt .vx-shot img{max-height:240px} } /* Kompakt, Feinschliff: Sprungnavigation einzeilig und kleiner, Text breiter (2 Zeilen), Bild niedriger */ .vx-hero.vx-hero--kompakt{padding-top:36px} .vx-hero--kompakt .vx-hero-t{padding-bottom:36px} .vx-hero--kompakt .vx-hero-sub{max-width:44em;line-height:1.5} .vx-hero--kompakt .m-anchor b{font-size:36px} .vx-hero--kompakt .m-jump{display:flex;flex-wrap:wrap;gap:6px} html .vnx-home .vx-hero--kompakt .m-jump a{padding:5px 11px!important;font-size:13px!important;min-height:0!important;line-height:1.3} .vx-hero--kompakt .vx-shot img,.vx-hero--kompakt .vx-shot video{max-height:330px} @media (max-width:900px){ .vx-hero--kompakt .m-jump{display:none} .vx-hero--kompakt .vx-hero-g{gap:24px} .vx-hero--kompakt .vx-shot img{max-height:200px} } /* vnx-site.css setzt .m-hero{padding:72px 0 56px} und je nach Breite .m-hero h1{font-size:64px!important}: hier gezielt übersteuern */ .vx-hero.vx-hero--kompakt{padding:32px 0 0!important} .vnx-home .vx-hero--kompakt h1{font-size:clamp(34px,3.4vw,48px)!important;max-width:none!important;line-height:1.02} @media (max-width:900px){.vx-hero.vx-hero--kompakt{padding:24px 0 0!important}.vnx-home .vx-hero--kompakt h1{font-size:32px!important}} /* 8 ── Aktiver Hauptmenüpunkt (Tim, 08.11.2026): Schrift grün statt grüner Unterstrich. Dunkelmodus: #a3d133 (10,1:1 auf #161616). Heller Modus: #a3d133 auf Weiß wäre nur 1,8:1, daher #5a7d0a (4,8:1, AA). */ .vnx-top .vnx-top-ni.is-active::after{display:none!important} .vnx-top a.vnx-top-ni.is-active,.vnx-top .vnx-top-ni.is-active, .vnx-top a.vnx-top-ni.is-active:hover,.vnx-top .vnx-top-ni.is-active:hover{color:#5a7d0a!important;font-weight:700} body.darkmode .vnx-top a.vnx-top-ni.is-active,body.darkmode .vnx-top .vnx-top-ni.is-active, body.darkmode .vnx-top .vnx-top-ni.is-active:hover{color:#a3d133!important} /* 9 ── Kennzahlen-Zeile im kompakten Hero (Tim, 08.11.2026): Auf den Unterseiten kein eigenes Band mehr, sondern eine schmale Zeile unten im Hero (4 Werte, Zahl 28–30 px, eine Zeile Beschriftung, ca. 80–100 px hoch). Die Startseite behält das große Band (.vx-figs). Ziel 1440×900: Hero inkl. Zeile ≤ ca. 520 px. Grüne Marke über jedem Wert. */ .vx-figline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--vx-ln);margin-top:0;padding:16px 0 20px;position:relative;z-index:1;background:var(--vx-bg)} .vx-figline>div{padding:0 20px;border-left:1px solid var(--vx-ln);min-width:0} .vx-figline>div:first-child{padding-left:0;border-left:0} .vx-figline strong{display:block;font-size:clamp(24px,2vw,30px);line-height:1.05;font-weight:900;letter-spacing:-.6px;color:var(--vx-fg);white-space:nowrap} .vx-figline span{display:block;margin-top:4px;font-size:13px;color:var(--vx-fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Kompakt mit Zeile: weniger Luft unter dem Text, Bild max. 280 px, Sprungnavigation einzeilig */ .vx-hero--kompakt .vx-hero-t{padding-bottom:24px} .vx-hero--kompakt .vx-shot img,.vx-hero--kompakt .vx-shot video{max-height:280px} .vx-hero--kompakt .m-jump{flex-wrap:nowrap;overflow:hidden} html .vnx-home .vx-hero--kompakt .m-jump a{padding:4px 9px!important;font-size:12.5px!important;white-space:nowrap} @media (max-width:900px){ .vx-figline{grid-template-columns:1fr 1fr;gap:12px 0;padding:14px 0 18px} .vx-figline>div:nth-child(3){padding-left:0;border-left:0} .vx-figline strong{font-size:22px} .vx-figline span{font-size:12px} .vx-hero--kompakt .vx-shot img{max-height:180px} } @media (max-width:900px){ .vx-hero--kompakt .vx-hero-sub{font-size:15px;margin-top:10px} .vx-hero--kompakt .m-ctas{margin-top:16px} .vx-hero--kompakt .vx-hero-g{gap:18px} .vx-hero--kompakt .vx-shot img{max-height:150px} .vx-figline{padding:12px 0 14px;gap:10px 0} .vx-figline strong{font-size:20px} } .vx-hero--kompakt .m-jump{gap:4px} html .vnx-home .vx-hero--kompakt .m-jump a{padding:4px 8px!important;font-size:12px!important} /* Gameserver im kompakten Hero: eigene gs-hero-Maße übersteuern, Kurzfakten entfallen (stehen in der Kennzahlen-Zeile) */ .gs-hero.vx-hero--kompakt .gs-hero-txt{padding-bottom:24px} .gs-hero.vx-hero--kompakt .gs-hero-shot img{max-height:280px;object-fit:cover;object-position:left top} .gs-hero.vx-hero--kompakt .sub{margin-top:14px;font-size:16px} .gs-hero.vx-hero--kompakt .m-ctas{margin-top:20px} .gs-hero.vx-hero--kompakt .gs-facts{display:none} @media (max-width:900px){.gs-hero.vx-hero--kompakt .gs-hero-shot img{max-height:150px}.gs-hero.vx-hero--kompakt .sub{font-size:15px}} .gs-hero .h-wrap:has(>.vx-figline){display:block} /* 10 ── Kennzahlen-Band unter dem großen Hero (Startseite): schließt ohne Linie an den Hero an */ .vx-figs-band .h-wrap{padding-top:8px;padding-bottom:48px} .vx-figs-band .vx-figs{margin-top:0;border-top:0} /* 11 ── Sprungnavigation im kompakten Hero: nie abschneiden. Passt sie nicht in eine Zeile (schmale Fenster, lange Produktnamen), bricht sie um, statt den letzten Eintrag zu kappen. Auf der KVM-Seite entfällt „Rootserver flex“, dorthin führt schon die Hauptaktion. */ .vx-hero--kompakt .m-jump{flex-wrap:wrap;overflow:visible} /* 12 ── Eigene Seiten mit Lagom-Rahmen (kvm-server.php, gameserver.php …): Lagoms .main-body polstert oben und unten (40–48 px). Steht ein vx-hero am Anfang, entstand zwischen Leiste und Hero ein Streifen, unten einer vor dem Fuß. Die Startseite (Seitenvariante ohne .main-body) ist nicht betroffen. */ /* Gilt auch für helle Seitenköpfe (.m-hero, z. B. Store-Seiten und /domain/pricing): dort stand der Streifen weiß über dem grauen Kopf. */ .main-body:has(.h-body > .vx-hero:first-child),.main-body:has(.h-body > .m-hero:first-child){padding-top:0!important;padding-bottom:0!important} /* 13 ── Fuß: externe Links mit Pfeil-Symbol wie im Menü (Support), Hinweis für Screenreader im Link */ .m-foot a svg.vnx-foot-ext{display:inline-block;width:12px;height:12px;margin-left:6px;vertical-align:-1px;opacity:.7} /* 14 ── Breiten (Tim, Abnahme): Inhalt beginnt genau unter dem Logo und endet unter dem Ende der Kopfleiste, auf allen Seiten. Ein Rand für alles: --vx-gut wie das Polster der Kopfleiste (vnx-site.css: 28 px, ≤ 1099 px 20 px, ≤ 899 px 16 px), ab 1200 px Inhalt 1144 px mittig (Leiste: (100% − 1200)/2 + 28). Gilt für .h-wrap und für Lagoms Container im Inhalt (.main-body/.main-header > .container), der sonst 40 px Rand bei voller Breite hatte (Inhalt 80–1360 bei 1440 px). Seiten mit .h-body (Redesign) haben ihre Breite schon in .h-wrap, dort bleibt der Container voll breit. */ :root{--vx-gut:28px} @media (max-width:1099px){:root{--vx-gut:20px}} @media (max-width:899px){:root{--vx-gut:16px}} html .h-wrap{padding-left:var(--vx-gut);padding-right:var(--vx-gut)} html .app-main .main-body:not(:has(.h-body)) > .container, html .app-main .main-header > .container{width:auto!important;max-width:1200px!important;margin-left:auto!important;margin-right:auto!important;padding-left:var(--vx-gut)!important;padding-right:var(--vx-gut)!important} /* 15 ── Keine Navigations-Sidebar im Warenkorb (Tim, Abnahme): Lagoms Kategorien-Spalte (Domain registrieren/umziehen, Store-Gruppen, Zusatzleistungen, Verlängerungen) und ihre Handy-Fassung entfallen, der Inhalt nimmt die volle Breite. Die Bestellübersicht (.main-sidebar-lg bzw. -summary: Warenkorb, Kasse, Konfigurator, Verlängerungen) bleibt. Knowledgebase: skipMainSidebar über includes/hooks/vnx_kopfleiste.php. */ body.page-order .main-sidebar:not(.main-sidebar-lg):not(.main-sidebar-summary), body.page-order .categories-collapsed{display:none!important} body.page-order .main-grid > .main-sidebar:not(.main-sidebar-lg):not(.main-sidebar-summary) + .main-content, body.page-order .main-grid > .main-content:only-child{width:100%!important;max-width:none!important;flex:1 1 100%!important} /* Anmelden, Registrieren, Passwort (vnx-auth.css): Bildfläche und Formularspalte bleiben randlos, aber der Satz links beginnt unter dem Logo und die Karte endet unter dem Ende der Kopfleiste (Rand wie die Leiste, Bezug Seitenbreite). */ @media (min-width:901px){ .app-main:has(> .vnx-auth){container-type:inline-size} .vnx-auth.main-body{--vx-auth-r:max(var(--vx-gut),calc((100cqw - 1200px)/2 + 28px))} html .vnx-auth.main-body{grid-template-columns:minmax(0,1fr) calc(var(--vx-auth-r) + 520px)} html .vnx-auth-register.main-body{grid-template-columns:minmax(0,1fr) calc(var(--vx-auth-r) + 720px)} html .vnx-auth-art{padding-left:var(--vx-auth-r)} html .vnx-auth-main{padding-right:var(--vx-auth-r)} html .vnx-auth-card,html .vnx-auth-alt{margin-right:0} } @media (min-width:901px) and (max-width:1200px){ html .vnx-auth-register.main-body{grid-template-columns:minmax(0,1fr) calc(var(--vx-auth-r) + 600px)} } /* 16 ── Prüfbefunde 09.11.2026 ───────────────────────────────────────────────────────────────────────────────────── Grün nur noch an Hauptaktion, aktivem Menüpunkt und „Empfohlen“: keine grüne Oberkante an den Prozessschritten. */ html .vnx-home .m-flow li{border-top-color:var(--h-line)!important} /* Kopfleiste: Dropdown-Panel im Dunkelmodus in Lagoms Kartenton */ html.lagom-dark-mode .vnx-top .vnx-top-panel,body.darkmode .vnx-top .vnx-top-panel{background:#242424;border-color:#333} /* Handy-Menü: aktiver Bereich wie am Desktop grün (hell #5a7d0a, dunkel #a3d133), ohne Balken */ .vnx-sheet .vnx-sheet-i.is-active,.vnx-sheet a.vnx-sheet-h-link.is-active{color:#5a7d0a!important;font-weight:700;box-shadow:none} html.lagom-dark-mode .vnx-sheet .vnx-sheet-i.is-active,html.lagom-dark-mode .vnx-sheet a.vnx-sheet-h-link.is-active, body.darkmode .vnx-sheet .vnx-sheet-i.is-active,body.darkmode .vnx-sheet a.vnx-sheet-h-link.is-active{color:#a3d133!important} /* Leiser Text: #6b7178 auf #f3f4f6 waren 4,48:1, #646a71 ergibt 4,9:1 (hell; dunkel setzt .darkmode eigene Werte) */ html:not(.lagom-dark-mode){--vnx-text-muted:#646a71} /* Lagoms Suchkasten (Knowledgebase, Domain registrieren): statt Blauschwarz die Palette, hell hellgrau mit Rand, dunkel #242424 */ html .search-box-secondary{background:#f3f4f6!important;border:1px solid #e2e5ea;border-radius:var(--ui-block-border-radius,12px); --secondary-block-title-color:#1f2328;--secondary-block-subtitle-color:#3f474e;--secondary-block-text-color:#3f474e;--secondary-block-text-faded-color:#646a71; --secondary-block-input-bg:#fff;--secondary-block-input-border:#d9dee4;--secondary-block-input-color:#1f2328;--secondary-block-input-placeholder-color:#646a71; --secondary-block-input-icon-color:#646a71;--secondary-block-link-color:#1f2328;--text-secondary-primary-color:#5a7d0a;color:#1f2328} html.lagom-dark-mode .search-box-secondary{background:#242424!important;border-color:#333; --secondary-block-title-color:#fff;--secondary-block-subtitle-color:#ccc;--secondary-block-text-color:#ccc;--secondary-block-text-faded-color:#999; --secondary-block-input-bg:#1e1e1e;--secondary-block-input-border:#333;--secondary-block-input-color:#eee;--secondary-block-input-placeholder-color:#999; --secondary-block-input-icon-color:#999;--secondary-block-link-color:#eee;--text-secondary-primary-color:#a3d133;color:#eee} /* Helle Seitenköpfe (Store, Domainpreise, Kontakt, Vertragsseiten): h1 wie der kompakte Hero statt 64 px/700 */ .vnx-home .m-hero.m-phero:not(.vx-hero) h1{font-size:clamp(34px,3.4vw,48px)!important;font-weight:900!important;letter-spacing:-1.4px;line-height:1.02} @media (max-width:900px){.vnx-home .m-hero.m-phero:not(.vx-hero) h1{font-size:32px!important}} /* Rechtliche Seiten (impressum.tpl u. a.): eigener .container im Inhalt rückte 40 px ein */ html .app-main .main-content > .container{width:auto!important;max-width:none!important;padding-left:0!important;padding-right:0!important} /* Kundencenter: Seitenleisten-Titel bündig mit der Logo-Kante (Lagom zieht ihn über ein leeres Icon 8 px nach links) */ .panel-sidebar .panel-title>i{margin-left:0!important} /* Kundencenter: grüne Großflächen als neutrale Karte, Grün nur am Knopf. Lagoms Sidebar-Hook (core/hooks/sidebar.php) vergibt je nach Kasten panel-summary panel-summary-{Farbe} (unbezahlte Rechnungen, Guthaben, Sammelzahlung, Rechnung, Up-/Downgrade) bzw. panel-sidebar-{Farbe} panel-register („Eine neue Domain registrieren“), die Farbe aus „sidebarBoxStyle“. Überschreibt Audit B1 (vnx-theme.css: schwarze Schrift auf Grün). */ html .panel-sidebar:is(.panel-sidebar-primary,.panel-summary,.panel-register){background:var(--ui-block-bg,#fff)!important;border:1px solid var(--vnx-border,#e2e5ea)!important;color:var(--vnx-text)!important; --primary-block-text-color:var(--vnx-text-secondary);--primary-block-text-faded-color:var(--vnx-text-secondary);--primary-block-title-color:var(--vnx-text); --primary-block-total-font-color:var(--vnx-text);--primary-block-subtitle-color:var(--vnx-text-secondary);--primary-block-link-color:var(--vnx-text);--primary-block-divider-color:var(--vnx-border)} html .panel-sidebar:is(.panel-sidebar-primary,.panel-summary,.panel-register) :is(h1,h2,h3,h4,h5,h6,p,span,label,a,small,b,strong,div,.price,.price-amount){color:var(--vnx-text)!important} html .panel-sidebar:is(.panel-sidebar-primary,.panel-summary,.panel-register) .btn:not(.btn-outline){background:#a3d133!important;border-color:#a3d133!important;color:#000!important} html .panel-sidebar:is(.panel-sidebar-primary,.panel-summary,.panel-register) .btn:not(.btn-outline) *{color:#000!important} html.lagom-dark-mode .panel-sidebar:is(.panel-sidebar-primary,.panel-summary,.panel-register){background:#242424!important;border-color:#333!important} /* Kundencenter: Statusfarben mit genug Kontrast (Tickets: Farbe aus --status-color der Ticketstatus) */ html.lagom-dark-mode .status-refunded,html.lagom-dark-mode .status-refunded .textblack{color:#f0884a!important} html.lagom-dark-mode .status-cancelled{color:#a6a6a6!important} .status[style*="--status-color:#888888"]{--status-color:#6b6b6b!important} html.lagom-dark-mode .status[style*="--status-color:#888888"]{--status-color:#a6a6a6!important} .status[style*="--status-color:#779500"]{--status-color:#5c7300!important} html.lagom-dark-mode .status[style*="--status-color:#779500"]{--status-color:#93b81a!important}