/* =========================
THEME / VARS
========================= */
:root{
/* Kanten / Breite */
--dock-margin: 170px; /* Abstand links/rechts der Dock-Navbar */
--dock-inner-pad: 24px; /* Innenabstand Topbar & Dock */
--dock-gap-top: -25px; /* Abstand Dock zur Topbar */
--dock-max: 1440px; /* optionaler Max-Wert (wird von calc unten übersteuert) */
/* Farben */
--hdr-bg:#0c0f14;
--dock-bg:#191e27;
--dock-border:#191d26;
--text:#e3e8f4;
--muted:#8b94a9;
--hover:#1f2633;
--red:#008cff;
--red2:#008cff;
--blue:#7a86ff;
}
/* =========================
HEADER / BACKDROP
========================= */
.site-header{
background: radial-gradient(transparent 1px, var(--hdr-bg) 1px), var(--hdr-bg);
background-size: 8px 8px, auto;
padding:14px 0 42px; /* oben Luft + unten Platz für Dock */
}
/* =========================
TOPBAR
========================= */
.topbar{ padding:6px 0 18px; }
.topbar__inner{
max-width:none !important;
width:calc(100% - (var(--dock-margin)*2)) !important;
margin:0 auto !important;
padding:0 var(--dock-inner-pad) !important;
display:flex; align-items:center; justify-content:space-between;
}
.topbar__left{ display:flex; align-items:center; gap:18px; }
.topbar__logo{ height:46px; width:auto; display:block; }
/* Online pill */
.online{ display:flex; align-items:center; gap:10px; }
.online .ping{ width:22px; height:22px; border-radius:50%;
background: radial-gradient(circle at 50% 50%, #1aff67 30%, #0ee04b 30% 60%, #0a8a34 60%); position:relative; }
.online .ping::after{ content:""; position:absolute; inset:-6px; border-radius:50%;
border:2px solid rgba(26,255,103,.25); animation:ping 1.8s linear infinite; }
@keyframes ping{ 0%{transform:scale(.9); opacity:.9} 100%{transform:scale(1.4); opacity:0} }
.online .count{ color:#1aff67; font-weight:800; }
.online .label{ color:#a7b3c9; font-size:.72rem; letter-spacing:.12em; }
/* Topbar Right (Currency + Cart + Login) */
.topbar__right{ display:flex; align-items:center; gap:14px; }
.btn{ border-radius:12px; font-weight:800; letter-spacing:.2px; padding:.6rem 1rem; border:0; }
.btn-cta-red{
color:#fff; background:linear-gradient(180deg,var(--red),#008cff);
border:1px solid rgba(0,0,0,.25);
box-shadow:0 12px 22px rgba(0, 109, 255,.30);
transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-cta-red:hover{ transform:translateY(-2px); filter:brightness(1.03); box-shadow:0 16px 28px rgba(0, 109, 255,.38); }
.btn-cta-red.alt{ padding:.6rem 1.1rem; }
.currency-selector.lg.top{ position:relative; }
.currency-selector.lg.top select{
appearance:none; background:transparent; color:#cfd6ff; font-weight:700;
border:1px solid rgba(122,134,255,.35); padding:.55rem 2.25rem .55rem .8rem; border-radius:12px; cursor:pointer;
}
.currency-selector.lg.top::after{ content:"▾"; position:absolute; right:.65rem; top:50%; transform:translateY(-50%); color:#cfd6ff; pointer-events:none; }
/* Cart (Topbar) – roter CTA-Stil */
.cart-btn.top{
position:relative; display:flex; align-items:center; gap:6px;
background:linear-gradient(180deg,#008cff,#008cff); color:#fff;
padding:.6rem 1.2rem; border-radius:8px; font-weight:bold; font-size:.9rem;
box-shadow:0 0 15px rgba(0, 109, 255,.6); transition:all .3s ease;
}
.cart-btn.top:hover{ box-shadow:0 0 25px rgba(0, 109, 255,.9); transform:translateY(-2px); }
.cart-btn.top .icon{ width:18px; height:18px; }
.cart-btn.top .count{
position:absolute; top:-6px; right:-6px; min-width:18px; height:18px;
background:#fff; color:#008cff; border-radius:999px; font-weight:800; font-size:.7rem;
display:flex; align-items:center; justify-content:center; padding:0 .25rem;
}
/* =========================
DOCK-NAVBAR
========================= */
/* Dock-Container (bündig zur Topbar) */
.navbar.component{ background:transparent; border:0; padding:0; }
.navbar.component > .container{
max-width:none !important;
width:calc(100% - (var(--dock-margin)*2)) !important;
margin:var(--dock-gap-top) auto 0 !important;
padding-left:var(--dock-inner-pad) !important;
padding-right:var(--dock-inner-pad) !important;
background:var(--dock-bg);
border:1px solid rgba(255,255,255,.05);
border-radius:16px;
box-shadow:0 14px 28px rgba(0,0,0,.35);
position:relative;
}
/* Innenhöhe/„größerer“ Dock */
.navbar.component .container.py-2{ padding-top:1.05rem!important; padding-bottom:1.05rem!important; }
/* Brand */
.navbar.component .navbar-brand{
color:var(--text); display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.2px;
}
.navbar.component .navbar-brand img{ height:28px; width:auto; }
/* Tabs links */
.navbar.component .navbar-nav.me-auto{ gap:.3rem; }
.navbar.component .navbar-nav.me-auto .nav-item{ position:relative; display:flex; align-items:center; }
.navbar.component .navbar-nav.me-auto .nav-link,
.navbar.component .nav-with-icon{
display:flex; align-items:center; gap:.55rem;
color:#cfd6e4; padding:.55rem .9rem; border-radius:10px;
transition: color .15s ease, background .15s ease, text-shadow .2s ease, filter .2s ease;
}
.navbar.component .navbar-nav.me-auto .nav-link:hover,
.navbar.component .nav-with-icon:hover,
.navbar.component .nav-with-icon:focus,
.navbar.component .nav-with-icon.active{
background:#1f2633; color:#fff; text-shadow:0 0 8px currentColor;
}
/* Trenner */
.navbar.component .navbar-nav.me-auto .nav-item + .nav-item::before{
content:""; position:absolute; left:-.25rem; top:50%; transform:translateY(-50%);
width:1px; height:18px; background:var(--dock-border);
}
/* Icons in Links */
.navbar.component .nav-with-icon .nav-icon,
.navbar.component .navbar-nav.me-auto .nav-link .icon,
.navbar.component .navbar-nav.me-auto .nav-link svg{
width:18px; height:18px; color:inherit; flex:0 0 18px; transition:filter .2s ease;
}
.navbar.component .nav-with-icon:hover .nav-icon,
.navbar.component .nav-with-icon.active .nav-icon{ filter: drop-shadow(0 0 8px currentColor); }
/* Farbliche Presets je Tab (currentColor steuert Text+Icon) */
.navbar.component .nav-store { color:#008cff; }
.navbar.component .nav-status { color:#b8c2d9; }
.navbar.component .nav-faq { color:#e6ecff; }
.navbar.component .nav-forums { color:#c7d0e6; }
/* Standardfarbe wenn nicht hover/aktiv */
.navbar.component .nav-with-icon:not(:hover):not(.active){ color:#cfd6e4; }
.navbar.component .nav-with-icon.nav-store .nav-icon{ color:#008cff; }
.navbar.component .nav-with-icon.nav-status .nav-icon{ color:#9aa7c3; }
.navbar.component .nav-with-icon.nav-faq .nav-icon{ color:#e6ecff; }
.navbar.component .nav-with-icon.nav-forums .nav-icon{ color:#aebad2; }
/* Aktiver Tab fett + optional Icon rot + Glow */
.navbar.component .nav-with-icon.active,
.navbar.component .navbar-nav .nav-link.active,
.navbar.component .navbar-nav .nav-link[aria-current="page"]{ font-weight:800; }
.navbar.component .nav-with-icon.active .nav-icon,
.navbar.component .navbar-nav .nav-link.active .nav-icon,
.navbar.component .navbar-nav .nav-link[aria-current="page"] .nav-icon{
color:#008cff; filter: drop-shadow(0 0 8px #008cff);
}
/* Rechte Gruppe (falls genutzt) */
.navbar.component .navbar-nav.gap-3{ align-items:center; gap:12px!important; }
.navbar.component .btn.btn-outline-primary{
color:#cfd6ff; background:rgba(122,134,255,.08); border:1px solid rgba(122,134,255,.35);
}
.navbar.component .btn.btn-outline-primary:hover{
background:rgba(122,134,255,.12); box-shadow:0 0 0 3px rgba(122,134,255,.22); color:#fff;
}
/* Unten rechts alte Currency/Cart ausblenden (Topbar übernimmt am Desktop) */
.navbar.component .currency-selector.lg:not(.top),
.navbar.component .nav-item.cart.d-none.d-lg-block{ display:none !important; }
/* =========================
MOVING UNDERLINE (dünn + starker Glow)
========================= */
.navbar.component .container::before{ display:none; } /* fester Balken aus */
.navbar.component .dock-underline{
position:absolute; top:-9px; left:0;
height:1px; border-radius:999px;
width:var(--w,48px);
--scale:.65;
transform:translateX(var(--x,0px)) scaleX(var(--scale));
transform-origin:center;
background:linear-gradient(90deg,var(--red),var(--red2));
box-shadow:0 0 14px rgb(0, 109, 255), 0 6px 14px rgba(0,0,0,.25);
transition:
transform .28s cubic-bezier(.2,.8,.2,1),
width .28s cubic-bezier(.2,.8,.2,1),
box-shadow .2s ease,
opacity .2s ease;
pointer-events:none; opacity:.95;
}
.navbar.component .dock-underline.is-hot{
box-shadow:0 0 18px rgba(0, 109, 255,.75), 0 8px 18px rgba(0,0,0,.28);
}
/* =========================
TOGGLER / MOBILE
========================= */
.navbar.component .navbar-toggler{
border:0; padding:.35rem .5rem; background:var(--hover); border-radius:10px;
}
.navbar.component .navbar-toggler:focus{ box-shadow:none; }
.navbar.component .navbar-toggler-icon{
background-image:none; width:24px; height:2px; background:#cfd6e4; display:inline-block; border-radius:2px; position:relative;
}
.navbar.component .navbar-toggler-icon::before,
.navbar.component .navbar-toggler-icon::after{
content:""; position:absolute; left:0; right:0; height:2px; background:#cfd6e4; border-radius:2px;
}
.navbar.component .navbar-toggler-icon::before{ top:-6px; }
.navbar.component .navbar-toggler-icon::after{ top:6px; }
/* =========================
RESPONSIVE
========================= */
@media (max-width:1400px){ :root{ --dock-margin:120px; } }
@media (max-width:1200px){ :root{ --dock-margin:72px; } }
@media (max-width:992px){
:root{ --dock-margin:16px; }
.topbar__right{ gap:10px; }
.btn-cta-red{ padding:.55rem .9rem; }
.currency-selector.lg.top select{ padding:.5rem 2.1rem .5rem .7rem; }
.cart-btn.top{ padding:.5rem .9rem; }
.navbar.component > .container{ border-radius:12px; }
.navbar.component .navbar-collapse{
background:#141922; border-top:1px solid var(--dock-border);
margin-top:.6rem; padding:.75rem; border-radius:12px;
}
.navbar.component .navbar-nav.me-auto .nav-link{ width:100%; }
}
/* Focus tidy */
.navbar.component .btn:focus{ box-shadow:none; }
/* -------------------- MOBILE FIXES -------------------- */
/* ab iPhone/kleine Phones: Buttons kleiner, weniger Glow, sauberer Wrap */
@media (max-width: 576px){
/* Topbar: gleicher Rand wie Dock und Platz nach oben/unten */
:root{
--dock-margin: 16px; /* links/rechts */
--dock-inner-pad: 14px; /* Innenabstand */
--dock-gap-top: 6px; /* Dock etwas Abstand */
}
.topbar__inner{
gap: 10px;
}
/* Logo + Online etwas kleiner */
.topbar__logo{ height: 36px; }
.online .ping{ width: 18px; height: 18px; }
.online .count{ font-weight: 700; }
.online .label{ font-size: .66rem; letter-spacing: .1em; }
/* Right side: Buttons kompakter, keine fetten Glows */
.topbar__right{ gap: 10px; }
.btn-cta-red{
padding: .48rem .8rem;
font-size: .88rem;
border-radius: 10px;
box-shadow: 0 6px 14px rgba(0, 109, 255,.28);
}
/* Cart (Topbar) kleiner + Badge nicht über den Rand hängen */
.cart-btn.top{
padding: .48rem .72rem;
font-size: .86rem;
border-radius: 10px;
box-shadow: 0 6px 14px rgba(0, 109, 255,.45);
gap: 6px;
}
.cart-btn.top .icon{ width: 16px; height: 16px; }
.cart-btn.top .count{
top: -5px; right: -5px;
min-width: 16px; height: 16px; font-size: .65rem;
}
/* Currency-Kapsel kompakter */
.currency-selector.lg.top select{
padding: .46rem 1.8rem .46rem .6rem;
font-size: .9rem;
border-radius: 10px;
}
.currency-selector.lg.top::after{ right: .5rem; }
/* Dock-Navbar: Container Höhe/Radius etwas runter, Schatten leichter */
.navbar.component > .container{
border-radius: 14px;
box-shadow: 0 10px 22px rgba(0,0,0,.32);
}
.navbar.component .container.py-2{
padding-top: .8rem !important;
padding-bottom: .8rem !important;
}
/* Toggler und mobiler Cart: einheitliche Touch-Größe (44px) */
.navbar.component .navbar-toggler{
width: 44px; height: 44px; padding: 0; border-radius: 12px;
display: grid; place-items: center;
}
.navbar.component .navbar-toggler-icon{
width: 20px; height: 2px;
}
.navbar.component .navbar-toggler-icon::before{ top: -6px; }
.navbar.component .navbar-toggler-icon::after { top: 6px; }
/* mobiler Cart (falls sichtbar) – gleiche Größe wie Toggler */
.navbar.component .cart.d-md-none .btn{
width: 44px; height: 44px; padding: 0; border-radius: 12px;
background: rgba(122,134,255,.08);
border: 1px solid rgba(122,134,255,.35);
}
.navbar.component .cart.d-md-none .icon{ width: 18px; height: 18px; }
.navbar.component .cart.d-md-none .count{
top: -5px; right: -5px; min-width: 16px; height: 16px; font-size: .65rem;
}
/* Navlinks im Collapse: gut klickbar, aber nicht wuchtig */
.navbar.component .navbar-collapse{
padding: .6rem .6rem .8rem;
border-radius: 12px;
}
.navbar.component .navbar-nav.me-auto .nav-link{
padding: .6rem .75rem;
border-radius: 10px;
font-size: .98rem;
}
/* Dünne Underline bleibt sichtbar, sitzt etwas höher */
.navbar.component .dock-underline{
top: -7px;
height: 1px;
box-shadow: 0 0 12px rgb(0, 109, 255 / .95), 0 4px 12px rgba(0,0,0,.22);
}
}
/* Tablets quer/kleinere Laptops – leichte Reduktion, aber weniger streng */
@media (min-width: 577px) and (max-width: 768px){
:root{ --dock-margin: 24px; --dock-inner-pad: 18px; --dock-gap-top: 6px; }
.btn-cta-red{ padding: .5rem .9rem; font-size: .92rem; }
.cart-btn.top{ padding: .5rem .85rem; }
.currency-selector.lg.top select{ padding: .5rem 2rem .5rem .7rem; }
}
/*------------------------------------------- NAVBAR -------------------------------------------------------*/
/*------------------------------------------- HERO -------------------------------------------------------*/
/* =========================
HERO (1:1 wie Referenz)
========================= */
:root{
/* wie weit das Hero-Background BEREITS ÜBER der Dock-Navbar beginnen soll */
--hero-overlap: 120px; /* anpassen: 100–160 je nach Dock-Höhe */
--hero-min-h: 640px; /* Höhe des markierten Bereichs */
--hero-pad-bottom: 80px; /* Platz bis zu den Cards darunter */
--dock-margin: 170px; /* kommt bereits von oben – gleiche Kanten */
--hero-text-max: 760px; /* max Breite des Textblocks links */
--hero-red: #008cff;
}
/* Full-bleed Background mit Overlay, beginnt schon über der Navbar */
.hero{
position: relative;
/* dein Liquid liefert das background-image inline -> hier nur Verhalten: */
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
/* Bild soll bereits HINTER der Dock erscheinen */
margin-top: calc(var(--hero-overlap) * -1);
padding-top: calc(140px + var(--hero-overlap));
padding-bottom: var(--hero-pad-bottom);
min-height: var(--hero-min-h);
}
/* dunkles Overlay + leichter links->rechts Verlauf (wie Referenz) */
.hero::after{
content:"";
position:absolute; inset:0;
background:
linear-gradient(90deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.55) 38%, rgba(0,0,0,.35) 62%, rgba(0,0,0,.20) 100%),
radial-gradient(1200px 480px at 0% 0%, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 70%);
pointer-events:none;
}
/* gleiche linke/rechte Kanten wie Topbar/Dock */
.hero > .container{
width: calc(100% - (var(--dock-margin)*2));
margin: 0 auto;
position: relative; z-index: 1; /* über Overlay */
display: grid;
grid-template-columns: 1.05fr .95fr; /* Text links / Bild rechts */
gap: 32px;
align-items: end;
}
/* TEXTBLOCK links */
.hero .content{
max-width: var(--hero-text-max);
color: #e9edf6;
}
/* Überschrift groß & dicht wie im Shot */
.hero .content h1{
margin: 0 0 16px 0;
line-height: 1.06;
font-weight: 800;
/* skaliert sauber: ~56–72px am Desktop */
font-size: clamp(40px, 5.2vw, 72px);
letter-spacing: .2px;
}
/* Rot für Akzent-Wörter im Titel (nutze im Titel No Risk.) */
.hero .content h1 .accent,
.hero .content h1 b,
.hero .content h1 strong,
.hero .content h1 em{
color: var(--hero-red);
font-weight: 800;
}
/* Subline */
.hero .content p{
margin: 0 0 24px 0;
color: #c9d2e2;
font-size: 16px;
}
/* Fake-Search-Capsule */
.hero .fake-searchbar{
display:flex; align-items:center; gap:12px;
background: rgba(15,18,24,.75);
border:1px solid rgba(255,255,255,.12);
border-radius: 12px;
padding: 12px 14px;
backdrop-filter: blur(3px);
max-width: 600px;
margin: 4px 0 22px 0;
cursor: pointer;
box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.hero .fake-searchbar svg{ width:22px; height:22px; color:#cfd6e4; flex:0 0 22px; }
.hero .fake-searchbar input{
background:transparent; border:0; outline:0; color:#e9edf6;
font-weight: 600; width:100%;
}
/* Stats Reihe */
.hero .stats-wrapper{ margin-top: 6px; }
.hero .stats{
display:flex; gap: 28px; flex-wrap: wrap;
color:#cfd6e4; font-size: 14px;
}
.hero .stats .value{ display:block; font-size: 22px; font-weight:800; color:#fff; }
.hero .stats .label{ opacity:.85; }
/* HERO-BILD rechts (optional) */
.hero .image{ display:flex; align-items:end; justify-content:flex-end; }
.hero .image img{
max-height: 520px; width: auto; height: auto;
filter: drop-shadow(0 20px 40px rgba(0,0,0,.55));
object-fit: contain;
}
/* ---------- Responsive ---------- */
@media (max-width: 1200px){
:root{ --hero-min-h: 560px; --hero-overlap: 110px; }
.hero > .container{ grid-template-columns: 1fr .9fr; gap: 24px; }
.hero .image img{ max-height: 480px; }
}
@media (max-width: 992px){
:root{ --hero-overlap: 80px; }
.hero{ padding-top: calc(120px + var(--hero-overlap)); }
.hero > .container{ grid-template-columns: 1fr; }
.hero .image{ order: 2; justify-content: center; }
.hero .image img{ max-width: 84%; max-height: 420px; }
.hero .content{ order: 1; text-align: left; }
.hero .fake-searchbar{ max-width: 100%; }
}
@media (max-width: 576px){
:root{ --hero-overlap: 64px; --hero-min-h: 520px; }
.hero .content h1{ font-size: clamp(34px, 8vw, 44px); }
.hero .stats{ gap: 18px; font-size: 13px; }
.hero .stats .value{ font-size: 18px; }
}
/* Hero-Bereich mit Hintergrund über gesamte Höhe inkl. Navbar */
.hero {
position: relative;
background-image: url('DEIN-BILD-LINK'); /* bleibt oder kommt von deinem HTML */
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
/* kein margin zwischen Navbar und Hero */
margin-top: 0;
/* sorgt dafür, dass das Bild schon hinter die Navbar geht */
padding-top: 160px; /* Höhe deiner Navbar + extra Abstand für Content */
padding-bottom: 80px;
min-height: 640px;
}
/* Overlay über kompletten Hero inkl. Navbar */
.hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5); /* dunkler Layer wie bei dir im Design */
pointer-events: none;
z-index: 0;
}
/* Content im Hero über dem Overlay */
.hero > .container {
position: relative;
z-index: 1;
}
:root{
/* total height of your topbar + dock card */
--header-stack: 180px; /* tweak 10–20px until perfect */
}
/* HERO: pull the section up so its background starts under the navbar,
then add the same amount as padding so the content stays in place. */
.hero{
position: relative;
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
/* key trick */
margin-top: calc(var(--header-stack) * -1);
padding-top: calc(var(--header-stack) + 120px); /* 120px = spacing above text */
padding-bottom: 140px;
min-height: 760px; /* enough height like on the ref */
overflow: clip;
z-index: 0;
}
/* the dark overlay must cover the whole hero */
.hero .bg-overlay{
position:absolute;
inset:0;
background: rgba(0,0,0,.58);
pointer-events:none;
z-index: 0;
}
/* make sure hero content is above the overlay */
.hero > .container,
.hero .content{ position: relative; z-index: 1; }
/* keep the dock card above the hero background */
.site-header .navbar.component{ position: relative; z-index: 5; }
/* Use the same side margins you already set for the dock */
.hero > .container{
max-width: none !important;
width: calc(100% - (var(--dock-margin) * 2)) !important;
margin: 0 auto !important;
padding-left: var(--dock-inner-pad) !important;
padding-right: var(--dock-inner-pad) !important;
}
:root {
--hero-text-top: -85px; /* Text weiter rauf */
--hero-title-max: 72px; /* max. Größe Desktop */
--hero-title-min: 38px; /* min. Größe Mobile */
--hero-body: 17px; /* Subline-Größe */
}
/* Hero-Textblock */
.hero .hero-text {
max-width: var(--hero-text-max);
margin-top: var(--hero-text-top);
color: #e9edf6;
}
/* Titel */
.hero .hero-text h1 {
margin: 0 0 14px 0;
font-weight: 800;
line-height: 1.05;
letter-spacing: .2px;
font-size: clamp(var(--hero-title-min), 5.2vw, var(--hero-title-max));
}
/* Weißer Part */
.hero .hero-text .highlight {
color: #f5f7fb;
}
/* Roter Part mit Verlauf */
.hero .hero-text .danger {
font-weight: 800;
background: linear-gradient(90deg, #008cff 0%, #008cff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Subline */
.hero .hero-text p {
margin: 0 0 20px 0;
font-size: clamp(15px, 1.4vw, var(--hero-body));
line-height: 1.55;
color: #c8d0df;
}
/* Responsives Feintuning */
@media (max-width: 992px) {
:root {
--hero-text-top: 20px;
--hero-title-max: 64px;
--hero-title-min: 32px;
}
}
@media (max-width: 576px) {
:root {
--hero-text-top: 16px;
--hero-title-min: 28px;
--hero-body: 15px;
}
}
.hero::before,
.hero::after{ display:none !important; }
/* ===== Hero: Bild etwas verblassen ===== */
.theme-header__wrap .hasBackground{
/* weniger bunt/kontrast, bisschen dunkler */
filter: saturate(.8) contrast(.94) brightness(.96);
opacity: .92; /* 1 = voll sichtbar, 0.85 = mehr Fade */
}
/* ===== Hero: Fades/Overlays ===== */
.theme-header__hero{ position: relative; }
/* 1) Linker Fade unter der Navbar in die Headerfarbe */
.theme-header__hero::before{
content:"";
position:absolute; inset:0;
pointer-events:none; z-index:0; /* unter Text, über Bild */
/* Passe die Farbe an deine Header- / Body-Farbe an */
--bg: var(--hdr-bg, #0c0f14);
/* Übergang so, dass er genau bei der Dock/Topbar-Kante endet */
background:
linear-gradient(
90deg,
var(--bg) 0
/* bis ungefähr Kante + Innenpadding der Dockkarte */
, var(--bg) calc(var(--dock-margin, 170px) + var(--dock-inner-pad, 24px))
, color-mix(in srgb, var(--bg) 75%, transparent) calc(var(--dock-margin,170px) + var(--dock-inner-pad,24px) + 80px)
, transparent calc(var(--dock-margin,170px) + var(--dock-inner-pad,24px) + 220px)
);
}
/* 2) Leichter globaler Verlauf über dem Bild (fein) */
.theme-header__hero::after{
content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
background:
/* ein sehr sanfter Schwarzverlauf fürs „Verblassen“ */
radial-gradient(1200px 500px at 0% 0%, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 70%),
linear-gradient(90deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.12) 45%, rgba(0,0,0,.06) 70%, rgba(0,0,0,0) 100%);
opacity: 1;
}
/* Sicherstellen, dass der Text über den Overlays liegt */
.theme-header__hero .ipsLayout_container,
.theme-header__hero .heroTitle,
.theme-header__hero .heroDesc{ position: relative; z-index: 1; }
/* Optional: auf kleinen Screens den Fade etwas schmaler */
@media (max-width: 992px){
.theme-header__hero::before{
background:
linear-gradient(
90deg,
var(--bg) 0, var(--bg) 48px,
color-mix(in srgb, var(--bg) 75%, transparent) 120px,
transparent 220px
);
}
}
/* Bild leicht verblassen */
.theme-header__hero img,
.theme-header__wrap img {
opacity: 0.85; /* sichtbare Transparenz */
filter: brightness(0.9) saturate(0.9);
}
/* Linker Fade */
.theme-header__hero {
position: relative;
}
.theme-header__hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 200px; /* Breite des Fades, anpassen */
height: 100%;
background: linear-gradient(to right, #0b0d11 0%, transparent 100%);
z-index: 2; /* Über dem Bild, unter Text */
pointer-events: none;
}
/* Text soll über allem liegen */
.theme-header__hero .ipsLayout_container {
position: relative;
z-index: 3;
}
/* ---------- NAV SEARCH ---------- */
.nav-search{
background: #171b22;
border: 1px solid rgba(255,255,255,.06);
border-radius: 12px;
height: 48px;
padding: 10px 12px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 6px 16px rgba(0,0,0,.28);
width: 440px; /* desktop width */
}
.nav-search--mobile{ width: 100%; }
.nav-search:focus-within{
border-color: rgba(255,255,255,.12);
box-shadow:
0 0 0 2px rgba(255,255,255,.04),
0 0 0 3px rgba(255,61,61,.18);
}
.nav-search .search-icon{
display: inline-grid;
place-items: center;
width: 28px; height: 28px;
border: 0; background: transparent; padding: 0;
color: #9aa3b2; cursor: pointer;
}
.nav-search .search-input{
flex: 1 1 auto;
min-width: 120px;
background: transparent;
border: 0; outline: 0;
color: #e7ecf7;
font-weight: 600;
}
.nav-search .search-input::placeholder{ color:#9aa3b2; font-weight:500; }
/* Filter chip (summary) */
.nav-search .search-filter{ position: relative; }
.nav-search .filter-summary{
list-style: none;
cursor: pointer;
user-select: none;
background: #11151b;
color: #cfd6e4;
border: 1px solid rgba(255,255,255,.08);
border-radius: 10px;
padding: 8px 10px;
font-size: 14px;
line-height: 1;
}
.nav-search .search-filter[open] .filter-summary{
border-color: rgba(255,255,255,.18);
}
/* Dropdown menu */
.nav-search .filter-menu{
position: absolute;
right: 0; top: calc(100% + 8px);
background: #12161c;
border: 1px solid rgba(255,255,255,.08);
border-radius: 10px;
padding: 8px;
min-width: 180px;
box-shadow: 0 12px 28px rgba(0,0,0,.38);
z-index: 30;
}
.nav-search .filter-menu li{ list-style: none; }
.nav-search .filter-menu label{
display: flex; gap: 8px; align-items: center;
color: #cfd6e4; font-size: 14px; padding: 8px 10px;
border-radius: 8px; cursor: pointer;
}
.nav-search .filter-menu label:hover{
background: rgba(255,255,255,.04);
}
.nav-search .filter-menu input{ accent-color: #008cff; }
/* Reduce pill a bit on small screens */
@media (max-width: 1200px){
.nav-search{ width: 360px; }
}
@media (max-width: 992px){
.nav-search{ height: 46px; }
}
:root {
--tw-bg: #0d1015;
--tw-panel: #121418;
--tw-line: rgba(255,255,255,.08);
--tw-line-soft: rgba(255,255,255,.06);
--tw-text: #e9edf6;
--tw-muted: #c7cfdd;
--tw-red: #008cff;
}
/* Container Hintergrund */
.shop-wrapper {
background-color: var(--tw-bg);
padding: 20px;
}
/* Filter Buttons */
.filter-bar .btn-danger {
background-color: var(--tw-red);
border: none;
}
.filter-bar .btn-dark {
background-color: var(--tw-panel);
border: 1px solid var(--tw-line-soft);
color: var(--tw-text);
}
.filter-bar .btn-dark:hover {
border-color: var(--tw-line);
}
/* ===================== THEME VARS ===================== */
:root{
--c-bg: #0e1217;
--c-panel: #11161d;
--c-panel-2: #0c1117;
--c-stroke: #262e39;
--c-text: #e9eef5;
--c-accent: #008cff;
--c-accent-soft: rgba(231, 142, 59, 0.18);
--shadow-1: 0 8px 22px rgba(0,0,0,.35);
--shadow-2: 0 12px 30px rgba(0,0,0,.45);
}
/* etwas Luft im Grid */
.row.g-3{ row-gap: 1.1rem; }
/* ===================== CARD ===================== */
.group-card.card{
position: relative;
display: block;
border: 1px solid var(--c-stroke);
background: linear-gradient(180deg, var(--c-panel) 0%, var(--c-panel-2) 100%);
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow-1);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.group-card.card:hover{
transform: translateY(-3px);
box-shadow: var(--shadow-2);
border-color: #344053;
}
/* ===================== BILDBEREICH 16:9 ===================== */
.group-card__img{
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #0b0f14;
}
.group-card__img > img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* leichte Bild-Overlays (dezent) */
.group-card__img::before{
content:"";
position:absolute; inset:0;
background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(0,0,0,0) 35%);
pointer-events:none;
}
/* ===================== TITEL-BUBBLE über data-title ===================== */
.group-card__img::after{
content: attr(data-title);
position: absolute;
left: 12px;
bottom: 10px;
max-width: calc(100% - 24px);
display: inline-flex;
align-items: center;
padding: .42rem .68rem;
border-radius: 10px;
font-size: .86rem;
font-weight: 800;
letter-spacing: .02em;
color: #e9eef5;
background: rgba(15,20,25,.85);
border: 1px solid rgba(255,255,255,.12);
backdrop-filter: blur(6px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
z-index: 2;
box-shadow: 0 8px 22px rgba(0,0,0,.45);
transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.group-card:hover .group-card__img::after{
background: rgba(18,24,31,.92);
}
/* ===================== CATALOG BOX / TOOLBAR ===================== */
.catalog-box{
background: transparent;
border: 0;
padding: 0;
box-shadow: none;
margin-top: .75rem;
}
.catalog-box > h2{
margin: 0 0 .75rem;
font-weight: 800;
color: var(--c-text, #e9eef5);
}
.catalog-toolbar{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:.75rem;
padding:.5rem .6rem;
border-radius:12px;
border:1px solid var(--c-stroke, #202833);
background: linear-gradient(180deg, rgba(16,21,27,.55), rgba(11,15,20,.55));
margin-bottom:.9rem;
}
.catalog-letters{
display:flex;
flex-wrap:wrap;
gap:.35rem;
}
.catalog-letters .chip{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:36px;
padding:.45rem .55rem;
border-radius:10px;
border:1px solid var(--c-stroke, #202833);
background:#11161c;
color:var(--c-text, #e9eef5);
font-weight:700;
font-size:.8rem;
line-height:1;
transition: background .2s, border-color .2s, transform .15s;
}
.catalog-letters .chip:hover{
transform: translateY(-1px);
background:#151c24;
}
.catalog-letters .chip.is-active{
background: var(--c-accent, #008cff);
border-color: var(--c-accent, #008cff);
color:#fff;
box-shadow: 0 6px 18px rgba(230, 141, 57, 0.18);
}
.catalog-search{
margin-left:auto;
min-width:220px;
}
.catalog-search input{
width:100%;
height:38px;
padding:.4rem .75rem;
border-radius:10px;
border:1px solid var(--c-stroke, #202833);
background:#0f1419;
color:var(--c-text, #e9eef5);
outline:none;
}
.catalog-search input::placeholder{ color:#8b97a6; }
/* ===================== GRID / CONTAINER ===================== */
#catalogGrid .col-12{ display:flex; }
#catalogGrid .group-card{ width:100%; }
#catalogGrid .is-hidden{ display:none !important; }
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl{
max-width:1600px !important;
}
/* ✔ Nur im Shop-Grid die Spaltenbreite selbst steuern */
.shop-wrapper .row.g-3{
display:flex;
flex-wrap:wrap;
gap:20px;
--tile-width:48%; /* 48%≈2 pro Reihe; 32%≈3; 100%=1 */
}
.shop-wrapper .row.g-3 > [class*="col-"]{
flex:0 0 var(--tile-width);
max-width:var(--tile-width);
}
@media (max-width:1199.98px){
.shop-wrapper .row.g-3{ --tile-width:48%; }
}
@media (max-width:767.98px){
.shop-wrapper .row.g-3{ --tile-width:100%; }
}
/* ===================== DIVERSES ===================== */
.group-card__overlay{ pointer-events:none; }
.group-card__badges{ z-index:3; }
.product-img-placeholder{
position:absolute; inset:0;
display:grid; place-items:center;
background: linear-gradient(180deg,#151b22,#10161d);
color:#647286;
}
/* Body kompakt, Titel im Body ausgeblendet (Bubble übernimmt) */
.group-card__body{ padding:.8rem .9rem 1rem; }
/* Card-Grundlage */
.group-card.card{
position: relative;
display: block;
border: 1px solid var(--c-stroke, #262e39);
background: linear-gradient(180deg, var(--c-panel, #11161d), var(--c-panel-2, #0c1117));
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow-1, 0 8px 22px rgba(0,0,0,.35));
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.group-card.card:hover{
transform: translateY(-3px);
box-shadow: var(--shadow-2, 0 12px 30px rgba(0,0,0,.45));
border-color: #344053;
}
/* Bild-Bereich (16:9) */
.group-card__img{
position: relative;
width: 100%;
aspect-ratio: 16/9;
overflow: hidden;
background: #0b0f14;
}
.group-card__img > img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block;
transform: scale(1);
transition: transform .35s ease;
}
.group-card:hover .group-card__img > img{ transform: scale(1.02); }
/* sanftes Overlay */
.group-card__img::before{
content:""; position:absolute; inset:0;
background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(0,0,0,0) 35%);
pointer-events:none;
}
/* === Bubble im Bild: liest den Namen aus data-title === */
.group-card__img::after{
content: attr(data-title);
position: absolute;
left: 12px; bottom: 10px;
max-width: calc(100% - 24px);
display: inline-flex; align-items: center;
padding: .42rem .68rem;
border-radius: 10px;
font-size: .86rem; font-weight: 800; letter-spacing: .02em;
color: #e9eef5;
background: rgba(15, 20, 25, .85);
border: 1px solid rgba(255,255,255,.12);
backdrop-filter: blur(6px);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
box-shadow: 0 8px 22px rgba(0,0,0,.45);
transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
z-index: 2;
}
.group-card:hover .group-card__img::after{
background: rgba(18, 24, 31, .92);
}
/* Nur Bild & Bubble sichtbar – Rest ausblenden */
.group-card__body,
.group-card__meta,
.group-card__price,
.group-card__title,
.group-card__overlay,
.group-card .text-primary{
display: none !important;
}
/* Badges bleiben klick-neutral darüber */
.group-card__overlay{ pointer-events:none; }
.group-card__badges{ z-index: 3; }
/* Placeholder hübsch */
.product-img-placeholder{
position:absolute; inset:0;
display:grid; place-items:center;
background: linear-gradient(180deg,#151b22,#10161d);
color:#647286;
}
/* Card komplett randlos */
.group-card.card {
border: none;
border-radius: 0;
box-shadow: none;
}
/* Bild flächendeckend und leicht gezoomt */
.group-card__img {
position: relative;
width: 100%;
aspect-ratio: 16/9;
overflow: hidden;
background: #000; /* Fallback falls kein Bild */
}
.group-card__img > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.05); /* leicht gezoomt */
}
/* Optional: Hover noch etwas mehr zoomen */
.group-card:hover .group-card__img > img {
transform: scale(1.06);
}
.group-card__img > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.22); /* vorher 1.05 → jetzt stärker gezoomt */
transition: transform 0.35s ease;
}
.group-card:hover .group-card__img > img {
transform: scale(1.18); /* beim Hover noch minimal mehr */
}
/* Card mit runden Ecken */
.group-card.card {
border: none;
border-radius: 12px; /* gewünschte Rundung */
overflow: hidden; /* wichtig, damit Bild den Radius übernimmt */
box-shadow: none;
}
/* Bild-Container auch runden */
.group-card__img {
border-radius: inherit;
overflow: hidden;
}
/* Bild füllt die Card */
.group-card__img > img {
border-radius: inherit;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.18);
transition: transform 0.35s ease;
}
.group-card:hover .group-card__img > img {
transform: scale(1.18);
}
/* Shop Section weiter nach oben schieben */
section.container.py-20.component {
margin-top: -130px; /* Wert anpassen, je nachdem wie hoch */
}
/* Falls die Abstände innerhalb der Section zu groß sind */
section.container.py-20.component .section-title {
margin-top: 0;
padding-top: 0;
}
/* ================ PANEL (Box um Filter + Grid) ================ */
.catalog-panel{
background:#0d0f12;
border:1px solid rgba(255,255,255,.08);
border-radius:10px;
box-shadow:0 0 20px rgba(0,0,0,.4);
padding:15px;
}
/* ================ FILTER-TOOLBAR ================ */
.catalog-box{ margin-top:.5rem; }
.catalog-toolbar{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:.75rem;
padding:.5rem .6rem;
border-radius:12px;
border:1px solid var(--c-stroke, #202833);
background: linear-gradient(180deg, rgba(16,21,27,.55), rgba(11,15,20,.55));
margin-bottom:.9rem;
/* keine position: sticky; keine z-index hacks – bleibt im Flow */
}
/* Chips */
.catalog-letters{ display:flex; flex-wrap:wrap; gap:.4rem; }
.catalog-letters .chip{
border:1px solid var(--c-stroke, #202833);
background:#11161c;
color:#e9eef5;
font-weight:700;
font-size:.85rem;
line-height:1;
border-radius:10px;
padding:.45rem .7rem;
cursor:pointer;
transition: background .2s, border-color .2s, transform .15s;
}
.catalog-letters .chip:hover{ transform:translateY(-1px); background:#151c24; }
.catalog-letters .chip.is-active{
background:var(--c-accent, #008cff);
border-color:var(--c-accent, #008cff);
color:#fff;
box-shadow:0 6px 18px rgba(230,57,70,.18);
}
/* Suche */
.catalog-search{ margin-left:auto; min-width:220px; }
.catalog-search input{
width:100%;
height:38px;
padding:.4rem .75rem;
border-radius:10px;
border:1px solid var(--c-stroke, #202833);
background:#0f1419;
color:#e9eef5;
outline:none;
}
.catalog-search input::placeholder{ color:#8b97a6; }
/* ================ GRID ================ */
#catalogGrid .is-hidden{ display:none !important; } /* Filter-Hide */
.products{ margin:0; } /* bündig im Panel */
/* ================ SECTIONS / NAV ================ */
/* Section nicht künstlich nach oben ziehen – verhindert Überlappungen */
.component.products-component{
padding-top:0 !important;
margin-top:0 !important;
}
/* Navbar bleibt oben (ohne das Catalog zu überdecken) */
.navbar{ position:relative; z-index:5000; }
/* keine overflow-clipper nötig – aber falls gesetzt, neutral halten */
.site-header, .component, .container, .container > .row { overflow:visible; }
.component.products-component{
margin-top:-220px !important;
padding-top:0 !important;
position:relative; z-index:2;
}
.component.products-component .section-title,
.component.products-component .section-title h2{ margin-top:0 !important; }
.component.products-component::before{ content:""; display:block; height:1px; margin-top:-1px; }
/* ===== Theme hooks (nutzt deine bestehenden Vars, mit Fallbacks) ===== */
:root{
--c-bg: #0e1217;
--c-panel: #11161d;
--c-panel-2: #0c1117;
--c-stroke: #262e39;
--c-text: #e9eef5;
}
/* ===== Grid layout ===== */
.status-grid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
gap: 14px;
}
/* ===== Card ===== */
.status-card{
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
padding: 14px 16px;
border-radius: 14px;
border:1px solid var(--c-stroke);
background: linear-gradient(180deg, var(--c-panel), var(--c-panel-2));
box-shadow: 0 8px 22px rgba(0,0,0,.35);
color: var(--c-text);
text-decoration:none;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.status-card:hover{
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(0,0,0,.45);
border-color: #344053;
}
/* Titel */
.status-card__title{
font-size: 1rem;
font-weight: 800;
letter-spacing: .01em;
margin: 0;
line-height: 1.15;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ===== Status-Pill rechts ===== */
.status{
display:flex;
align-items:center;
gap: 10px;
margin-left: auto;
}
/* Indikator (nimmt --st aus dem style-Attribut) */
.status .indicator{
--dot: var(--st, #22c55e);
position: relative;
width: 12px; height: 12px;
border-radius: 999px;
background: var(--dot);
box-shadow:
0 0 0 2px rgba(0,0,0,.35),
0 0 18px 0 color-mix(in srgb, var(--dot), transparent 70%);
flex: 0 0 12px;
}
.status .indicator .pulsating{
position:absolute; inset:0;
border-radius:inherit;
background: var(--dot);
opacity:.35;
animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse{
0% { transform: scale(1); opacity:.35; }
70% { transform: scale(2.2); opacity:0; }
100% { transform: scale(2.2); opacity:0; }
}
/* Label-Chip */
.status .label{
--dot: var(--st, #22c55e);
display:inline-flex;
align-items:center;
gap:.4ch;
font-weight:800;
font-size:.82rem;
letter-spacing:.02em;
line-height:1;
padding:.5rem .65rem;
border-radius:10px;
color: var(--dot);
border:1px solid color-mix(in srgb, var(--dot), #ffffff 72%);
background:
linear-gradient(180deg,
color-mix(in srgb, var(--dot), transparent 86%),
color-mix(in srgb, var(--dot), transparent 92%));
text-transform: capitalize;
white-space: nowrap;
}
/* Motion light/dark + accessibility */
@media (prefers-reduced-motion: reduce){
.status-card{ transition:none }
.status .indicator .pulsating{ animation: none }
}
/* ===== Optional: Status-Varianten nach Text (fallback, falls du fix mappen willst) ===== */
/* .status[data-label*="offline" i] { --st: #ef4444; }
.status[data-label*="maintenance" i] { --st: #f59e0b; }
.status[data-label*="online" i] { --st: #22c55e; } */
.status-section{
border:1px solid rgba(255,255,255,.08);
background: linear-gradient(180deg, #11161d, #0c1117);
border-radius:16px;
padding:18px;
box-shadow:0 10px 32px rgba(0,0,0,.35);
}
.status-list{ display:flex; flex-direction:column; gap:12px; }
/* Card-Styling */
.status-card{
display:flex; align-items:center; justify-content:space-between;
gap:12px; padding:14px 16px;
border-radius:12px; border:1px solid #262e39;
background: linear-gradient(180deg, #12171d, #0d1117);
color:#e9eef5; text-decoration:none;
box-shadow: 0 8px 22px rgba(0,0,0,.35);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.status-card:hover{ transform: translateY(-2px); border-color:#344053; box-shadow:0 14px 32px rgba(0,0,0,.45); }
.status-card__title{ margin:0; font-weight:800; font-size:1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Status-Badge rechts */
.status{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.status .indicator{
--dot: var(--st, #22c55e);
width:12px; height:12px; border-radius:50%;
background:var(--dot); position:relative; flex:0 0 12px;
box-shadow:0 0 0 2px rgba(0,0,0,.35), 0 0 18px 0 color-mix(in srgb, var(--dot), transparent 70%);
}
.status .indicator .pulsating{
position:absolute; inset:0; border-radius:inherit; background:var(--dot); opacity:.35;
animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse{ 0%{transform:scale(1);opacity:.35} 70%,100%{transform:scale(2.2);opacity:0} }
.status .label{
--dot: var(--st, #22c55e);
display:inline-flex; align-items:center;
font-weight:800; font-size:.82rem; letter-spacing:.02em; line-height:1;
padding:.5rem .65rem; border-radius:10px; color:var(--dot);
border:1px solid color-mix(in srgb, var(--dot), #ffffff 72%);
background: linear-gradient(180deg,
color-mix(in srgb, var(--dot), transparent 86%),
color-mix(in srgb, var(--dot), transparent 92%));
white-space:nowrap;
}
/* Safety: niemals clippen */
.status-section, .status-list, .status-card { overflow: visible; }
@media (prefers-reduced-motion: reduce){ .status-card{transition:none} .status .pulsating{animation:none} }
.status-list{
display:grid;
grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
gap:12px;
}
.status-card{ height:72px; } /* Option: gleich hohe Kacheln */
/* ===== Section/Panel ===== */
.status-section{
border:1px solid rgba(255,255,255,.08);
background: linear-gradient(180deg, #11161d, #0c1117);
border-radius:16px;
padding:18px;
box-shadow:0 10px 32px rgba(0,0,0,.35);
}
.status-group{ margin-bottom:16px; }
.status-group__title{
margin:0 0 10px 0;
font-weight:800; color:#e9eef5;
}
/* Liste: einspaltig wie im Screenshot */
.status-list{
display:flex;
flex-direction:column;
gap:12px;
}
/* ===== Card ===== */
.status-card{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:14px 16px;
border-radius:12px;
border:1px solid #262e39;
background: linear-gradient(180deg, #12171d, #0d1117);
color:#e9eef5;
text-decoration:none;
box-shadow: 0 8px 22px rgba(0,0,0,.35);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.status-card:hover{
transform: translateY(-2px);
border-color:#344053;
box-shadow: 0 14px 32px rgba(0,0,0,.45);
}
.status-card__title{
margin:0; font-size:1rem; font-weight:800;
letter-spacing:.01em; line-height:1.15;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* ===== Status-Badge rechts ===== */
.status{
display:flex; align-items:center; gap:10px;
margin-left:auto;
}
.status .indicator{
--dot: var(--st, #22c55e);
width:12px; height:12px; border-radius:999px; position:relative;
background: var(--dot); flex: 0 0 12px;
box-shadow:
0 0 0 2px rgba(0,0,0,.35),
0 0 18px 0 color-mix(in srgb, var(--dot), transparent 70%);
}
.status .indicator .pulsating{
position:absolute; inset:0; border-radius:inherit;
background: var(--dot); opacity:.35;
animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse{
0%{ transform:scale(1); opacity:.35; }
70%{ transform:scale(2.2); opacity:0; }
100%{ transform:scale(2.2); opacity:0; }
}
/* Chip */
.status .label{
--dot: var(--st, #22c55e);
display:inline-flex; align-items:center;
font-weight:800; font-size:.82rem; letter-spacing:.02em; line-height:1;
padding:.5rem .65rem; border-radius:10px;
color: var(--dot);
border:1px solid color-mix(in srgb, var(--dot), #ffffff 72%);
background: linear-gradient(180deg,
color-mix(in srgb, var(--dot), transparent 86%),
color-mix(in srgb, var(--dot), transparent 92%));
white-space:nowrap;
}
/* Accessibility */
@media (prefers-reduced-motion: reduce){
.status-card{ transition:none; }
.status .indicator .pulsating{ animation:none; }
}
:root{
--accent-orange: #008cff; /* dein Orange */
}
.highlight .accent-x{
color: var(--accent-orange);
}
/* Hero: Bild füllt, keine Wiederholung */
.hero{
position: relative;
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
}
/* Fade-Overlay → unten + rechts in den Seitenhintergrund blenden */
.hero::after{
content:"";
position:absolute; inset:0;
pointer-events:none;
/* unten (1) und rechts (2) weich zu --c-bg einfaden */
background:
linear-gradient(to bottom, transparent 65%, var(--c-bg) 100%),
linear-gradient(to right, transparent 70%, var(--c-bg) 100%);
}
/* Optional: wenn du NUR unten ausblenden willst, nutz stattdessen: */
/*
.hero::after{
content:""; position:absolute; inset:0; pointer-events:none;
background: linear-gradient(to bottom, transparent 65%, var(--c-bg) 100%);
}
*/
.hero{
-webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
}
/* === Theme-Farben (anpassen) === */
:root{
--scroll-track: #0e1217; /* Track/Hintergrund */
--scroll-thumb: #0004ff; /* Orange (Thumb) */
--scroll-thumb2: #0004ff; /* Verlauf/unterer Teil */
--scroll-hover: #140086; /* Hover-Orange */
}
/* === Firefox === */
html{
scrollbar-width: thin; /* auto | thin | none */
scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
/* === WebKit (Chrome, Edge, Safari) – Seiten-Scrollbar === */
html::-webkit-scrollbar{
width: 10px; /* vertikal */
height: 10px; /* horizontal */
}
html::-webkit-scrollbar-track{
background: var(--scroll-track);
}
html::-webkit-scrollbar-thumb{
background: linear-gradient(180deg, var(--scroll-thumb), var(--scroll-thumb2));
border-radius: 999px;
border: 2px solid var(--scroll-track); /* erzeugt „Gap“ */
box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
}
html::-webkit-scrollbar-thumb:hover{
background: var(--scroll-hover);
}
html::-webkit-scrollbar-corner{
background: var(--scroll-track);
}
/* === Optional: für scrollbare Container (z.B. .catalog-box, .table-wrap, etc.) === */
.scrollable, .catalog-box, .table-wrap{
scrollbar-width: thin;
scrollbar-color: var(--scroll-thumb) transparent;
}
.scrollable::-webkit-scrollbar,
.catalog-box::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar{
width: 8px;
height: 8px;
}
.scrollable::-webkit-scrollbar-thumb,
.catalog-box::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb{
background: var(--scroll-thumb);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
/* STATUS PAGE ---------------------------------------------------------------------------------------------------------------------------------------------- */
#vision-status{
--accent: #008CFF;
--edge: rgba(255,255,255,.08);
--text: #E9EEF5;
--muted:#A1ADBD;
--card: rgba(255,255,255,.03);
position: relative;
border: 1px solid var(--edge);
border-radius: 22px;
padding: clamp(18px,2.6vw,28px);
background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(0,0,0,.16));
box-shadow: 0 18px 45px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
overflow: hidden;
isolation: isolate;
}
#vision-status .x-scan{
position:absolute; inset:-40% -20% auto -20%;
height: 70%; pointer-events:none; mix-blend-mode: screen;
background: radial-gradient(40% 35% at 20% 0%, rgba(0,140,255,.25), transparent 60%),
radial-gradient(40% 35% at 80% 0%, rgba(255,193,115,.15), transparent 60%);
filter: blur(30px); opacity:.35; animation: vs-pulse 7s ease-in-out infinite;
}
#vision-status .x-grid{
position:absolute; inset:-2px; pointer-events:none; opacity:.18;
background-image:
radial-gradient(circle at 50% -10%, rgba(0,140,255,.14), transparent 30%),
linear-gradient(transparent 0 0),
linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 100% 100%, 100% 100%, 36px 36px, 36px 36px;
background-position: 0 0, 0 0, 0 0, 0 0;
}
@keyframes vs-pulse{ 0%,100%{opacity:.25} 50%{opacity:.45} }
#vision-status .x-status-head{
display:flex; flex-wrap:wrap; gap:16px 22px; align-items:flex-end; justify-content:space-between;
margin-bottom: clamp(14px,2vw,18px);
}
#vision-status .x-title{
margin:0; font-weight:800; letter-spacing:.2px; color:var(--text);
font-size: clamp(1.4rem, 2.6vw, 2rem);
}
#vision-status .x-em{
color: var(--accent);
text-shadow: 0 0 18px rgba(0,140,255,.35);
}
#vision-status .x-sub{ color:var(--muted); margin:.25rem 0 0; }
#vision-status .x-head-right{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
#vision-status .x-legend{ display:flex; gap:8px; flex-wrap:wrap; }
#vision-status .x-tag{
display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
color:#cfd7e6; background:var(--card); border:1px solid var(--edge); cursor:pointer;
transition: border-color .2s, transform .12s;
}
#vision-status .x-tag .dot{ width:9px; height:9px; border-radius:50%; background:var(--c); box-shadow:0 0 12px var(--c); }
#vision-status .x-tag:not(.is-on){ opacity:.55; }
#vision-status .x-tag:active{ transform: translateY(1px); }
#vision-status .x-tools{ display:flex; gap:10px; align-items:center; }
#vision-status .x-input{
display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px;
border:1px solid var(--edge); background:var(--card); color:#cdd6e4;
}
#vision-status .x-input input{
background:transparent; border:0; color:inherit; outline:0; width:200px;
}
#vision-status .x-refresh{
display:inline-flex; gap:8px; align-items:center; padding:9px 12px; border-radius:10px;
color:#0f0f0f; background: linear-gradient(180deg, #0096FF, #008CFF);
border:1px solid rgba(0,140,255,.35); box-shadow:0 10px 22px rgba(0,140,255,.35), inset 0 1px 0 rgba(255,255,255,.2);
}
#vision-status .x-group{ position:relative; margin-top:18px; }
#vision-status .x-group-head h2{
margin: 0 0 10px; font-size: .95rem; letter-spacing:.14em; text-transform:uppercase; color:#A1ADBD;
}
#vision-status .x-cards{
display:grid; grid-template-columns: repeat(12, 1fr); gap:12px;
}
@media (max-width: 1200px){ #vision-status .x-cards{ grid-template-columns: repeat(8, 1fr);} }
@media (max-width: 880px){ #vision-status .x-cards{ grid-template-columns: repeat(6, 1fr);} }
@media (max-width: 640px){ #vision-status .x-cards{ grid-template-columns: repeat(1, 1fr);} }
#vision-status .x-card{
--st: #9aa4b2;
grid-column: span 12;
display:flex; flex-direction:column; gap:10px; position:relative;
padding:14px; border-radius:14px; text-decoration:none; color:var(--text);
background: var(--card); border:1px solid var(--edge);
overflow:hidden;
}
@media (min-width: 641px){ #vision-status .x-card{ grid-column: span 6; } }
@media (min-width: 881px){ #vision-status .x-card{ grid-column: span 4; } }
#vision-status .x-card-main{
display:flex; align-items:center; justify-content:space-between; gap:12px;
}
#vision-status .x-name{ display:flex; flex-direction:column; gap:4px; min-width:0; }
#vision-status .x-label{ font-weight:700; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#vision-status .x-subtle{ color:var(--muted); font-size:.9rem; }
#vision-status .x-pill{
display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px;
border:1px solid color-mix(in srgb, var(--st) 45%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--st) 18%, transparent), rgba(0,0,0,.15));
color:#eaf2ff;
}
#vision-status .x-pill .dot{
width:9px; height:9px; border-radius:50%;
background: var(--st); box-shadow: 0 0 14px var(--st);
}
#vision-status .x-pill .txt{ font-weight:600; opacity:.95; }
#vision-status .x-meta{
display:flex; gap:10px; align-items:center; color:#c9d2e1; font-size:.92rem;
}
#vision-status .x-price{
padding:6px 10px; border-radius:8px; background:rgba(255,255,255,.035); border:1px solid var(--edge);
}
#vision-status .x-card .x-glow{
position:absolute; inset:-30% -10%; background:
radial-gradient(30% 30% at 70% 0%, color-mix(in srgb, var(--st) 25%, transparent), transparent 60%);
filter: blur(28px); opacity:.25; pointer-events:none; transition: opacity .25s;
}
#vision-status .x-card .x-border{
position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:.35;
background: conic-gradient(from 0deg at 50% 50%,
rgba(255,255,255,.0),
color-mix(in srgb, var(--st) 60%, transparent),
rgba(255,255,255,.0) 45%) border-box;
-webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
-webkit-mask-composite: xor; mask-composite: exclude;
border:1px solid transparent; animation: vs-rotate 14s linear infinite;
}
@keyframes vs-rotate{ to{ transform: rotate(360deg); } }
#vision-status .x-card:hover .x-glow{ opacity:.4; }
#vision-status [data-group][style*="display: none"]{ margin:0; padding:0; }
#vision-status .x-card:hover{ transform: translateY(-1px); transition: transform .12s; }
#vision-status{
--accent:#008CFF; --edge:rgba(255,255,255,.08); --text:#E9EEF5; --muted:#A1ADBD; --card:rgba(255,255,255,.03);
position:relative; border:1px solid var(--edge); border-radius:22px;
padding:clamp(18px,2.6vw,28px);
margin-block: clamp(28px,5vw,64px);
background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(0,0,0,.16));
box-shadow:0 18px 45px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
overflow:hidden; isolation:isolate;
}
#vision-status .x-scan{position:absolute; inset:-40% -20% auto -20%; height:70%; pointer-events:none; mix-blend-mode:screen;
background: radial-gradient(40% 35% at 20% 0%, rgba(0,140,255,.25), transparent 60%),
radial-gradient(40% 35% at 80% 0%, rgba(255,193,115,.15), transparent 60%);
filter:blur(30px); opacity:.35; animation:vs-pulse 7s ease-in-out infinite;}
#vision-status .x-grid{position:absolute; inset:-2px; pointer-events:none; opacity:.18;
background-image: radial-gradient(circle at 50% -10%, rgba(0,140,255,.14), transparent 30%),
linear-gradient(transparent 0 0),
linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size:100% 100%,100% 100%,36px 36px,36px 36px;}
@keyframes vs-pulse{0%,100%{opacity:.25}50%{opacity:.45}}
#vision-status .x-corner-logo{position:absolute; top:382px; right:12px; width:56px; height:56px; display:grid; place-items:center;
border-radius:14px; border:1px solid var(--edge); background:radial-gradient(70% 70% at 50% 50%, rgba(0,140,255,.16), rgba(0,0,0,0));
box-shadow: inset 0 0 22px rgba(0,140,255,.22), 0 8px 26px rgba(0,140,255,.18);}
#vision-status .x-corner-logo img{width:60%; height:auto; filter: drop-shadow(0 1px 6px rgba(0,140,255,.35));}
.x-status-head{display:flex; flex-wrap:wrap; gap:16px 22px; align-items:flex-end; justify-content:space-between; margin-bottom:clamp(14px,2vw,18px);}
#vision-status .x-title{margin:0; font-weight:800; letter-spacing:.2px; color:var(--text); font-size:clamp(1.4rem,2.6vw,2rem);}
#vision-status .x-em{color:var(--accent); text-shadow:0 0 18px rgba(0,140,255,.35);}
#vision-status .x-sub{color:var(--muted); margin:.25rem 0 0;}
#vision-status .x-head-right{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;}
#vision-status .x-legend{display:flex; gap:8px; flex-wrap:wrap;}
#vision-status .x-tag{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; color:#cfd7e6; background:var(--card); border:1px solid var(--edge); cursor:pointer; transition:border-color .2s, transform .12s;}
#vision-status .x-tag .dot{width:9px; height:9px; border-radius:50%; background:var(--c); box-shadow:0 0 12px var(--c);}
#vision-status .x-tag:not(.is-on){opacity:.55;}
#vision-status .x-tag:active{transform:translateY(1px);}
#vision-status .x-tools{display:flex; gap:10px; align-items:center;}
#vision-status .x-input{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; border:1px solid var(--edge); background:var(--card); color:#cdd6e4;}
#vision-status .x-input input{background:transparent; border:0; color:inherit; outline:0; width:200px;}
#vision-status .x-refresh{display:inline-flex; gap:8px; align-items:center; padding:9px 12px; border-radius:10px; color:#0f0f0f; background:linear-gradient(180deg,#0096FF,#008CFF); border:1px solid rgba(0,140,255,.35); box-shadow:0 10px 22px rgba(0,140,255,.35), inset 0 1px 0 rgba(255,255,255,.2);}
#vision-status .x-group{position:relative; margin-top:18px;}
#vision-status .x-group-head h2{margin:0 0 10px; font-size:.95rem; letter-spacing:.14em; text-transform:uppercase; color:#A1ADBD;}
#vision-status .x-cards{display:grid; grid-template-columns:repeat(12,1fr); gap:12px;}
@media (max-width:1200px){#vision-status .x-cards{grid-template-columns:repeat(8,1fr);}}
@media (max-width:880px){#vision-status .x-cards{grid-template-columns:repeat(6,1fr);}}
@media (max-width:640px){#vision-status .x-cards{grid-template-columns:repeat(1,1fr);}}
#vision-status .x-card{--st:#9aa4b2; position:relative; z-index:0; grid-column:span 12;
display:flex; flex-direction:column; gap:10px; text-decoration:none; cursor:pointer;
padding:14px; border-radius:14px; color:var(--text); background:var(--card); border:1px solid var(--edge); overflow:hidden;}
@media (min-width:641px){#vision-status .x-card{grid-column:span 6;}}
@media (min-width:881px){#vision-status .x-card{grid-column:span 4;}}
#vision-status .x-card-main{display:flex; align-items:center; justify-content:space-between; gap:12px;}
#vision-status .x-name{display:flex; flex-direction:column; gap:4px; min-width:0;}
#vision-status .x-label{font-weight:700; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#vision-status .x-subtle{color:var(--muted); font-size:.9rem;}
#vision-status .x-pill{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.15);}
#vision-status .x-pill .dot{width:9px; height:9px; border-radius:50%; background:var(--st); box-shadow:0 0 14px var(--st);}
#vision-status .x-pill .txt{font-weight:600; opacity:.95;}
#vision-status .x-meta{display:flex; gap:10px; align-items:center; color:#c9d2e1; font-size:.92rem;}
#vision-status .x-price{padding:6px 10px; border-radius:8px; background:rgba(255,255,255,.035); border:1px solid var(--edge);}
#vision-status .x-glow,
#vision-status .x-border{pointer-events:none;}
#vision-status .x-glow{position:absolute; inset:-30% -10%; background:radial-gradient(30% 30% at 70% 0%, rgba(0,140,255,.25), transparent 60%); filter:blur(28px); opacity:.25; transition:opacity .25s;}
#vision-status .x-border{position:absolute; inset:0; border-radius:inherit; opacity:.35; background:conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.0), rgba(0,140,255,.5), rgba(255,255,255,.0) 45%); -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0) border-box; -webkit-mask-composite:xor; mask-composite:exclude; border:1px solid transparent; animation:vs-rotate 14s linear infinite;}
#vision-status .x-card:hover .x-glow{opacity:.4;}
@keyframes vs-rotate{to{transform:rotate(360deg)}}
/* INFO CARD ---------------------------------------------------------------------------------------------------------------------------------------------- */
.x-community-card{
--accent: #008CFF;
--accent-2:#0096FF;
--edge: rgba(255,255,255,.08);
--bg-0: #0B0F14;
--bg-1: #10151C;
--text: #E9EEF5;
--muted: #A1ADBD;
--card-image: none;
position: relative;
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 28px;
padding: clamp(20px,3.5vw,36px);
min-height: 340px;
border-radius: 22px;
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.18));
border: 1px solid var(--edge);
box-shadow: 0 18px 45px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
isolation: isolate;
align-items: stretch;
}
.x-community-card .x-card-bg{
position:absolute; inset:0;
background:
linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)),
radial-gradient(120% 80% at 10% 10%, rgba(0,140,255,.14), transparent 60%),
radial-gradient(120% 80% at 110% -10%, rgba(255,193,115,.12), transparent 60%),
var(--card-image) center/cover no-repeat fixed;
filter: saturate(.9) contrast(1.04);
z-index:-3;
}
.x-community-card .x-card-noise{
position:absolute; inset:-1px;
background-image:url("data:image/svg+xml;utf8,");
opacity:.65; pointer-events:none; z-index:-2;
mix-blend-mode: soft-light;
}
.x-community-card .x-card-border{
position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
background: conic-gradient(from 0deg at 50% 50%,
rgba(0,140,255,.0),
rgba(0,140,255,.42),
rgba(255,193,115,.0) 40%) border-box;
-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0) border-box;
-webkit-mask-composite:xor; mask-composite:exclude;
border:1px solid transparent;
animation:x-rotate 14s linear infinite;
opacity:.35;
}
@keyframes x-rotate { to { transform: rotate(360deg); } }
.x-community-card .x-card-glow{
position:absolute; inset:-40% -30%;
background: radial-gradient(60% 50% at 60% 50%, rgba(0,140,255,.14), transparent 70%);
filter: blur(40px); z-index:-1; opacity:.35; pointer-events:none;
animation: x-pulse 6s ease-in-out infinite;
}
@keyframes x-pulse { 0%,100%{ opacity:.25 } 50%{ opacity:.45 } }
.x-community-card .x-card-content{
grid-column: 1 / -1;
min-height: inherit;
display:flex; flex-direction:column; gap:14px;
justify-content:center; align-items:center; text-align:center;
padding-block:10px;
width: min(760px, 92%);
margin-inline: auto;
z-index: 1;
}
.x-community-card .x-side{
grid-column: 2 / 3;
justify-self: end;
align-self: center;
display:flex; flex-direction:column; gap:14px;
z-index: 2;
}
.x-eyebrow{
font-size:.85rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--muted); opacity:.9;
}
.x-title{
font-weight:800; letter-spacing:.3px; color:var(--text);
font-size: clamp(1.6rem, 3.5vw, 2.4rem);
margin: 0;
}
.x-title span{ color:var(--accent); text-shadow:0 0 22px rgba(0,140,255,.25); }
.x-copy{ color:var(--muted); margin: 2px 0 8px; max-width: 58ch; }
.x-chips{ display:flex; gap:10px; flex-wrap:wrap; padding:0; margin: 2px 0 6px; list-style:none; }
.x-chips li{
font-size:.85rem; color:#c8d2e1; border:1px solid var(--edge);
border-radius:999px; padding:8px 12px; background: rgba(255,255,255,.03);
backdrop-filter: blur(4px);
}
.x-brand{
width:84px; height:84px; border-radius:18px; display:grid; place-items:center;
margin:60px 0 10px;
border:1px solid rgba(255,255,255,.10);
background:
radial-gradient(70% 70% at 50% 50%, rgba(0,140,255,.16), rgba(0,0,0,0)),
linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.12));
box-shadow: inset 0 0 26px rgba(0,140,255,.18), 0 10px 28px rgba(0,0,0,.35), 0 0 24px rgba(0,140,255,.18);
}
.x-brand img{ max-width:60px; max-height:60px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.x-logo-hex{
color: var(--accent-2);
width:88px; height:88px; border-radius:20px; display:grid; place-items:center;
background: radial-gradient(80% 80% at 50% 50%, rgba(0,140,255,.14), rgba(0,0,0,.0));
border:1px solid var(--edge);
box-shadow: inset 0 0 24px rgba(0,140,255,.18), 0 6px 26px rgba(0,140,255,.25);
animation:x-float 5.5s ease-in-out infinite;
}
@keyframes x-float{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-6px) } }
.x-stats{
font-size:.92rem; color:#cdd6e4; background: rgba(0,0,0,.35);
border:1px solid var(--edge); padding:8px 12px; border-radius:10px;
backdrop-filter: blur(6px);
}
.x-stats .x-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px;
background: radial-gradient(circle at 30% 30%, #00ff8a, #0bbf62); box-shadow:0 0 12px rgba(0,255,138,.6); }
.x-cta{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center; }
.x-btn{
position:relative; display:inline-flex; align-items:center; gap:10px;
font-weight:700; line-height:1; letter-spacing:.2px;
padding:14px 18px; border-radius:12px; transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
border:1px solid var(--edge); color:var(--text); text-decoration:none;
background: rgba(255,255,255,.03);
}
.x-btn svg{ transform: translateY(.5px); }
.x-btn:hover{ transform: translateY(-1px); }
.x-btn-ghost:hover{ border-color: rgba(255,255,255,.18); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.x-btn-accent{
color:#0f0f0f; background: linear-gradient(180deg, var(--accent-2), var(--accent));
border-color: rgba(0,140,255,.35);
box-shadow: 0 16px 28px rgba(0,140,255,.35), inset 0 1px 0 rgba(255,255,255,.2);
}
.x-btn-accent:hover{ filter: brightness(1.05) saturate(1.02);
box-shadow: 0 18px 34px rgba(0,140,255,.45), inset 0 1px 0 rgba(255,255,255,.22); }
.x-btn-accent .x-shine{
position:absolute; inset:0; border-radius:inherit; pointer-events:none;
background: linear-gradient(100deg, rgba(255,255,255,.0) 40%, rgba(255,255,255,.45) 55%, rgba(255,255,255,.0) 70%);
mix-blend-mode: soft-light; transform: translateX(-120%); opacity:.0;
transition: transform .6s ease, opacity .4s ease;
}
.x-btn-accent:hover .x-shine{ transform: translateX(120%); opacity:.55; }
@media (max-width: 880px){
.x-community-card{
grid-template-columns: 1fr;
padding: 22px;
min-height: 0;
}
.x-community-card .x-card-content{
grid-column: 1 / 2;
width: 100%;
min-height: 0;
justify-content:flex-start;
align-items: flex-start;
text-align: left;
}
.x-community-card .x-side{
grid-column: 1 / 2; justify-self: start; align-self: start; gap:12px;
}
}
@media (prefers-reduced-motion: reduce){
.x-card-border,.x-card-glow,.x-logo-hex{ animation: none !important; }
.x-btn-accent .x-shine{ display:none; }
}
/* VISION CARD – SIZE CONTROLS */
#vision-community.x-community-card{
min-height: clamp(460px, 58vh, 820px);
}
#vision-community .x-card-content{
width: min(780px, 92%);
padding-block: 14px;
gap: 16px;
}
#vision-community .x-brand{ width: 96px; height: 96px; }
#vision-community .x-brand img{ max-width: 70px; max-height: 70px; }
#vision-community .x-title{ font-size: clamp(2.2rem, 5vw, 3.1rem); }
#vision-community .x-copy{
font-size: 1.05rem;
line-height: 1.55;
max-width: 62ch;
}
#vision-community .x-chips li{
padding: 10px 14px;
font-size: .92rem;
}
#vision-community .x-btn{
padding: 16px 20px;
font-size: 1rem;
}
@media (max-width: 880px){
#vision-community.x-community-card{
min-height: 420px;
}
#vision-community .x-card-content{
width: 100%;
gap: 14px;
padding-block: 10px;
}
#vision-community .x-brand{ width: 84px; height: 84px; }
#vision-community .x-brand img{ max-width: 60px; max-height: 60px; }
#vision-community .x-title{ font-size: clamp(1.8rem, 6vw, 2.4rem); }
}
/* --- Layout --- */
.product-page { padding-top: 0; }
.product-grid {
display: grid;
grid-template-columns: minmax(320px, 1fr) 420px;
gap: 28px;
}
@media (max-width: 1100px){
.product-grid { grid-template-columns: 1fr; }
}
/* --- Left/Gallery --- */
.product-hero-img {
position: relative;
aspect-ratio: 16/9;
border-radius: 14px;
overflow: hidden;
background: #0f1419;
border: 1px solid rgba(255,255,255,.06);
box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.product-hero-img .img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.product-thumbs {
display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap;
}
.product-thumbs .thumb {
width: 95px; height: 68px; border-radius: 10px;
border: 1px solid rgba(255,255,255,.08);
background: #0c1116; overflow: hidden; padding: 0;
cursor: pointer; transition: transform .15s ease, border-color .15s ease;
}
.product-thumbs .thumb:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
.product-thumbs .thumb.is-active { border-color: var(--c-accent, #ff7a0d); box-shadow: 0 0 0 3px rgba(255,122,13,.15); }
.product-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-img-placeholder {
display: grid; place-items: center; height: 100%;
color: #98a2b3; background: #0c1116;
}
/* --- Tabs --- */
.product-tabs-wrap { margin-top: 24px; }
.product-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.product-tabs .tab {
border: 1px solid rgba(255,255,255,.08);
background: #0b0f14; color: #e9eef5; padding: 8px 12px;
border-radius: 10px; font-weight: 600; cursor: pointer;
}
.product-tabs .tab.is-active { background: rgba(255,122,13,.12); border-color: rgba(255,122,13,.6); color: #fff; }
.product-tab-content .editor { margin-top: 12px; }
/* --- Right/Buy Card --- */
.product-right { position: relative; }
.buy-card{
position: sticky; top: 96px;
background: linear-gradient(180deg, rgba(14,18,23,.8), rgba(10,14,18,.9));
border: 1px solid rgba(255,255,255,.07);
border-radius: 14px; padding: 20px;
box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.buy-card .title{
font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem);
margin: 2px 0 8px; font-weight: 800;
}
/* status chip */
.status-chip{
--st: #ffb020;
display:inline-flex; align-items:center; gap:8px;
padding: 6px 10px; border-radius: 999px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
margin-bottom: 12px; font-weight:700; letter-spacing:.2px;
}
.status-chip .dot{ width:10px; height:10px; border-radius:50%; background: var(--st); box-shadow: 0 0 14px var(--st); }
.status-chip .text{ color:#fff }
/* live stats */
.live-stats { display:flex; flex-direction:column; gap:8px; margin: 8px 0 16px; }
.live-stats .stat { display:flex; align-items:center; gap:8px; color:#aeb7c2; font-size:.95rem; }
.live-stats svg { width:18px; height:18px; opacity:.9; }
/* price + stock */
.price-stock{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin: 8px 0 16px; }
.price{
font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
font-weight: 800; letter-spacing:.2px;
}
.stock-pill{
display:inline-block; padding:6px 10px; border-radius:999px;
border:1px solid rgba(255,255,255,.08); background:#0b0f14; color:#cbd3df; font-weight:700;
}
.stock-pill.is-out{ color:#ff6161; border-color: rgba(255,97,97,.45); }
.stock-pill.is-hold{ color:#0099ff; border-color: rgba(0, 174, 255, 0.45); }
/* badges on card */
.p-badges{ display:flex; gap:8px; flex-wrap:wrap; margin: 6px 0 16px; }
.p-badge{
--bg:#1e2937;
display:inline-flex; align-items:center; gap:6px;
padding:6px 10px; border-radius:10px; font-weight:700; font-size:.85rem;
color:#fff; background: var(--bg);
box-shadow: 0 8px 20px color-mix(in oklab, var(--bg) 25%, #0000);
}
/* ensure your product-form sits nicely inside */
.buy-form { margin-top: 8px; }
/* Card-Container (schwarzer Block wie im Screenshot) */
.xph-card{
background:#0b0e12;
border:1px solid rgba(255,255,255,.06);
border-radius:14px;
padding:26px;
box-shadow:0 18px 50px rgba(0,0,0,.45);
}
/* 2-Spalten Layout */
.xph-grid{display:grid;grid-template-columns:minmax(520px,1fr) 520px;gap:34px}
@media (max-width:1200px){.xph-grid{grid-template-columns:1fr}}
.xph-left{min-width:0}
/* Hero mit Rot-Gradient-Rahmen */
.xph-hero{
position:relative; border-radius:14px; overflow:hidden;
padding:3px; background:linear-gradient(150deg,#ff0032 0%,#008cff 50%,#9b0037 100%);
}
.xph-hero>img,.xph-placeholder{
display:block; width:100%; height:420px; object-fit:cover;
border-radius:12px; background:#0e141a; color:#8893a5; display:grid; place-items:center;
}
/* Thumbs */
.xph-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.xph-thumb{width:96px;height:72px;border-radius:10px;overflow:hidden;padding:0;border:1px solid rgba(255,255,255,.08);background:#0f1419;cursor:pointer;transition:.15s}
.xph-thumb img{width:100%;height:100%;object-fit:cover}
.xph-thumb:hover{transform:translateY(-1px)}
.xph-thumb.is-active{border-color:#ff3b12;box-shadow:0 0 0 3px rgba(255,59,18,.18)}
/* Right column */
.xph-title{
font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem);
font-weight: 800; line-height:1.15; margin:2px 0 10px;
}
/* Badge-Leiste */
.xph-badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.xph-badge{
display:inline-flex;align-items:center;gap:.4rem;
font-weight:700;font-size:.85rem;color:#dfe7ef;
border:1px solid rgba(255,255,255,.12);background:#0f1419;padding:6px 10px;border-radius:999px;
}
/* Preis groß */
.xph-price{
font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem);
font-weight:900; letter-spacing:.2px; margin: 10px 0 8px;
}
/* Sub Label */
.xph-sub{color:#94a0b2; font-weight:700; letter-spacing:.2em; font-size:.78rem; margin-bottom:8px}
/* Form-Wrapper -> wir geben dem Standard-Formular den Screenshot-Look */
.xph-form select,
.xph-form .form-select{
width:100%;
background:#0f1419;border:1px solid rgba(255,255,255,.12);color:#eaf0f6;
border-radius:10px; height:48px; padding:10px 12px; font-weight:700;
}
.xph-form .btn, .xph-form button[type="submit"]{
border-radius:10px; height:50px; font-weight:800; letter-spacing:.02em;
}
.xph-form .btn-primary, .xph-form button[type="submit"]{
background:#e31e24; border:1px solid #e31e24;
}
.xph-form .btn-primary:hover, .xph-form button[type="submit"]:hover{
filter:brightness(1.08);
}
/* Menge-Stepper (falls von product-form ausgegeben) */
.xph-form .quantity, .xph-form .qty, .xph-form .quantity-wrapper{
display:inline-flex; align-items:center; gap:0; border:1px solid rgba(255,255,255,.12);
border-radius:10px; overflow:hidden; background:#0f1419;
}
.xph-form .quantity button, .xph-form .qty button{
width:44px; height:44px; background:#121821; color:#dfe7ef; border:0; font-weight:900;
}
.xph-form .quantity input[type="number"], .xph-form input[name="quantity"]{
width:60px; height:44px; background:#0f1419; color:#fff; border:0; text-align:center; font-weight:800;
}
/* schmale Beschreibung darunter */
.container--narrow{max-width:980px;margin-inline:auto}
/* ===== Container / Karte ===== */
.xph-card{background:#0b0e12;border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:26px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.xph-grid{display:grid;grid-template-columns:minmax(520px,1fr) 520px;gap:34px}
@media (max-width:1200px){.xph-grid{grid-template-columns:1fr}}
.xph-left{min-width:0}
/* ===== Hero Bild mit Gradient-Frame ===== */
.xph-hero{position:relative;border-radius:14px;overflow:hidden;padding:3px;background:linear-gradient(150deg,#ff0032 0%,#008cff 50%,#9b0037 100%)}
.xph-hero>img,.xph-placeholder{display:block;width:100%;height:420px;object-fit:cover;border-radius:12px;background:#0e141a;color:#8893a5;display:grid;place-items:center}
/* Thumbs */
.xph-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.xph-thumb{width:96px;height:72px;border-radius:10px;overflow:hidden;padding:0;border:1px solid rgba(255,255,255,.08);background:#0f1419;cursor:pointer;transition:.15s}
.xph-thumb img{width:100%;height:100%;object-fit:cover}
.xph-thumb:hover{transform:translateY(-1px)}
.xph-thumb.is-active{border-color:#ff3b12;box-shadow:0 0 0 3px rgba(255,59,18,.18)}
/* ===== Right ===== */
.xph-title{font-size:clamp(1.6rem,1.2rem+1.4vw,2.6rem);font-weight:800;line-height:1.15;margin:2px 0 10px}
.xph-badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.xph-badge{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.85rem;color:#dfe7ef;border:1px solid rgba(255,255,255,.12);background:#0f1419;padding:6px 10px;border-radius:999px}
.xph-badge i{opacity:.9}
.xph-price{font-size:clamp(1.8rem,1.4rem+1.2vw,2.4rem);font-weight:900;letter-spacing:.2px;margin:10px 0 8px}
.xph-sub{color:#94a0b2;font-weight:700;letter-spacing:.2em;font-size:.78rem;margin-bottom:10px}
/* ===== Formular-Skin (lokal gescoped) ===== */
.xph .form-label{color:#aeb8c7;font-weight:700}
.xph-form .variants{display:grid;grid-template-columns:1fr;gap:10px}
.xph-form .variant{
display:flex;justify-content:space-between;align-items:center;gap:18px;width:100%;
border:1px solid rgba(255,255,255,.12);background:#0f1419;color:#eaf0f6;border-radius:12px;padding:14px 16px;
transition:.15s;position:relative;min-height:66px
}
.xph-form .variant:hover{transform:translateY(-1px)}
.xph-form .variant[disabled]{opacity:.45;cursor:not-allowed}
.xph-form .variant .name{font-weight:800;margin:0}
.xph-form .variant .description{margin:2px 0 0;font-size:.85rem}
.xph-form .variant .stock{margin:2px 0 0;font-size:.8rem}
.xph-form .variant .price{display:flex;flex-direction:column;align-items:flex-end;font-weight:900}
.xph-form .variant.active{
border-color:#ff3b12; box-shadow:0 0 0 3px rgba(255,59,18,.15);
}
.xph-form .variant .active-indicator{position:absolute;right:10px;bottom:10px;width:18px;height:18px;opacity:.9}
/* Quantity Stepper */
.xph-form .input-group{display:flex;align-items:center;width:100%;max-width:320px}
.xph-form .input-group .btn{width:48px;height:48px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:#121821;color:#dfe7ef}
.xph-form .input-group .form-control{
height:48px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:#0f1419;color:#fff;
text-align:center;font-weight:800;max-width:120px;margin:0 6px
}
/* Addons mini-Skin */
.xph-form .addon-item{background:#0f1419;border:1px solid rgba(255,255,255,.08)}
.xph-form .addon-image{width:42px;height:42px;object-fit:cover}
/* Buttons */
.xph-form .btn{height:52px;border-radius:12px;font-weight:900;letter-spacing:.02em}
.xph-form .btn.btn-primary{background:#e31e24;border-color:#e31e24}
.xph-form .btn.btn-primary:hover{filter:brightness(1.06)}
.xph-form .btn.btn-outline-primary{border-color:rgba(255,255,255,.18);background:#0e1319;color:#eaf0f6}
.xph-form .btn.btn-outline-primary:hover{border-color:#e31e24;color:#fff}
/* Beschreibung schmal */
.container--narrow{max-width:980px;margin-inline:auto}
/* ---------- Layout meta row ---------- */
.xph-meta-row{
display:flex;
align-items:center;
gap:.75rem;
flex-wrap:wrap;
margin:.25rem 0 1rem;
}
/* ---------- Glow Status Pill ---------- */
.x-status-pill{
--c: #ffb020; /* fallback */
display:inline-flex;
align-items:center;
gap:.5rem;
padding:.375rem .75rem;
border-radius:999px;
font-weight:700;
letter-spacing:.03em;
font-size:.75rem; /* kleiner, clean */
color: var(--c);
background: color-mix(in oklab, var(--c) 18%, #0e1115);
box-shadow:
0 0 .55rem color-mix(in oklab, var(--c) 35%, transparent),
inset 0 0 1.1rem color-mix(in oklab, var(--c) 18%, transparent);
border: 1px solid color-mix(in oklab, var(--c) 55%, transparent);
text-shadow: 0 0 8px color-mix(in oklab, var(--c) 60%, transparent);
}
.x-status-pill .dot{
width:.45rem; height:.45rem; border-radius:50%;
background: currentColor;
box-shadow: 0 0 .6rem currentColor, 0 0 .25rem currentColor inset;
}
/* ---------- Live Chips (viewing / purchased) ---------- */
.x-live-chips{
display:flex; flex-wrap:wrap; gap:.5rem;
}
.x-live-chips .chip{
display:inline-flex; align-items:center; gap:.35rem;
padding:.32rem .55rem;
border-radius:999px;
font-size:.72rem;
color:#98a2b3;
background:#12161b;
border:1px solid #1c222a;
}
.x-live-chips .chip strong{ color:#e5e7eb; font-weight:700; }
.x-live-chips .chip .label{ opacity:.85; }
.x-live-chips .chip .dot{
width:.38rem; height:.38rem; border-radius:50%;
background: var(--c,#10d98d);
box-shadow: 0 0 .45rem var(--c,#10d98d);
}
/* ---------- Hauptpreis kleiner & ausgewogen ---------- */
.xph-right .xph-price{
/* vorher zu groß – jetzt dynamisch & kompakt */
font-size: clamp(1.125rem, 2.2vw, 1.75rem); /* ~18–28px */
line-height: 1.2;
font-weight: 800;
margin:.35rem 0 .35rem;
}
.xph-right .xph-sub{
font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
color:#8b949e; margin-bottom:.6rem;
}
/* ---------- Variant Card – Preis kleiner ---------- */
.xph .variants .variant{
--border: #232a32;
display:flex; align-items:center; justify-content:space-between;
width:100%; gap:.75rem;
border:1px solid var(--border);
border-radius:.75rem;
background:#0f1317;
padding:.75rem .9rem;
}
.xph .variants .variant.active{
border-color:#ff7a1a33;
box-shadow: 0 0 0 .1rem #ff7a1a22, inset 0 0 0 .075rem #ff7a1a22;
}
.xph .variants .variant .name-stock .name{
font-weight:700; margin:0 0 .1rem; color:#e5e7eb; font-size:.9rem;
}
.xph .variants .variant .name-stock .description{ margin:0; font-size:.72rem; }
.xph .variants .variant .stock{ margin: .2rem 0 0; font-size:.72rem; }
.xph .variants .variant .price{
display:flex; align-items:center; gap:.4rem;
font-weight:700;
font-size:.9rem; /* <<< kleiner als vorher */
}
.xph .variants .variant .price s{
font-weight:600; opacity:.45; font-size:.8rem;
}
/* ---------- Eingabefelder & Buttons harmonisieren ---------- */
.xph .buy-buttons .btn{ padding:.7rem 1rem; }
.xph .input-group .form-control{ height:2.25rem; font-size:.9rem; }
.xph .input-group .btn{ height:2.25rem; padding:.35rem .6rem; }
/* ---------- Thumbs optisch ruhiger ---------- */
.xph-thumbs{ gap:.5rem; display:flex; margin-top:.6rem; }
.xph-thumb{
width:68px; height:52px; border-radius:.5rem; overflow:hidden;
border:1px solid #1c222a; background:#0f1317;
}
.xph-thumb.is-active{ border-color:#ff7a1a40; box-shadow:0 0 0 .1rem #ff7a1a22; }
.xph-card { background: #1f2633ad; } /* <- deine Wunschfarbe */
/* ========= Mobile Fix Pack ========= */
/* Safe-Area (iOS Notch) */
:root{
--safe-top: env(safe-area-inset-top, 0px);
--safe-right: env(safe-area-inset-right, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
}
/* Container-Padding auf Mobile inkl. Safe-Area */
@media (max-width: 991px){
.container,
.hero-container{
padding-left: max(16px, var(--safe-left));
padding-right: max(16px, var(--safe-right));
}
}
/* Header/Top-Leiste – etwas Luft unter der Notch */
@media (max-width: 991px){
header, .navbar{ padding-top: calc(6px + var(--safe-top)); }
}
/* HERO: responsive Typo + Overlay für bessere Lesbarkeit */
.hero{
position: relative;
background-size: cover;
background-position: center;
}
@media (max-width: 991px){
.hero{
min-height: 68vh;
padding: clamp(40px, 8vh, 120px) 0 24px;
}
.hero::after{
/* dezentes Abdunkeln des Hintergrunds auf Mobile */
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.20) 0%,
rgba(0,0,0,0.45) 45%,
rgba(0,0,0,0.65) 100%
);
pointer-events: none;
}
.hero .hero-text{ position: relative; z-index: 1; max-width: 36rem; }
.hero .hero-text h1{
font-size: clamp(28px, 8.8vw, 52px);
line-height: 1.05;
margin: 0 0 10px;
}
.hero .hero-text p{
font-size: clamp(14px, 3.8vw, 18px);
line-height: 1.45;
margin: 8px 0 0;
}
}
/* Scrollbare Filter-/Badge-Leisten auf Mobile */
@media (max-width: 991px){
.filters, .tags, .chips, .section-title + .row > .col .btn-group{
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: .5rem;
padding-bottom: .5rem;
}
}
/* Karten/Galerien: nicht zu schmal */
@media (max-width: 575px){
.products .product-card,
.card.product,
.x-card{ min-width: 260px; }
}
/* ===== Floating Actions (Warenkorb/Menu) unten rechts) ===== */
/* Falls du bereits zwei schwebende Buttons hast, die mittig klemmen:
Diese Regel schiebt/ordnet sie unten rechts; alte "floating left/center"
Klassen werden ausgeblendet, falls vorhanden. */
@media (max-width: 991px){
/* alte/verirrte Fabs sicherheitshalber verstecken */
.fab-left, .fab-center, .menu-fab{ display: none !important; }
/* neue Position/Familie */
.floating-actions{
position: fixed;
right: max(12px, var(--safe-right));
bottom: max(18px, var(--safe-bottom));
display: flex;
gap: 12px;
z-index: 1000;
}
.floating-actions .fab{
width: 56px; height: 56px;
display: grid; place-items: center;
border-radius: 14px;
background: rgba(20,24,28, .70);
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 10px 30px rgba(0,0,0,.35);
backdrop-filter: blur(6px);
}
}
/* Auf Desktop nicht nötig */
@media (min-width: 992px){
.floating-actions{ display: none; }
}
/* ===================== Mobile Fix Patch ===================== */
/* Safe-Area (iOS Notch) */
:root{
--safe-top: env(safe-area-inset-top, 0px);
--safe-right: env(safe-area-inset-right, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
--header-h: 72px; /* grobe Standardhöhe für sticky Navbar */
}
/* Einheitlicher dunkler Background */
html, body{
background: #0B0F14; /* dein Site-BG */
}
.page, .container.component, main{ background: transparent; }
/* ---------- NAVBAR: sticky + Safe-Area + Blur ---------- */
@media (max-width: 991px){
.navbar, header, .site-header{
position: sticky;
top: 0;
z-index: 2000;
background: rgba(12,16,22,0.86);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(255,255,255,.06);
padding-top: calc(8px + var(--safe-top));
padding-bottom: 8px;
}
/* Innenabstände in der Navbar */
.navbar .container, header .container, .site-header .container{
padding-left: max(16px, var(--safe-left));
padding-right: max(16px, var(--safe-right));
min-height: 56px;
}
}
/* ---------- HERO: gutes Padding + Overlay ---------- */
.hero{
position: relative;
background-size: cover;
background-position: center;
}
@media (max-width: 991px){
/* Platz unter der sticky Navbar */
.hero{ padding-top: clamp(32px, 6vh, 64px); }
/* Lesbarkeit: dezentes Overlay */
.hero::after{
content:"";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0,0,0,.20) 0%,
rgba(0,0,0,.45) 40%,
rgba(0,0,0,.60) 100%
);
pointer-events: none;
}
.hero .hero-text{
position: relative; z-index: 1;
}
.hero .hero-text h1{
font-size: clamp(28px, 8.8vw, 52px);
line-height: 1.05;
margin: 0 0 8px;
}
.hero .hero-text p{
font-size: clamp(14px, 3.8vw, 18px);
line-height: 1.45;
}
}
/* ---------- MOBILE PADDING & SCROLLBARE FILTER ---------- */
@media (max-width: 991px){
.container, .hero-container{
padding-left: max(16px, var(--safe-left));
padding-right: max(16px, var(--safe-right));
}
.filters, .chips, .tags{
display: flex; gap: .5rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: .5rem;
}
}
/* ---------- FALSCH POSITIONIERTE FLOATING-ICONS IM HERO ENTFERNEN ---------- */
/* Viele Themes haben alte “floating cart/menu”-Kacheln, die auf Mobile in der Mitte kleben.
Diese Regeln verstecken ALLE FABs/Floater IM HERO-BEREICH auf Mobile,
damit dort nichts mehr schwebt/überlappt. */
@media (max-width: 991px){
.hero [class*="fab"],
.hero [class*="floating"],
.hero [class*="action"],
.hero .menu-fab,
.hero .cart-fab{
display: none !important;
}
}
/* ---------- DEINE gewollten Floating-Aktionen unten rechts ---------- */
/* Wenn du bereits mein .floating-actions-Block nutzt, bleiben die sichtbar.
Falls du ihn (noch) nicht eingebaut hast, ignorier diese Sektion einfach. */
@media (max-width: 991px){
.floating-actions{
position: fixed;
right: max(12px, var(--safe-right));
bottom: max(18px, var(--safe-bottom));
z-index: 2500;
display: flex; gap: 12px;
}
.floating-actions .fab{
width: 56px; height: 56px;
display: grid; place-items: center;
border-radius: 14px;
background: rgba(20,24,28, .70);
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 10px 30px rgba(0,0,0,.35);
backdrop-filter: blur(6px);
}
}
/* Mobile: Navbar ganz oben links, mit Safe-Area */
:root{
--safe-top: env(safe-area-inset-top, 0px);
--safe-left: env(safe-area-inset-left, 0px);
--safe-right: env(safe-area-inset-right, 0px);
}
@media (max-width: 991px){
.navbar, header, .site-header{
position: fixed; /* sitzt ganz oben */
top: 0; left: 0; right: 0;
z-index: 2000;
background: rgba(12,16,22,.86);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(255,255,255,.06);
padding-top: calc(8px + var(--safe-top));
padding-bottom: 8px;
}
.navbar .container, header .container, .site-header .container{
justify-content: flex-start; /* linksbündig */
padding-left: max(16px, var(--safe-left));
padding-right: max(16px, var(--safe-right));
}
.navbar-brand{ margin-right: 10px; } /* Logo links */
.navbar-nav{ margin-left: 8px; } /* Items danach */
}
/* damit der Content nicht unter die fixed Navbar rutscht */
@media (max-width: 991px){
main, .page, .container.component{
padding-top: 72px; /* Header-Höhe */
}
}
@media (max-width: 991px){
/* gruppierter Block */
.floating-actions{
position: fixed;
top: calc(10px + env(safe-area-inset-top,0px));
left: max(10px, env(safe-area-inset-left,0px));
right: auto; bottom: auto;
z-index: 2500;
gap: 10px;
}
/* oder einzelne FABs: passe die Klassennamen an */
.menu-fab{
position: fixed;
top: calc(10px + env(safe-area-inset-top,0px));
left: max(10px, env(safe-area-inset-left,0px));
right: auto; bottom: auto;
z-index: 2500;
}
.cart-fab{
position: fixed;
top: calc(10px + env(safe-area-inset-top,0px));
left: calc(66px + env(safe-area-inset-left,0px)); /* neben Menü */
right: auto; bottom: auto;
z-index: 2500;
}
}
/* ========== MOBILE NAV-FABS FIX (immer oben links) ========== */
:root{
--safe-top: env(safe-area-inset-top, 0px);
--safe-left: env(safe-area-inset-left, 0px);
--gap: 10px;
}
@media (max-width: 991px){
/* ALLE bekannten Varianten von deinen schwebenden Buttons abdecken */
.floating-actions,
.menu-fab, .cart-fab,
.fab-menu, .fab-cart,
.floating-menu, .floating-cart,
.quick-menu, .quick-cart,
.fab, .fab-btn, .btn-fab {
position: fixed !important;
top: calc(var(--gap) + var(--safe-top)) !important;
left: calc(var(--gap) + var(--safe-left)) !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
margin: 0 !important;
z-index: 2500 !important; /* über Content, unter großen CTA rechts */
}
/* der zweite Button (z.B. Cart) direkt rechts neben Menü */
.floating-actions > *:nth-child(2),
.menu-fab + .cart-fab,
.fab-menu + .fab-cart,
.quick-menu + .quick-cart,
.fab + .fab,
.btn-fab + .btn-fab {
left: calc(58px + var(--gap) + var(--safe-left)) !important; /* 58px ≈ Breite eines FAB */
}
/* falls die Buttons im Hero absolut positioniert waren → trotzdem fix */
.hero .floating-actions,
.hero .menu-fab, .hero .cart-fab,
.hero .fab-menu, .hero .fab-cart,
.hero .floating-menu, .hero .floating-cart {
position: fixed !important;
}
/* großer Desktop-Login-CTA rechts oben auf Mobile ausblenden (verhindert Überlappung) */
.header-cta, .header .btn-login, .btn.login-cta {
display: none !important;
}
/* optional: wenn du eine feste Navbar nutzt, Platz nach oben geben */
main, .page, .container.component {
padding-top: max(0px, var(--safe-top)) !important;
}
}
.editor h2 { margin-top: 1.75rem; }
.editor ul { margin-left: 1rem; }
.editor strong { color: var(--brand, #ff7a00); } /* falls back to your orange */
/* Einfache, performante Reveal-Animation (ohne Keyframes) */
.reveal{
opacity:0;
transform:translateY(16px);
filter:blur(6px);
transition:
opacity .6s ease,
transform .6s cubic-bezier(.2,.65,.2,1),
filter .6s ease;
will-change: opacity, transform, filter;
}
.reveal.in{ opacity:1; transform:none; filter:blur(0); }
/* Richtungen / Varianten (optional über data-anim) */
.reveal[data-anim="left"] { transform:translateX(-16px) }
.reveal[data-anim="right"] { transform:translateX(16px) }
.reveal[data-anim="pop"] { transform:scale(.96) }
/* Stagger-Delay (wird inline als --d gesetzt) */
.reveal{ transition-delay: var(--d, 0s) }
@media (prefers-reduced-motion:reduce){
.reveal,.reveal.in{ transition:none !important; opacity:1 !important; transform:none !important; filter:none !important; }
}
/* --- 360° Spin for all nav icons (reliable for SVG) --- */
.nav-link .nav-icon{
display:inline-block;
width:20px; height:20px;
/* wichtig für SVG: Drehpunkt korrekt setzen */
transform-box: fill-box;
transform-origin: 50% 50%;
}
.nav-link:hover .nav-icon,
.nav-link:focus-visible .nav-icon{
animation: navSpin .6s cubic-bezier(.2,.8,.2,1) 1 both;
}
@keyframes navSpin {
to { transform: rotate(1turn); }
}
/* Discord-Icon in Brand-Farbe (nur Icon, nicht Text) */
.nav-discord .nav-icon{
color:#5865F2;
filter: drop-shadow(0 0 6px rgba(88,101,242,.15));
}
.nav-discord:hover .nav-icon{
filter: drop-shadow(0 0 8px rgba(88,101,242,.45));
}
/* optional: Respektiere reduced motion */
@media (prefers-reduced-motion: reduce){
.nav-link:hover .nav-icon,
.nav-link:focus-visible .nav-icon{
animation: none;
}
}
.nav-link .nav-icon{
display:inline-block;
width:20px; height:20px;
transform-box: fill-box;
transform-origin:center;
transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.nav-link:hover .nav-icon,
.nav-link:focus-visible .nav-icon{
transform: rotate(1turn);
}
.faq-cta-box {
max-width: 700px;
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
transition: background 0.3s ease, border 0.3s ease;
}
.btn-discord {
background-color: #5865f2;
color: #fff;
font-weight: 600;
padding: 0.6rem 1.5rem;
border-radius: 10px;
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
box-shadow: 0 4px 10px rgba(88, 101, 242, 0.25);
}
.btn-discord:hover {
background-color: #4752c4;
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(88, 101, 242, 0.35);
}
:root{
--faq-accent: #008CFF;
--faq-accent2: #0096FF;
--faq-edge: rgba(255,255,255,.10);
}
#faq{ margin-bottom: clamp(60px, 8vh, 120px); }
.container .faq-cta-box{ margin-bottom: clamp(60px, 8vh, 120px); }
.hero-11-badge,
.badge-faq{
background: linear-gradient(180deg, var(--faq-accent2), var(--faq-accent));
color:#0f0f0f;
border: 1px solid rgba(0,140,255,.28);
box-shadow: 0 10px 24px rgba(0,140,255,.20), inset 0 1px 0 rgba(255,255,255,.25);
}
.faq-item{
--border-color: rgba(0,140,255,.45);
border:1px solid var(--faq-edge);
background: rgba(255,255,255,.02);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.faq-item:hover{
border-color: var(--border-color);
box-shadow: 0 0 0 3px rgba(0,140,255,.12);
}
.faq-item.open{
border-color: rgba(0,140,255,.65);
box-shadow: 0 0 0 4px rgba(0,140,255,.10), inset 0 0 24px rgba(0,140,255,.12);
}
.faq-item .icon{
background: linear-gradient(180deg, var(--faq-accent2), var(--faq-accent));
color:#0f0f0f;
border: 1px solid rgba(0,140,255,.35);
box-shadow: inset 0 0 16px rgba(0,140,255,.25), 0 8px 20px rgba(0,140,255,.18);
}
.faq-item .toggle-icon{ color: var(--faq-accent2); }
.faq-item.open .toggle-icon{ color: var(--faq-accent); }
.faq-item.open .faq-header .question{ text-shadow: 0 0 16px rgba(0,140,255,.20); }
.faq-cta-box{
max-width: 760px;
background: rgba(255,255,255,.03);
border: 1px solid var(--faq-edge);
border-radius: 16px;
box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.btn.btn-discord{
display:inline-flex; align-items:center; gap:.5rem;
padding:.85rem 1.2rem;
border-radius: 12px;
font-weight:700;
color:#0f0f0f;
background: linear-gradient(180deg, var(--faq-accent2), var(--faq-accent));
border:1px solid rgba(0,140,255,.35);
box-shadow: 0 14px 28px rgba(0,140,255,.30), inset 0 1px 0 rgba(255,255,255,.22);
text-decoration:none;
}
.btn.btn-discord:hover{
filter: brightness(1.05) saturate(1.02);
box-shadow: 0 18px 34px rgba(0,140,255,.42), inset 0 1px 0 rgba(255,255,255,.24);
}
.faq-item[data-color] { --border-color: rgba(0,140,255,.45); }
.faq-item[data-color] .toggle-icon { color: var(--faq-accent2); }
#faq .faq-item{
border-color: rgba(0,140,255,.28) !important;
}
#faq .faq-item:hover{
border-color: rgba(0,140,255,.45) !important;
}
#faq .faq-item.open{
border-color: rgba(0,140,255,.65) !important;
box-shadow: 0 0 0 4px rgba(0,140,255,.12) !important;
}
#faq .faq-item .faq-header .toggle-icon{
color: #008CFF !important;
font-size: 1.2rem;
text-shadow: 0 0 12px rgba(0,140,255,.25);
transition: transform .3s ease, color .25s ease;
}
#faq .faq-item.open .faq-header .toggle-icon{
color: #0096FF !important;
transform: rotate(45deg);
}
#faq .faq-item[data-color="blue"] .toggle-icon,
#faq .faq-item[data-color="green"] .toggle-icon,
#faq .faq-item[data-color="purple"] .toggle-icon,
#faq .faq-item[data-color="orange"] .toggle-icon,
#faq .faq-item[data-color="red"] .toggle-icon{
color: #008CFF !important;
}
#faq .faq-item.open .faq-header .question{
text-shadow: 0 0 16px rgba(0,140,255,.18);
}
/* ===== FAQ Header (drop-in) ===== */
.faq-hero{
text-align:center;
padding:clamp(72px, 12vh, 140px) 16px 28px; /* Abstand von oben */
position:relative;
}
.faq-pill{
display:inline-flex; align-items:center; justify-content:center;
padding:.42rem 1.1rem; border-radius:999px;
letter-spacing:.12em; font-size:.8rem; text-transform:uppercase;
color:#0f0f0f; text-decoration:none; font-weight:800;
background:linear-gradient(180deg,#0096FF,#008CFF);
border:1px solid rgba(0,140,255,.32);
box-shadow:0 10px 22px rgba(0,140,255,.25), inset 0 1px 0 rgba(255,255,255,.25);
transition:filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
.faq-pill:hover{ filter:brightness(1.05) saturate(1.04); transform:translateY(-1px); }
.faq-title{
margin:14px 0 12px;
font-weight:900; letter-spacing:.04em; text-transform:uppercase;
font-size:clamp(2.8rem, 8vw, 5.6rem);
background:linear-gradient(180deg,#ffffff,#cfd6e3);
-webkit-background-clip:text; background-clip:text; color:transparent;
text-shadow:0 2px 0 rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.35);
position:relative; display:inline-block;
}
.faq-title::after{ /* dezente Accent-Linie unter der Headline */
content:""; display:block; margin:10px auto 0;
width:min(220px,32vw); height:2px; border-radius:2px;
background:linear-gradient(90deg,transparent,#008CFF,transparent);
opacity:.6;
}
.faq-sub{
margin:0; color:#c7cfdc;
font-size:clamp(1rem, 2.2vw, 1.25rem);
}
.faq-by{
margin:.35rem 0 0; color:#98a3b3; font-size:.95rem;
}
/* optional: kleines Fade-In beim Laden */
.faq-hero > *{
opacity:0; transform:translateY(8px); filter:blur(4px);
animation:faqIn .7s cubic-bezier(.22,1,.36,1) forwards;
}
.faq-pill{animation-delay:.05s}
.faq-title{animation-delay:.15s}
.faq-sub{animation-delay:.25s}
.faq-by{animation-delay:.35s}
@keyframes faqIn{to{opacity:1; transform:none; filter:none}}
/* Center the whole header content */
.faq-hero{
display:flex; /* NEU */
flex-direction:column; /* NEU */
align-items:center; /* NEU: zentriert Kinder horizontal */
text-align:center; /* bleibt */
}
/* Badge sauber mittig + spacing */
.faq-pill{
margin: 0 auto 12px; /* NEU: zentriert und Abstand nach unten */
display:inline-flex; /* wie gehabt */
}
/* Showcase Hero Styling */
.showcase-hero {
text-align: center;
padding: 60px 20px 40px;
background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}
.showcase-pill {
display: inline-block;
padding: 8px 16px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
color: #0b1220;
text-decoration: none;
background: linear-gradient(90deg, var(--accent, #6ee7ff), var(--accent-2, #8b5cf6));
box-shadow: 0 8px 20px rgba(0,0,0,0.25);
transition: filter 0.2s ease, transform 0.2s ease;
}
.showcase-pill:hover {
filter: brightness(1.05);
transform: translateY(-1px);
}
.showcase-title {
font-size: clamp(36px, 5vw, 64px);
margin: 20px 0 10px;
font-weight: 800;
letter-spacing: -0.02em;
background: linear-gradient(90deg, var(--accent, #6ee7ff), var(--accent-2, #8b5cf6));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 40px rgba(110,231,255,0.2);
}
.showcase-sub {
font-size: 16px;
color: var(--muted, #94a3b8);
margin: 0 0 4px;
}
.showcase-by {
font-size: 13px;
color: var(--muted, #94a3b8);
opacity: 0.7;
}
/* Orange nur für den Showcase */
.showcase.pro { --accent:#ffb44a; --accent-2:#008cff; --r:18px; --dur:300ms; }
.showcase.pro input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; }
.gallery__viewport{
position:relative; aspect-ratio:16/9; border-radius:var(--r);
overflow:hidden; border:1px solid var(--border,rgba(255,255,255,.08));
background:
radial-gradient(1100px 520px at 85% -10%, rgba(255,180,74,.12), transparent 60%),
radial-gradient(900px 520px at -10% 90%, rgba(255,106,0,.14), transparent 55%),
var(--bg-elev,#0f1520);
}
.gallery__viewport::before,
.gallery__viewport::after{ pointer-events:none; position:absolute; inset:0; content:""; }
.gallery__viewport::before{
inset:-1px; padding:1px; border-radius:inherit;
background:linear-gradient(90deg,var(--accent),var(--accent-2));
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude; opacity:.28;
}
.gallery__viewport::after{
background:
radial-gradient(120% 120% at 50% 100%, rgba(0,0,0,.45), transparent 50%),
radial-gradient(120% 120% at 50% 0%, rgba(0,0,0,.35), transparent 40%);
}
.slide{
position:absolute; inset:0; background-size:cover; background-position:center;
transform:translateX(100%); transition:transform var(--dur) ease-in-out;
z-index:1;
}
.cap{
position:absolute; left:16px; bottom:14px; z-index:3;
padding:8px 12px; border-radius:12px; font:700 13px system-ui;
color:#0b1220; background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
/* Active slide */
#g1:checked ~ .gallery__viewport .s1,
#g2:checked ~ .gallery__viewport .s2,
#g3:checked ~ .gallery__viewport .s3,
#g4:checked ~ .gallery__viewport .s4{ transform:translateX(0); }
/* Pfeile – ALWAYS on top & klickbar */
.nav{
position:absolute; top:50%; transform:translateY(-50%);
width:46px; height:46px; border-radius:999px; cursor:pointer;
background:rgba(0,0,0,.38); border:1px solid var(--border,rgba(255,255,255,.1));
backdrop-filter:blur(6px); box-shadow:0 14px 30px rgba(0,0,0,.35);
z-index:9999; pointer-events:auto; display:none;
}
.nav::after{
content:""; position:absolute; inset:0; margin:auto;
width:12px; height:12px; border-top:2px solid #fff; border-right:2px solid #fff;
}
.nav--prev{ left:14px; } .nav--prev::after{ transform:rotate(-135deg); }
.nav--next{ right:14px; } .nav--next::after{ transform:rotate(45deg); }
/* Nur passendes Pfeil-Paar anzeigen */
#g1:checked ~ .gallery__viewport .set1{ display:block; }
#g2:checked ~ .gallery__viewport .set2{ display:block; }
#g3:checked ~ .gallery__viewport .set3{ display:block; }
#g4:checked ~ .gallery__viewport .set4{ display:block; }
/* Progress */
.progress{ position:absolute; left:14px; right:14px; bottom:12px; height:3px;
background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; z-index:2;}
.progress .bar{ display:block; height:100%; width:0;
background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .5s;}
#g1:checked ~ .gallery__viewport .progress .bar{ width:25%; }
#g2:checked ~ .gallery__viewport .progress .bar{ width:50%; }
#g3:checked ~ .gallery__viewport .progress .bar{ width:75%; }
#g4:checked ~ .gallery__viewport .progress .bar{ width:100%; }
/* Thumbs */
.gallery__thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:14px; }
.thumb{
border:1px solid var(--border,rgba(255,255,255,.08)); border-radius:14px; aspect-ratio:16/9;
background-size:cover; background-position:center; cursor:pointer;
}
#g1:checked ~ .gallery__thumbs .t1,
#g2:checked ~ .gallery__thumbs .t2,
#g3:checked ~ .gallery__thumbs .t3,
#g4:checked ~ .gallery__thumbs .t4{
box-shadow:0 0 0 2px rgba(0, 140, 255,.9), 0 16px 36px rgba(0,0,0,.35);
outline:2px solid transparent;
}
/* Bilder (alle gesetzt) */
.s1{ background-image:url("https://i.imgur.com/ejhdzVU.png"); }
.s2{ background-image:url("https://i.imgur.com/oMcUy3O.jpeg"); }
.s3{ background-image:url("https://i.imgur.com/05v0sNH.png"); }
.s4{ background-image:url("https://i.imgur.com/gVGkbY6.jpeg"); }
/* Bottom (alle gesetzt) */
.t1{ background-image:url("https://i.postimg.cc/qRttNts1/cropped-image.png"); }
.t2{ background-image:url("https://i.postimg.cc/6p7hNQSY/cropped-image.png"); }
.t3{ background-image:url("https://i.postimg.cc/8k487y5N/cropped-image-2.png"); }
.t4{ background-image:url("https://i.postimg.cc/KzXb5RS2/inverted-image-1.png"); }
/* ---- SIZE / LAYOUT FIX ---- */
/* Gesamte Section begrenzen & zentrieren */
.showcase.pro{
max-width: 1120px; /* <- passe hier deinen Sweet-Spot an */
margin: 24px auto 48px;
padding: 0 16px 18px;
}
/* Viewport: feste Max-Höhe + responsive Höhe via clamp */
.gallery__viewport{
width: 100%;
height: clamp(260px, 42vw, 520px); /* min, bevorzugt, max */
aspect-ratio: unset; /* Höhe steuert; AR per cover */
}
/* Slides füllen den verfügbaren Rahmen sauber */
.slide{
background-size: cover;
background-position: center;
}
/* Pfeile etwas kleiner, damit’s nicht wuchtig wirkt */
.nav{ width: 40px; height: 40px; }
.nav::after{ width: 10px; height: 10px; }
/* Thumbs: kompakter & flexibler */
.gallery__thumbs{
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: 10px;
}
.thumb{
aspect-ratio: 16/9;
min-height: 84px; /* kleinste Höhe, wirkt sonst zu dünn */
box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
/* Progress-Bar dichter an den Rand und schlanker */
.progress{
left: 12px; right: 12px; bottom: 10px; height: 2px;
}
/* Mobile Tuning */
@media (max-width: 900px){
.gallery__viewport{ height: clamp(220px, 52vw, 420px); }
.nav{ width: 36px; height: 36px; }
}
@media (max-width: 680px){
.showcase.pro{ padding: 0 12px 14px; }
.gallery__thumbs{ gap: 8px; }
.thumb{ min-height: 72px; }
}
/* 1) Showcase als eigener, niedriger Stacking-Context */
.showcase.pro {
position: relative;
isolation: isolate; /* eigener Stacking-Context */
z-index: 0; /* unter Navbar bleiben */
}
/* 2) Viewport-Stacking klar definieren */
.gallery__viewport {
position: relative;
z-index: 0; /* Basis über Inhalt, unter Pfeilen */
}
/* 3) Pfeile: NICHT mehr über allem */
.nav {
z-index: 2; /* vorher 9999 -> runter! */
}
/* 4) Deko-Layer blocken keine Klicks und liegen unten */
.gallery__viewport::before,
.gallery__viewport::after { pointer-events: none; z-index: 0; }
/* optional: falls du eine Navbar-Klasse hast, gib ihr eine klare Priorität */
.navbar, .topbar, .header, .site-nav { z-index: 10; position: sticky; }
/* === Description Card (in der Hauptbox) === */
.xph-desc-card{
margin-top: .8rem;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.0)),
#0f1317; /* pane */
border: 1px solid #1c222a;
position: relative;
overflow: hidden;
}
/* feiner Gradient-Rahmen / Glow in Orange */
.xph-desc-card::before{
content:"";
position:absolute; inset:-1px;
padding:1px; border-radius:14px;
background: linear-gradient(90deg, #ffb44a, #008cff);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity:.22; pointer-events:none;
}
.xph-desc-head{
display:flex; align-items:center; justify-content:flex-start;
padding:10px 12px 0 12px;
}
.xph-desc-head .pill{
display:inline-flex; align-items:center; gap:.5rem;
padding:.35rem .65rem; border-radius:999px;
font-weight:800; font-size:.72rem; letter-spacing:.08em;
color:#0b1220;
background: linear-gradient(90deg, #ffb44a, #008cff);
box-shadow: 0 10px 22px rgba(0,0,0,.35);
}
.xph-desc-body{
padding:12px 12px 14px 12px;
max-height: clamp(180px, 34vh, 360px);
overflow: auto;
color:#cfd6df;
font-size:.92rem;
line-height:1.6;
}
/* nicer list/typography inside description editor */
.xph-desc-body h1,.xph-desc-body h2,.xph-desc-body h3{
margin:.2rem 0 .4rem;
font-weight:800;
color:#e9eef5;
}
.xph-desc-body h1{ font-size:1.25rem; }
.xph-desc-body h2{ font-size:1.1rem; }
.xph-desc-body h3{ font-size:1rem; }
.xph-desc-body p{ margin:.35rem 0; }
.xph-desc-body ul, .xph-desc-body ol{ margin:.4rem 0 .6rem 1.1rem; }
.xph-desc-body li{ margin:.2rem 0; }
.xph-desc-body a{ color:#ffb44a; text-decoration:underline dotted; }
.xph-desc-body img, .xph-desc-body iframe, .xph-desc-body video{
max-width:100%; height:auto; border-radius:10px; display:block;
margin:.4rem 0;
}
/* dezente Scrollbar */
.xph-desc-body{ scrollbar-width:thin; scrollbar-color:#596172 transparent; }
.xph-desc-body::-webkit-scrollbar{ width:8px; }
.xph-desc-body::-webkit-scrollbar-thumb{ border-radius:10px; background:#2a2f36; }
/* Responsive: auf Mobile etwas luftiger */
@media (max-width: 992px){
.xph-desc-body{ max-height: unset; }
}
footer.footer {
position: relative; /* eigener Stack */
z-index: 20; /* über normalen Sektionen */
}
/* ersetze .enginex-payments durch deine Klasse/ID dieser Section */
.enginex-payments {
position: relative;
isolation: isolate; /* eigener Stacking-Context */
z-index: 0;
overflow: hidden; /* schneidet großen Glow am Rand ab */
margin-bottom: 32px; /* Abstand vor dem Footer */
}
/* Deko-Layer hinter den Inhalt UND hinter dem Footer */
.enginex-payments::before,
.enginex-payments::after {
pointer-events: none;
z-index: -1;
}
/* ---------- MOBILE FIX PACK (place at the very end) ---------- */
/* iOS safe-area helpers */
:root{
--safe-top: env(safe-area-inset-top, 0px);
--safe-bot: env(safe-area-inset-bottom, 0px);
}
/* hide the desktop "topbar" on phones (it’s overlapping the navbar in your screenshot) */
@media (max-width: 991.98px){
.topbar{ display:none !important; }
}
/* make the superbar actually sit below the notch and float above everything */
nav.superbar{
position: sticky;
top: calc(var(--safe-top) + 8px);
z-index: 1002; /* higher than any other floating UI */
}
/* slightly tighter shell on phones */
@media (max-width: 991.98px){
.superbar .superbar-shell{
border-radius: 16px;
padding: 6px 8px;
}
.superbar .navbar-brand img{ height: 22px; }
}
/* ensure the hamburger toggler is tappable and never hidden */
.superbar .navbar-toggler{
z-index: 1003; /* sits above the shell and content */
padding: .5rem .65rem;
}
/* make the collapsed menu panel float above content, full width, with safe-area top */
@media (max-width: 991.98px){
.navbar-collapse{
position: fixed !important;
left: 12px; right: 12px;
top: calc(var(--safe-top) + 64px); /* below the sticky bar */
z-index: 1050;
border-radius: 14px;
padding: .8rem;
background: rgba(16,20,32,.55);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border:1px solid rgba(120,170,255,.20);
box-shadow:0 12px 40px rgba(0,0,0,.40);
}
}
/* kill the desktop "hide on scroll" animation on phones (was hiding your navbar) */
@media (max-width: 991.98px){
nav.superbar.hide-on-scroll .superbar-shell{
transform:none !important;
opacity:1 !important;
pointer-events:auto !important;
}
}
/* sometimes a parent sets overflow:hidden; make sure headers can overflow */
header, nav.superbar, .superbar-shell{ overflow: visible !important; }
/* tiny polish for the “Dashboard Login” pill on mobile if it ever appears */
@media (max-width: 991.98px){
.btn.btn-cta-red, .btn.btn-cta-red.alt{
padding:.55rem .8rem;
font-size:.92rem;
border-radius:12px;
}
}
/* give the first section a little breathing room under the sticky bar on phones */
@media (max-width: 991.98px){
.hero, .hero-11, main > section:first-of-type{
scroll-margin-top: calc(var(--safe-top) + 84px);
/* If your content touches the bar on some pages, uncomment: */
/* padding-top: calc(var(--safe-top) + 8px); */
}
}
/* ===== MOBILE NAVBAR FIX ===== */
:root{
--safe-top: env(safe-area-inset-top, 0px);
--safe-bot: env(safe-area-inset-bottom, 0px);
--bar-h: 60px; /* JS setzt die echte Höhe */
}
/* sichtbares Hamburger-Icon ohne navbar-dark/light */
.navbar .navbar-toggler{ color:#fff; border:1px solid rgba(255,255,255,.16); border-radius:12px; background:rgba(255,255,255,.06); }
.navbar .navbar-toggler .navbar-toggler-icon{
position:relative; width:22px; height:2px; background:currentColor; display:block;
}
.navbar .navbar-toggler .navbar-toggler-icon::before,
.navbar .navbar-toggler .navbar-toggler-icon::after{
content:""; position:absolute; left:0; right:0; height:2px; background:currentColor;
}
.navbar .navbar-toggler .navbar-toggler-icon::before{ top:-6px; }
.navbar .navbar-toggler .navbar-toggler-icon::after{ top: 6px; }
/* Nur Mobile: Topbar verstecken, Navbar fixieren, Overlay-Collapse */
@media (max-width: 991.98px){
.topbar{ display:none !important; }
nav.superbar{
position:fixed !important;
top:var(--safe-top) !important; left:0; right:0;
z-index:4000 !important;
margin:0; transform:none !important; overflow:visible !important;
}
/* Platz nach oben schaffen damit Content nicht darunter klebt */
body{ padding-top: calc(var(--safe-top) + var(--bar-h) + 10px) !important; }
/* Collapse als eigenes Panel */
#navbarSupportedContent.navbar-collapse{
position:fixed !important;
left:12px; right:12px;
top:calc(var(--safe-top) + var(--bar-h) + 8px) !important;
z-index:4500 !important;
max-height:calc(100vh - var(--safe-top) - var(--bar-h) - 24px - var(--safe-bot));
overflow:auto;
border-radius:14px;
padding:.8rem;
background:rgba(16,20,32,.55);
backdrop-filter:blur(18px) saturate(140%);
-webkit-backdrop-filter:blur(18px) saturate(140%);
border:1px solid rgba(120,170,255,.20);
box-shadow:0 12px 40px rgba(0,0,0,.40);
}
/* Body scroll sperren wenn Menü offen (siehe JS) */
body.menu-open{ overflow:hidden; }
}