:root{
  --karte:#fff; --nav:rgba(255,255,255,.84); --band:#0B1020;
  --schirm:linear-gradient(160deg,#f3f6fd,#e9eefb);
  --platz-a:#f7f9fd; --platz-b:#eff3fb;
  --warn-bg:#fff8ec; --warn-rand:#f8e3bd; --warn-text:#7c5a12;
  --ph-bg:#fff3c4; --ph-text:#7a5a00;
  --wolke-1:#cfe0ff; --wolke-2:#d6f7e4; --wolke-3:#ffe6f3;

  --blau:#2563EB; --blau-t:#EEF3FF;
  --gruen:#22C55E; --gruen-t:#EAFBF1;
  --teal:#14B8A6; --teal-t:#E7F8F6;
  --orange:#F59E0B; --orange-t:#FFF6E6;
  --pink:#EC4899; --pink-t:#FDEFF6;
  --violett:#8B5CF6; --violett-t:#F2EEFE;
  --rot:#EF4444; --rot-t:#FEF0F0;
  --tinte:#0B1020; --grau:#5A6478; --linie:#E8EAF2;
  --weiss:#fff; --flaeche:#F7F8FC;
  --r:26px; --r-klein:16px;
  --schatten:0 12px 30px rgba(11,16,32,.07);
  --schatten-hoch:0 26px 60px rgba(11,16,32,.14);
  --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,"Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--tinte);background:var(--weiss);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{margin:0;line-height:1.05;letter-spacing:-.03em;font-weight:800}
p{margin:0;color:var(--grau)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 22px}
section{padding:84px 0;position:relative}
.mittig{text-align:center;max-width:760px;margin:0 auto 44px}
h2{font-size:clamp(1.7rem,3.4vw,2.7rem)}
.lead{font-size:clamp(1rem,1.6vw,1.14rem);margin-top:14px}
.marke-klein{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--blau);background:var(--blau-t);border-radius:999px;padding:7px 14px;margin-bottom:18px}
.gradient{background:linear-gradient(100deg,var(--blau),var(--violett) 45%,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.wolke{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;z-index:-1}
.w1{width:520px;height:520px;background:var(--wolke-1);top:-160px;right:-120px}
.w2{width:420px;height:420px;background:var(--wolke-2);top:220px;left:-160px}
.w3{width:460px;height:460px;background:var(--wolke-3);bottom:40px;right:-140px}

header{position:sticky;top:14px;z-index:60;padding:0 18px}
.nav{max-width:1180px;margin:0 auto;background:var(--nav);backdrop-filter:blur(14px);border:1px solid var(--linie);border-radius:999px;box-shadow:var(--schatten);display:flex;align-items:center;gap:16px;padding:10px 14px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.05rem}
.logo svg{width:36px;height:36px}
.nav-links{margin-left:auto;display:flex;gap:22px;font-weight:700;font-size:.92rem;color:var(--grau)}
.nav-links a:hover{color:var(--blau)}
.knopf{border:0;cursor:pointer;font:inherit;font-weight:800;border-radius:999px;padding:13px 22px;display:inline-flex;align-items:center;gap:9px;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.knopf-primaer{background:var(--tinte);color:#fff;box-shadow:0 12px 24px rgba(11,16,32,.2)}
.knopf-primaer:hover{transform:translateY(-2px)}
.knopf-blau{background:var(--blau);color:#fff;box-shadow:0 12px 26px rgba(37,99,235,.32)}
.knopf-blau:hover{transform:translateY(-2px) scale(1.02)}
.knopf-leise{background:var(--karte);border:1px solid var(--linie);color:var(--tinte)}
.knopf-leise:hover{border-color:var(--blau);color:var(--blau)}
.burger{display:none;margin-left:auto;background:var(--karte);border:1px solid var(--linie);border-radius:999px;padding:9px 14px;font-size:1rem;cursor:pointer}
.sprachen{display:flex;gap:4px;background:var(--flaeche);border-radius:999px;padding:4px;border:1px solid var(--linie)}
.sprachen button{border:0;background:transparent;font:inherit;font-weight:800;font-size:.8rem;color:var(--grau);border-radius:999px;padding:7px 11px;cursor:pointer}
.sprachen button.aktiv{background:var(--karte);color:var(--blau);box-shadow:0 4px 12px rgba(11,16,32,.08)}

.hero{padding:64px 0 40px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
h1{font-size:clamp(2.3rem,5.4vw,4rem)}
.hero p{margin-top:16px;max-width:520px}
.hero-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.punkte{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.punkt{background:var(--karte);border:1px solid var(--linie);border-radius:999px;padding:8px 14px;font-size:.82rem;font-weight:700;color:var(--grau);box-shadow:0 6px 14px rgba(11,16,32,.05)}
.punkt b{color:var(--tinte)}
.geraetewolke{position:relative;min-height:430px;display:grid;place-items:center}
.panda{width:190px;animation:schweben 5s ease-in-out infinite}
.panda .auge{transform-origin:center;animation:blinzeln 5.5s infinite}
.mini{position:absolute;background:var(--karte);border:1px solid var(--linie);border-radius:var(--r-klein);box-shadow:var(--schatten-hoch);padding:12px}
.mini-titel{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--grau);margin-bottom:8px}
.mini-bon{width:210px;top:8px;right:-6px;animation:schweben 6.2s ease-in-out infinite .4s}
.bon-zeile{display:flex;justify-content:space-between;font-size:.78rem;color:var(--grau);padding:3px 0;border-bottom:1px dashed var(--linie)}
.bon-zeile b{color:var(--tinte)}
.bon-total{display:flex;justify-content:space-between;font-weight:800;margin-top:8px;font-size:.9rem}
.mini-kds{width:196px;bottom:6px;left:-10px;animation:schweben 5.6s ease-in-out infinite .2s}
.kds-karte{background:var(--gruen-t);border:1px solid #cdeedd;border-radius:11px;padding:8px 10px;margin-bottom:7px;font-size:.78rem;font-weight:700;color:#0f5132;display:flex;justify-content:space-between}
.kds-karte.dringend{background:var(--orange-t);border-color:#f6dfb0;color:#8a5a06}
.runde-badge{position:absolute;bottom:26px;right:6px;background:var(--violett);color:#fff;font-weight:800;font-size:.78rem;padding:9px 14px;border-radius:999px;box-shadow:0 12px 26px rgba(139,92,246,.35);animation:schweben 4.4s ease-in-out infinite .6s}
@keyframes schweben{0%,100%{transform:translateY(-7px)}50%{transform:translateY(7px)}}
@keyframes blinzeln{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}

.laufband{background:var(--band);color:#fff;padding:16px 0;overflow:hidden}
.lauf-spur{display:flex;gap:44px;white-space:nowrap;width:max-content;animation:laufen 26s linear infinite}
.lauf-spur span{font-weight:700;font-size:.95rem;opacity:.92;display:inline-flex;align-items:center;gap:10px}
.lauf-spur span::before{content:"●";color:var(--gruen);font-size:.7rem}
@keyframes laufen{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.raster{display:grid;gap:18px}
.raster-3{grid-template-columns:repeat(3,1fr)}
.raster-4{grid-template-columns:repeat(4,1fr)}
.fliese{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);padding:22px;box-shadow:var(--schatten);transition:transform .18s ease,box-shadow .18s ease}
.fliese:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:var(--schatten-hoch)}
.fliese h3{font-size:1.05rem;margin-bottom:5px}
.fliese p{font-size:.88rem}
.blase{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;margin-bottom:16px}
.blase svg{width:26px;height:26px}
.b-blau{background:var(--blau-t);color:var(--blau)}
.b-gruen{background:var(--gruen-t);color:#15803d}
.b-orange{background:var(--orange-t);color:#b45309}
.b-pink{background:var(--pink-t);color:#be185d}
.b-violett{background:var(--violett-t);color:#6d28d9}
.b-teal{background:var(--teal-t);color:#0f766e}
.b-rot{background:var(--rot-t);color:#b91c1c}
.etikett{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:4px 10px;margin-bottom:12px;background:var(--flaeche);color:var(--grau)}
.gross{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:34px}
.schirm{background:var(--schirm);border-radius:18px;padding:14px;margin-bottom:16px;display:grid;place-items:center;min-height:186px;overflow:hidden}
/* Grosse Karten: nur ein grosses Symbol (die echten Bilder stehen weiter unten in der Galerie) */
.blase.gross{width:104px;height:104px;border-radius:32px;margin:0}
.blase.gross svg{width:52px;height:52px}
.schirm img{width:100%;height:186px;object-fit:cover;object-position:top center;border-radius:12px}
.schirm img.weg{display:none}
.schirm img:not(.weg) + .tab-rahmen{display:none}
.handy-rahmen{width:104px;height:182px;background:#0B1020;border-radius:22px;padding:7px;box-shadow:0 18px 34px rgba(11,16,32,.28)}
.handy-schirm{background:var(--karte);border-radius:16px;height:100%;padding:9px;display:flex;flex-direction:column;gap:6px}
.tab-rahmen{width:100%;max-width:240px;background:#0B1020;border-radius:18px;padding:8px;box-shadow:0 18px 34px rgba(11,16,32,.24)}
.tab-schirm{background:var(--karte);border-radius:12px;padding:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;aspect-ratio:4/3}
.kiosk-rahmen{width:120px}
.kiosk-schirm{background:var(--karte);border:6px solid #0B1020;border-radius:16px;padding:10px;box-shadow:0 18px 34px rgba(11,16,32,.24)}
.kiosk-fuss{width:52px;height:5px;background:#0B1020;border-radius:4px;margin:6px auto 0}
.fake-zeile{height:7px;border-radius:5px;background:#eef1f8}
.fake-zeile.k{width:60%}
.fake-knopf{height:22px;border-radius:8px;background:linear-gradient(160deg,#34d399,#059669);margin-top:auto}
.chip-klein{font-size:.72rem;font-weight:800;color:#0f5132;background:var(--gruen-t);border-radius:8px;padding:5px 8px;text-align:center}

.live{background:var(--band);color:#fff;border-radius:34px;padding:44px;display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;overflow:hidden;position:relative}
.live h2{color:#fff}
.live p{color:#c3cbdd}
.demo{display:grid;gap:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:18px}
.demo-zeile{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dplan{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.dtisch{aspect-ratio:1;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:.82rem;background:rgba(255,255,255,.1);transition:background .5s ease,transform .3s ease}
.dtisch.aktiv{background:linear-gradient(160deg,#34d399,#059669);transform:scale(1.04)}
.dtisch.rechnung{background:linear-gradient(160deg,#60a5fa,#2563eb)}
.dkds{display:grid;gap:8px;align-content:start}
.dticket{background:rgba(255,255,255,.12);border-radius:12px;padding:9px 11px;font-size:.8rem;font-weight:700;animation:auftauchen .45s ease}
.dticket b{color:#7ef0b1}
.dkasse{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.12);border-radius:14px;padding:12px 16px;font-weight:800}
.dkasse span{font-size:1.4rem;color:#fff}
@keyframes auftauchen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.demo-hinweis{font-size:.76rem;color:#96a0b8;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

.kanal{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);padding:20px;display:flex;gap:14px;align-items:center;box-shadow:var(--schatten);transition:transform .18s ease,box-shadow .18s ease}
.kanal:hover{transform:translateY(-6px) rotate(.5deg);box-shadow:var(--schatten-hoch)}
.kanal h3{font-size:1rem;margin-bottom:3px}
.kanal p{font-size:.84rem}
.kanal .blase{margin:0;flex:0 0 auto;width:46px;height:46px;border-radius:15px}

/* Mosaik: grosse Banner-Kacheln (volle Breite) im Wechsel mit kleinen Kacheln,
   die abwechselnd tiefer sitzen -> links/rechts-Rhythmus und echte Groessenunterschiede */
.galerie{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:start}
.galerie .bild:nth-child(3n+1){grid-column:span 2}
.galerie .bild:nth-child(even){margin-top:38px}
.galerie .bild:nth-child(3n+1) figcaption{font-size:1.05rem}
.bild{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;box-shadow:var(--schatten);transition:transform .18s ease,box-shadow .18s ease}
.bild:hover{transform:translateY(-6px);box-shadow:var(--schatten-hoch)}
.bild img{width:100%;height:auto;display:block}
/* Hochformat (Handy-Screenshots): 3:4-Rahmen, NICHT beschnitten */
.bild.hoch img{aspect-ratio:3/4;object-fit:contain;background:#0B1020}
.bild.hoch .platz{aspect-ratio:3/4}
.bild img.weg{display:none}
.bild .platz{display:none;aspect-ratio:16/10;place-items:center;text-align:center;color:var(--grau);font-weight:700;font-size:.8rem;background:repeating-linear-gradient(45deg,var(--platz-a),var(--platz-a) 12px,var(--platz-b) 12px,var(--platz-b) 24px);padding:14px}
.bild img.weg + .platz{display:grid}
.bild figcaption{padding:12px 16px;font-weight:800;font-size:.92rem;display:flex;justify-content:space-between;gap:8px;align-items:center}
.bild figcaption small{font-weight:700;color:var(--grau);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}

.shabu{background:linear-gradient(150deg,var(--violett-t),var(--pink-t));border-radius:34px;padding:44px;display:grid;grid-template-columns:.95fr 1.05fr;gap:30px;align-items:center}
.runden{display:flex;gap:10px;margin:18px 0}
.runde{width:34px;height:34px;border-radius:12px;background:var(--karte);border:1px solid #ddd3f7;display:grid;place-items:center;font-weight:800;font-size:.82rem;color:#6d28d9}
.runde.voll{background:linear-gradient(160deg,#a78bfa,#7c3aed);color:#fff;border-color:transparent}
.runde.jetzt{transform:scale(1.14);box-shadow:0 10px 20px rgba(124,58,237,.35)}
.shabu-bild{background:var(--karte);border-radius:20px;padding:10px;box-shadow:var(--schatten-hoch);margin-bottom:16px}
.shabu-bild img{border-radius:12px}
.shabu-bild img.weg{display:none}
.shabu-bild .platz{display:none;aspect-ratio:16/10;place-items:center;color:#8592a8;font-weight:700;font-size:.8rem;background:repeating-linear-gradient(45deg,#faf8ff,#faf8ff 12px,#f2edff 12px,#f2edff 24px);border-radius:12px}
.shabu-bild img.weg + .platz{display:grid}

.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{background:var(--karte);border:1px solid var(--linie);border-radius:999px;padding:11px 18px;font-weight:700;font-size:.9rem;box-shadow:0 8px 18px rgba(11,16,32,.05);transition:transform .15s ease,color .15s ease,border-color .15s ease}
.chip:hover{transform:translateY(-3px) rotate(-1deg);color:var(--blau);border-color:#c7d7ff}

.fiskal{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.schild{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);padding:22px;text-align:center;box-shadow:var(--schatten)}
.schild .blase{margin:0 auto 14px}
.schild h3{font-size:1rem;margin-bottom:6px}
.schild p{font-size:.85rem}
.wink{max-width:820px;margin:26px auto 0;text-align:center;font-size:.84rem;color:var(--grau);background:var(--flaeche);border-radius:var(--r-klein);padding:14px 18px}

.faq{max-width:820px;margin:0 auto}
details{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r-klein);padding:16px 20px;margin-bottom:12px;box-shadow:0 8px 18px rgba(11,16,32,.04)}
details summary{cursor:pointer;font-weight:800;list-style:none;display:flex;justify-content:space-between;gap:12px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--blau);font-weight:800}
details[open] summary::after{content:"–"}
details p{margin-top:10px;font-size:.92rem}

.cta{background:linear-gradient(140deg,#0B1020,#1f2a4a 60%,#3b2a63);color:#fff;border-radius:34px;padding:48px;display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center;position:relative;overflow:hidden}
.cta h2{color:#fff}
.cta p{color:#c3cbdd}
.cta .panda{position:absolute;right:26px;bottom:-18px;width:150px;opacity:.95}
footer{background:#0B1020;color:#8f9ab3;padding:46px 0 26px;font-size:.88rem}
.fuss{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
footer a:hover{color:#fff}
.fuss-links{display:flex;gap:20px;flex-wrap:wrap}

.js .reveal{opacity:0;transform:translateY(20px)}
.js .reveal.an{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  .panda,.mini,.runde-badge,.lauf-spur,.panda .auge{animation:none!important}
  html{scroll-behavior:auto}
}
@media (max-width:1000px){
  .hero-grid,.live,.shabu,.cta{grid-template-columns:1fr}
  .raster-3,.raster-4,.gross,.fiskal,.galerie{grid-template-columns:repeat(2,1fr)}
  .nav-links{display:none}
  .burger{display:block}
  .nav-links.offen{position:absolute;top:74px;left:18px;right:18px;background:var(--karte);border:1px solid var(--linie);border-radius:22px;box-shadow:var(--schatten-hoch);flex-direction:column;gap:0;padding:8px 20px;display:flex}
  .nav-links.offen a{padding:13px 0;border-bottom:1px solid var(--linie)}
  .nav .knopf-primaer{display:none}
}
@media (max-width:620px){
  section{padding:60px 0}
  .galerie .bild:nth-child(3n+1){grid-column:span 1}
  .galerie .bild:nth-child(even){margin-top:0}
  .raster-3,.raster-4,.gross,.fiskal,.galerie{grid-template-columns:1fr}
  .live,.shabu,.cta{padding:26px}
  .geraetewolke{min-height:360px}
  .panda{width:150px}
  .sprachen button{padding:6px 9px;font-size:.74rem}
}

/* ── Schalter fuer hell/dunkel ─────────────────────────────────────── */
.themeschalter{display:grid;place-items:center;width:38px;height:38px;border-radius:999px;border:1px solid var(--linie);background:var(--karte);cursor:pointer;color:var(--grau);flex:0 0 auto}
.themeschalter:hover{color:var(--blau);border-color:var(--blau)}
.themeschalter svg{width:19px;height:19px}
.themeschalter .mond{display:none}
html[data-theme="dark"] .themeschalter .sonne{display:none}
html[data-theme="dark"] .themeschalter .mond{display:block}

/* ── Dunkles Thema ─────────────────────────────────────────────────── */
html[data-theme="dark"]{
  --tinte:#eef1f7; --grau:#a6b0c3; --linie:#28303f; --weiss:#0d1119; --flaeche:#131926; --karte:#171e2b;
  --blau-t:#16243d; --gruen-t:#112a1d; --teal-t:#0f2a2a; --orange-t:#2c2210;
  --pink-t:#2b1526; --violett-t:#211a38; --rot-t:#2c1418;
  --nav:rgba(23,30,43,.86); --band:#0a0e16;
  --schirm:linear-gradient(160deg,#1b2232,#141a26);
  --platz-a:#1b2231; --platz-b:#161c28;
  --warn-bg:#2b2210; --warn-rand:#4b3b14; --warn-text:#e9cd82;
  --ph-bg:#4b3b14; --ph-text:#ffd76e;
  --wolke-1:#1a2740; --wolke-2:#122a1e; --wolke-3:#2a1526;
  --schatten:0 12px 30px rgba(0,0,0,.45);
  --schatten-hoch:0 26px 60px rgba(0,0,0,.55);
}
html[data-theme="dark"] .knopf-primaer{background:var(--blau)}
html[data-theme="dark"] footer{border-top:1px solid var(--linie)}
html[data-theme="dark"] img{filter:brightness(.94)}

/* seYu Systems: echtes Logo — schwarz im hellen, weiss im dunklen Design */
.marke-logo{width:36px;height:36px;border-radius:10px;display:block}
/* Navigationsleiste: nur das Markenzeichen (Planet) zeigen - die Wortmarke im Bild ist bei 46 px unleserlich */
.marke-icon{display:block;width:46px;height:33px;overflow:hidden;flex:0 0 auto}
.marke-icon img{width:46px;height:46px;border-radius:0}
.logo .logo-weiss{display:none}
html[data-theme="dark"] .logo .logo-schwarz{display:none}
html[data-theme="dark"] .logo .logo-weiss{display:block}
footer .logo .logo-schwarz{display:none}
footer .logo .logo-weiss{display:block}