/* JeckDesk – Entwurf im Stil der Vertriebspräsentation 2026
   Layout: großzügige Bühnen, Überzeile + Titel links, Produktbilder rechts; dunkle Akzent-Bühnen für Ticketing und Banking */
@font-face{font-family:'Ubuntu';font-weight:400;font-display:swap;src:url('../assets/fonts/ubuntu-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Ubuntu';font-weight:500;font-display:swap;src:url('../assets/fonts/ubuntu-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Ubuntu';font-weight:700;font-display:swap;src:url('../assets/fonts/ubuntu-latin-700-normal.woff2') format('woff2')}
:root{
  --ink:#1F1A24; --text:#4B4B4B; --muted:#7A7480; --purple:#5B2A86; --orange:#F4A700;
  --white:#FFFFFF; --warm:#F6F3EE; --dark:#24053F; --night:#1B0636; --on-dark:#FAF8F4; --on-dark-2:#D2C6E0;
  --line:#E6E0EE; --grad:linear-gradient(135deg,#4A1A78 0%,#3B4FC4 100%);
  --font:'Ubuntu',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --wrap:1200px; --r:24px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--text);background:var(--white);font-size:18px;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:24px}
h1,h2,h3{color:var(--ink);font-weight:700;line-height:1.08;text-wrap:balance}
h2{font-size:clamp(2rem,4.4vw,3.6rem);letter-spacing:-.02em}
h3{font-size:1.45rem;line-height:1.2}
.eb{display:block;font-weight:500;color:var(--purple);font-size:1.05rem;margin-bottom:.8rem}
.lead{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.5;color:var(--text);max-width:40em}
.sec{padding-block:clamp(72px,10vw,128px)}
.sec.warm{background:var(--warm)}
.dark{background:var(--dark);color:var(--on-dark-2)}
.dark.night{background:linear-gradient(135deg,#2D0059 0%,var(--night) 100%)}
.dark h2,.dark h3{color:var(--on-dark)} .dark .eb{color:var(--orange)} .dark .lead{color:var(--on-dark-2)}
.head{max-width:860px;margin-bottom:clamp(40px,5vw,64px)}
.head.center{margin-inline:auto;text-align:center}.head.center .lead{margin-inline:auto}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:1rem;padding:14px 26px;border-radius:14px;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.btn-orange{background:var(--orange);color:#2B1A00}.btn-orange:hover{background:#E79A00}
.btn-ghost{background:transparent;color:var(--purple);border:2px solid #D9CCEA}.btn-ghost:hover{border-color:var(--purple)}
.dark .btn-ghost{color:var(--on-dark);border-color:rgba(255,255,255,.35)}
.btns{display:flex;flex-wrap:wrap;gap:14px}

/* Header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(251,250,247,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:28px;height:74px}
.hdr .logo img{height:40px;width:auto}
.nav{display:flex;gap:26px;margin-left:auto;align-items:center;font-weight:500;font-size:.98rem;color:var(--ink)}
.nav a:hover{color:var(--purple)}
.nav .login{color:var(--muted)}
.burger{display:none;margin-left:auto;background:none;border:0;width:44px;height:44px;border-radius:12px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px auto;border-radius:2px}
@media(max-width:960px){
  .burger{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:74px;flex-direction:column;align-items:stretch;gap:0;background:var(--white);border-bottom:1px solid var(--line);padding:8px 24px 24px}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:14px;justify-content:center;border-bottom:0}
  .hdr.open .nav{display:flex}
}

/* Hero-Slider */
.hero{position:relative;display:grid;background:radial-gradient(ellipse at 70% 0%,#EFE5FA 0%,#FBFAF7 60%);overflow:hidden}
.slide{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .6s ease,visibility .6s;padding-block:clamp(48px,7vw,96px) clamp(72px,8vw,110px);display:flex;align-items:center}
.slide>.wrap{width:100%}
.slide.on{visibility:visible;opacity:1}
.slide .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center}
.slide h1{font-size:clamp(2.3rem,5vw,4.3rem);letter-spacing:-.03em}
.slide .lead{margin:22px 0 30px}
.slide.tix{background:linear-gradient(135deg,#2D0059 0%,var(--night) 100%)}
.slide.tix h1{color:var(--on-dark)} .slide.tix .lead,.slide.tix .checks li{color:var(--on-dark-2)} .slide.tix .eb{color:var(--orange)}
.slide.tix .checks li::before{background-color:var(--orange)}
.badges{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:28px}
.badges img{height:40px;width:auto}
.badges .partner{display:flex;align-items:center;gap:12px;margin-left:8px;padding-left:18px;border-left:1px solid var(--line);color:var(--muted);font-size:.85rem}
.badges .partner img{height:46px}
.hero-phones{display:flex;justify-content:center;gap:3%}
.hero-phones img{width:31%}.hero-phones img:nth-child(2){transform:translateY(-7%)}
.slide .shots .wallet{position:absolute;right:-3%;bottom:-10%;width:30%}
.hero-nav{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:center;align-items:center;gap:14px;z-index:2}
.hero-nav button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--white);cursor:pointer;display:grid;place-items:center;color:var(--ink)}
.hero-nav .dots{display:flex;gap:8px}
.hero-nav .dots button{width:10px;height:10px;padding:0;border:0;background:#CFC2E0}
.hero-nav .dots button.on{background:var(--orange);width:28px;border-radius:6px}
@media(max-width:900px){.slide .wrap{grid-template-columns:minmax(0,1fr)}.badges .partner{border-left:0;padding-left:0;margin-left:0}}

/* Wortrad im Titel */
.wheel{position:relative;height:calc(var(--row)*3);--row:clamp(46px,5.2vw,76px);margin:6px 0 0;
  -webkit-mask-image:linear-gradient(rgba(0,0,0,.18),#000 38%,#000 62%,rgba(0,0,0,.18));mask-image:linear-gradient(rgba(0,0,0,.18),#000 38%,#000 62%,rgba(0,0,0,.18));overflow:hidden}
.wheel .pill{position:absolute;left:0;top:var(--row);height:var(--row);width:var(--pw,300px);background:var(--white);border:3px solid #EADFF5;border-radius:calc(var(--row)*.32);transition:width .5s cubic-bezier(.2,.9,.3,1.15)}
.wheel ul{position:relative;transition:transform .6s cubic-bezier(.3,1.35,.5,1)}
.wheel li{height:var(--row);line-height:var(--row);font-size:calc(var(--row)*.8);font-weight:700;color:var(--purple);letter-spacing:-.03em;padding-left:calc(var(--row)*.35)}
@media(prefers-reduced-motion:reduce){.wheel ul,.wheel .pill{transition:none}.slide{transition:none}}

/* Logo-Laufband */
.clubs{background:var(--white);border-block:1px solid var(--line);padding-block:26px;overflow:hidden}
.clubs .lbl{text-align:center;font-size:.85rem;font-weight:500;letter-spacing:.08em;color:var(--muted);margin-bottom:16px}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:44px;width:max-content;animation:run 45s linear infinite;align-items:center}
.marquee-track img{height:64px;width:auto;mix-blend-mode:multiply}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes run{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* Split-Abschnitte */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:center}
.split.invert .copy{order:2}
.split h2{font-size:clamp(2rem,4vw,3.2rem)}
.split .copy p{margin-top:16px}
.split .copy .lead{margin-top:18px}
.split .btns{margin-top:30px}
@media(max-width:900px){.split{grid-template-columns:minmax(0,1fr)}.split.invert .copy{order:0}}
.checks{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.checks li{display:flex;gap:14px;align-items:flex-start;font-size:1.05rem}
.checks li::before{content:"";flex:none;width:24px;height:24px;margin-top:2px;border-radius:50%;background:var(--purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' stroke='%23fff' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.checks.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
@media(max-width:480px){.checks.two{grid-template-columns:minmax(0,1fr)}}
.dark .checks li::before{background-color:var(--orange)}
.special{color:var(--orange);font-weight:700}

/* Funktions-Band */
.band{background:linear-gradient(160deg,#2D0059 0%,var(--dark) 55%,var(--night) 100%);color:var(--on-dark-2);padding-block:clamp(80px,10vw,130px)}
.band h2{color:var(--on-dark)} .band .eb{color:var(--orange)} .band p{color:var(--on-dark-2)}
.band .split+.split{margin-top:clamp(72px,9vw,120px)}
.hub{display:grid;grid-template-columns:minmax(0,1fr) 190px minmax(0,1fr);align-items:center;position:relative}
.hub .col{display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
.chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:10px 14px;font-weight:500;font-size:.92rem;color:var(--on-dark);display:flex;align-items:center;gap:10px}
.chip i{width:8px;height:8px;border-radius:50%;background:#B99BDA;flex:none}
.col.out .chip i{background:var(--orange)}
.core{margin:0 28px;background:var(--grad);border-radius:22px;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#D8CCEB;font-size:.85rem;position:relative;z-index:1;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.core img{width:110px}
.hub svg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
@media(max-width:600px){.hub{grid-template-columns:minmax(0,1fr)}.hub svg{display:none}.core{margin:18px 0}.hub .col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
.phones{display:flex;justify-content:center;gap:3%}
.phones img{width:31%}.phones img:nth-child(2){transform:translateY(-6%)}
.safe{display:grid;gap:14px}
.safe div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:22px 24px;display:flex;gap:18px;align-items:center}
.safe svg{width:40px;height:40px;stroke:var(--orange);flex:none}
.safe b{display:block;color:var(--on-dark);font-size:1.1rem}

/* Ticketing */
.ticketing{background:var(--warm)}
.shots{position:relative}
.shots .wallet{position:absolute;right:-2%;bottom:-8%;width:30%}
.ticketing .split+.split{margin-top:clamp(64px,8vw,110px)}

/* Updates */
.upd{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:28px}
.upd h3{font-size:1.1rem;margin-bottom:16px}
.upd ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.upd li{background:var(--warm);border-radius:12px;padding:12px 14px;font-weight:500;color:var(--ink);font-size:.95rem}
@media(max-width:480px){.upd ul{grid-template-columns:minmax(0,1fr)}}

/* Abschluss */
.cta{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:center}
.cta h2{font-size:clamp(2.4rem,5.4vw,4.2rem)}
.qr{background:var(--on-dark);border-radius:28px;padding:32px;display:flex;gap:26px;align-items:center;color:var(--text)}
.qr img{width:160px;height:160px}
.qr b{display:block;font-size:1.3rem;color:var(--ink)}
@media(max-width:900px){.cta{grid-template-columns:minmax(0,1fr)}.qr{flex-direction:column;text-align:center}}

/* Untermenü */
.nav .has-sub{position:relative}
.nav .has-sub>a::after{content:"";display:inline-block;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:0 0 3px 8px}
.nav .sub{display:none;position:absolute;top:100%;left:-16px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:10px;min-width:230px;flex-direction:column}
.nav .sub a{padding:9px 12px;border-radius:8px}.nav .sub a:hover{background:var(--warm)}
.nav .has-sub:hover .sub,.nav .has-sub:focus-within .sub{display:flex}
@media(max-width:960px){.nav .sub{display:flex;position:static;border:0;padding:0 0 0 14px;min-width:0}.nav .has-sub>a::after{display:none}}
/* Footer */
.ftr{background:var(--night);color:var(--on-dark-2);padding-block:64px 32px;font-size:.95rem}
.ftr .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.ftr h4{color:var(--on-dark);font-size:1rem;margin-bottom:14px}
.ftr li{margin-bottom:8px} .ftr a:hover{color:var(--on-dark)}
.ftr .partnerlogos{display:flex;gap:18px;align-items:center;margin-top:18px}
.ftr .partnerlogos img{height:52px;width:auto;background:var(--on-dark);border-radius:10px;padding:6px}
.ftr .bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:22px;color:#9C8FB0}
@media(max-width:800px){.ftr .cols{grid-template-columns:1fr 1fr}}

@media(max-width:600px){.browser .tiles{grid-template-columns:1fr;padding:18px}.browser .hero-b{padding:26px}.qr img{width:150px;height:150px}.wheel{--row:46px}}
.slide .checks+.btns{margin-top:28px}
/* Startseite: Alle Bausteine */
.idx-head{max-width:760px;margin:0 auto clamp(36px,5vw,56px);text-align:center}
.idx-head .lead{margin-top:16px}
.idx-mods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.idx-mod{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;transition:border-color .2s,transform .2s}
.idx-mod:hover{border-color:var(--purple);transform:translateY(-2px)}
.idx-mod .appx-ic{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--grad)}
.idx-mod .appx-ic svg{width:23px;height:23px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.idx-mod b{color:var(--ink);font-size:1.12rem;margin:16px 0 6px}
.idx-mod>span:not(.appx-ic){font-size:.97rem;line-height:1.5;flex:1}.idx-mod .appx-ic{flex:none;align-self:flex-start}
.idx-mod em{font-style:normal;font-weight:500;color:var(--purple);margin-top:14px;font-size:.97rem}
.idx-mod em::after{content:" →"}
.idx-all{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:36px}
@media(max-width:1000px){.idx-mods{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.idx-mods{grid-template-columns:minmax(0,1fr)}}
/* ===== Mega-Menü Funktionen ===== */
.nav a.on{color:var(--purple)}
@media(min-width:961px){
  .nav .has-mega .mega{display:none;left:50%;transform:translateX(-50%);top:calc(100% + 14px);min-width:760px;padding:22px;border-radius:20px;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 18px;box-shadow:none}
  .nav .has-mega::before{content:"";position:absolute;left:-20px;right:-20px;top:100%;height:18px}
  .nav .has-mega:hover .mega,.nav .has-mega:focus-within .mega{display:grid}
  .mega-col{display:flex;flex-direction:column;gap:2px}
  .mega-h{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:4px 12px 8px}
  .nav .mega a{display:flex;flex-direction:column;padding:10px 12px;border-radius:12px}
  .nav .mega a b{font-weight:500;color:var(--ink);font-size:.98rem}
  .nav .mega a small{font-size:.84rem;color:var(--muted);font-weight:400;margin-top:1px}
  .nav .mega a:hover{background:var(--warm)}.nav .mega a:hover b{color:var(--purple)}
  .mega-foot{grid-column:1/-1;display:flex;gap:10px;justify-content:space-between;border-top:1px solid var(--line);margin-top:10px;padding-top:12px}
  .nav .mega-foot a{flex-direction:row;font-weight:500;color:var(--purple);font-size:.95rem}
  .nav .mega-foot a::after{content:" →";margin-left:4px}
}
@media(max-width:960px){
  .nav{max-height:calc(100vh - 74px);overflow-y:auto}
  .nav .mega{display:flex;flex-direction:column;padding:0 0 6px 0}
  .mega-h{display:block;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:12px 0 2px 14px}
  .mega-col{display:flex;flex-direction:column}
  .nav .mega a{display:block;padding:9px 0 9px 14px;border-bottom:0}
  .nav .mega a small{display:none}
  .nav .mega a b{font-weight:500}
  .mega-foot{display:flex;flex-direction:column;padding-left:14px}
  .nav .mega-foot a{color:var(--purple);padding:9px 0}
  .nav .has-mega>a{border-bottom:0;padding-bottom:4px}
  .nav .has-mega{border-bottom:1px solid var(--line)}
}