:root{
 --bg:#0A0A0F;--panel:#11111a;--panel2:#1E1E28;--cyan:#00E5FF;--pink:#FF00D6;
 --white:#fff;--muted:#aeb3c4;--line:#283044;--max:1540px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:
 radial-gradient(circle at 80% 8%,rgba(0,229,255,.07),transparent 30%),
 radial-gradient(circle at 15% 35%,rgba(255,0,214,.05),transparent 28%),var(--bg);
 color:var(--white);font-family:Montserrat,"Segoe UI",Arial,sans-serif}
a{color:inherit;text-decoration:none}.top-glow{height:2px;background:linear-gradient(90deg,transparent,var(--cyan),var(--pink),transparent)}
.header{height:84px;max-width:var(--max);margin:auto;padding:0 28px;display:flex;align-items:center;gap:34px;border-bottom:1px solid #171d29}
.brand img{width:205px;display:block}.nav{display:flex;gap:30px;margin-left:auto;align-items:stretch;height:100%}
.nav a{display:flex;align-items:center;position:relative;font-weight:700;font-size:14px;color:#e7eaf1}
.nav a.active{color:#fff}.nav a.active:after{content:"";height:3px;background:var(--pink);position:absolute;left:0;right:0;bottom:0;box-shadow:0 0 14px var(--pink)}
.header-shop{border:1px solid #36445d;padding:10px 15px;border-radius:10px;font-weight:800;font-size:13px}.header-shop span{color:var(--cyan)}
main{max-width:var(--max);margin:auto}.hero{min-height:525px;display:grid;grid-template-columns:1.04fr .96fr;align-items:center;padding:58px 48px 38px;position:relative;overflow:hidden}
.eyebrow{color:var(--cyan);font-size:12px;letter-spacing:.17em;font-weight:900;margin-bottom:18px}.hero h1{font-size:54px;line-height:1.04;margin:0 0 15px;letter-spacing:-.035em}.hero h1 span{color:var(--pink)}
.hero h2{font-size:25px;margin:0 0 10px}.hero-copy>p{max-width:720px;color:#c7cad4;line-height:1.55;font-size:17px;margin:0}
.hero-actions{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}.btn{padding:14px 22px;border-radius:9px;font-weight:900;border:1px solid #3a5370;display:inline-flex;gap:12px;align-items:center}.btn.primary{background:linear-gradient(120deg,#ff0099,var(--pink));border-color:var(--pink);box-shadow:0 0 24px #ff00d633}.btn.secondary{background:#0c111b}.btn.secondary:hover{border-color:var(--cyan)}
.hero-benefits{display:flex;gap:24px;flex-wrap:wrap;margin-top:23px;color:#bfc5d2;font-size:12px;font-weight:700}.hero-benefits span:first-letter{color:var(--cyan)}
.hero-art{height:430px;position:relative;perspective:900px}.halo{position:absolute;border-radius:50%;filter:blur(55px);opacity:.22}.halo.cyan{width:340px;height:270px;background:var(--cyan);right:190px;top:70px}.halo.pink{width:300px;height:260px;background:var(--pink);right:10px;bottom:30px}
.brand-panel{position:absolute;right:145px;top:52px;width:390px;height:245px;border-radius:17px;background:linear-gradient(145deg,#11131c,#05060a);border:1px solid #2d3950;box-shadow:0 30px 55px #000b,0 0 36px #00e5ff1a;transform:rotateY(-8deg)}
.brand-panel img{width:87%;position:absolute;inset:0;margin:auto;object-fit:contain}
.card{position:absolute;width:130px;height:185px;border-radius:13px;border:2px solid #3e5a83;background:linear-gradient(145deg,#111a28,#060910);box-shadow:0 18px 30px #000a;display:flex;flex-direction:column;justify-content:space-between;padding:14px;font-weight:900;overflow:hidden}
.card:after{content:"";position:absolute;inset:-30%;background:linear-gradient(120deg,transparent 30%,#00e5ff55 48%,#ff00d655 60%,transparent 70%);transform:rotate(20deg)}
.card i,.card b{position:relative;z-index:1}.card i{font-size:11px;color:var(--cyan)}.card b{font-size:35px}
.c1{left:36px;top:138px;transform:rotate(-9deg)}.c2{left:145px;top:98px;transform:rotate(-1deg);border-color:#c132ba}.c3{right:28px;top:170px;transform:rotate(9deg);border-color:#64d}
.stack{position:absolute;width:145px;height:55px;border-radius:7px;background:repeating-linear-gradient(0deg,#dfe4f0 0 3px,#777f91 4px 5px);box-shadow:0 16px 30px #0009}.s1{left:88px;bottom:28px;transform:rotate(-5deg)}.s2{right:80px;bottom:23px;transform:rotate(5deg)}
.pack{position:absolute;width:100px;height:155px;border-radius:10px;padding:18px 10px;display:flex;align-items:end;font-weight:900;font-size:13px;letter-spacing:.07em;background:#0e1521;border:1px solid #35445c;box-shadow:0 14px 25px #0009}
.p1{right:255px;bottom:12px;background:linear-gradient(155deg,#102947,#111,var(--cyan))}.p2{right:165px;bottom:5px;background:linear-gradient(155deg,#35123f,#111,var(--pink))}.p3{right:0;bottom:22px;background:linear-gradient(155deg,#1d3a1d,#111,#8cff00)}
.strip{border-top:1px solid #1e2633;border-bottom:1px solid #1e2633;display:grid;grid-template-columns:repeat(4,1fr);padding:17px 40px;background:#090e16}.strip>div{display:grid;grid-template-columns:42px 1fr;column-gap:10px;padding:0 26px;border-right:1px solid #242d3d}.strip>div:last-child{border:0}.strip span{grid-row:1/3;font-size:30px;color:var(--cyan);align-self:center}.strip b{font-size:13px}.strip small{color:#919aae;margin-top:5px}
.discover,.new,.how{padding:36px 48px}.section-title h2{font-size:28px;margin:0}.section-title span{display:block;width:42px;height:4px;background:var(--pink);margin-top:8px}.section-title.row{display:flex;align-items:end;justify-content:space-between}.section-title.row p{color:#9fa7b8;margin:8px 0 0}.section-title.row>a{color:var(--cyan);font-size:13px}
.discover-grid{display:grid;grid-template-columns:1.18fr .92fr .92fr;gap:14px;margin-top:18px}.feature{position:relative;min-height:195px;border:1px solid #233249;border-radius:14px;padding:25px;display:flex;gap:18px;background:linear-gradient(145deg,#0d121d,#101622);overflow:hidden}.feature:hover{border-color:#00e5ff77}.shop-feature{border-color:var(--pink);box-shadow:0 0 22px #ff00d61c;background:radial-gradient(circle at 75% 50%,#3d0838,transparent 45%),linear-gradient(145deg,#120e18,#111)}
.feature-icon{min-width:54px;height:54px;border-radius:11px;display:grid;place-items:center;border:1px solid #8c286f;color:var(--pink);font-size:25px;background:#24101f}.feature-icon.cyan{border-color:#1b6d87;color:var(--cyan);background:#0b2630}.feature small{color:var(--cyan);font-weight:900}.shop-feature small{color:var(--pink)}.feature h3{font-size:23px;line-height:1.1;margin:7px 0 9px}.feature p{font-size:13px;color:#b8becc;max-width:360px;line-height:1.45;margin:0 0 16px}.mini-cta{display:inline-block;background:var(--pink);padding:9px 14px;border-radius:7px;font-size:12px}.outline-cta{display:inline-block;border:1px solid #357695;padding:8px 13px;border-radius:7px;font-size:12px}.mini-cards{position:absolute;right:10px;bottom:6px;width:175px;height:125px;opacity:.88}.mini-cards i{position:absolute;width:72px;height:100px;border-radius:8px;border:1px solid #496689;background:linear-gradient(145deg,#112340,#25112a);box-shadow:0 10px 20px #0008}.mini-cards i:nth-child(1){left:10px;top:18px;transform:rotate(-10deg)}.mini-cards i:nth-child(2){left:52px;top:6px;transform:rotate(1deg)}.mini-cards i:nth-child(3){left:96px;top:18px;transform:rotate(9deg)}
.product-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:17px}.product-grid>a{border:1px solid #253248;border-radius:13px;background:#0f151f;padding:10px 10px 14px;min-width:0;transition:.15s}.product-grid>a:hover{transform:translateY(-2px);border-color:#4d668b}.product-art{height:124px;border-radius:9px;display:grid;place-items:center;overflow:hidden;position:relative;font-weight:1000;letter-spacing:.08em}.product-art:before,.product-art:after{content:"";position:absolute;border-radius:12px;width:70px;height:95px;border:1px solid #73809a;background:#171d28}.product-art:before{transform:rotate(-12deg);left:48px}.product-art:after{transform:rotate(10deg);right:48px}.product-art b{z-index:3;padding:9px 11px;border-radius:5px;background:#070a10cc}.art-base{background:radial-gradient(circle,#005568,#10131b)}.art-insert{background:radial-gradient(circle,#65105d,#10131b)}.art-sticker{background:radial-gradient(circle,#434d0a,#10131b)}.art-sport{background:radial-gradient(circle,#123b69,#10131b)}.art-non{background:radial-gradient(circle,#3c164e,#10131b)}.art-more{background:linear-gradient(135deg,#00e5ff22,#ff00d633)}
.product-grid small{display:block;color:var(--pink);font-weight:900;font-size:10px;margin:12px 0 5px}.product-grid h3{margin:0 0 6px;font-size:17px}.product-grid p{margin:0 0 13px;color:#9ea7b9;font-size:12px;line-height:1.35}.product-grid strong{font-size:12px;color:var(--cyan)}
.how{border-top:1px solid #1d2736}.how>h2{font-size:28px}.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.how-grid>div{border:1px solid #253248;background:#0d131d;padding:22px;border-radius:13px}.how-grid b{font-size:29px;color:var(--cyan)}.how-grid h3{margin:10px 0 8px}.how-grid p{color:#9fa8b8;line-height:1.5;margin:0}
footer{max-width:var(--max);margin:auto;border-top:1px solid #212b3b;padding:25px 48px 35px;display:flex;align-items:center;gap:28px;color:#8e97aa}footer img{width:170px}.footer-links{display:flex;gap:17px;flex-wrap:wrap;font-size:11px;margin:auto}.footer-links a:hover{color:var(--cyan)}footer small{font-size:10px;letter-spacing:.13em}
@media(max-width:1150px){.nav{display:none}.header-shop{margin-left:auto}.hero{grid-template-columns:1fr}.hero-art{height:340px}.discover-grid{grid-template-columns:1fr 1fr}.shop-feature{grid-column:1/-1}.product-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.header{height:70px;padding:0 18px}.brand img{width:160px}.header-shop{font-size:11px;padding:8px 10px}.hero{padding:35px 20px 20px}.hero h1{font-size:37px}.hero h2{font-size:20px}.hero-copy>p{font-size:15px}.hero-art{height:300px;transform:scale(.88);transform-origin:center top}.strip{grid-template-columns:1fr 1fr;padding:12px}.strip>div{padding:12px;border:0}.discover,.new,.how{padding:28px 20px}.discover-grid{grid-template-columns:1fr}.shop-feature{grid-column:auto}.product-grid{grid-template-columns:1fr 1fr}.how-grid{grid-template-columns:1fr}.section-title.row{display:block}.section-title.row>a{display:block;margin-top:12px}footer{padding:25px 20px;display:block}footer img{margin-bottom:18px}.footer-links{margin-bottom:18px}}
@media(max-width:480px){.product-grid{grid-template-columns:1fr}.hero-art{display:none}.hero{min-height:auto;padding-bottom:42px}.strip{grid-template-columns:1fr}.hero-actions{display:grid}.btn{justify-content:center}}


/* ==========================================================
   CARDMETRIX WWW PORTAL V2 – FEINSCHLIFF
   Nur Layout/Optik, keine Shop-/API-/Nginx-Logik
   ========================================================== */

.header{
  padding-left:38px;
  padding-right:38px;
}

.hero{
  min-height:495px;
  grid-template-columns:1.08fr .92fr;
  padding:48px 54px 32px;
  gap:24px;
}

.hero-copy{
  max-width:760px;
  position:relative;
  z-index:3;
}

.eyebrow{
  margin-bottom:15px;
  font-size:11px;
  letter-spacing:.15em;
}

.hero h1{
  font-size:50px;
  line-height:1.055;
  margin-bottom:12px;
  max-width:760px;
}

.hero h2{
  font-size:23px;
  margin-bottom:9px;
}

.hero-copy>p{
  max-width:680px;
  font-size:15.5px;
  line-height:1.52;
}

.hero-actions{
  margin-top:24px;
}

.hero-benefits{
  margin-top:19px;
  gap:20px;
}

/* Hero-Grafik kompakter und als ein Block zentriert */
.hero-art{
  height:365px;
  max-width:610px;
  width:100%;
  justify-self:center;
  transform:scale(.92);
  transform-origin:center center;
  margin-top:8px;
}

.brand-panel{
  right:112px;
  top:46px;
  width:365px;
  height:220px;
}

.c1{left:28px;top:122px}
.c2{left:132px;top:84px}
.c3{right:12px;top:147px}
.s1{left:72px;bottom:22px}
.s2{right:62px;bottom:18px}
.p1{right:230px;bottom:8px}
.p2{right:143px;bottom:1px}
.p3{right:-4px;bottom:18px}

/* Infoleiste kompakter */
.strip{
  padding:14px 42px;
}

.strip>div{
  padding:0 22px;
}

/* Entdecken stärker wie Vorschau 3 */
.discover{
  padding-top:32px;
  padding-bottom:30px;
}

.discover-grid{
  grid-template-columns:1.28fr .86fr .86fr;
  gap:16px;
  margin-top:17px;
}

.feature{
  min-height:208px;
  padding:24px;
  border-color:#293750;
  background:
    linear-gradient(145deg,rgba(19,26,39,.98),rgba(10,15,24,.98));
}

.feature.shop-feature{
  border:1px solid var(--pink);
  box-shadow:
    0 0 0 1px rgba(255,0,214,.08) inset,
    0 0 30px rgba(255,0,214,.12);
  background:
    radial-gradient(circle at 84% 48%,rgba(255,0,214,.23),transparent 35%),
    linear-gradient(135deg,#17101c,#0c121c 58%,#111827);
}

.feature.shop-feature:before{
  content:"SHOP IM VORDERGRUND";
  position:absolute;
  right:18px;
  top:16px;
  font-size:9px;
  letter-spacing:.12em;
  font-weight:900;
  color:#ffc4f3;
  border:1px solid rgba(255,0,214,.48);
  border-radius:999px;
  padding:5px 8px;
  background:rgba(255,0,214,.08);
}

.feature h3{
  font-size:22px;
  margin-top:6px;
}

.shop-feature h3{
  font-size:25px;
  max-width:390px;
}

.feature p{
  max-width:335px;
}

.shop-feature p{
  max-width:430px;
}

.mini-cards{
  right:20px;
  bottom:14px;
  transform:scale(1.08);
}

/* Neu eingetroffen klarer, ruhiger */
.new{
  padding-top:28px;
}

.product-grid{
  gap:14px;
}

.product-grid>a{
  background:
    linear-gradient(180deg,#111925,#0c1119);
  border-color:#273750;
  padding:11px 11px 15px;
}

.product-grid>a:hover{
  box-shadow:0 12px 28px rgba(0,0,0,.28);
}

/* Sammler-Abschnitt besser abgesetzt */
.how{
  margin-top:4px;
  background:
    linear-gradient(180deg,rgba(8,13,20,.2),rgba(15,22,34,.5));
}

/* Responsive */
@media(max-width:1150px){
  .hero{
    grid-template-columns:1fr;
    padding:42px 34px 26px;
  }
  .hero-art{
    height:330px;
    max-width:650px;
    transform:scale(.86);
  }
  .discover-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:720px){
  .header{
    padding-left:18px;
    padding-right:18px;
  }
  .hero{
    padding:32px 20px 22px;
  }
  .hero h1{
    font-size:36px;
  }
  .hero-copy>p{
    font-size:14.5px;
  }
  .hero-art{
    transform:scale(.78);
    margin-left:-5%;
    width:110%;
  }
  .discover-grid{
    grid-template-columns:1fr;
  }
  .feature.shop-feature:before{
    display:none;
  }
}

@media(max-width:480px){
  .hero-art{
    display:none;
  }
}

/* CARDMETRIX V2.1 – Label-Fix */
.feature.shop-feature:before{
  display:none !important;
  content:none !important;
}

/* CARDMETRIX V3 – HERO FIX */
.hero-art{
  height: 380px !important;
  max-width: 620px;
  width: 100%;
  justify-self: center;
}

/* graue Streifen entfernen */
.stack,
.s1,
.s2{
  display: none !important;
}

/* Hintergrund-Brandblock ruhiger und sauberer */
.brand-panel{
  right: 118px !important;
  top: 44px !important;
  width: 340px !important;
  height: 214px !important;
  transform: none !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg,#111827,#090d15) !important;
  border: 1px solid #22314a !important;
  box-shadow: 0 24px 48px rgba(0,0,0,.42), 0 0 36px rgba(0,229,255,.10) !important;
}

.brand-panel img{
  width: 84% !important;
  opacity: .98 !important;
  transform: translateY(2px) !important;
}

/* Hauptkarten klarer gefächert vor dem Logo */
.card{
  width: 124px !important;
  height: 180px !important;
}

.c1{
  left: 34px !important;
  top: 118px !important;
  transform: rotate(-11deg) !important;
  z-index: 4 !important;
}

.c2{
  left: 142px !important;
  top: 78px !important;
  transform: rotate(-1deg) !important;
  z-index: 6 !important;
}

.c3{
  right: 16px !important;
  top: 138px !important;
  transform: rotate(10deg) !important;
  z-index: 4 !important;
}

/* vordere Karten kompakter und geordnet */
.pack{
  width: 96px !important;
  height: 150px !important;
}

.p1{
  right: 206px !important;
  bottom: 18px !important;
  z-index: 7 !important;
}

.p2{
  right: 112px !important;
  bottom: 10px !important;
  z-index: 8 !important;
}

.p3{
  right: 18px !important;
  bottom: 18px !important;
  z-index: 7 !important;
}

@media(max-width:1150px){
  .hero-art{
    height: 340px !important;
  }
  .brand-panel{
    right: 126px !important;
    top: 44px !important;
    width: 320px !important;
    height: 202px !important;
  }
}

@media(max-width:720px){
  .hero-art{
    transform: scale(.90) !important;
    transform-origin: center top !important;
  }
}

/* ==========================================================
   CARDMETRIX V3.1 – HERO LOGO ONLY
   Karten/Packs entfernen, echtes CardMetrix-Logo stehen lassen
   ========================================================== */

.hero-art .card,
.hero-art .pack,
.hero-art .stack,
.hero-art .c1,
.hero-art .c2,
.hero-art .c3,
.hero-art .p1,
.hero-art .p2,
.hero-art .p3,
.hero-art .s1,
.hero-art .s2{
    display:none !important;
}

/* Logo sauber und ruhig im rechten Hero-Bereich */
.hero-art{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:360px !important;
    max-width:600px !important;
    transform:none !important;
}

.hero-art .brand-panel{
    position:relative !important;
    inset:auto !important;
    right:auto !important;
    top:auto !important;
    width:430px !important;
    height:255px !important;
    margin:0 auto !important;
    transform:none !important;
    border-radius:22px !important;
    background:linear-gradient(145deg,#101722,#090d14) !important;
    border:1px solid rgba(0,229,255,.16) !important;
    box-shadow:
        0 30px 60px rgba(0,0,0,.38),
        0 0 48px rgba(0,229,255,.09),
        0 0 34px rgba(255,0,214,.06) !important;
}

.hero-art .brand-panel img{
    width:88% !important;
    height:88% !important;
    position:absolute !important;
    inset:0 !important;
    margin:auto !important;
    object-fit:contain !important;
    transform:none !important;
    opacity:1 !important;
}

.hero-art .halo.cyan{
    right:42% !important;
    top:70px !important;
    opacity:.13 !important;
}

.hero-art .halo.pink{
    right:8% !important;
    bottom:40px !important;
    opacity:.10 !important;
}

@media(max-width:1150px){
    .hero-art{
        height:320px !important;
        max-width:580px !important;
    }
    .hero-art .brand-panel{
        width:400px !important;
        height:238px !important;
    }
}

@media(max-width:720px){
    .hero-art{
        height:270px !important;
        width:100% !important;
        margin:0 !important;
    }
    .hero-art .brand-panel{
        width:min(390px,92vw) !important;
        height:220px !important;
    }
}

@media(max-width:480px){
    .hero-art{
        display:none !important;
    }
}

/* CARDMETRIX V3.2 – DISCOVER SHOP CLEAN */
/* Entfernt nur die 3 Karten in der Shop-Kachel unter "CardMetrix entdecken" */
.shop-feature .mini-cards,
.shop-feature .mini-cards *,
.discover .shop-feature .mini-cards,
.discover .shop-feature .mini-cards *{
  display:none !important;
  visibility:hidden !important;
}