:root{--violet:#4B2784;--violet2:#6C38BF;--bg:#0f0324;--fg:#fff;--muted:#d8d8e9;--border: #FFFFFF26;--glass:#ffffff10;--radius:22px;--surface:#12062a}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:radial-gradient(1200px 600px at 50% -220px, #4B2784, var(--surface) 70%);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text',Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.container{max-width:1200px;margin:0 auto;padding:26px 18px}
.nav{position:sticky;top:0;z-index:30;background:linear-gradient(180deg,rgba(75,39,132,.92),rgba(75,39,132,.6));backdrop-filter: blur(10px);border-bottom:1px solid var(--border)}
.wrap{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.brand img{width:44px;height:44px;border-radius:14px}
.nav nav a{color:#fff;text-decoration:none;margin-left:14px;opacity:.9}
.nav nav a:hover{opacity:1}
.nav .lang{margin-left:14px;opacity:.9;user-select:none}
.nav .lang a{color:#fff;text-decoration:none;margin:0 6px}
.nav .lang a.active{font-weight:800;opacity:1}
.menu-btn{display:none;cursor:pointer;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid var(--border);color:#fff;width:38px;height:38px;border-radius:12px;align-items:center;justify-content:center}

.hero{padding:48px 0}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:24px;align-items:center}
h1{font-size:56px;margin:0 0 10px;background:linear-gradient(90deg,#fff,#f3e9ff,#ffd8a6);-webkit-background-clip:text;color:transparent;letter-spacing:-.02em;filter:drop-shadow(0 6px 16px rgba(0,0,0,.25))}
p{color:var(--muted);line-height:1.7}
.btn{display:inline-grid;grid-auto-flow:column;gap:10px;align-items:center;background:linear-gradient(90deg,var(--violet),var(--violet2));padding:12px 18px;border-radius:999px;color:#fff;text-decoration:none;font-weight:800;position:relative;overflow:hidden;transition:transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s cubic-bezier(.22,.61,.36,1)}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 26px rgba(0,0,0,.28)}
.btn .shine{position:absolute;inset:-1px;background:conic-gradient(from 180deg at 50% 50%, transparent 0 25%, rgba(255,255,255,.45) 30%, transparent 35% 100%);transform:translateX(-130%);transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.btn:hover .shine{transform:translateX(130%)}
.btn:active{transform:translateY(0) scale(.98);box-shadow:0 4px 16px rgba(0,0,0,.24)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.2),0 0 0 6px rgba(108,56,191,.45)}

.logo-panel{position:relative;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.18));border:1px solid var(--border);box-shadow:0 18px 60px rgba(0,0,0,.45);padding:12px;min-height:240px;overflow:hidden;--mx:50%;--my:50%}
.logo-panel::before{content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;background:
  radial-gradient(600px 300px at 20% 0%, rgba(123,97,255,.22), transparent 60%),
  radial-gradient(600px 300px at 100% 80%, rgba(0,200,255,.18), transparent 60%);
  filter: blur(20px);opacity:.8;animation:aurora 18s ease-in-out infinite alternate}
.logo-panel::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(320px 160px at var(--mx) var(--my), rgba(255,255,255,.12), transparent 60%)}
@keyframes aurora{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-6%,4%,0)}}
.logo-panel canvas{position:absolute;inset:0;z-index:0;filter:blur(0.4px);opacity:.6}
.logo-panel picture, .logo-panel img{position:absolute;inset:0;margin:auto;z-index:2;width:72%;max-width:460px;min-width:200px}
.logo-panel img{height:auto}
.logo-panel picture{animation:float 7.5s ease-in-out infinite}
.logo-panel:hover picture{animation-play-state:paused}
.logo-panel img{filter: drop-shadow(0 10px 24px rgba(75,39,132,.55));transform-style:preserve-3d;transition:transform .8s cubic-bezier(.22,.61,.36,1);-webkit-box-reflect: below -10px linear-gradient(transparent, rgba(255,255,255,.06))}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.logo-panel .shine{position:absolute;inset:-20%;z-index:3;pointer-events:none;background:radial-gradient(420px 220px at -30% -30%, rgba(255,255,255,.14), transparent 60%), linear-gradient(120deg, transparent 46%, rgba(255,255,255,.16) 50%, transparent 54%);animation:shineSweep 7.6s linear infinite}
@keyframes shineSweep{0%{transform:translateX(-45%)}100%{transform:translateX(45%)}}

.section{padding:56px 0}
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--border);border-radius:var(--radius);padding:22px;backdrop-filter: blur(20px);transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s cubic-bezier(.22,.61,.36,1)}
.card:hover{transform:translateY(-2px);box-shadow:0 20px 50px rgba(0,0,0,.32)}
.card.interactive{position:relative;will-change:transform;transform-style:preserve-3d}
.card.interactive:hover{transform:translateY(-3px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.card.interactive::after{content:"";position:absolute;inset:0;border-radius:var(--radius);pointer-events:none;background:radial-gradient(240px 140px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.08), transparent 60%);opacity:0;transition:opacity .35s cubic-bezier(.22,.61,.36,1)}
.card.interactive:hover::after{opacity:1}

/* content helpers */
.pill{display:inline-block;padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.06)}
.list-grid{display:flex;flex-wrap:wrap;gap:10px}
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.checklist li{position:relative;padding-left:24px}
.checklist li::before{content:"";position:absolute;left:0;top:.35em;width:14px;height:14px;border-radius:4px;background:linear-gradient(90deg,var(--violet),var(--violet2));box-shadow:0 6px 14px rgba(0,0,0,.28)}
.notice{display:block;margin:10px 0;color:#cfd2e6;opacity:.95}
.subtle{color:var(--muted)}
.h-gradient{background:linear-gradient(90deg,#fff,#f3e9ff,#ffd8a6);-webkit-background-clip:text;color:transparent}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.cta-bar{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;border-radius:var(--radius);border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));backdrop-filter: blur(16px)}
.cta-bar p{margin:0}

.carousel{position:relative}
.scroller{display:flex;gap:16px;overflow:auto;scroll-snap-type:x mandatory;padding-bottom:6px;cursor:grab;scroll-behavior:smooth}
.scroller:active{cursor:grabbing}
.scroller img{scroll-snap-align:center;flex:0 0 31%;min-width:280px;border-radius:18px;border:1px solid var(--border)}
.arrow{position:absolute;top:42%;transform:translateY(-50%);background:rgba(0,0,0,.5);backdrop-filter: blur(6px);border:1px solid var(--border);color:#fff;width:44px;height:44px;border-radius:999px;display:grid;place-items:center;cursor:pointer}
.arrow.left{left:-10px}.arrow.right{right:-10px}

/* Apple-like Flip Cards */
.flip{perspective:1200px;-webkit-tap-highlight-color:transparent;touch-action:pan-y;user-select:none}
.flip-inner{position:relative;width:100%;height:220px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform 1s cubic-bezier(.22,.61,.36,1);will-change:transform}
.flip.is-flipped .flip-inner{transform:rotateY(180deg)}
@media (hover:hover) and (pointer:fine){
  .flip:hover .flip-inner{transform:rotateY(180deg)}
}
.flip-face{position:absolute;inset:0;border-radius:18px;border:1px solid var(--border);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));box-shadow:0 16px 40px rgba(0,0,0,.35);transform:translateZ(0)}
.flip-front{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:22px;text-align:center;position:relative}
.flip-front::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;filter:blur(40px);opacity:.35;background:radial-gradient(closest-side,var(--accent, #7B61FF),transparent 70%);inset:auto auto 10% 50%;transform:translateX(-50%);pointer-events:none}
.flip-front img{width:96px;height:96px;object-fit:contain;filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));transition:transform .5s cubic-bezier(.22,.61,.36,1);backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0)}
@media (hover:hover) and (pointer:fine){
  .flip:hover .flip-front img,.flip-inner:hover .flip-front img{transform:translateY(-3px) scale(1.02)}
}
.flip-front .meta strong{display:block;font-weight:800;letter-spacing:-.01em}
.flip-front .meta .badge{display:inline-block;margin-top:6px;padding:7px 12px;border-radius:999px;background:linear-gradient(90deg,var(--accent,#7B61FF),color-mix(in srgb,var(--accent,#7B61FF) 60%, white));font-size:12px;color:#fff;box-shadow:0 6px 18px color-mix(in srgb,var(--accent,#7B61FF) 38%, transparent)}
.flip-back{transform:rotateY(180deg);display:flex;align-items:center;justify-content:center;padding:18px}
.flip-back{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(0,0,0,.18))}
.flip-back p{margin:0;color:#f0eefc;line-height:1.6}

/* Charakter-Akzentfarben per Karte (wiederholt) */
#characters .flip:nth-child(6n+1){--accent:#7B61FF}
#characters .flip:nth-child(6n+2){--accent:#00C8FF}
#characters .flip:nth-child(6n+3){--accent:#FF7AD9}
#characters .flip:nth-child(6n+4){--accent:#FFA84B}
#characters .flip:nth-child(6n+5){--accent:#5CF1A8}
#characters .flip:nth-child(6n+6){--accent:#FFD76A}

/* section reveal */
[data-reveal]{opacity:0;transform:translateY(18px);will-change:opacity,transform;transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1)}
[data-reveal].is-visible{opacity:1;transform:none}

.footer{border-top:1px solid var(--border);opacity:.9}
.footer a{color:#fff}

@media (max-width:1060px){
  .hero-grid{grid-template-columns:1fr}
  h1{font-size:44px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .flip-inner{height:200px}
  .logo-panel{min-height:200px}
  .logo-panel picture, .logo-panel img{width:70%;max-width:360px}
}

/* Small phones */
@media (max-width:640px){
  .container{padding:20px 14px}
  .hero{padding:32px 0}
  h1{font-size:36px}
  .brand img{width:36px;height:36px;border-radius:12px}
  .brand span{display:none}
  .nav .wrap{position:relative;gap:10px}
  .menu-btn{display:flex}
  .nav nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;gap:6px;padding:12px;border-radius:16px;background:linear-gradient(180deg,#4B2784,#3c1f6a);border:1px solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,.45);z-index:40}
  .nav.open nav{display:flex}
  .nav nav a{margin-left:0;font-size:15px;padding:10px 12px;border-radius:12px}
  .nav .lang{margin-left:0}
  .btn{padding:10px 14px}
  .grid-4{grid-template-columns:1fr}
  .scroller img{min-width:240px}
  .arrow{display:none}
  .flip-inner{height:230px}
  .grid{gap:18px}
}

/* Touch-Optimierung: Crossfade statt 3D-Rotation auf Geräten mit grobem Pointer */
@media (pointer: coarse){
  .flip-inner{transform:none !important}
  .flip .flip-front, .flip .flip-back{transform:none !important; transition:opacity .28s cubic-bezier(.22,.61,.36,1)}
  .flip .flip-back{opacity:0}
  .flip.is-flipped .flip-back{opacity:1}
  .flip.is-flipped .flip-front{opacity:0}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}