/* Gemeinsames Stylesheet der Website (Startseite und Unterseiten). Pfade relativ zu assets/. */
/* Lokale Fonts (kein Google-Aufruf) */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-mono-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-mono-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Michroma';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/michroma-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Michroma';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/michroma-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --bg:#06040e;--bg2:#0b0818;--panel:rgba(14,10,30,.72);--panel2:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.12);--txt:#f3f0ff;--muted:#ffffff;
  --purple:#a45cff;--pink:#ff3fc6;--cyan:#3fe6ff;--green:#7dffa8;--orange:#ffb054;--red:#ff5a5a;
  --head:'Michroma',sans-serif;--mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--mono);font-size:15px;line-height:1.7;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}   /* height:auto: width/height-Attribute nur fürs Seitenverhältnis (kein Springen beim Laden) */
a{color:inherit;text-decoration:none}
.wrap{width:min(1428px,calc(100% - 32px));margin:0 auto}
h1,h2,h3{font-family:var(--head);font-weight:400;line-height:1.15;margin:0}
h2{font-size:clamp(26px,4vw,44px);letter-spacing:-.01em}
h2.neon{color:#fff;text-shadow:0 0 6px rgba(255,255,255,.55),0 0 22px rgba(63,230,255,.45),0 0 44px rgba(63,230,255,.25)}
h2.neon.pink{text-shadow:0 0 6px rgba(255,255,255,.5),0 0 22px rgba(255,63,198,.55),0 0 48px rgba(255,63,198,.3)}
h2.neon.purple{text-shadow:0 0 6px rgba(255,255,255,.5),0 0 22px rgba(164,92,255,.6),0 0 48px rgba(164,92,255,.3)}
h2.neon.green{text-shadow:0 0 6px rgba(255,255,255,.5),0 0 22px rgba(125,255,168,.55),0 0 48px rgba(125,255,168,.3)}
h2.neon.orange{text-shadow:0 0 6px rgba(255,255,255,.5),0 0 22px rgba(255,176,84,.55),0 0 48px rgba(255,176,84,.3)}
.kicker{display:inline-block;padding:6px 14px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:22px}
.kicker.pink{background:#c8259a}.kicker.cyan{background:#0f8fa3}.kicker.purple{background:#6d36c9}.kicker.green{background:#2e8f5c}.kicker.orange{background:#b8641f}.kicker.grey{background:#4b5563}.kicker.red{background:#b3243c}
.lead{color:var(--muted);max-width:760px;font-size:16px}
.center{text-align:center}.center .lead{margin-left:auto;margin-right:auto}
section{padding:96px 0;position:relative}
/* Buttons: Stil kommt aus assets/eywora-button.js (Klasse ey-btn, Designer-Vorgabe).
   Das Skript setzt "Space Mono", die Seite lädt aber IBM Plex Mono – darum hier die Schrift
   der Seite erzwingen (body-Präfix schlägt die vom Skript eingefügte Regel). */
body .ey-btn{font-family:var(--mono)}
.card{background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(10px);padding:26px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}.g6{grid-template-columns:repeat(6,1fr)}.g8{grid-template-columns:repeat(8,1fr)}
.tag{display:inline-block;padding:4px 10px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid currentColor;border-radius:3px}
.c-purple{color:var(--purple)}.c-pink{color:var(--pink)}.c-cyan{color:var(--cyan)}.c-green{color:var(--green)}.c-orange{color:var(--orange)}.c-red{color:var(--red)}
.meta{font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(6,4,14,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
/* Kopfzeile: Desktop Logo links, Menü daneben, CTA rechts; Handy (bis 560px) Menü links, Logo mittig, CTA rechts */
.nav .wrap{height:72px;display:grid;grid-template-columns:auto auto 1fr;grid-template-areas:"logo menu cta";align-items:center;gap:28px}
.nav-logo{grid-area:logo;display:block}
.nav .menu-btn{grid-area:menu;justify-self:start}
.nav-cta{grid-area:cta;justify-self:end;display:flex;align-items:center}
@media(max-width:560px){.nav .wrap{grid-template-columns:1fr auto 1fr;grid-template-areas:"menu logo cta"}}
/* Desktop-Navigation mit Aufklapp-Panels */
.topnav{grid-area:nav;display:none;justify-self:start}
@media(min-width:1001px){
  .topnav{display:block}
  .nav .menu-btn,.mega{display:none!important}
  .nav .wrap{grid-template-columns:auto 1fr auto;grid-template-areas:"logo nav cta"}
}
.tn{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.tn-btn,.tn-link{display:inline-flex;align-items:center;gap:7px;padding:10px 12px;border:0;background:none;color:#fff;font:500 13px/1 var(--mono);letter-spacing:.02em;cursor:pointer;transition:color .2s;white-space:nowrap}
.tn-btn svg{width:10px;height:6px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .2s}
.tn-btn:hover,.tn-link:hover,.tn-btn[aria-expanded="true"]{color:var(--cyan)}
.tn-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.tn-btn:focus-visible,.tn-link:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.tn-link.here{color:var(--green)}
.tn-dd{position:absolute;left:0;right:0;top:100%;background:rgba(6,4,14,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);box-shadow:0 30px 60px rgba(0,0,0,.5);animation:mega-in .2s ease}
.tn-dd-in{width:min(1428px,calc(100% - 32px));margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:48px;padding:30px 0 34px}
.tn-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 48px;max-width:760px}
.tn-promo{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px 26px;border:1px solid rgba(255,63,198,.45);background:radial-gradient(120% 90% at 100% 0%,rgba(255,63,198,.3),transparent 60%),radial-gradient(90% 80% at 0% 100%,rgba(164,92,255,.32),transparent 60%),#120a2a;box-shadow:0 0 30px rgba(200,37,154,.18);transition:border-color .2s,box-shadow .2s}
.tn-promo:hover{border-color:var(--pink);box-shadow:0 0 36px rgba(200,37,154,.38)}
.tn-promo .tn-promo-k{padding:4px 10px;background:#c8259a;color:#fff;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.tn-promo b{font-family:var(--head);font-weight:400;font-size:19px;line-height:1.3;color:#fff}
.tn-promo span{font-size:13px;line-height:1.55;color:rgba(255,255,255,.82)}
.tn-promo .tn-promo-go{margin-top:4px;color:var(--green);font-weight:700}
@media(prefers-reduced-motion:reduce){.tn-dd{animation:none}}
/* Sprachwechsler */
.lang{position:relative;margin-right:12px}
.lang-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 10px;border:1px solid transparent;background:none;color:#fff;font:600 12px/1 var(--mono);letter-spacing:.14em;cursor:pointer;transition:border-color .2s,background .2s}
.lang-btn svg{width:10px;height:6px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .2s}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{border-color:var(--line);background:rgba(255,255,255,.03)}
.lang-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.lang-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.lang-list{position:absolute;right:0;top:calc(100% + 10px);z-index:60;min-width:170px;margin:0;padding:6px;list-style:none;background:rgba(6,4,14,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 20px 40px rgba(0,0,0,.5)}
.lang-list a,.lang-list .lang-soon{display:block;padding:9px 12px;font-size:13px;border-left:2px solid transparent}
.lang-list a:hover,.lang-list a:focus-visible{background:rgba(63,230,255,.07);border-left-color:var(--cyan);outline:none}
.lang-list a[aria-current]{color:var(--green);border-left-color:var(--green)}
.lang-soon{color:rgba(255,255,255,.4);cursor:default}
.lang-soon small{margin-left:6px;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:560px){.lang{margin-right:12px}.lang-btn{padding:9px 6px;gap:4px}}
.nav img{height:42px;width:auto}

/* hero */
.hero{padding:32px 0 40px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(46px,8vw,104px);line-height:.95;color:#fff;text-shadow:0 0 8px rgba(255,255,255,.6),0 0 30px rgba(125,255,168,.55),0 0 70px rgba(63,230,255,.35);letter-spacing:.02em}
.hero .sub{font-family:var(--head);font-size:clamp(18px,2.4vw,28px);margin:22px 0 10px;color:#fff}
.hero p{color:var(--muted);max-width:560px}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.hero-visual{position:relative;min-height:520px}
.hero-visual .leo{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:min(440px,100%);filter:drop-shadow(0 0 40px rgba(164,92,255,.35))}
.hero-visual .glow{position:absolute;inset:auto 0 0;height:70%;background:radial-gradient(ellipse at 50% 100%,rgba(164,92,255,.45),transparent 65%);z-index:-1}
.bubble{position:absolute;padding:14px 16px;background:rgba(9,6,22,.92);border:1px solid var(--purple);font-size:12px;line-height:1.6;max-width:260px;box-shadow:0 0 22px rgba(164,92,255,.25)}
.bubble b{color:var(--cyan)}
.bubble.main{top:0;right:0}
.chip{position:absolute;padding:7px 11px;font-size:11px;font-weight:700;letter-spacing:.05em;background:rgba(9,6,22,.9);border:1px solid var(--line);white-space:nowrap}
.chip.a{top:20px;left:0;border-color:var(--pink)}.chip.b{top:110px;left:20px;border-color:var(--cyan)}.chip.c{top:200px;left:0;border-color:var(--green)}.chip.d{top:150px;right:0;border-color:var(--orange)}.chip.e{top:240px;right:10px;border-color:var(--purple)}
.hero .kicker{margin-bottom:18px}
.hero h1.headline{font-size:clamp(26px,3.3vw,60px);line-height:1.2;letter-spacing:0;text-shadow:0 0 6px rgba(255,255,255,.45),0 0 26px rgba(63,230,255,.35)}
.hero h1.headline em{font-style:normal;color:var(--green);text-shadow:0 0 18px rgba(125,255,168,.6)}
.hero .headline-sub{margin:18px 0 0;max-width:none;font-family:'Courier New',Courier,monospace;font-weight:700;font-size:clamp(18px,2vw,30px);line-height:1.3;color:#fff;text-shadow:0 0 14px rgba(63,230,255,.35)}
.hero h1.headline sup{font-family:var(--mono);font-size:.45em;color:var(--muted);text-shadow:none}
.hero .subline{font-size:17px;color:#e6e1f5;max-width:600px;margin:0}
.hero .pioneer{margin:16px 0 0;font-size:17px;color:#e6e1f5;max-width:600px}
.hero .clarify{margin:8px 0 0;font-size:12px;color:var(--muted);max-width:600px}
.hero .actions{align-items:center}
.hero .textlink{color:var(--green);border-bottom:1px solid rgba(125,255,168,.35);padding-bottom:2px;font-size:14px}
.hero .textlink:hover{border-bottom-color:var(--green);text-shadow:0 0 10px rgba(125,255,168,.6)}
.hero .trust{margin-top:22px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hero .trust span{color:var(--green)}
.hero-shot{position:relative;margin:0}
.hero .wrap.top{grid-template-columns:1fr 1.1fr}
.hero-head{width:80vw;margin:0 auto 64px;text-align:center}
.hero-shot .frame{border:1px solid rgba(63,230,255,.35);box-shadow:0 0 60px rgba(63,230,255,.18),0 0 120px rgba(164,92,255,.18);background:#0b0818;overflow:hidden}
.hero-shot .bar3{display:flex;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line)}
.hero-shot .bar3 i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2)}
.hero-shot figcaption{margin-top:14px;padding-left:300px;font-size:12px;line-height:1.5;color:var(--muted)}

/* Leo 3D im Hero (Skript: assets/leo-hero.js) */
  .leo {
    font-family: var(--mono);
    font-weight: 700;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: pan-y;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .leo.dragging { cursor: grabbing; }
  .leo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  #leo-bg { z-index: 0; }
  #leo-wire { z-index: 2; }

  #leo-gl { z-index: 3; pointer-events: none; }

  /* speech bubble */
  .leo-bubble {
    position: absolute;
    z-index: 4;
    opacity: 0;
    transform: translateY(10px) scale(.97);
    transform-origin: 0 100%;
    transition: opacity .4s ease, transform .45s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
    filter: drop-shadow(0 0 18px rgba(166, 107, 255, .28));
  }
  .leo-bubble.show { opacity: 1; transform: none; }
  .leo-bubble-frame {
    padding: 1px;
    background: rgba(140, 100, 255, .85);
    clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  }
  .leo-bubble-inner {
    display: grid;
    padding: 20px 26px 22px;
    background: linear-gradient(160deg, #181d45, #0e1230);
    clip-path: polygon(15.5px 0, 100% 0, 100% calc(100% - 15.5px), calc(100% - 15.5px) 100%, 0 100%, 0 15.5px);
    color: #fff;
    font-style: italic;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.65;
  }
  .leo-bubble-inner > div { grid-area: 1 / 1; }
  .leo-bubble-inner .ghost { visibility: hidden; }
  .leo-bubble p { margin: 0 0 10px; }
  .leo-bubble p:last-child { margin-bottom: 0; }
  .leo-hl { color: var(--green); }
  .leo-caret {
    display: inline-block;
    width: .55em;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: -0.17em;
    background: var(--green);
    box-shadow: 0 0 8px var(--green);
    animation: blink 1s steps(1) infinite;
  }
  @keyframes blink { 50% { opacity: 0; } }
  .leo-tail {
    position: absolute;
    bottom: -17px;
    left: 30px;
    width: 30px;
    height: 19px;
    overflow: visible;
  }

  /* one-at-a-time bullet */
  .leo-bullet {
    position: absolute;
    z-index: 4;
    padding: 13px 26px 13px 22px;
    background: rgba(16, 20, 48, .9);
    border-left: 5px solid #8b5cf6;
    color: #fff;
    font-size: 16px;
    white-space: nowrap;
    box-shadow: 0 0 24px rgba(0, 0, 0, .35), -4px 0 16px rgba(139, 92, 246, .35);
    opacity: 0;
    transform: translateX(-18px);
    transition: opacity .45s ease, transform .5s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
  }
  .leo-bullet.in { opacity: 1; transform: none; }
  .leo-bullet.out { opacity: 0; transform: translateX(14px); }
  .leo-hint { transition: opacity .4s ease; }
  .leo-hint.gone { opacity: 0; }
  @media (max-width: 480px) {
    .leo-bubble-inner { font-size: 13.5px; padding: 16px 18px 18px; line-height: 1.55; }
    .leo-bullet { font-size: 15px; padding: 11px 22px 11px 18px; }
  }

  .leo-hint {
    position: absolute;
    left: 0; right: 0;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    z-index: 5;
    pointer-events: none;
    letter-spacing: .04em;
    padding: 0 16px;
  }
.hero-shot .leo{height:560px;overflow:visible}
.hero-shot .leo-bullet{font-size:15px;padding:11px 20px 11px 18px}
.hero-shot .leo-hint{display:none}
/* Neon-Glow im Loop, läuft als Welle von oben nach unten durch die Kästchen (--i setzt leo-hero.js) */
.hero-shot .leo-bullet{animation:leo-neon 3.2s ease-in-out infinite;animation-delay:calc(var(--i,0) * .35s)}
@keyframes leo-neon{
  0%,100%{border-left-color:#8b5cf6;box-shadow:0 0 24px rgba(0,0,0,.35),-4px 0 16px rgba(139,92,246,.35)}
  50%{border-left-color:#d3b8ff;box-shadow:0 0 16px rgba(139,92,246,.55),0 0 38px rgba(139,92,246,.28),-6px 0 24px rgba(180,130,255,.95),inset 0 0 14px rgba(139,92,246,.25)}
}
@media(prefers-reduced-motion:reduce){.hero-shot .leo-bullet{animation:none}}
.hero-shot .leo-bullet::before{content:"";display:inline-block;width:1em;height:1em;margin-right:10px;vertical-align:-.15em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%237dffa8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;filter:drop-shadow(0 0 4px rgba(125,255,168,.7))}
@media(max-width:1000px){.hero-shot .leo{height:560px}}
@media(max-width:640px){.hero-shot .leo{height:480px}.hero-shot{padding-bottom:260px}}
.benefits{grid-template-columns:repeat(4,1fr);gap:12px;align-items:stretch;margin-top:56px;position:relative;z-index:1}
/* Leo endet oberhalb der Bühnenunterkante: die Karten rücken direkt an ihn heran */
@media(min-width:1001px){.hero-shot{margin-bottom:-70px}}
.benefit{padding:14px 18px}
.benefit{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;align-content:start}
.benefit img{height:40px;width:auto}
.benefit:nth-child(4) img{height:34px;margin:3px;filter:drop-shadow(0 0 3px rgba(63,230,255,.9)) drop-shadow(0 0 8px rgba(63,230,255,.5))}
.benefit b{font-family:var(--head);font-size:15px}
.benefit p{grid-column:1/-1;margin:8px 0 0;font-size:13px;letter-spacing:-.02em;line-height:1.6;color:var(--muted);max-width:none}
.hero .fn{margin-top:22px;font-size:11px;line-height:1.6;color:var(--muted);max-width:none}
@media(max-width:1000px){.benefits{grid-template-columns:repeat(2,1fr)}.hero-shot{margin-top:20px}}
@media(max-width:1000px){.hero .wrap.top{grid-template-columns:1fr}}
@media(max-width:640px){.benefits{grid-template-columns:1fr}.hero-head{width:auto;margin:0 16px 36px;text-align:left}.hero-shot{margin-bottom:0}.hero-shot figcaption{padding-left:0}}
.stats{margin-top:60px}
.stat{padding:26px 22px;display:flex;flex-direction:column;gap:12px;border-top:2px solid var(--pink)}
.stat:nth-child(2){border-top-color:var(--orange)}.stat:nth-child(3){border-top-color:var(--cyan)}.stat:nth-child(4){border-top-color:var(--purple)}
.stat img{height:56px;width:auto;align-self:flex-start}
.stat strong{font-family:var(--head);font-size:15px;line-height:1.4}

/* problem */
.problem .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.problem p{color:var(--muted)}
.problem .wrap.chances-wrap{display:block;margin-top:50px}
/* Funktions-Kacheln: große Kachel links, drei Zeilen rechts, jede mit kleiner animierter Grafik */
.ek-fk{--g:#5cf2a0;--g-bg:rgba(92,242,160,.14);--dim:#b9b0de;--warn:#ffb07a;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;align-items:stretch;color:#fff;font-family:var(--mono)}
.ek-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:20px;padding:24px;border-radius:16px;border:1px solid rgba(207,198,240,.14);background:rgba(24,14,58,.72);transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.ek-card::before{content:"";position:absolute;left:24px;right:24px;top:0;height:2px;background:var(--g);box-shadow:0 0 14px var(--g)}
.ek-card:hover{transform:translateY(-6px)}
.ek-card.is-on{border-color:rgba(92,242,160,.5);box-shadow:0 0 30px rgba(92,242,160,.12)}
.ek-head{display:flex;gap:12px;align-items:flex-start}
.ek-head svg{flex-shrink:0;width:24px;height:24px;margin-top:3px;stroke:var(--g)}
.ek-card h3{margin:0;font-family:var(--head);font-weight:400;font-size:17px;line-height:1.4;color:#fff}
.ek-card p{margin:0;font-size:15px;line-height:1.6;color:#fff}
.ek-stack{display:flex;flex-direction:column;border-radius:16px;border:1px solid rgba(207,198,240,.14);background:rgba(24,14,58,.72);overflow:hidden}
.ek-stack .ek-card{flex:1;flex-direction:row;align-items:center;gap:24px;border:0;border-radius:0;background:transparent;padding:22px 24px}
.ek-stack .ek-card+.ek-card{border-top:1px solid rgba(207,198,240,.14)}
.ek-stack .ek-card::before{left:0;right:auto;top:18px;bottom:18px;width:2px;height:auto;opacity:.35;transition:opacity .4s}
.ek-stack .ek-card.is-on::before{opacity:1}
.ek-stack .ek-card:hover{transform:none}
.ek-stack .ek-card.is-on{box-shadow:none;background:rgba(92,242,160,.04)}
.ek-stack .ek-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.ek-stack .ek-demo{order:2;flex:0 0 300px;width:300px;height:auto;min-height:116px;padding:14px 16px;gap:10px}
.ek-stack h3{font-size:16px}
.ek-big{justify-content:flex-start}
.ek-big .ek-demo{height:170px}
.ek-demo{height:150px;box-sizing:border-box;padding:0 18px;border-radius:12px;background:#0f0828;border:1px solid rgba(207,198,240,.1);display:flex;flex-direction:column;justify-content:center;gap:14px}
.ek-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px}
.ek-mono{font-family:var(--mono);font-size:14px}
.ek-dim{color:var(--dim);font-size:13px}
.ek-strong{font-weight:600}
.ek-mid{align-self:center}
.ek-badge{align-self:flex-start;padding:5px 10px;border-radius:6px;font-size:12px;font-weight:600;background:rgba(207,198,240,.08);color:var(--dim);transition:background .5s,color .5s}
.ek-card.is-on .ek-badge{background:var(--g-bg);color:var(--g)}
/* Wechseltext: zwei Zustände übereinander, weich überblendet */
.ek-swap{display:inline-grid}
.ek-swap>*{grid-area:1/1;transition:opacity .45s,transform .45s}
.ek-swap .on{opacity:0;transform:translateY(6px)}
.ek-card.is-on .ek-swap .off{opacity:0;transform:translateY(-6px)}
.ek-card.is-on .ek-swap .on{opacity:1;transform:none;color:var(--g)}
.ek-bar{height:6px;border-radius:3px;background:rgba(207,198,240,.12);overflow:hidden}
.ek-bar i{display:block;height:100%;width:35%;background:var(--g);transition:width 1.2s ease}
.ek-card.is-on .ek-bar i{width:100%}
.ek-price{font-family:var(--mono);font-size:17px;font-weight:600}
.ek-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.ek-steps::before,.ek-steps .ek-line{content:"";position:absolute;left:12.5%;top:8px;height:2px}
.ek-steps::before{right:12.5%;background:rgba(207,198,240,.15)}
.ek-steps .ek-line{width:25%;background:var(--g);transition:width 1.2s ease}
.ek-card.is-on .ek-steps .ek-line{width:75%}
.ek-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:10px;letter-spacing:-.02em;color:var(--dim)}
.ek-step b{width:18px;height:18px;border-radius:50%;box-sizing:border-box;border:2px solid rgba(207,198,240,.35);background:#0f0828;transition:border-color .4s,background .4s}
.ek-step.done b{border-color:var(--g);background:var(--g)}
.ek-step.done{color:#fff}
.ek-step.err b{border-color:var(--warn)}
.ek-step.err{color:var(--warn);transition:color .4s}
.ek-card.is-on .ek-step b{border-color:var(--g);background:var(--g)}
.ek-card.is-on .ek-step{color:#fff}
.ek-card.is-on .ek-step:nth-child(4) b{transition-delay:.4s}
.ek-card.is-on .ek-step:nth-child(5) b{transition-delay:.8s}
.ek-msg{align-self:center;font-size:12px;font-weight:600}
.ek-msg .off{color:var(--warn)}
.ek-chips{display:flex;flex-wrap:wrap;gap:6px}
.ek-chip{padding:4px 10px;border-radius:999px;font-size:11px;font-weight:500;border:1px solid rgba(207,198,240,.25);color:var(--dim);transition:all .4s}
.ek-card.is-on .ek-chip.pick{border-color:var(--g);background:var(--g-bg);color:var(--g)}
.ek-card.is-on .ek-chip.pick+.ek-chip.pick{transition-delay:.35s}
.ek-products{display:flex;gap:6px;height:28px}
.ek-products span{flex:1;max-width:18px;height:28px;border-radius:4px;background:#6b5fa0;transition:opacity .5s,background .5s}
.ek-card.is-on .ek-products span{opacity:.15;transition-delay:.6s}
.ek-card.is-on .ek-products span.keep{opacity:1;background:var(--g)}
@media(max-width:900px){.ek-fk{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.ek-card,.ek-stack .ek-card{padding:20px 18px}.ek-stack .ek-card{flex-direction:column;align-items:stretch}.ek-stack .ek-demo{order:0;flex-basis:auto;width:auto}}
@media(prefers-reduced-motion:reduce){.ek-fk *{transition:none!important}.ek-card:hover{transform:none}}
/* Ihr Gewinn: drei Planeten auf einer Umlaufbahn */
.ek-orb{--mag:#e04bc0;--ora:#f0913a;--cya:#3fd8e8;position:relative;max-width:1240px;margin:110px auto 0;color:#fff}
.ek-orb__path{position:absolute;left:0;right:0;top:0;height:360px;width:100%;pointer-events:none;overflow:visible}
.ek-orb__spark{filter:drop-shadow(0 0 6px #fff)}
.ek-orb__row{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.ek-planet{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.ek-planet:nth-child(2) .ek-core{order:2;margin-top:66px}
.ek-planet:nth-child(1) .ek-core,.ek-planet:nth-child(3) .ek-core{margin-bottom:60px}
.ek-core{--c:var(--mag);position:relative;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 30%,#1a0d40) 0%,#120830 70%);box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent),0 0 50px color-mix(in srgb,var(--c) 35%,transparent),inset 0 0 30px rgba(0,0,0,.5);transition:transform .5s ease}
.ek-planet:hover .ek-core{transform:scale(1.06)}
.ek-planet--mag .ek-core{--c:var(--mag)}
.ek-planet--ora .ek-core{--c:var(--ora)}
.ek-planet--cya .ek-core{--c:var(--cya)}
.ek-core::after{content:"";position:absolute;inset:-24px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--c) 50%,transparent);pointer-events:none}
.ek-moon{position:absolute;inset:-24px;pointer-events:none;animation:ek-spin 10s linear infinite}
.ek-moon i{position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c)}
@keyframes ek-spin{to{transform:rotate(360deg)}}
.ek-planet:nth-child(2) .ek-moon{animation-duration:13s;animation-direction:reverse}
.ek-planet:nth-child(3) .ek-moon{animation-duration:16s}
.ek-gauge{width:118px;height:118px;transform:rotate(-90deg)}
.ek-gauge circle{fill:none;stroke-width:6}
.ek-gauge .bg{stroke:rgba(255,255,255,.08)}
.ek-gauge .fg{stroke:var(--mag);stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:101.8;filter:drop-shadow(0 0 6px var(--mag));transition:stroke-dashoffset 2s cubic-bezier(.3,.8,.3,1)}
.ek-orb.is-anim:not(.is-in) .ek-gauge .fg{stroke-dashoffset:339.3}
.ek-gauge-num{position:absolute;display:flex;align-items:flex-start;font-family:var(--head);font-size:26px;color:#fff;text-shadow:0 0 16px var(--mag)}
.ek-pct{font-size:12px;line-height:1;margin:4px 0 0 3px}
.ek-sun{width:118px;height:80px;overflow:visible}
.ek-sun .arc{fill:none;stroke:rgba(240,145,58,.35);stroke-width:1.5;stroke-dasharray:3 5}
.ek-sun .horizon{stroke:rgba(255,255,255,.25);stroke-width:1.5}
.ek-sun .dot{fill:var(--ora);filter:drop-shadow(0 0 8px var(--ora))}
.ek-lock{position:relative;width:118px;height:118px;display:grid;place-items:center}
.ek-lock span{position:absolute;inset:20px;border-radius:50%;border:1px solid var(--cya);opacity:0;animation:ek-ping 3.6s ease-out infinite}
.ek-lock span:nth-child(2){animation-delay:1.2s}
.ek-lock span:nth-child(3){animation-delay:2.4s}
@keyframes ek-ping{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.ek-lock svg{width:40px;height:40px;stroke:var(--cya);filter:drop-shadow(0 0 8px var(--cya))}
.ek-lock b{position:absolute;bottom:14px;font-family:var(--head);font-weight:400;font-size:11px;letter-spacing:2px;color:var(--cya)}
.ek-label{margin:0;font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:1.5px;text-transform:uppercase;text-shadow:0 0 18px currentColor}
.ek-planet--mag .ek-label{color:var(--mag)}
.ek-planet--ora .ek-label{color:var(--ora)}
.ek-planet--cya .ek-label{color:var(--cya)}
.ek-planet p{margin:-8px 0 0;max-width:330px;font-size:14.5px;line-height:1.75;color:#fff}
.ek-cta-wrap{position:relative;margin-top:64px}
@media(max-width:900px){.ek-orb{margin-top:70px}.ek-orb__row{grid-template-columns:minmax(0,1fr);gap:72px}.ek-planet:nth-child(2) .ek-core{order:0;margin-top:0;margin-bottom:60px}.ek-orb__path{display:none}}
@media(prefers-reduced-motion:reduce){.ek-orb *,.ek-orb *::before{animation:none!important;transition:none!important}.ek-orb__spark{display:none}}
/* Für wen: Planet mit Satelliten auf der Umlaufbahn, darunter Schutzschild mit Asteroiden */
.ek-fw{--cya:#3fd8e8;--mag:#e04bc0;--grn:#5cf2a0;max-width:1240px;margin:0 auto;color:#fff;display:flex;flex-direction:column;align-items:center}
.fw-stage{position:relative;width:100%;aspect-ratio:1240/560;margin-top:28px}
.fw-orbit{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fw-orbit .ring{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.5;stroke-dasharray:3 9;animation:fw-dash 30s linear infinite}
.fw-orbit .ring2{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1}
.fw-spark{filter:drop-shadow(0 0 6px #3fd8e8)}
@keyframes fw-dash{to{stroke-dashoffset:-600}}
.fw-crew-title{position:absolute;left:50%;top:27%;transform:translate(-50%,-50%);margin:0;font-family:var(--head);font-weight:400;font-size:17px;color:var(--cya);text-shadow:0 0 16px rgba(63,216,232,.55);white-space:nowrap}
.fw-home{position:absolute;left:50%;top:52%;width:170px;height:170px;transform:translate(-50%,-50%);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:radial-gradient(circle at 35% 30%,#3a2a7a 0%,#1a0f45 55%,#0f0828 100%);box-shadow:0 0 0 1px rgba(63,216,232,.35),0 0 60px rgba(63,216,232,.25),inset -18px -18px 40px rgba(0,0,0,.45);text-align:center}
.fw-home svg{width:34px;height:34px;stroke:#fff;opacity:.9}
.fw-home strong{font-size:12px;line-height:1.35;color:#fff}
.fw-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--grn)}
.fw-live i{width:7px;height:7px;border-radius:50%;background:var(--grn);box-shadow:0 0 8px var(--grn);animation:fw-blink 1.8s ease-in-out infinite}
@keyframes fw-blink{50%{opacity:.35}}
.fw-list{list-style:none;margin:0;padding:0}
.fw-sat{position:absolute;width:0;height:0}
.fw-sat .dot{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--cya);box-shadow:0 0 14px var(--cya),0 0 30px rgba(63,216,232,.5)}
.fw-sat .dot::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid var(--cya);opacity:0;animation:fw-ping 3s ease-out infinite}
.fw-sat .txt{position:absolute;top:0;width:min(250px,20vw);transform:translateY(-50%);font-size:14px;line-height:1.55;color:#fff}
.fw-sat--l .txt{right:26px;text-align:right}
.fw-sat--r .txt{left:26px;text-align:left}
/* Aufleuchten nacheinander, nur mit JS (sonst sofort sichtbar) */
.ek-fw.fw-anim .fw-sat .dot{opacity:.35;transform:scale(.7);animation:fw-on .6s ease forwards paused}
.ek-fw.fw-anim .fw-sat .txt{opacity:.4;animation:fw-txt .6s ease forwards paused}
.ek-fw.fw-anim.is-in .fw-sat .dot,.ek-fw.fw-anim.is-in .fw-sat .txt{animation-play-state:running}
.fw-sat:nth-of-type(2) .dot,.fw-sat:nth-of-type(2) .txt{animation-delay:.35s}
.fw-sat:nth-of-type(3) .dot,.fw-sat:nth-of-type(3) .txt{animation-delay:.7s}
.fw-sat:nth-of-type(4) .dot,.fw-sat:nth-of-type(4) .txt{animation-delay:1.05s}
.fw-sat:nth-of-type(2) .dot::after{animation-delay:.75s}
.fw-sat:nth-of-type(3) .dot::after{animation-delay:1.5s}
.fw-sat:nth-of-type(4) .dot::after{animation-delay:2.25s}
@keyframes fw-on{to{opacity:1;transform:scale(1)}}
@keyframes fw-txt{to{opacity:1}}
@keyframes fw-ping{0%{opacity:.8;transform:scale(.6)}100%{opacity:0;transform:scale(1.8)}}
.fw-out{width:100%;display:flex;flex-direction:column;align-items:center}
.fw-shieldline{display:block;width:100%;max-width:980px;height:64px;overflow:visible}
.fw-shield{fill:none;stroke:var(--mag);stroke-width:2;filter:drop-shadow(0 0 8px var(--mag));stroke-dasharray:14 6;animation:fw-shield 3s linear infinite;vector-effect:non-scaling-stroke}
.fw-shield-glow{fill:none;stroke:rgba(224,75,192,.18);stroke-width:14;vector-effect:non-scaling-stroke}
@keyframes fw-shield{to{stroke-dashoffset:-80}}
.fw-box{width:100%;max-width:980px;margin-top:18px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);border:1px solid rgba(224,75,192,.4);border-radius:18px;background:rgba(36,18,68,.55);overflow:hidden}
.fw-box-no{padding:26px 28px}
.fw-box-no h3{margin:0;font-family:var(--head);font-weight:400;font-size:16px;color:var(--mag);text-shadow:0 0 16px rgba(224,75,192,.5)}
.fw-no{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.fw-no li{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.5;color:#fff}
.fw-x{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--mag);color:#ff8be0;font-size:11px;font-weight:700;line-height:1;box-shadow:0 0 10px rgba(224,75,192,.45)}
.fw-box-go{padding:26px 28px;display:flex;flex-direction:column;justify-content:center;gap:16px;border-left:1px solid rgba(224,75,192,.25);background:rgba(224,75,192,.06)}
.fw-box-go p{margin:0;font-size:14px;line-height:1.6;color:#fff}
.fw-go{align-self:flex-start;padding:10px 16px;border:1px solid var(--mag);border-radius:10px;color:#fff;font-size:14px;font-weight:600;transition:background .2s,box-shadow .2s}
.fw-go:hover{background:rgba(224,75,192,.2);box-shadow:0 0 18px rgba(224,75,192,.4)}
/* Häkchen in den Satelliten */
.fw-sat .dot svg{position:absolute;inset:3px;width:12px;height:12px}
.fw-sat .dot svg path{fill:none;stroke:#0b0620;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){
  .fw-stage{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;padding-bottom:12px}
  .fw-orbit{display:none}
  .fw-crew-title{position:static;transform:none;order:2;margin:28px 0 18px;white-space:normal;text-align:center}
  .fw-home{position:relative;left:auto;top:auto;transform:none;order:1}
  .fw-list{order:3;position:relative;display:flex;flex-direction:column;gap:22px;width:100%;max-width:420px;padding-left:28px;box-sizing:border-box}
  .fw-list::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:1px;background:rgba(63,216,232,.35)}
  .fw-sat{position:relative;left:auto!important;top:auto!important;width:auto;height:auto}
  .fw-sat .dot{left:-28px;top:3px;width:14px;height:14px;margin-left:1px}
  .fw-sat .txt{position:static;width:auto;transform:none;text-align:left!important}
  .fw-shieldline{height:40px;margin-top:12px}
  .fw-box{grid-template-columns:1fr}
  .fw-box-go{border-left:0;border-top:1px solid rgba(224,75,192,.25)}
  .fw-sat .dot svg{inset:1px}
}
@media(prefers-reduced-motion:reduce){.ek-fw *,.ek-fw *::after{animation:none!important}.fw-spark{display:none}}
/* Mosaik-Kugel (Warum wir das tun) */
.mosaik{position:relative;width:100%;height:clamp(440px,56vw,760px);touch-action:pan-y}
.mosaik canvas{width:100%!important;height:100%!important;display:block;cursor:grab;filter:drop-shadow(0 0 4px rgba(236,140,230,.9)) drop-shadow(0 0 18px rgba(138,44,240,.7))}
.mosaik.drag canvas{cursor:grabbing}
/* So funktioniert's: senkrechte Zeitleiste, Text und Fenster wechseln die Seite */
.ab-line{list-style:none;margin:40px auto 0;padding:0;position:relative;max-width:1120px}
.ab-line::before{content:"";position:absolute;left:50%;top:24px;bottom:24px;width:2px;margin-left:-1px;background:linear-gradient(180deg,#19a7bf 0%,#2e9a5c 35%,#d0782a 68%,#d0344c 100%);opacity:.75;box-shadow:0 0 12px rgba(160,120,255,.35)}
.ab-step{--c:#19a7bf;position:relative;display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);align-items:center;padding:28px 0}
.ab-step:nth-child(2){--c:#2e9a5c}.ab-step:nth-child(3){--c:#d0782a}.ab-step:nth-child(4){--c:#d0344c}
.ab-node{grid-column:2;grid-row:1;justify-self:center;width:48px;height:48px;border-radius:50%;box-sizing:border-box;display:grid;place-items:center;background:#140a33;border:2px solid var(--c);box-shadow:0 0 0 6px #140a33,0 0 22px color-mix(in srgb,var(--c) 70%,transparent);font-weight:700;font-size:14px;color:#fff;position:relative;z-index:1}
.ab-text{grid-column:1;grid-row:1;padding-right:36px;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.ab-tag{margin:0;padding:6px 12px;background:var(--c);color:#fff;font-family:var(--head);font-weight:400;font-size:13px;letter-spacing:.5px;text-transform:uppercase}
.ab-text p{margin:0;max-width:420px;font-size:14px;line-height:1.75;color:#fff}
.ab-shot{grid-column:3;grid-row:1;padding-left:36px}
.ab-frame{position:relative;border-radius:12px;overflow:hidden;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);background:linear-gradient(180deg,rgba(30,18,70,.9),rgba(15,8,40,.9));box-shadow:0 18px 40px rgba(0,0,0,.35),0 0 30px color-mix(in srgb,var(--c) 18%,transparent);display:flex;flex-direction:column}
.ab-frame img{display:block;width:100%;height:auto}   /* Screenshots 16:10, vollständig sichtbar */
.ab-bar{flex:none;display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid rgba(207,198,240,.1)}
.ab-bar i{width:8px;height:8px;border-radius:50%;background:rgba(207,198,240,.25)}
.ab-bar i:first-child{background:var(--c)}
.ab-step:nth-child(even) .ab-text{grid-column:3;padding:0 0 0 36px;text-align:left;align-items:flex-start}
.ab-step:nth-child(even) .ab-shot{grid-column:1;padding:0 36px 0 0}
@media(max-width:800px){
  .ab-line::before{left:23px}
  .ab-step{grid-template-columns:48px minmax(0,1fr);column-gap:18px;row-gap:18px;align-items:start;padding:22px 0}
  .ab-node{grid-column:1;grid-row:1}
  .ab-text,.ab-step:nth-child(even) .ab-text{grid-column:2;grid-row:1;padding:8px 0 0;text-align:left;align-items:flex-start}
  .ab-shot,.ab-step:nth-child(even) .ab-shot{grid-column:2;grid-row:2;padding:0}
}
/* Updates ohne Risiko: Grafik Live-Spur / Kopie-Spur (alle SVG-Stile unter .up-graphic gekapselt) */
.up-fig{margin:0}
.up-fig figcaption{font-size:12px;color:var(--muted);margin-top:10px}
.up-graphic{--g:#5cf2a0;--v:#a76bff;width:100%;aspect-ratio:760/380}
.up-graphic svg{display:block;width:100%;height:100%;overflow:visible;font-family:var(--mono)}
.up-graphic .lbl{font-size:14px;font-weight:700;letter-spacing:2px}
.up-graphic .sub{font-size:12px;fill:#d9d2f2}
.up-graphic .st-dot{transition:fill .35s,stroke .35s}
.up-graphic .st-txt{font-size:13.5px;fill:#a79dcf;transition:fill .35s}
.up-graphic .is-on .st-dot{fill:var(--v);stroke:#fff}
.up-graphic .is-on .st-txt{fill:#fff}
.up-graphic .chk{font-size:12.5px;fill:#8a80b8;transition:fill .3s}
.up-graphic .chk.ok{fill:var(--g)}
.up-graphic .btn-rect{fill:rgba(167,107,255,.12);stroke:var(--v);transition:fill .25s}
.up-graphic .btn-txt{font-size:12px;font-weight:700;fill:#fff}
.up-graphic .pressed .btn-rect{fill:var(--g);stroke:var(--g)}
.up-graphic .pressed .btn-txt{fill:#140a33}
.up-graphic .live-line{stroke:var(--g);stroke-width:3;filter:drop-shadow(0 0 6px rgba(92,242,160,.8))}
.up-graphic .copy-line{stroke:rgba(167,107,255,.45);stroke-width:2;stroke-dasharray:6 6}
.up-graphic .up-arrow{fill:none;stroke:var(--g);stroke-width:2;stroke-dasharray:5 6;opacity:.25;transition:opacity .4s}
.up-graphic.is-deploy .up-arrow{opacity:1}
.up-graphic .ver{font-size:14px;font-weight:700;fill:#fff;transition:fill .4s}
.up-graphic.is-new .ver{fill:var(--g)}
.up-graphic .flash{fill:#fff;opacity:0}
/* Hauptmenü (Mega-Panel) */
html{scroll-padding-top:84px}
.menu-btn{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:#fff;font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,background .2s}
.menu-btn:hover,.menu-btn[aria-expanded="true"]{border-color:var(--cyan);background:rgba(63,230,255,.08)}
.menu-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.menu-ico{position:relative;width:16px;height:12px}
.menu-ico i{position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform .25s,opacity .25s}
.menu-ico i:nth-child(1){top:0}.menu-ico i:nth-child(2){top:5px}.menu-ico i:nth-child(3){top:10px}
.menu-btn[aria-expanded="true"] .menu-ico i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-ico i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .menu-ico i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.mega{position:absolute;left:0;right:0;top:100%;background:rgba(6,4,14,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);box-shadow:0 30px 60px rgba(0,0,0,.5);animation:mega-in .25s ease}
@keyframes mega-in{from{opacity:0;transform:translateY(-8px)}}
.mega-in{width:min(1428px,calc(100% - 32px));margin:0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px;padding:30px 0 34px}   /* eigene Breite, nicht .wrap (das hat in der Kopfzeile feste Höhe) */
.mega-h{margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--pink)}
.mega-col a{display:block;padding:9px 12px;margin:0 -12px;border-left:2px solid transparent;transition:background .2s,border-color .2s}
.mega-col a b{display:block;font-size:14px;color:#fff}
.mega-col a small{display:block;margin-top:2px;font-size:12px;color:rgba(255,255,255,.65)}
.mega-col a:hover,.mega-col a:focus-visible{background:rgba(63,230,255,.07);border-left-color:var(--cyan);outline:none}
.mega-col a.here{border-left-color:var(--green)}
.mega-col a.here b{color:var(--green)}
@media(max-width:900px){.mega{max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain}.mega-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}}
@media(max-width:560px){.mega-in{grid-template-columns:minmax(0,1fr)}.menu-btn{padding:9px 12px}}
@media(prefers-reduced-motion:reduce){.mega{animation:none}}
.idea-line{margin:22px 0 0;font-family:var(--mono);font-size:18px;font-weight:600;line-height:1.5;color:#fff !important}
.idea-line em{font-style:normal;color:var(--green);text-shadow:0 0 14px rgba(125,255,168,.45)}
.chance-line{margin:56px auto 0;text-align:center;max-width:none;font-family:var(--head);font-size:clamp(22px,3vw,40px);line-height:1.25;color:#fff !important;text-shadow:0 0 6px rgba(255,255,255,.45),0 0 26px rgba(63,230,255,.35)}
.chance-line em{font-style:normal;color:var(--green);text-shadow:0 0 18px rgba(125,255,168,.6)}
.problem .visual{position:relative;text-align:center}
.problem .visual img{margin:0 auto;max-height:520px;filter:drop-shadow(0 0 30px rgba(125,255,168,.3))}
.maya-arc{position:relative;width:min(480px,80%);margin:100px auto 0}
.maya-arc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.maya-arc text{font-family:'Courier New',Courier,monospace;font-weight:700;font-size:40px;fill:#b9ffd0;filter:drop-shadow(0 0 4px rgba(125,255,168,.9)) drop-shadow(0 0 12px rgba(125,255,168,.5))}
/* Maya-Porträt endet auf Brusthöhe: groß zeigen, unten weich auslaufen lassen (wie bei Leo) */
.problem .visual img{width:100%;max-height:none;filter:none;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 99%);mask-image:linear-gradient(to bottom,#000 70%,transparent 99%)}
/* Leuchten auf der Hülle, nicht am maskierten Bild: sonst schneidet die Maske den Schein an der Bildkante gerade ab */
.maya-glow{filter:drop-shadow(0 0 30px rgba(125,255,168,.3))}

/* promises */
.promises .wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:center}
.promises .figure{text-align:center}
.promises .figure img{max-height:640px;margin:0 auto;filter:drop-shadow(0 0 30px rgba(63,230,255,.3))}
.promises .col{display:grid;gap:22px}

/* crew line */
.crewline{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:50px;align-items:end}
.crewline figure{margin:0;text-align:center}
.crewline figure b{display:block;font-family:var(--head);font-size:16px;letter-spacing:.06em}
.crewline figure small{display:block;font-size:11px;color:var(--muted);margin:6px 0 12px}
.crewline figure img{margin:0 auto}
.big-title{font-size:clamp(44px,9vw,112px);color:#fff;text-shadow:0 0 8px rgba(255,255,255,.6),0 0 30px rgba(255,63,198,.7),0 0 70px rgba(255,63,198,.35);text-align:center;letter-spacing:.02em}
.big-sub{font-family:var(--head);text-align:center;font-size:clamp(16px,2.4vw,26px);margin-top:18px}

/* describe */
/* Das Prinzip: Figuren links/rechts, Mitte mit Ablauf-Stationen und wanderndem Auftragsticket */
.pz{display:grid;grid-template-columns:minmax(0,340px) minmax(0,740px) minmax(0,340px);justify-content:center;gap:40px;align-items:center}
.pz-fig{margin:0;display:flex;flex-direction:column;align-items:center;align-self:end}
.pz-body{position:relative;margin-top:72px}
.pz-body svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pz-body text{font-family:'Courier New',Courier,monospace;font-weight:700;font-size:17px;letter-spacing:.06em;fill:#b9ffd0;filter:drop-shadow(0 0 3px rgba(125,255,168,.9)) drop-shadow(0 0 10px rgba(125,255,168,.5))}
.pz-fig img{display:block;width:auto;height:auto;max-width:100%;max-height:700px;filter:drop-shadow(0 0 0 rgba(63,230,255,0)) drop-shadow(0 0 0 rgba(63,230,255,0));transition:filter .6s}
.pz-fig[data-fig="dex"] img{max-height:765px}   /* Bild mit längeren Beinen (fig-dex-laptop-long.png), gleicher Maßstab wie Quinn */
.pz-fig.on img{filter:drop-shadow(0 0 22px rgba(63,230,255,.75)) drop-shadow(0 0 6px rgba(63,230,255,.5))}
.pz-center{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.pz-center h2{margin-top:18px}
.pz-lead{margin:24px 0 0;max-width:680px;color:var(--muted)}
.pz-flow{--n:5;position:relative;width:100%;max-width:720px;margin-top:34px;padding:26px 0 24px;border:1px solid rgba(63,230,255,.25);border-radius:20px;background:rgba(20,10,51,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:left}
.pz-track{position:absolute;left:10%;right:10%;top:33px;height:2px;background:rgba(207,198,240,.18)}
.pz-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--i) / 4 * 100%);background:var(--cyan);box-shadow:0 0 12px var(--cyan);transition:width .8s cubic-bezier(.6,0,.3,1)}
.pz-flow.done .pz-fill{width:100%}
.pz-stations{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.pz-st{width:100%;min-height:44px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 4px;background:none;border:0;cursor:pointer;font:500 13px/1.3 var(--mono);color:#a99fd0;text-align:center}
.pz-dot{width:16px;height:16px;border-radius:50%;box-sizing:border-box;border:2px solid rgba(207,198,240,.35);background:#2a1a5e;transition:background .4s,box-shadow .4s,border-color .4s}
.pz-st.passed{color:#bff5fb}
.pz-st.passed .pz-dot{background:var(--cyan);border-color:var(--cyan)}
.pz-st.on{color:#fff}
.pz-st.on .pz-dot{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 0 6px rgba(63,230,255,.18),0 0 18px var(--cyan)}
.pz-flow.done .pz-st.on .pz-dot{background:#c04bd6;border-color:#c04bd6;box-shadow:0 0 0 6px rgba(192,75,214,.2),0 0 18px #c04bd6}
.pz-st:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:8px}
.pz-ticket{position:relative;width:min(440px,calc(100% - 24px));min-height:120px;box-sizing:border-box;margin:26px 0 0;margin-left:clamp(12px,calc((10% + var(--i) * 20%) - 220px),calc(100% - 452px));padding:16px 18px;border-radius:14px;background:#1f1247;border:1px solid rgba(63,230,255,.5);box-shadow:0 0 28px rgba(63,230,255,.22);display:flex;flex-direction:column;gap:8px;transition:margin-left .8s cubic-bezier(.6,0,.3,1),border-color .4s,box-shadow .4s}
.pz-flow.done .pz-ticket{border-color:#c04bd6;box-shadow:0 0 28px rgba(192,75,214,.45)}
.pz-meta{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:12px;line-height:1.3}
.pz-who{color:var(--cyan)}
.pz-status{color:#bff5fb;text-align:right}
.pz-flow.done .pz-status{color:#e7a6f2}
.pz-text{margin:0;font:15px/1.45 var(--mono);color:#fff}
.pz-approve{align-self:flex-start;margin-top:2px;padding:8px 16px;min-height:36px;border:0;border-radius:8px;background:var(--cyan);color:#140a33;font:600 13px/1 var(--mono);cursor:pointer}
.pz-approve:hover{background:#bff5fb}
.pz-cta{justify-content:center;align-items:center;gap:28px;margin-top:32px}
.pz-more{color:var(--green);border-bottom:1px solid rgba(125,255,168,.4);padding-bottom:2px}
@media(max-width:1180px){.pz{grid-template-columns:minmax(0,760px)}.pz-fig{display:none}}
@media(max-width:640px){.pz-flow{padding:20px 0 16px;border-radius:16px}.pz-track{top:27px}.pz-st{font-size:11px;gap:9px}.pz-ticket{width:auto;min-height:150px;margin:20px 12px 0}.pz-cta{flex-direction:column;gap:18px}}
@media(prefers-reduced-motion:reduce){.pz-fill,.pz-ticket,.pz-dot,.pz-fig img{transition:none}}

/* agent cards with bars */
.agents{grid-template-columns:repeat(3,1fr);gap:26px 20px;margin-top:50px}
.agent{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;padding:16px}
.agent .ph{width:150px;height:150px;border-radius:50%;overflow:hidden;border:2px dashed rgba(255,255,255,.35);padding:4px}
.agent .ph img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.agent b{display:block;font-family:var(--head);font-size:20px}
.agent small{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.skill{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-top:8px}
.bar{display:flex;gap:2px;margin-top:4px}
.bar i{flex:1;height:8px;background:var(--green);opacity:.9;box-shadow:0 0 6px rgba(125,255,168,.6)}
.bar i.off{opacity:.25;box-shadow:none}

/* orbit */
.orbit-wrap{position:relative;margin:60px auto 0;width:min(1078px,100%);aspect-ratio:1.6/1}
.orbit-wrap svg{position:absolute;inset:0;width:100%;height:100%}
.orbit-wrap .center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:180px}
.orb{position:absolute;width:110px;transform:translate(-50%,-50%);text-align:center}
.orb img{width:80px;height:80px;border-radius:50%;margin:0 auto;border:2px solid var(--cyan);box-shadow:0 0 14px rgba(63,230,255,.5);object-fit:cover}
.orb span{display:block;font-size:10px;letter-spacing:.12em;margin-top:6px;font-weight:700}

/* 16 grid */
.sixteen{grid-template-columns:repeat(5,1fr);gap:12px;margin-top:50px}
.member{padding:16px 10px 14px;text-align:center;border-bottom:3px solid var(--cyan)}
.member img{width:88px;height:88px;border-radius:50%;margin:0 auto 12px;border:2px dashed rgba(255,255,255,.45);padding:3px;object-fit:cover}
.member b{display:block;font-family:var(--head);font-size:13px;letter-spacing:.06em}
.member small{display:block;font-size:10px;color:var(--muted);margin-top:6px;line-height:1.45}

/* roles */
.roles{grid-template-columns:1fr 1fr;gap:24px;margin-top:50px}
.role{padding:30px}
.role h3{font-size:34px}
.role .meta{margin:6px 0 20px}
.role ul{margin:0;padding:0;list-style:none}
.role li{padding:8px 0 8px 22px;position:relative;color:#e6e1f5}
.role li:before{content:"";position:absolute;left:0;top:17px;width:8px;height:8px;border-radius:50%;background:currentColor}
.role.sie{border-top:3px solid var(--pink)}.role.sie li:before{background:var(--pink)}.role.sie h3{color:var(--pink)}
.role.wir{border-top:3px solid var(--cyan)}.role.wir li:before{background:var(--cyan)}.role.wir h3{color:var(--cyan)}
.role li em{font-style:normal;color:var(--cyan)}

/* systems */
.systems{grid-template-columns:1fr 1fr;gap:24px;margin-top:50px}
.sysbox{padding:26px}
.sysbox h3{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.logo{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 8px;background:var(--panel2);border:1px solid var(--line);font-size:11px;text-align:center}
.logo img{height:44px;width:auto;object-fit:contain}
.logo-strip{padding:10px 0 34px;margin-top:-20px;position:relative;z-index:3}
.logo-strip-view{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.logo-strip-track{display:flex;gap:0;width:max-content;animation:logo-strip var(--dur,60s) linear infinite}
@media(hover:hover){.logo-strip-view:hover .logo-strip-track{animation-play-state:paused}}   /* auf Touch-Geräten blieb das Band nach Antippen stehen */
.logo-strip-track .ls-item{margin-right:14px;display:flex;align-items:center;gap:12px;padding:12px 22px;border:1px solid var(--line);background:var(--panel2);border-radius:40px;font-size:14px;white-space:nowrap;color:#d9d4ea;opacity:.85;transition:opacity .3s,border-color .3s}
.logo-strip-track .ls-item:hover{opacity:1;border-color:rgba(125,255,168,.6)}
.logo-strip-track .ls-item img{height:36px;width:56px;object-fit:contain}   /* feste Breite: nachladende Logos verändern die Bandbreite nicht mehr (sonst springt die Animation) */
@keyframes logo-strip{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.logo-strip-track{animation:none;flex-wrap:wrap;row-gap:14px;justify-content:center;width:auto;padding:0 16px}.logo-strip-view{-webkit-mask-image:none;mask-image:none}}
.logo.more{justify-content:center;font-family:var(--mono);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-style:dashed}

/* cta band */
.ctaband{text-align:center;padding:90px 0}
.ctaband h2{font-size:clamp(34px,6vw,72px)}
.ctaband .contact{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.ctaband .contact a{padding:12px 18px;border:1px solid var(--line);background:var(--panel2)}
.ctaband .contact a.mail{background:linear-gradient(90deg,#7d2fd9,#d72d9b);border-color:transparent;font-weight:700}

/* steps */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:60px;position:relative}
.steps:before{content:"";position:absolute;left:8%;right:8%;top:70px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--green),var(--orange),var(--red),var(--pink),var(--purple));opacity:.7}
.step{text-align:center;position:relative}
.step .num{font-size:11px;font-weight:700;letter-spacing:.2em;margin-bottom:14px}
.step .planet{height:110px;display:grid;place-items:center;margin-bottom:16px}
.step .planet img{max-height:110px;max-width:130px;filter:drop-shadow(0 0 16px rgba(255,255,255,.25))}
.step b{display:inline-block;padding:6px 10px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-bottom:10px}
.step p{font-size:12px;color:var(--muted);margin:0}
.step:nth-child(1) b{background:#0f8fa3}.step:nth-child(2) b{background:#2e8f5c}.step:nth-child(3) b{background:#b8641f}.step:nth-child(4) b{background:#b3243c}.step:nth-child(5) b{background:#c8259a}.step:nth-child(6) b{background:#6d36c9}
.step:nth-child(1) .num{color:var(--cyan)}.step:nth-child(2) .num{color:var(--green)}.step:nth-child(3) .num{color:var(--orange)}.step:nth-child(4) .num{color:var(--red)}.step:nth-child(5) .num{color:var(--pink)}.step:nth-child(6) .num{color:var(--purple)}

/* week */
.week{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:60px;position:relative}
.week:before{content:"";position:absolute;left:10%;right:10%;top:22px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--pink),var(--cyan),var(--pink),var(--cyan));opacity:.7}
.day{text-align:center;position:relative}
.day .d{font-family:var(--head);font-size:26px;background:var(--bg);display:inline-block;padding:0 12px;position:relative;color:#fff}
.day:nth-child(2) .d,.day:nth-child(4) .d{color:var(--pink);text-shadow:0 0 14px rgba(255,63,198,.7)}
.day:nth-child(1) .d,.day:nth-child(3) .d,.day:nth-child(5) .d{text-shadow:0 0 14px rgba(63,230,255,.6)}
.day b{display:inline-block;margin:22px 0 10px;padding:6px 12px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:#6d36c9}
.day:nth-child(2) b,.day:nth-child(4) b{background:#c8259a}
.day p{font-size:12px;color:var(--muted);margin:0}

/* rollback */
.rollback .wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:center}
.rollback img{max-height:520px;filter:drop-shadow(0 0 30px rgba(164,92,255,.35))}
.rollback .bubble{position:static;max-width:320px;font-size:14px}
.rollback .bubble.right{border-color:var(--green);margin-left:auto}
.rollback .bubble em{font-style:normal;color:var(--pink);font-weight:700}
.rollback .bubble.right em{color:var(--green)}

/* security */
.sec4{grid-template-columns:1fr 1fr;gap:18px;margin-top:50px}
.sec4 .card h3{font-family:var(--mono);font-size:14px;font-weight:700;padding:5px 10px;display:inline-block;margin-bottom:12px}
.sec4 .card p{margin:0;color:var(--muted)}
.net .wrap{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.netlist{display:grid;gap:14px;margin-top:36px}
.netitem{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;padding:16px 18px}
.netitem img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(63,230,255,.6))}
.netitem b{display:block;color:var(--cyan);font-size:14px}
.netitem span{font-size:13px;color:var(--muted)}
.net .figure img{max-height:640px;filter:drop-shadow(0 0 40px rgba(63,230,255,.35))}

/* savings tiles */
.tiles{grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}
.tile{padding:26px}
.tile h3{font-family:var(--head);font-size:16px;margin-bottom:12px}
.tile p{margin:0;color:var(--muted);font-size:14px}
.tile:nth-child(1) h3{color:var(--cyan)}.tile:nth-child(2) h3{color:var(--orange)}.tile:nth-child(3) h3{color:var(--pink)}.tile:nth-child(4) h3{color:var(--purple)}.tile:nth-child(5) h3{color:var(--green)}.tile:nth-child(6) h3{color:#fff}

/* calc */
.calc{grid-template-columns:1fr 1fr;gap:18px;margin-top:50px}
.calc .card{padding:30px}
.calc .h{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:22px}
.calc .line{font-family:var(--head);font-size:clamp(16px,2vw,22px);margin:8px 0}
.calc .big{font-family:var(--head);font-size:clamp(34px,5vw,56px);margin-top:14px}
.calc .agency .big{color:var(--red);text-shadow:0 0 20px rgba(255,90,90,.5)}
.calc .crew .big{color:var(--green);text-shadow:0 0 20px rgba(125,255,168,.5)}
.calc .sm{font-size:11px;color:var(--muted);letter-spacing:.06em}
.result{margin-top:18px;padding:26px 30px;display:flex;gap:20px;flex-wrap:wrap;align-items:center;justify-content:space-between;border:1px solid var(--green);background:rgba(125,255,168,.05)}
.result .f{font-family:var(--head);font-size:clamp(16px,2.4vw,24px)}
.result .s{font-family:var(--head);font-size:clamp(22px,3.4vw,34px);color:var(--green);text-shadow:0 0 20px rgba(125,255,168,.5)}
.eur{font-family:var(--mono);font-weight:600}
.foot{font-size:11px;color:var(--muted);margin-top:14px}

/* audience */
.aud{grid-template-columns:1fr 1fr;gap:18px;margin-top:50px}
.aud .card h3{font-family:var(--mono);font-size:15px;font-weight:700;padding:5px 10px;display:inline-block;margin-bottom:12px}
.aud .card p{margin:0;color:var(--muted)}
.note{margin-top:22px;padding:16px 20px;background:rgba(164,92,255,.1);border-left:3px solid var(--purple);font-size:13px}

/* price */
.price{text-align:center}
.price .amount{font-family:var(--head);font-size:clamp(64px,13vw,150px);line-height:1;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.6),0 0 40px rgba(255,255,255,.35),0 0 90px rgba(164,92,255,.5);margin:40px 0 20px}
.price .amount small{font-size:.4em}
.price .approx{display:inline-block;margin-top:26px;padding:8px 16px;background:linear-gradient(90deg,#7d2fd9,#d72d9b);font-family:var(--head);font-size:clamp(14px,2vw,22px)}
.pricetable{margin-top:50px;border:1px solid var(--line);background:var(--panel)}
.prow{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:16px 24px;border-top:1px solid var(--line)}
.prow:first-child{border-top:0}
.prow b{color:var(--cyan);font-size:13px;letter-spacing:.04em}
.prow span{font-size:14px;color:#e6e1f5}
.prow em{font-style:normal;color:var(--green);font-weight:700}

/* founders */
.founders{grid-template-columns:1fr 1fr;gap:18px;margin-top:50px}
.fcard{display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start;padding:26px}
.fcard img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(63,230,255,.6))}
.fcard b{display:block;font-family:var(--head);font-size:15px;margin-bottom:8px}
.fcard span{color:var(--muted);font-size:14px}
.fcard:nth-child(1) b{color:var(--cyan)}.fcard:nth-child(2) b{color:var(--pink)}.fcard:nth-child(3) b{color:var(--purple)}.fcard:nth-child(4) b{color:var(--orange)}

/* final */
.galaxy-band{padding:0;height:clamp(260px,34vw,440px);margin:-40px 0 0;pointer-events:none;overflow:hidden}
.galaxy-band canvas{display:block;width:100%;height:100%}
.final .wrap.grid2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
/* Direktkontakt als Textzeile, bewusst ohne Kästen: daneben steht das Formular,
   und umrandete Zeilen sahen aus wie ein zweites Formular. */
.final .contact{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:16px}
.final .contact a{color:var(--cyan);border-bottom:1px solid rgba(63,230,255,.35);padding-bottom:2px}
.final .contact a:hover{border-bottom-color:var(--cyan);text-shadow:0 0 10px rgba(63,230,255,.6)}
.final .figs{display:flex;justify-content:center;align-items:flex-end;gap:0;padding-top:230px}
.final .fig{position:relative;margin:0;display:flex;flex-direction:column;align-items:center}
.final .fig img{display:block;max-height:600px;width:auto;filter:drop-shadow(0 0 20px rgba(63,230,255,.3))}
.final .fig:nth-child(2){margin:0 -34px;z-index:1}
.final .fig:nth-child(2) img{max-height:650px}
/* Sprechblasen über den Köpfen */
.fig-say{--tx:50%;position:absolute;left:50%;bottom:calc(100% + 14px);width:max-content;max-width:190px;margin:0;padding:12px 14px;transform:translateX(calc(-1 * var(--tx)));background:rgba(9,6,22,.92);border:1px solid var(--c,var(--cyan));border-radius:14px;box-shadow:0 0 22px color-mix(in srgb,var(--c,var(--cyan)) 30%,transparent);font-size:12.5px;line-height:1.5;color:#fff;text-align:left;z-index:3}
.fig-say::after{content:"";position:absolute;left:var(--tx);top:100%;width:12px;height:12px;margin:-6px 0 0 -6px;background:rgba(9,6,22,.92);border-right:1px solid var(--c,var(--cyan));border-bottom:1px solid var(--c,var(--cyan));transform:rotate(45deg)}
.fig-say b{display:block;margin-bottom:3px;font-size:11px;letter-spacing:.14em;color:var(--c,var(--cyan))}
.final .fig:nth-child(1){--c:#a76bff}.final .fig:nth-child(2){--c:#3fe6ff}.final .fig:nth-child(3){--c:#5cf2a0}
.final .fig:nth-child(1) .fig-say{--tx:72%}   /* seitliche Blasen nach außen schieben, Spitze zeigt weiter auf den Kopf */
.final .fig:nth-child(3) .fig-say{--tx:28%}
.final .fig:nth-child(2) .fig-say{bottom:calc(100% + 20px)}
.fig-say a{display:inline-block;margin-top:8px;padding:5px 10px;border:1px solid var(--c,var(--cyan));border-radius:8px;font-size:11.5px;font-weight:700;color:#fff;transition:background .2s,box-shadow .2s}
.fig-say a:hover{background:color-mix(in srgb,var(--c,var(--cyan)) 25%,transparent);box-shadow:0 0 12px color-mix(in srgb,var(--c,var(--cyan)) 45%,transparent)}
.figs.say-anim .fig-say{opacity:0;transform:translate(calc(-1 * var(--tx)),10px) scale(.96);transition:opacity .5s ease,transform .5s cubic-bezier(.2,1.2,.3,1)}
.figs.say-anim.in .fig-say{opacity:1;transform:translate(calc(-1 * var(--tx)),0)}
.figs.say-anim.in .fig:nth-child(2) .fig-say{transition-delay:.7s}
.figs.say-anim.in .fig:nth-child(3) .fig-say{transition-delay:1.4s}
.shot{margin-top:60px;position:relative;border:1px solid var(--line);box-shadow:0 0 60px rgba(63,230,255,.15);overflow:hidden}
.shot img{width:100%}
.shot .cap{position:absolute;left:0;right:0;bottom:0;padding:14px 20px;background:linear-gradient(0deg,rgba(6,4,14,.95),transparent);font-size:12px;color:var(--muted)}

/* kontakt form */
.kform{margin-top:30px;padding:28px;display:grid;gap:14px}
.kform .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kform label{display:grid;gap:6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kform input,.kform select,.kform textarea{width:100%;padding:12px 14px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:#fff;font:inherit;font-size:14px;text-transform:none;letter-spacing:0;border-radius:0;outline:none;transition:border-color .2s,box-shadow .2s}
.kform input:focus,.kform select:focus,.kform textarea:focus{border-color:var(--cyan);box-shadow:0 0 14px rgba(63,230,255,.25)}
.kform select option{background:#0b0818;color:#fff}
.kform textarea{resize:vertical;min-height:120px}
.kform .consent{display:flex;gap:10px;align-items:flex-start;font-size:12px;text-transform:none;letter-spacing:0;color:var(--muted);line-height:1.5}
.kform .consent input{width:auto;margin-top:3px;accent-color:var(--cyan)}
.kform .consent a{color:var(--cyan)}
.kform .actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:6px}
.kform .ey-btn[disabled]{opacity:.6;transform:none;cursor:wait}
.kform .status{padding:14px 16px;border:1px solid var(--green);background:rgba(125,255,168,.08);font-size:14px;display:none}
.kform .status.err{border-color:var(--red);background:rgba(255,90,90,.08)}
.kform .status.show{display:block}
.kform .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.kform .req{color:var(--pink)}
@media(max-width:640px){.kform .row{grid-template-columns:1fr}.kform{padding:20px}}

/* team */
.team-title{margin:64px auto 0;max-width:900px;text-align:center;font-family:var(--head);font-weight:400;font-size:clamp(18px,2vw,26px);line-height:1.35;color:#fff;text-shadow:0 0 18px rgba(160,120,255,.45)}
/* Teamfotos: Reihen zentriert (letzte Reihe mittig), Bilder 10 % kleiner als die volle Spaltenbreite */
.team{--n:6;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px}
.team img{width:calc((100% - (var(--n) - 1) * 12px) / var(--n) * .9);aspect-ratio:3/4;object-fit:cover;border:1px solid var(--line)}
.powered{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;margin-top:36px}
.powered .ss{font-family:var(--head);font-size:clamp(22px,4vw,34px);letter-spacing:.02em;color:#fff}
.powered .ss img{display:block;height:clamp(30px,4.6vw,46px);width:auto}
.powered .lbl{font-size:13px;letter-spacing:.04em;color:var(--muted);transition:color .2s}
.powered .lbl:hover{color:#fff}
footer{border-top:1px solid var(--line);padding:30px 0;font-size:12px;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a:hover{color:var(--cyan)}
footer .wrap{align-items:flex-start}
.ft-info{display:flex;flex-direction:column;gap:12px}
.ft-social{display:flex;align-items:center;gap:18px;height:1lh}
.ft-social a{display:inline-flex;color:#fff}
.ft-social svg{width:18px;height:18px;fill:currentColor}
footer .ft-social a:hover{color:var(--cyan)}
@media(max-width:900px){footer .wrap{flex-direction:column;align-items:flex-start;gap:22px}}


/* Content-Umbau (finaler Content): gemeinsame Bausteine */
.sec-cta{display:flex;justify-content:center;margin-top:40px}
.gain{grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}
.role h3{font-size:clamp(18px,2.2vw,24px);font-family:var(--head);margin-bottom:18px}
.why .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.why-claim{margin:24px 0 0;font-family:var(--mono);font-size:20px;font-weight:700;line-height:1.4;color:var(--pink);text-shadow:0 0 14px rgba(255,63,198,.45)}
.why .lead em{font-style:normal;color:var(--pink);font-weight:700}
.steps4{grid-template-columns:repeat(4,1fr);list-style:none;padding:0;margin-left:0;margin-right:0}
.steps4 .step h3{font-size:inherit;margin:0}
.steps4 .step p{font-size:13px}
.steps4 .step .shot-ph{margin-top:16px}
.steps4 .step .shot-ph-box{aspect-ratio:4/3;font-size:10px}
.sec6{grid-template-columns:repeat(3,1fr)}
.shot-ph{margin:50px 0 0}
.shot-ph-box{aspect-ratio:16/8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:16px;border:1px dashed rgba(125,255,168,.45);background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 12px,rgba(255,255,255,.04) 12px 24px);color:var(--muted);font-size:12px}
.shot-ph-box span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#7dffa8}
.shot-ph-box b{font-family:var(--head);font-weight:400;color:#fff;font-size:clamp(12px,1.6vw,18px)}
.shot-ph figcaption,figure.shot figcaption{font-size:12px;color:var(--muted);margin-top:10px}
figure.shot{margin-top:60px}
.updates .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center}
.updates .shot-ph,.updates .up-fig{margin:0}
.netitem b{margin-top:6px}
.founders3{grid-template-columns:repeat(3,1fr)}
.fcard h3{margin:0}
.pledges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;list-style:none;padding:0;margin:26px 0 0}
.pledges li{padding:8px 14px;border:1px solid rgba(125,255,168,.4);background:rgba(125,255,168,.06);font-size:13px}
.pledges li:before{content:"✓ ";color:var(--green)}
.glance{padding-top:40px}
.glance h2{text-align:center}
.glance .lead{margin:22px auto 0;text-align:center;max-width:860px}
/* Fakten als Messenger: Fragen des Kunden rechts, Antworten einzelner Crew-Mitglieder links (Inhalte: daten/fakten.json) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fakten-chat{max-width:760px;margin:44px auto 0}
/* Messenger-Fenster mit fester Höhe; der Verlauf scrollt im Fenster, oben/unten weich ausgeblendet */
.chat-stage{position:relative}
.chat-frame{position:relative;z-index:1;display:flex;flex-direction:column;height:min(600px,74vh);height:min(600px,74svh);border:1px solid rgba(255,255,255,.14);border-radius:24px;background:rgba(9,6,22,.66);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(164,92,255,.12),0 0 60px rgba(164,92,255,.15);overflow:hidden}
.chat-head{flex:none;display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)}
.chat-faces{display:flex}
.chat-faces img{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid #120c26}
.chat-faces img+img{margin-left:-9px}
.chat-title{display:flex;flex-direction:column;line-height:1.25}
.chat-title b{font-size:14px;color:#fff}
.chat-title small{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.chat-title small i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.chat-view{flex:1;min-height:0;overflow-y:auto;padding:22px 20px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 22px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(180deg,transparent,#000 22px,#000 calc(100% - 28px),transparent);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
/* eigener violetter Scrollbalken (assets/eywora-chat.js); der native wird dann ausgeblendet */
.chat-hasbar .chat-view{scrollbar-width:none}
.chat-hasbar .chat-view::-webkit-scrollbar{display:none}
@media(pointer:coarse){.chat-hasbar .chat-view{overflow:hidden}}   /* Touch: Wischen steuert eywora-chat.js (erst Verlauf, dann Seite); natives Scrollen federte auf iOS am Ende nur nach */
.chat-bar{position:absolute;right:7px;z-index:2;width:4px;border-radius:4px;background:rgba(164,92,255,.18);cursor:pointer;touch-action:none;transition:width .2s,right .2s}
.chat-bar::after{content:"";position:absolute;inset:0 -12px}   /* größere Trefferfläche zum Ziehen */
.chat-bar i{position:absolute;left:0;right:0;top:0;border-radius:4px;background:#a45cff;box-shadow:0 0 8px rgba(164,92,255,.8)}
.chat-bar:hover,.chat-bar.drag{width:6px;right:6px}
.chat-view:focus-visible{outline:2px solid var(--cyan);outline-offset:-4px}
.chat-input{flex:none;display:flex;align-items:center;justify-content:space-between;margin:0 16px 16px;padding:11px 16px;border:1px solid rgba(255,255,255,.12);border-radius:999px;font-size:13px;color:rgba(255,255,255,.4)}
.chat-input i{font-style:normal;color:var(--cyan)}
/* Lichtflecken hinter dem Fenster, bewegen sich beim Scrollen langsamer (Parallax) */
.chat-orb{position:absolute;z-index:0;border-radius:50%;filter:blur(50px);pointer-events:none;will-change:transform}
.chat-orb.o1{width:320px;height:320px;left:-140px;top:10%;background:rgba(164,92,255,.35)}
.chat-orb.o2{width:280px;height:280px;right:-120px;bottom:5%;background:rgba(63,230,255,.22)}
.chat{margin:0;display:flex;flex-direction:column;gap:28px}
.chat-pair{display:flex;flex-direction:column;gap:10px}
.chat-q{align-self:flex-end;max-width:70%;margin:0;padding:10px 16px;border-radius:18px 18px 4px 18px;background:linear-gradient(135deg,#7d2fd9,#c8259a);box-shadow:0 6px 22px rgba(200,37,154,.25);color:#fff;font-family:var(--mono);font-size:14px;font-weight:500;line-height:1.5}
.chat-a{align-self:flex-start;max-width:80%;margin:0;display:flex;align-items:flex-end;gap:10px}
.chat-av{width:40px;height:40px;flex:none;border-radius:50%;object-fit:cover;border:2px solid rgba(63,230,255,.55);box-shadow:0 0 14px rgba(63,230,255,.3)}
.chat-body{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.chat-who{padding-left:4px;font-family:var(--mono);font-size:12px;line-height:1.3;color:var(--muted)}
.chat-who b{color:var(--green);font-weight:700;margin-right:4px}
.chat-role::before{content:"· "}
.chat-bubble{padding:12px 18px;border:1px solid rgba(255,255,255,.1);border-radius:18px 18px 18px 4px;background:rgba(18,12,38,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 22px rgba(0,0,0,.25);color:#ece8f7;font-family:var(--mono);font-size:16px;line-height:1.5}
.chat-bubble p{margin:0}
.chat-bubble ul{margin:0;padding:0;list-style:none}
.chat-bubble li{position:relative;padding-left:22px}
.chat-bubble li+li{margin-top:3px}
.chat-bubble li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}
.chat-cta{margin-top:12px}
.chat-typing{display:none;gap:4px;padding:14px 16px;border:1px solid rgba(255,255,255,.1);border-radius:18px 18px 18px 4px;background:rgba(18,12,38,.82)}
.chat-typing i{width:6px;height:6px;border-radius:50%;background:var(--cyan);opacity:.35;animation:chat-dot 1s infinite}
.chat-typing i:nth-child(2){animation-delay:.15s}.chat-typing i:nth-child(3){animation-delay:.3s}
@keyframes chat-dot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.chat-a.typing .chat-typing{display:inline-flex}
.chat-a.typing .chat-bubble{display:none}
/* Einblenden nur, wenn das Skript die Klasse setzt; ohne JS ist alles sofort sichtbar */
.chat-anim .chat-q,.chat-anim .chat-a{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.chat-anim .show{opacity:1;transform:none}
@media(max-width:640px){.fakten-chat{margin-top:30px}.chat-frame{border-radius:18px}.chat-view{padding:16px 12px}.chat-head{padding:12px 14px}.chat-input{margin:0 10px 10px}.chat-orb{display:none}.chat{gap:22px}.chat-q{max-width:90%;font-size:13px}.chat-a{max-width:90%;gap:8px}.chat-av{width:32px;height:32px}.chat-bubble{padding:10px 14px;font-size:15px}}
@media(prefers-reduced-motion:reduce){.chat-anim .chat-q,.chat-anim .chat-a{opacity:1;transform:none;transition:none}.chat-typing i{animation:none}}
/* FAQ: ohne JS alle Gruppen untereinander; mit JS (.faq-tabs) links 5 Themen-Tabs, rechts die Fragen des gewählten Themas */
.faq{max-width:1320px;margin:40px auto 0}
.faq-col{min-width:0}
.faq-tabs{display:grid;grid-template-columns:320px minmax(0,1fr);gap:0 36px;align-items:start}
.faq-nav{position:sticky;top:100px;display:flex;flex-direction:column;gap:6px}
.faq-nav small{margin:0 0 8px 2px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.faq-tab{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 16px;border:1px solid var(--line);background:var(--panel);color:#fff;font:600 14px/1.3 var(--mono);text-align:left;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.faq-tab i{font-style:normal;font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.75)}
.faq-tab:hover{border-color:rgba(255,63,198,.5)}
.faq-tab[aria-selected="true"]{border-color:var(--pink);background:rgba(200,37,154,.16);box-shadow:inset 3px 0 0 var(--pink),0 0 18px rgba(200,37,154,.2)}
.faq-tab[aria-selected="true"] i{background:var(--pink);color:#fff}
.faq-tab:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.faq-more{margin-top:18px;padding:18px 16px;border:1px dashed rgba(255,255,255,.2);font-size:13px;line-height:1.5}
.faq-more a{display:inline-block;margin-top:10px;color:var(--green);font-weight:700}
.faq-tabs .faq-col[hidden]{display:none}
.faq-tabs .faq-group{display:none}
.faq-tabs .faq-list{animation:faq-in .35s ease}
@keyframes faq-in{from{opacity:0;transform:translateY(6px)}}
@media(max-width:900px){.faq-tabs{grid-template-columns:minmax(0,1fr)}.faq-nav{position:static;flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:6px;margin-bottom:18px;scrollbar-width:none}.faq-nav small,.faq-more{display:none}.faq-tab{flex:none;padding:9px 14px;border-radius:999px;font-size:13px}.faq-tab[aria-selected="true"]{box-shadow:none}}
@media(prefers-reduced-motion:reduce){.faq-tabs .faq-list{animation:none}}
.faq-group{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pink);margin:40px 0 12px}
.faq-list{display:grid;gap:10px}
.faq-item{border:1px solid var(--line);background:var(--panel)}
.faq-item summary{cursor:pointer;list-style:none;padding:16px 50px 16px 20px;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--cyan);transition:transform .25s}
.faq-item[open] summary:after{transform:translateY(-50%) rotate(45deg)}
.faq-item summary h3{font-family:var(--mono);font-size:15px;font-weight:600;margin:0;line-height:1.5}
.faq-item p{margin:0;padding:0 20px 18px;color:var(--muted)}
.faq-item[open]{border-color:rgba(63,230,255,.45)}
@media(max-width:1000px){.gain,.sec6,.founders3{grid-template-columns:1fr 1fr}.steps4{grid-template-columns:1fr 1fr}.updates .wrap,.why .wrap{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.gain,.sec6,.founders3,.steps4{grid-template-columns:1fr}}

/* responsive */
@media(max-width:1000px){
  .hero .wrap,.problem .wrap,.net .wrap,.final .wrap.grid2{grid-template-columns:1fr}
  .promises .wrap,.describe .wrap,.rollback .wrap{grid-template-columns:1fr}
  .promises .figure,.describe img,.rollback img{max-height:420px;margin:0 auto}
  .describe img{width:auto}
  .g4,.agents,.tiles{grid-template-columns:repeat(2,1fr)}
  .crewline{grid-template-columns:repeat(3,1fr)}
  .sixteen{grid-template-columns:repeat(5,1fr)}
  .steps{grid-template-columns:repeat(3,1fr);gap:30px 14px}.steps:before{display:none}
  .team{--n:4}
  .orbit-wrap{aspect-ratio:1/1.1}
  .hero-visual{min-height:440px}
}
@media(max-width:640px){
  section{padding:64px 0}
  .g4,.g2,.agents,.tiles,.roles,.systems,.sec4,.calc,.aud,.founders,.stats{grid-template-columns:1fr}
  .crewline{grid-template-columns:repeat(2,1fr)}
  .sixteen{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr 1fr}
  .week{grid-template-columns:1fr;gap:26px}.week:before{display:none}
  .team{--n:3}
  .prow{grid-template-columns:1fr;gap:4px}
  .agent{grid-template-columns:1fr;text-align:center}.agent .ph{margin:0 auto}
  .orb{width:92px}.orb img{width:64px;height:64px}.orb span{font-size:9px}
  .orbit-wrap .center{width:120px}
  .chip{display:none}.bubble.main{max-width:220px}
  .final .fig img{max-height:300px}.final .fig:nth-child(2) img{max-height:330px}.final .figs{padding-top:190px}.fig-say{max-width:112px;padding:8px 9px;font-size:10px}.fig-say a{font-size:10px;padding:4px 7px}.final .fig:nth-child(2) .fig-say{bottom:calc(100% + 12px)}
  .rollback .bubble.right{margin-left:0}
}
/* Handy-Feinschliff */
/* Nichts darf die Seite seitlich verschiebbar machen. „clip“ statt „hidden“ auf html und body:
   „hidden“ an beiden würde body zum Scroll-Container machen, und die feste Kopfzeile bliebe nicht mehr stehen. */
@supports(overflow:clip){html,body{overflow-x:clip}}
body .ey-nebula{left:0;right:0;overflow:hidden}   /* fester Nebel (eywora-scroll.js) ragte 10vw über den rechten Rand, Handys erlauben dann seitliches Wischen */
h1,h2,h3{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}   /* Michroma läuft sehr breit: lange Wörter sonst über den Rand */
@media(hover:none){.ek-card:hover{transform:none}.ek-planet:hover .ek-core{transform:none}}   /* Tippen soll keinen „hängenden“ Hover-Zustand hinterlassen */
/* „Warum wir das tun“: Spalten dürfen schmaler werden als der Kugel-Canvas (sonst wird der Abschnitt breiter als der Bildschirm) */
.why .wrap>*{min-width:0}
@media(max-width:1000px){.why .wrap{grid-template-columns:minmax(0,1fr);gap:16px}}
@media(max-width:640px){
  .why h2{font-size:clamp(19px,5.2vw,24px);line-height:1.3}
  .why .lead{font-size:14.5px;line-height:1.65}
  .why .lead[style]{margin-top:16px!important}
  .why-claim{margin-top:18px;font-size:17px}
  .mosaik{height:min(380px,92vw)}
}
@media(max-width:640px){
  /* lange Button-Texte („Gründungsplatz sichern: Demo vereinbaren“) dürfen umbrechen statt über den Rand zu laufen */
  body .ey-btn--lg{white-space:normal;text-align:center;max-width:100%;line-height:1.4}
  /* Formularfelder mit 16px: iOS zoomt sonst beim Antippen in die Seite */
  .kform input,.kform select,.kform textarea{font-size:16px}
  /* Crew-Umlaufbahn: 16 Köpfe auf kleinem Oval, sonst überlappen sie */
  .orb{width:62px}.orb img{width:40px;height:40px;border-width:1.5px}.orb span{font-size:8px;letter-spacing:.06em;margin-top:3px}
  .orbit-wrap{margin-top:40px}.orbit-wrap .center{width:96px}
  /* Update-Grafik: randlos und mit größerer Schrift, damit sie auf dem Handy lesbar bleibt */
  .up-fig{margin:0 -16px}.up-fig figcaption{padding:0 16px}
  .up-graphic .lbl{font-size:22px;letter-spacing:1px}
  .up-graphic .sub{font-size:16px}
  .up-graphic .st-txt{font-size:21px}
  .up-graphic .chk{font-size:17px}
  .up-graphic .btn-txt{font-size:16px}
  .up-graphic .ver{font-size:20px}
  .net .figure img{max-height:380px;margin:0 auto}
  .final .figs{margin-top:20px}
  .faq-item summary{padding:14px 44px 14px 16px}.faq-item summary:after{right:16px}.faq-item p{padding:0 16px 16px}
  .chance-line{margin-top:40px}
}
@media(max-width:560px){
  .logo-strip-view{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .nav .wrap{gap:10px}
  .nav img{height:30px}
  .menu-btn{padding:10px 12px}
  .menu-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media(max-width:560px){.nav-demo-more{display:none}.nav-cta .ey-btn{padding:.6rem .7rem}}   /* „Demo“ statt „Demo vereinbaren“, damit das Logo mittig Platz hat */
/* Demo-Figuren auf dem Handy: Sprechblasen als Verlauf untereinander über den drei Figuren
   (figure wird per display:contents aufgelöst, damit Blasen und Bilder im selben Raster liegen) */
@media(max-width:640px){
  .final .figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px;padding-top:0;margin-top:36px}
  .final .fig{display:contents}
  .final .fig img{grid-row:4;justify-self:center;align-self:end;max-height:280px;max-width:100%}
  .final .fig:nth-child(2) img{max-height:310px}
  .final .fig:nth-child(1) img{grid-column:1}.final .fig:nth-child(2) img{grid-column:2}.final .fig:nth-child(3) img{grid-column:3}
  .final .fig .fig-say,.final .fig:nth-child(2) .fig-say{position:static;grid-column:1/-1;width:84%;max-width:none;margin:0;padding:11px 14px;font-size:13.5px;line-height:1.5;transform:none;border-left-width:3px}
  .final .fig .fig-say::after{display:none}
  .final .fig:nth-child(1) .fig-say{grid-row:1;justify-self:start}
  .final .fig:nth-child(2) .fig-say{grid-row:2;justify-self:center}
  .final .fig:nth-child(3) .fig-say{grid-row:3;justify-self:end}
  .final .fig-say b{font-size:11px}
  .final .fig-say a{font-size:12px;padding:6px 10px}
  .final .figs.say-anim .fig-say{transform:translateY(10px)}
  .final .figs.say-anim.in .fig-say{transform:none}
}
/* Leos Vorteile auf dem Handy als Chips, die umbrechen (Anordnung in leo-hero.js, schmal = Bühne unter 520px) */
@media(max-width:519px){
  .hero-shot{padding-bottom:150px}
  .hero-shot .leo-bullet{font-size:13px;padding:7px 12px 7px 10px;border-left-width:3px;transition:opacity .45s ease,transform .5s cubic-bezier(.2,.8,.2,1),left .5s ease}
  .hero-shot .leo-bullet::before{margin-right:6px}
}
@media(max-width:480px){
  h2{font-size:22px}
  .hero h1.headline{font-size:24px}
  .hero .headline-sub{font-size:17px}
  .hero .subline,.hero .pioneer{font-size:15px}
  .lead{font-size:15px}
  .why-claim{font-size:16px}
  .idea-line{font-size:16px}
}

/* Unterseiten (z. B. /shopware/): Bausteine mit Präfix sp-, Gestaltung aus dem Shopware-Entwurf.
   Farben nur innerhalb von main.sp, damit nichts mit der Startseite kollidiert. Animationen: assets/eywora-sub.js */
.sp{--sp-bg:#06040e;--sp-cya:#3fd8e8;--sp-mag:#e04bc0;--sp-ora:#f0913a;--sp-grn:#5cf2a0;--sp-vio:#a76bff;--sp-acc:#3f8cff;
  --sp-text:#ffffff;--sp-muted:#ffffff;--sp-dim:#ffffff;   /* Fließtexte weiß wie auf der Startseite */ color:var(--sp-text)}
.sp section{padding:96px 0}
.sp h2{font-size:clamp(26px,3.4vw,40px);line-height:1.25;color:#fff;text-shadow:0 0 24px rgba(160,120,255,.5)}
.sp-tag{display:inline-block;padding:7px 14px;font-weight:700;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#fff}
.sp-t-teal{background:#138a9c}.sp-t-ora{background:#c8691f}.sp-t-mag{background:#b02a92}.sp-t-grn{background:#2e8b57}
.sp-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;margin-bottom:56px}
.sp-head p{margin:0;max-width:700px;font-size:15px;line-height:1.75;color:var(--sp-muted)}
.sp-js .sp-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}   /* sp-js setzt assets/eywora-sub.js: ohne Skript ist alles sichtbar */
.sp-js .sp-reveal.is-in{opacity:1;transform:none}
/* Kopfbereich mit Figur und Info-Karten */
.sp .sp-hero{padding:40px 0 60px}
.sp-hero .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:32px;align-items:center;min-height:900px}
.sp-hero h1{font-family:var(--head);font-weight:400;font-size:clamp(30px,4.6vw,56px);line-height:1.15;color:#fff;text-shadow:0 0 30px rgba(160,120,255,.55);margin:22px 0 24px}
.sp-hero h1 em{font-style:normal;color:var(--green);text-shadow:0 0 18px rgba(125,255,168,.6)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:rgba(255,255,255,.7);margin-bottom:22px}
.crumbs a{color:var(--cyan)}.crumbs a:hover{text-decoration:underline}
.sp-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border:1px solid color-mix(in srgb,var(--sp-acc) 60%,transparent);color:#fff;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;background:color-mix(in srgb,var(--sp-acc) 14%,transparent)}
.sp-eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--sp-acc);box-shadow:0 0 10px var(--sp-acc)}
.sp-lead{margin:0;font-size:16px;line-height:1.8;color:var(--sp-muted);max-width:620px}
.sp-chips{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 36px;padding:0;list-style:none}
.sp-chips li{padding:6px 12px;border-radius:999px;font-size:12px;color:var(--sp-muted);border:1px solid rgba(207,198,240,.22)}
.sp-cta{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.sp-hero-fig{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:20px;min-height:820px}
.sp-fig{position:relative;display:flex;justify-content:center;align-items:flex-end}
.sp-fig img{position:relative;height:820px;width:auto;max-width:none;filter:drop-shadow(0 0 26px rgba(167,107,255,.45));z-index:1}
.sp-pad{position:absolute;bottom:-6px;left:50%;width:360px;height:72px;transform:translateX(-50%);border-radius:50%;border:1px dashed rgba(167,107,255,.7);animation:sp-spin 18s linear infinite}
.sp-pad::after{content:"";position:absolute;inset:10px 40px;border-radius:50%;background:radial-gradient(ellipse,rgba(167,107,255,.6),transparent 70%);filter:blur(6px)}
.sp-badges{display:flex;flex-direction:column;gap:120px}
.sp-badge{position:relative;padding:10px 14px;background:rgba(20,10,51,.85);border:1px solid color-mix(in srgb,var(--sp-acc) 60%,transparent);font-size:12px;line-height:1.5;box-shadow:0 0 24px color-mix(in srgb,var(--sp-acc) 30%,transparent)}
.sp-badge::before{content:"";position:absolute;right:100%;top:50%;width:18px;height:1px;background:color-mix(in srgb,var(--sp-acc) 70%,transparent)}
.sp-badge b{display:block;color:var(--sp-acc);letter-spacing:1px}
.sp-badge span{color:var(--sp-muted)}
.sp-badge2{border-color:rgba(92,242,160,.5);box-shadow:0 0 24px rgba(92,242,160,.25)}
.sp-badge2::before{background:rgba(92,242,160,.7)}
.sp-badge2 b{color:var(--sp-grn)}
.sp-badge3{font-size:13.2px;padding:11px 15px;border-color:rgba(255,79,216,.55);box-shadow:0 0 24px rgba(255,79,216,.3)}
.sp-badge3::before{background:rgba(255,79,216,.75)}
.sp-badge3 b{color:#ff7ae0}
@keyframes sp-spin{to{transform:translateX(-50%) rotate(360deg)}}
@keyframes sp-rot{to{transform:rotate(360deg)}}
@media(max-width:900px){.sp-hero .wrap{grid-template-columns:minmax(0,1fr);min-height:0}.sp-hero-fig{grid-template-columns:minmax(0,1fr);min-height:0;justify-items:center}.sp-fig img{height:560px}.sp-badges{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:12px}.sp-badge::before{display:none}}
@media(min-width:901px) and (max-width:1100px){.sp-fig img{height:660px}}
/* Problem als Terminal */
.sp-term{max-width:860px;margin:0 auto;border:1px solid rgba(207,198,240,.16);background:rgba(12,6,32,.85);border-radius:12px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.sp-term-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid rgba(207,198,240,.1);font-size:12px;color:var(--sp-dim)}
.sp-term-bar i{width:10px;height:10px;border-radius:50%;background:rgba(207,198,240,.2)}
.sp-term-bar i:first-child{background:#ff5f7a}.sp-term-bar i:nth-child(2){background:#f0b43a}.sp-term-bar i:nth-child(3){background:var(--sp-grn)}
.sp-term-bar span{margin-left:10px}
.sp-term ol{list-style:none;margin:0;padding:22px 22px 8px;display:flex;flex-direction:column;gap:16px}
.sp-term li{display:grid;grid-template-columns:70px minmax(0,1fr);gap:16px;font-size:14.5px;line-height:1.65}
.sp-js .sp-term li{opacity:0;transform:translateX(-8px);transition:opacity .5s,transform .5s}
.sp-js .sp-term.is-in li{opacity:1;transform:none}
.sp-term li:nth-child(2){transition-delay:.5s}.sp-term li:nth-child(3){transition-delay:1s}
.sp-term li b{font-weight:700;color:var(--sp-ora)}
.sp-fix{padding:16px 22px 22px;font-size:14.5px;color:var(--sp-grn)}
.sp-js .sp-fix{opacity:0;transition:opacity .6s 1.6s}
.sp-js .sp-term.is-in .sp-fix{opacity:1}
.sp-fix::after{content:"▍";animation:blink 1s steps(1) infinite;margin-left:4px}
/* Ablauf als Stationen */
.sp-flow{position:relative;list-style:none;margin:0 auto;padding:0;max-width:1280px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.sp-flow::before{content:"";position:absolute;left:12.5%;right:12.5%;top:29px;height:2px;background:rgba(207,198,240,.15)}
.sp-flow .sp-fill{position:absolute;left:12.5%;top:29px;height:2px;width:75%;background:linear-gradient(90deg,#19a7bf,#2e9a5c,#d0782a,#d0344c);box-shadow:0 0 12px rgba(63,216,232,.6);transition:width 2.4s ease .2s}
.sp-js .sp-flow:not(.is-in) .sp-fill{width:0}
.sp-flow li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.sp-num{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--sp-bg);border:2px solid var(--c);box-shadow:0 0 0 8px var(--sp-bg),0 0 22px color-mix(in srgb,var(--c) 60%,transparent);font-weight:700;color:#fff;position:relative;z-index:1}
.sp-flow h3{font-family:var(--head);font-weight:400;font-size:13px;letter-spacing:.3px;color:var(--c);text-transform:uppercase;margin:0 0 8px}
.sp-flow p{margin:0;font-size:13.5px;line-height:1.7;color:var(--sp-muted)}
@media(max-width:860px){.sp-flow{grid-template-columns:minmax(0,1fr);gap:28px}.sp-flow::before,.sp-flow .sp-fill{display:none}.sp-flow li{flex-direction:row;text-align:left;align-items:flex-start}.sp-num{flex-shrink:0}}
/* Leistungen mit Icons */
.sp-feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sp-feat{position:relative;padding:28px 26px;border:1px solid rgba(207,198,240,.14);background:rgba(24,14,58,.7);border-radius:16px;overflow:hidden;transition:transform .35s,border-color .35s,box-shadow .35s,opacity .7s}
.sp-feat::before{content:"";position:absolute;left:24px;right:24px;top:0;height:2px;background:var(--sp-acc);box-shadow:0 0 14px var(--sp-acc)}
.sp-feat:hover{border-color:color-mix(in srgb,var(--sp-acc) 60%,transparent);box-shadow:0 0 30px color-mix(in srgb,var(--sp-acc) 18%,transparent)}
.sp-feat svg{width:30px;height:30px;fill:none;stroke:var(--sp-acc);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--sp-acc) 70%,transparent))}
.sp-feat h3{font-family:var(--head);font-weight:400;font-size:16px;line-height:1.4;margin:18px 0 10px;color:#fff}
.sp-feat p{margin:0;font-size:14px;line-height:1.7;color:var(--sp-muted)}
@media(max-width:960px){.sp-feats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.sp-feats{grid-template-columns:minmax(0,1fr)}}
/* Update-Grafik */
.sp-upd .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center}
.sp-upd h2{margin:18px 0 20px}
.sp-upd p{margin:0;font-size:15px;line-height:1.75;color:var(--sp-muted)}
.sp-upd-g{width:100%;aspect-ratio:760/380}
.sp-upd-g svg{width:100%;height:100%;display:block;overflow:visible;font-family:var(--mono)}
.sp-u-lbl{font-size:14px;font-weight:700;letter-spacing:2px}
.sp-u-sub{font-size:12px;fill:var(--sp-muted)}
.sp-u-dot{transition:fill .35s,stroke .35s}
.sp-u-txt{font-size:13.5px;fill:#8f85b8;transition:fill .35s}
.is-on .sp-u-dot{fill:var(--sp-vio);stroke:#fff}.is-on .sp-u-txt{fill:#fff}
.sp-u-chk{font-size:12.5px;fill:#6f6698;transition:fill .3s}.sp-u-chk.ok{fill:var(--sp-grn)}
.sp-u-btn rect{fill:rgba(167,107,255,.12);stroke:var(--sp-vio);transition:fill .25s}
.sp-u-btn text{font-size:12px;font-weight:700;fill:#fff}
.sp-u-btn.pressed rect{fill:var(--sp-grn);stroke:var(--sp-grn)}.sp-u-btn.pressed text{fill:#140a33}
.sp-u-live{stroke:var(--sp-grn);stroke-width:3;filter:drop-shadow(0 0 6px rgba(92,242,160,.8))}
.sp-u-copy{stroke:rgba(167,107,255,.45);stroke-width:2;stroke-dasharray:6 6}
.sp-u-arrow{fill:none;stroke:var(--sp-grn);stroke-width:2;stroke-dasharray:5 6;opacity:.25;transition:opacity .4s}
.sp-upd-g.is-deploy .sp-u-arrow{opacity:1}
.sp-u-ver{font-size:14px;font-weight:700;fill:#fff;transition:fill .4s}.sp-upd-g.is-new .sp-u-ver{fill:var(--sp-grn)}
@media(max-width:900px){.sp-upd .wrap{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.sp-upd-g{margin:0 -16px;width:calc(100% + 32px)}.sp-u-lbl{font-size:22px;letter-spacing:1px}.sp-u-sub{font-size:16px}.sp-u-txt{font-size:21px}.sp-u-chk{font-size:17px}.sp-u-btn text{font-size:16px}.sp-u-ver{font-size:20px}}
/* Vorteile als Planeten */
.sp-planets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;max-width:1100px;margin:0 auto}
.sp-planet{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.sp-planet:nth-child(2){margin-top:90px}
.sp-core{--c:var(--sp-mag);position:relative;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;margin-bottom:24px;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 30%,#1a0d40) 0%,#120830 70%);box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent),0 0 50px color-mix(in srgb,var(--c) 35%,transparent),inset 0 0 30px rgba(0,0,0,.5)}
.sp-planet:nth-child(2) .sp-core{--c:var(--sp-ora)}.sp-planet:nth-child(3) .sp-core{--c:var(--sp-cya)}
.sp-core::after{content:"";position:absolute;inset:-24px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--c) 50%,transparent)}
.sp-moon{position:absolute;inset:-24px;animation:sp-rot 10s linear infinite}
.sp-moon i{position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c)}
.sp-planet:nth-child(2) .sp-moon{animation-duration:13s;animation-direction:reverse}
.sp-gauge{width:118px;height:118px;transform:rotate(-90deg)}
.sp-gauge circle{fill:none;stroke-width:6}.sp-gauge .bg{stroke:rgba(255,255,255,.08)}
.sp-gauge .fg{stroke:var(--sp-mag);stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:101.8;filter:drop-shadow(0 0 6px var(--sp-mag));transition:stroke-dashoffset 2s cubic-bezier(.3,.8,.3,1)}
.sp-planets.sp-anim:not(.is-in) .sp-gauge .fg{stroke-dashoffset:339.3}
.sp-gnum{position:absolute;display:flex;align-items:flex-start;font-family:var(--head);font-size:26px;color:#fff;text-shadow:0 0 16px var(--sp-mag)}
.sp-gnum sup{font-size:12px;margin:4px 0 0 3px;line-height:1}
.sp-sun{width:118px;height:80px;overflow:visible}
.sp-sun .arc{fill:none;stroke:rgba(240,145,58,.35);stroke-width:1.5;stroke-dasharray:3 5}
.sp-sun .hz{stroke:rgba(255,255,255,.25);stroke-width:1.5}
.sp-lock{position:relative;width:118px;height:118px;display:grid;place-items:center}
.sp-lock span{position:absolute;inset:20px;border-radius:50%;border:1px solid var(--sp-cya);opacity:0;animation:ek-ping 3.6s ease-out infinite}
.sp-lock span:nth-child(2){animation-delay:1.2s}.sp-lock span:nth-child(3){animation-delay:2.4s}
.sp-lock svg{width:40px;height:40px;stroke:var(--sp-cya);fill:none;stroke-width:1.6;filter:drop-shadow(0 0 8px var(--sp-cya))}
.sp-lock b{position:absolute;bottom:14px;font-family:var(--head);font-weight:400;font-size:11px;letter-spacing:2px;color:var(--sp-cya)}
.sp-plabel{margin:0;font-weight:700;font-size:14px;letter-spacing:1.5px;text-transform:uppercase;color:var(--sp-mag);text-shadow:0 0 18px currentColor}
.sp-planet:nth-child(2) .sp-plabel{color:var(--sp-ora)}.sp-planet:nth-child(3) .sp-plabel{color:var(--sp-cya)}
.sp-planet p{margin:-8px 0 0;max-width:330px;font-size:14px;line-height:1.75;color:var(--sp-muted)}
@media(max-width:900px){.sp-planets{grid-template-columns:minmax(0,1fr);gap:64px}.sp-planet:nth-child(2){margin-top:0}}
/* Sicherheit: Kreise mit Bogenschrift, Mike in der Mitte */
.sp-dt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px) minmax(0,1fr);align-items:center;gap:8px}
.sp-dcol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center}
.sp-dcol li{width:100%;max-width:300px}
.sp-dcol svg{display:block;width:100%;height:auto;overflow:visible}
.sp-d-core{fill:#120a30;stroke:var(--sp-cya);stroke-width:2;filter:drop-shadow(0 0 14px rgba(63,216,232,.6))}
.sp-d-gl{fill:none;stroke:var(--sp-cya);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(63,216,232,.9))}
.sp-d-orb{fill:none;stroke:rgba(63,216,232,.45);stroke-width:1;stroke-dasharray:3 7;transform-origin:110px 110px;animation:sp-rot 22s linear infinite}
.sp-d-arc{font-size:15.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;fill:var(--sp-cya);filter:drop-shadow(0 0 4px rgba(63,216,232,.8))}
.sp-guard{display:flex;justify-content:center;position:relative}
.sp-guard::before{content:"";position:absolute;left:50%;bottom:2%;width:70%;height:36px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(63,216,232,.45),transparent 70%);filter:blur(6px)}
.sp-guard img{position:relative;width:100%;max-width:330px;height:auto;filter:drop-shadow(0 0 30px rgba(63,216,232,.25))}
@media(max-width:900px){.sp-dt{grid-template-columns:repeat(2,minmax(0,1fr))}.sp-guard{order:-1;grid-column:1/-1}.sp-guard img{max-width:220px}}
/* Für wen: Gegenüberstellung */
.sp-fw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:1000px;margin:0 auto;position:relative}
.sp-fw::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:linear-gradient(180deg,transparent,var(--sp-cya) 20%,var(--sp-mag) 80%,transparent);opacity:.6}
.sp-fw>div{padding:8px 48px}
.sp-fw h3{font-family:var(--head);font-weight:400;font-size:18px;margin:0 0 24px}
.sp-yes h3{color:var(--sp-cya);text-shadow:0 0 16px rgba(63,216,232,.5);text-align:right}
.sp-no h3{color:var(--sp-mag);text-shadow:0 0 16px rgba(224,75,192,.5)}
.sp-fw ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.sp-fw li{display:flex;gap:14px;align-items:flex-start;font-size:14.5px;line-height:1.6}
.sp-yes li{flex-direction:row-reverse;text-align:right;color:var(--sp-text)}
.sp-no li{color:var(--sp-dim)}
.sp-yes li::before{content:"";flex-shrink:0;width:12px;height:12px;margin-top:5px;border-radius:50%;background:var(--sp-cya);box-shadow:0 0 10px var(--sp-cya)}
.sp-no li::before{content:"";flex-shrink:0;width:12px;height:12px;margin-top:5px;border-radius:40% 60% 55% 45%;border:1.5px dashed var(--sp-mag)}
.sp-fw-note{max-width:760px;margin:48px auto 0;text-align:center;font-size:13.5px;line-height:1.7;color:var(--sp-muted)}
.sp-fw-note b{color:#fff}
@media(max-width:760px){.sp-fw{grid-template-columns:minmax(0,1fr);gap:36px}.sp-fw::before{display:none}.sp-fw>div{padding:0}.sp-yes h3{text-align:left}.sp-yes li{flex-direction:row;text-align:left}}
/* Vorspann in der H1 (Suchbegriff), System-Logo an der Figur, Querverweise auf andere Systemseiten */
.sp-hero h1 .sp-kicker{display:block;margin-bottom:14px;font-family:var(--mono);font-size:clamp(14px,1.5vw,17px);font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--sp-acc);text-shadow:none}
.sp-syslogo{position:absolute;z-index:2;left:-66px;top:36%;width:92px;height:92px;border-radius:20px;display:grid;place-items:center;background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px dashed color-mix(in srgb,var(--sp-acc) 70%,transparent);box-shadow:0 0 24px color-mix(in srgb,var(--sp-acc) 25%,transparent)}
.sp-syslogo img{width:59px;height:59px;max-width:none}
@media(max-width:1100px){.sp-syslogo{left:-42px;width:76px;height:76px;border-radius:17px}.sp-syslogo img{width:48px;height:48px}}
@media(max-width:900px){.sp-syslogo{left:auto;right:4%;top:8%;width:67px;height:67px}.sp-syslogo img{width:42px;height:42px}}
.sp-related{padding:0 0 72px}
.sp-related .sp-rel-h{font-family:var(--head);font-weight:400;font-size:16px;text-align:center;margin:0 0 20px;color:var(--sp-muted,#c3b9e6)}
.sp-related ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.sp-related a{display:inline-block;padding:10px 16px;border-radius:999px;border:1px solid rgba(207,198,240,.25);color:#e4ddfa;font-size:13px;transition:border-color .3s,box-shadow .3s}
.sp-related a:hover,.sp-related a:focus-visible{border-color:var(--cyan);box-shadow:0 0 16px rgba(63,230,255,.35);outline:none}
/* Drei Verkaufsargumente unter der Einleitung */
.sp-usps{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px;max-width:640px}
.sp-usps li{position:relative;padding-left:32px;font-size:15.5px;font-weight:600;line-height:1.5;color:#fff}
.sp-usps li::before{content:"✓";position:absolute;left:0;top:0;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:rgba(125,255,168,.14);border:1px solid rgba(125,255,168,.55);color:var(--green);font-size:12px;box-shadow:0 0 12px rgba(125,255,168,.3)}
/* Themenseiten (Updates ohne Risiko, Sicherheit, Vergleich): Hero mit Schild, Kurz erklärt, Schritte, Tabelle, Rhythmus, Systemkarten */
.sp .sp-uhero{padding:48px 0 30px}
.sp-uhero .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center}
.sp-uhero h1{font-family:var(--head);font-weight:400;font-size:clamp(28px,4.4vw,52px);line-height:1.2;color:#fff;margin:22px 0 18px;text-shadow:0 0 30px rgba(160,120,255,.55)}
.sp-uhero h1 .sp-kicker{display:block;margin-bottom:14px;font-family:var(--mono);font-size:clamp(13px,1.4vw,16px);font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--sp-acc);text-shadow:none}
.sp-stand{font-size:12px;color:var(--sp-dim)}
.sp-tldr{position:relative;margin:26px 0 30px;padding:22px 24px 22px 26px;background:rgba(24,14,58,.75);border:1px solid rgba(92,242,160,.3);border-radius:12px}
.sp-tldr::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;background:var(--sp-acc);box-shadow:0 0 12px var(--sp-acc);border-radius:2px}
.sp-tldr h2{font-family:var(--mono)!important;font-weight:700;font-size:13px!important;letter-spacing:2px;text-transform:uppercase;color:var(--sp-acc)!important;text-shadow:none!important;margin:0 0 10px}
.sp-tldr p{margin:0;font-size:15px;line-height:1.8;color:#fff}
.sp-shield{position:relative;display:flex;justify-content:center}
.sp-shield::before{content:"";position:absolute;left:50%;bottom:2%;width:70%;height:36px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(63,216,232,.45),transparent 70%);filter:blur(6px)}
.sp-shield img{position:relative;width:100%;max-width:340px;height:auto;filter:drop-shadow(0 0 30px rgba(63,216,232,.25))}
.sp-tag4{position:absolute;z-index:2;padding:8px 12px;font-size:12px;font-weight:700;background:rgba(20,10,51,.88);border:1px solid var(--c);color:var(--c);box-shadow:0 0 16px color-mix(in srgb,var(--c) 35%,transparent);animation:sp-bob 5s ease-in-out infinite}
@keyframes sp-bob{50%{transform:translateY(-8px)}}
@media(max-width:900px){.sp-uhero .wrap{grid-template-columns:minmax(0,1fr)}.sp-shield img{max-width:240px}}
.sp-steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.sp-step4{position:relative;padding:28px 22px;border-radius:16px;border:1px solid rgba(207,198,240,.14);background:rgba(24,14,58,.7);display:flex;flex-direction:column;gap:14px}
.sp-step4::before{content:"";position:absolute;left:22px;right:22px;top:0;height:2px;background:var(--c);box-shadow:0 0 14px var(--c)}
.sp-step4 .hd{display:flex;align-items:center;gap:12px}
.sp-step4 .hd i{font-style:normal;font-weight:700;font-size:12px;color:var(--c)}
.sp-step4 svg{width:34px;height:34px;fill:none;stroke:var(--c);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px var(--c))}
.sp-step4 h3{font-family:var(--head);font-weight:400;font-size:16px;line-height:1.4;color:#fff;margin:0}
.sp-step4 p{margin:0;font-size:14px;line-height:1.7;color:var(--sp-muted)}
@media(max-width:1000px){.sp-steps4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.sp-steps4{grid-template-columns:minmax(0,1fr)}}
.sp-graph{max-width:900px;margin:56px auto 0}
.sp-tbl{max-width:900px;margin:0 auto;overflow-x:auto;border-radius:16px;border:1px solid rgba(207,198,240,.14);background:rgba(16,9,42,.8)}
.sp-tbl:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
table.sp-vs{width:100%;min-width:560px;border-collapse:collapse;font-size:14px}
.sp-vs caption{caption-side:bottom;text-align:left;padding:14px 20px;font-size:12px;color:var(--sp-dim);border-top:1px solid rgba(207,198,240,.08)}
.sp-vs th,.sp-vs td{padding:16px 20px;text-align:left;border-bottom:1px solid rgba(207,198,240,.08);vertical-align:top;line-height:1.55}
.sp-vs thead th{font-family:var(--head);font-weight:400;font-size:14px;color:#fff;background:#1a0f42}
.sp-vs thead th:last-child{color:var(--sp-acc);background:rgba(92,242,160,.08)}
.sp-vs tbody th{color:#fff;width:32%}
.sp-vs td{color:var(--sp-dim)}
.sp-vs.sp-vs2 td:nth-child(2)::before{content:"✕ ";color:var(--sp-mag)}
.sp-vs td:last-child{color:#fff;background:rgba(92,242,160,.05)}
.sp-vs.sp-vs2 td:last-child::before{content:"✓ ";color:var(--sp-grn)}
.sp-sysgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.sp-sysgrid a{display:flex;flex-direction:column;gap:8px;height:100%;padding:22px;border-radius:14px;border:1px solid rgba(207,198,240,.14);background:rgba(24,14,58,.6);transition:border-color .3s,transform .3s,box-shadow .3s}
.sp-sysgrid a:hover,.sp-sysgrid a:focus-visible{border-color:var(--sp-acc);transform:translateY(-4px);box-shadow:0 0 22px rgba(92,242,160,.15);outline:none}
.sp-sysgrid strong{font-family:var(--head);font-weight:400;font-size:15px;color:#fff}
.sp-sysgrid span{font-size:13.5px;line-height:1.6;color:var(--sp-muted)}
.sp-sysgrid em{font-style:normal;font-size:12px;color:var(--sp-acc);margin-top:auto}
@media(max-width:900px){.sp-sysgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.sp-sysgrid{grid-template-columns:minmax(0,1fr)}}
.sp-rhythm{max-width:820px;margin:0 auto;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.sp-rhythm div{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 6px;border-radius:12px;border:1px solid rgba(207,198,240,.12);font-size:13px;color:var(--sp-dim)}
.sp-rhythm div.on{border-color:var(--sp-acc);color:#fff;background:rgba(92,242,160,.08);box-shadow:0 0 22px rgba(92,242,160,.18)}
.sp-rhythm i{width:10px;height:10px;border-radius:50%;background:rgba(207,198,240,.2)}
.sp-rhythm div.on i{background:var(--sp-acc);box-shadow:0 0 10px var(--sp-acc)}
.sp-rhythm-note{text-align:center;margin:22px auto 0;max-width:640px;font-size:14px;line-height:1.7;color:var(--sp-muted)}
@media(max-width:560px){.sp-rhythm{gap:5px}.sp-rhythm div{padding:12px 2px;font-size:11px}}
/* Sicherheitsseite: Prinzipien, Datenfluss, Anonymisierung, Versionen, Checkliste */
.sp-princ{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.sp-pr{position:relative;padding:26px 20px;border-radius:16px;border:1px solid rgba(207,198,240,.14);background:rgba(24,14,58,.7);display:flex;flex-direction:column;gap:14px}
.sp-pr::before{content:"";position:absolute;left:20px;right:20px;top:0;height:2px;background:var(--c);box-shadow:0 0 14px var(--c)}
.sp-pr svg{width:34px;height:34px;fill:none;stroke:var(--c);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px var(--c))}
.sp-pr h3{font-family:var(--head);font-weight:400;font-size:15px;line-height:1.4;color:#fff;margin:0}
.sp-pr p{margin:0;font-size:13.5px;line-height:1.7;color:var(--sp-muted)}
@media(max-width:1100px){.sp-princ{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.sp-princ{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.sp-princ{grid-template-columns:minmax(0,1fr)}}
.sp-flowd{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr) 120px minmax(0,1fr);align-items:center}
.sp-box{padding:22px 20px;border-radius:14px;border:1px solid var(--c);background:rgba(20,10,51,.8);box-shadow:0 0 26px color-mix(in srgb,var(--c) 20%,transparent);text-align:center;display:flex;flex-direction:column;gap:8px}
.sp-box h3{font-family:var(--head);font-weight:400;font-size:14px;color:var(--c);margin:0}
.sp-box p{margin:0;font-size:13px;line-height:1.6;color:var(--sp-muted)}
.sp-pipe{position:relative;height:70px}
.sp-pipe .ln{position:absolute;left:6px;right:6px;top:22px;height:2px;background:repeating-linear-gradient(90deg,var(--c) 0 6px,transparent 6px 12px);opacity:.8}
.sp-pipe .dot{position:absolute;top:22px;width:8px;height:8px;margin-top:-3px;border-radius:50%;background:#fff;box-shadow:0 0 10px var(--c);animation:sp-fwd 2.6s linear infinite}
.sp-pipe small{position:absolute;left:0;right:0;top:0;text-align:center;font-size:10.5px;color:var(--c)}
@keyframes sp-fwd{from{left:6px}to{left:calc(100% - 14px)}}
.sp-flow-note{max-width:760px;margin:28px auto 0;text-align:center;font-size:14.5px;line-height:1.7;color:#fff}
.sp-flow-note b{color:var(--sp-acc)}
@media(max-width:860px){.sp-flowd{grid-template-columns:minmax(0,1fr);gap:0}.sp-pipe{height:64px;width:2px;margin:0 auto}.sp-pipe .ln,.sp-pipe .dot,.sp-pipe small{display:none}.sp-pipe::before{content:"";position:absolute;inset:6px 0;background:repeating-linear-gradient(180deg,var(--c) 0 6px,transparent 6px 12px)}}
table.sp-an{width:100%;min-width:560px;border-collapse:collapse;font-size:14px}
.sp-an caption{caption-side:bottom;text-align:left;padding:14px 20px;font-size:12px;color:var(--sp-dim);border-top:1px solid rgba(207,198,240,.08)}
.sp-an th,.sp-an td{padding:15px 20px;text-align:left;border-bottom:1px solid rgba(207,198,240,.08)}
.sp-an thead th{font-family:var(--head);font-weight:400;font-size:13.5px;color:#fff;background:#1a0f42}
.sp-an tbody th{color:#fff}
.sp-an td.live{color:var(--sp-muted);position:relative}
.sp-an td.live span[aria-hidden]{filter:blur(4px);transition:filter .3s}
.sp-an tr:hover td.live span[aria-hidden]{filter:blur(2.5px)}
.sp-an td.copy{color:var(--sp-vio);background:rgba(167,107,255,.06)}
.sp-vline{position:relative;max-width:960px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-top:10px}
.sp-vline::before{content:"";position:absolute;left:12.5%;right:12.5%;top:34px;height:2px;background:linear-gradient(90deg,#5cf2a0,#3fd8e8,#a76bff,#e04bc0);opacity:.7}
.sp-ver{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;position:relative}
.sp-ver b{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--sp-bg);border:2px solid var(--sp-grn);box-shadow:0 0 0 8px var(--sp-bg),0 0 18px rgba(92,242,160,.45);font-size:13px;color:#fff;position:relative;z-index:1}
.sp-ver span{font-size:13px;color:var(--sp-muted)}
.sp-ver small{font-size:11px;color:var(--sp-ora)}
.sp-ver.cur b{border-color:var(--sp-mag);box-shadow:0 0 0 8px var(--sp-bg),0 0 18px rgba(224,75,192,.6)}
.sp-ver.cur small{color:var(--sp-mag)}
.sp-back{position:relative;max-width:960px;height:60px;margin:6px auto 0}
.sp-back svg{position:absolute;left:50%;width:25%;height:60px;overflow:visible}
.sp-back path{fill:none;stroke:var(--sp-ora);stroke-width:2;stroke-dasharray:6 6;animation:sp-dash 1.6s linear infinite}
@keyframes sp-dash{to{stroke-dashoffset:-24}}
.sp-back em{position:absolute;left:50%;width:25%;top:44px;text-align:center;font-style:normal;font-size:12px;color:var(--sp-ora)}
.sp-v-note{max-width:760px;margin:28px auto 0;text-align:center;font-size:14.5px;line-height:1.7;color:var(--sp-muted)}
@media(max-width:700px){.sp-vline{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}.sp-vline::before,.sp-back{display:none}}
.sp-chk{max-width:860px;margin:0 auto;list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.sp-chk li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 20px;border-radius:12px;border:1px solid rgba(207,198,240,.14);background:rgba(24,14,58,.6);font-size:14.5px}
.sp-chk li span{color:#fff}
.sp-chk li strong{font-weight:700;color:var(--sp-grn);white-space:nowrap}
.sp-chk li strong::before{content:"✓ "}
@media(max-width:560px){.sp-chk li{grid-template-columns:minmax(0,1fr)}.sp-chk li strong{white-space:normal}}
/* Vergleichsseite: Hero mit Leo, Sprungmarken, große Tabelle, Profile, Entscheidungshilfe, Kombination */
.sp-cmphero .wrap{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr)}
.sp-jump{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0;padding:0;list-style:none}
.sp-jump a{display:inline-block;padding:8px 14px;border-radius:999px;border:1px solid rgba(207,198,240,.25);color:var(--sp-muted);font-size:12.5px}
.sp-jump a:hover,.sp-jump a:focus-visible{color:#fff;border-color:var(--sp-acc);outline:none}
.sp-heroleo{position:relative;display:flex;justify-content:center;align-items:flex-end}
.sp-heroleo img{height:520px;width:auto;max-width:none;filter:drop-shadow(0 0 26px rgba(167,107,255,.45));position:relative;z-index:1}
.sp-vsl{position:absolute;z-index:2;font-family:var(--head);font-size:12px;padding:8px 12px;background:rgba(20,10,51,.85);border:1px solid;white-space:nowrap;animation:sp-bob 5s ease-in-out infinite}
.sp-vsl.a{left:-30px;top:18%;color:var(--sp-ora);border-color:rgba(240,145,58,.6)}
.sp-vsl.b{right:-20px;top:42%;color:var(--sp-cya);border-color:rgba(63,216,232,.6);animation-delay:-1.5s}
.sp-vsl.c{left:-10px;top:66%;color:var(--sp-mag);border-color:rgba(224,75,192,.6);animation-delay:-3s}
@media(max-width:900px){.sp-heroleo img{height:360px}.sp-vsl.a{left:4%}.sp-vsl.b{right:4%}.sp-vsl.c{left:8%}}
/* Einspaltig: erst Titel über die ganze Breite, dann Leo mit den drei Labels, dann Kurzantwort und Sprungmarken */
@media(max-width:900px){
  .sp-cmphero .wrap{grid-template-columns:minmax(0,1fr);gap:0}
  .sp-cmphero .wrap>div:first-child{display:contents}
  .sp-cmphero .sp-eyebrow{justify-self:start}
  .sp-cmphero .sp-heroleo{order:1;margin:32px 0 40px}
  .sp-cmphero .sp-tldr,.sp-cmphero .sp-jump{order:2}
  .sp-cmphero .sp-tldr{margin-top:0}
}
/* Handy: Labels eng um Leo, Ring passt in die Breite, H1 und Kicker ohne Silbentrennung */
@media(max-width:640px){
  .sp .sp-cmphero{padding:28px 0 24px}
  .sp-cmphero h1{font-size:clamp(21px,6.4vw,26px);line-height:1.25;margin:18px 0 14px;-webkit-hyphens:manual;hyphens:manual}
  .sp-cmphero h1 .sp-kicker{font-size:12px;letter-spacing:1px;line-height:1.6;margin-bottom:12px}
  .sp-cmphero .sp-stand{line-height:1.6}
  .sp-cmphero .sp-tldr{margin:0 0 22px;padding:18px 16px 18px 20px}
  .sp-cmphero .sp-tldr p{font-size:14.5px;line-height:1.7}
  .sp-cmphero .sp-jump{margin-top:0;gap:8px}
  .sp-cmphero .sp-jump a{padding:10px 14px}
  .sp-heroleo img{height:400px}
  .sp-heroleo .sp-vsl{font-size:11px;padding:7px 10px}
  .sp-heroleo .sp-vsl.a{left:0;top:13%}
  .sp-heroleo .sp-vsl.b{right:0;top:40%}
  .sp-heroleo .sp-vsl.c{left:0;top:67%;max-width:132px;white-space:normal;line-height:1.45}
  .sp-heroleo .sp-pad{width:260px;height:54px}
  .sp-heroleo .sp-pad::after{inset:8px 30px}
}
.sp-tbl.sp-tbl-wide{max-width:none;-webkit-overflow-scrolling:touch}
table.sp-cmp{width:100%;min-width:880px;border-collapse:separate;border-spacing:0;font-size:13.5px}
.sp-cmp caption{text-align:left;padding:16px 20px;color:var(--sp-dim);font-size:12px;caption-side:bottom;border-top:1px solid rgba(207,198,240,.08)}
.sp-cmp th,.sp-cmp td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(207,198,240,.08)}
.sp-cmp thead th{background:#1a0f42;font-family:var(--head);font-weight:400;font-size:14px;color:#fff}
.sp-cmp tbody th{font-weight:700;color:#fff;width:210px}
.sp-cmp th:first-child{position:sticky;left:0;z-index:1;background:#150b38}
.sp-cmp thead th:first-child{z-index:2}
.sp-cmp .hl{background:rgba(167,107,255,.09);box-shadow:inset 1px 0 0 rgba(167,107,255,.45),inset -1px 0 0 rgba(167,107,255,.45)}
.sp-cmp thead th.hl{background:#2a1660;color:var(--sp-acc);text-shadow:0 0 14px rgba(167,107,255,.7)}
.sp-cell{display:flex;gap:10px;align-items:flex-start;color:var(--sp-muted);line-height:1.55}
.sp-cell b{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px}
.sp-cell.y b{background:rgba(92,242,160,.15);color:var(--sp-grn)}
.sp-cell.p b{background:rgba(240,145,58,.15);color:var(--sp-ora)}
.sp-cell.n b{background:rgba(224,75,192,.15);color:var(--sp-mag)}
.sp-legend{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:18px;font-size:12.5px;color:var(--sp-dim)}
.sp-legend .sp-cell{color:var(--sp-dim);align-items:center}
.sp-scrollhint{display:none;text-align:center;margin-top:10px;font-size:12px;color:var(--sp-dim)}
@media(max-width:900px){.sp-scrollhint{display:block}}
.sp-profiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.sp-prof{--c:var(--sp-acc);position:relative;padding:26px 22px;border-radius:16px;border:1px solid rgba(207,198,240,.14);background:rgba(24,14,58,.7);display:flex;flex-direction:column;gap:14px}
.sp-prof::before{content:"";position:absolute;left:22px;right:22px;top:0;height:2px;background:var(--c);box-shadow:0 0 14px var(--c)}
.sp-prof.ora{--c:var(--sp-ora)}.sp-prof.cya{--c:var(--sp-cya)}.sp-prof.mag{--c:var(--sp-mag)}
.sp-prof h3{font-family:var(--head);font-weight:400;font-size:17px;color:var(--c);margin:0}
.sp-prof>p{margin:0;font-size:13.5px;line-height:1.65;color:var(--sp-muted)}
.sp-prof h4{margin:6px 0 0;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--sp-dim)}
.sp-prof ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13.5px;line-height:1.55}
.sp-prof ul li{display:flex;gap:10px}
.sp-prof ul.plus li::before{content:"+";color:var(--sp-grn);font-weight:700}
.sp-prof ul.minus li::before{content:"–";color:var(--sp-mag);font-weight:700}
.sp-prof .fit{margin-top:auto;padding-top:14px;border-top:1px dashed rgba(207,198,240,.2);font-size:13px;line-height:1.6;color:#fff}
.sp-prof .fit strong{color:var(--c)}
@media(max-width:1060px){.sp-profiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.sp-profiles{grid-template-columns:minmax(0,1fr)}}
.sp-decide{max-width:900px;margin:0 auto;list-style:none;padding:0;display:flex;flex-direction:column;gap:14px}
.sp-decide li{--c:var(--sp-acc);display:grid;grid-template-columns:minmax(0,1fr) 40px 200px;align-items:center;gap:12px;padding:18px 22px;border-radius:14px;border:1px solid rgba(207,198,240,.14);background:rgba(24,14,58,.6)}
.sp-decide li.ora{--c:var(--sp-ora)}.sp-decide li.cya{--c:var(--sp-cya)}.sp-decide li.mag{--c:var(--sp-mag)}
.sp-decide li.acc{border-color:rgba(167,107,255,.55);box-shadow:0 0 26px rgba(167,107,255,.18)}
.sp-decide .q{font-size:14.5px;line-height:1.6;color:#fff}
.sp-decide .arr{height:2px;background:linear-gradient(90deg,transparent,var(--c));position:relative}
.sp-decide .arr::after{content:"";position:absolute;right:-2px;top:-4px;border:5px solid transparent;border-left-color:var(--c)}
.sp-decide .a{font-family:var(--head);font-size:14px;color:var(--c);text-shadow:0 0 12px color-mix(in srgb,var(--c) 60%,transparent)}
@media(max-width:640px){.sp-decide li{grid-template-columns:minmax(0,1fr)}.sp-decide .arr{display:none}.sp-decide .a::before{content:"→ "}}
.sp-combo{max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:relative}
.sp-combo::before{content:"";position:absolute;left:16%;right:16%;top:30px;height:2px;background:linear-gradient(90deg,var(--sp-ora),var(--sp-acc),var(--sp-mag));opacity:.7}
.sp-combo div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:0 16px}
.sp-combo span{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--sp-bg);border:2px solid var(--c);box-shadow:0 0 0 8px var(--sp-bg),0 0 20px color-mix(in srgb,var(--c) 60%,transparent);font-weight:700;position:relative;color:#fff}
.sp-combo h3{font-family:var(--head);font-weight:400;font-size:15px;color:var(--c);margin:0}
.sp-combo p{margin:0;font-size:13.5px;line-height:1.65;color:var(--sp-muted)}
@media(max-width:700px){.sp-combo{grid-template-columns:minmax(0,1fr);gap:32px}.sp-combo::before{display:none}}
/* FAQ und Schluss */
.sp-faq{max-width:820px;margin:0 auto}
.sp-final{text-align:center;padding-bottom:120px!important}
.sp-ring{position:relative;max-width:760px;margin:0 auto;padding:72px 32px}
.sp-ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(167,107,255,.35);animation:sp-rot 60s linear infinite;pointer-events:none}
.sp-ring h2{margin-bottom:20px}
.sp-ring p{margin:0 auto 36px;max-width:540px;color:var(--sp-muted);font-size:15px;line-height:1.75}
.sp-ring .sp-updated{margin:28px 0 0;font-size:12px;color:rgba(255,255,255,.55)}
@media(max-width:640px){.sp section{padding:64px 0}.sp-ring{padding:48px 8px}.sp-ring::before{border-radius:32px}}
@media(prefers-reduced-motion:reduce){.sp *,.sp *::before,.sp *::after{animation:none!important;transition:none!important}.sp-reveal,.sp-term li,.sp-fix{opacity:1;transform:none}}

/* Links auf Themenseiten: im Systeme-Abschnitt und in FAQ-Antworten als Link erkennbar */
.faq-item p a{color:var(--cyan);border-bottom:1px solid rgba(63,230,255,.35)}
.faq-item p a:hover{border-bottom-color:var(--cyan)}
/* Systemseiten unter „Ihr System ist egal“ als Chips, wie „AI Crew auch für andere Systeme“ auf den Unterseiten */
.sys-more{margin:30px 0 0}
.sys-more ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.sys-more a{display:inline-block;padding:10px 16px;border-radius:999px;border:1px solid rgba(207,198,240,.25);color:#e4ddfa;font-size:13px;line-height:1.4;transition:border-color .3s,box-shadow .3s}
.sys-more a:hover,.sys-more a:focus-visible{border-color:var(--cyan);box-shadow:0 0 16px rgba(63,230,255,.35);outline:none}
.logo.logo-link{border-color:rgba(63,230,255,.45);transition:border-color .2s,background .2s}
.logo.logo-link:hover{border-color:var(--cyan);background:rgba(63,230,255,.07)}
/* Hero-Button: mit Verlauf gefüllt statt nur Verlaufsrand, Leuchten außen herum */
.hero .actions .ey-btn,.sp-cta .ey-btn{background:linear-gradient(110deg,#ff4fd8,#9b5cff);text-shadow:0 1px 3px rgba(20,10,40,.55);box-shadow:0 0 14px rgba(255,79,216,.55),0 0 30px rgba(155,92,255,.4),0 0 48px rgba(155,92,255,.22)}
.hero .actions .ey-btn:hover,.hero .actions .ey-btn:focus-visible,.hero .actions .ey-btn.ey-auto,.sp-cta .ey-btn:hover,.sp-cta .ey-btn:focus-visible,.sp-cta .ey-btn.ey-auto{text-shadow:0 1px 3px rgba(20,10,40,.55);box-shadow:0 0 18px rgba(255,79,216,.8),0 0 40px rgba(155,92,255,.55),0 0 64px rgba(155,92,255,.35)}
.hero .actions .ey-btn::before,.sp-cta .ey-btn::before{background:linear-gradient(110deg,#ff4fd8,#9b5cff)}
/* Laufband: Systeme mit eigener Seite sind Links */
a.ls-item{text-decoration:none}
.logo-strip-track .ls-link{border-color:rgba(63,230,255,.45)}
.logo-strip-track .ls-link:hover{border-color:var(--cyan);background:rgba(63,230,255,.07)}
/* Feedback „web fixes“: Überschriften mit mehr Glow, Systemlogo auf weißer Kachel, gleichmäßige Zeilenumbrüche */
.sp-hero h1,.sp-uhero h1{text-shadow:0 0 14px rgba(190,150,255,.75),0 0 38px rgba(160,120,255,.6)}
.sp h2{text-shadow:0 0 12px rgba(190,150,255,.7),0 0 32px rgba(160,120,255,.55)}
.sp h3{text-shadow:0 0 12px rgba(160,120,255,.45)}
.sp-hero h1 .sp-kicker,.sp-uhero h1 .sp-kicker{text-shadow:0 0 12px color-mix(in srgb,var(--sp-acc) 60%,transparent)}
.sp-syslogo{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
.sp p,.sp li,.sp dd{text-wrap:pretty}
.sp h1,.sp h2,.sp h3,.sp .sp-head p,.sp .sp-lead,.sp .sp-usps li,.sp .sp-badge,.sp .sp-feat p,.sp .sp-flow p,.sp .sp-step4 p,.sp .sp-pr p,.sp .sp-box p,.sp .sp-sysgrid span,.sp .sp-prof>p,.sp .sp-combo p,.sp .sp-planet p,.sp .sp-ring p,.sp .sp-v-note,.sp .sp-fw-note,.sp .sp-rhythm-note,.sp .sp-upd p,.sp .sp-term li span,.sp .sp-fix{text-wrap:balance}
.sp-flow h3{font-size:14px;text-shadow:0 0 10px var(--c),0 0 22px color-mix(in srgb,var(--c) 60%,transparent)}
.sp-no h3{color:#ff8ae4;text-shadow:0 0 12px rgba(255,79,216,.75),0 0 28px rgba(255,79,216,.45)}
/* Startseite H1: „weiterentwickelt von KI-Agenten.“ geschlossen in der zweiten Zeile, ohne Silbentrennung */
.hero h1.headline .hl-l2{-webkit-hyphens:none;hyphens:none}
@media(min-width:761px){.hero h1.headline .hl-l2{display:block}}
.sys-more-h{font-family:var(--head);font-weight:400;font-size:16px;text-align:center;margin:0 0 20px;color:#fff}

/* Modulseiten von Eywora Search (z. B. /search/): Bausteine mit Präfix sx-, aufbauend auf den sp-Bausteinen.
   Statt Figur ein Suchfenster im Kopfbereich; Animation (Tippen, Treffer nacheinander) in assets/eywora-sub.js */
.sx .sx-hero .wrap{min-height:0;padding-top:40px;padding-bottom:40px}
.sx-stats{display:flex;flex-wrap:wrap;gap:14px 36px;margin:28px 0 36px;padding:0}
.sx-stats div{display:flex;flex-direction:column-reverse;gap:4px}
.sx-stats dd{margin:0;font-family:var(--head);font-size:28px;color:#fff;text-shadow:0 0 18px rgba(63,216,232,.55)}
.sx-stats dt{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.75)}
.sx-mock{border:1px solid rgba(207,198,240,.18);background:rgba(12,6,32,.88);border-radius:14px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.4),0 0 40px rgba(63,140,255,.18)}
.sx-q{display:flex;align-items:center;gap:12px;margin:20px 20px 0;padding:14px 16px;border:1px solid rgba(63,216,232,.55);border-radius:10px;background:rgba(63,216,232,.06);box-shadow:0 0 18px rgba(63,216,232,.2);font-family:var(--mono);font-size:15px;color:#fff;min-height:52px}
.sx-q svg{width:20px;height:20px;flex-shrink:0;fill:none;stroke:var(--sp-cya);stroke-width:2;stroke-linecap:round}
.sx-q span::after{content:"▍";color:var(--sp-cya);animation:blink 1s steps(1) infinite;margin-left:2px}
.sx-meta{margin:14px 22px 6px;font-size:12px;color:rgba(255,255,255,.7)}
.sx-meta b{color:var(--sp-grn)}
.sx-hits{list-style:none;margin:0;padding:6px 12px 16px;display:flex;flex-direction:column;gap:6px}
.sx-hits li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:12px 12px;border-radius:8px;border:1px solid rgba(207,198,240,.08);background:rgba(24,14,58,.6)}
.sx-hits li:first-child{border-color:rgba(92,242,160,.4);background:rgba(92,242,160,.06)}
.sx-hits b{font-size:14px;color:#fff;font-weight:600}
.sx-hits b,.sx-hits .sx-why{grid-column:1}
.sx-hits em{grid-column:2;grid-row:1/3;align-self:center;font-style:normal;font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.55)}
.sx-why{font-size:12px}
.sx-w-grn{color:var(--sp-grn)}.sx-w-cya{color:var(--sp-cya)}.sx-w-vio{color:#c9a5ff}.sx-w-ora{color:var(--sp-ora)}
.sp-js .sx-meta,.sp-js .sx-hits li{opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s}
.sp-js .sx-mock.is-done .sx-meta,.sp-js .sx-mock.is-done .sx-hits li{opacity:1;transform:none}
.sx-hits li:nth-child(2){transition-delay:.15s}.sx-hits li:nth-child(3){transition-delay:.3s}.sx-hits li:nth-child(4){transition-delay:.45s}
/* Beispiele: Eingabe → was Eywora versteht */
.sx-cases{list-style:none;margin:0 auto;padding:0;max-width:1000px;display:flex;flex-direction:column;gap:14px}
.sx-cases li{display:grid;grid-template-columns:minmax(0,.9fr) auto minmax(0,1.1fr);gap:22px;align-items:center;padding:20px 24px;border:1px solid rgba(207,198,240,.14);border-radius:14px;background:rgba(24,14,58,.7)}
.sx-cases small,.sx-prompt small{display:block;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:8px}
.sx-cases code,.sx-prompt code{display:block;font-family:var(--mono);font-size:14px;line-height:1.5;color:#fff;padding:10px 14px;border-radius:8px;border:1px dashed rgba(207,198,240,.3);background:rgba(6,4,14,.6);overflow-wrap:anywhere}
.sx-arrow{font-size:22px;color:var(--sp-mag);text-shadow:0 0 12px var(--sp-mag)}
.sx-cases b,.sx-prompt b{display:block;font-size:15px;color:var(--sp-grn);margin-bottom:4px}
.sx-cases p,.sx-prompt p{margin:0;font-size:13.5px;line-height:1.6;color:var(--sp-muted)}
@media(max-width:760px){.sx-cases li{grid-template-columns:minmax(0,1fr);gap:12px}.sx-arrow{transform:rotate(90deg);justify-self:start;margin-left:14px}}
/* Im Detail: vier Karten, je mit Vergleich Standard / Eywora */
.sx-deep{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.sx-deep article{display:flex;flex-direction:column;padding:30px 28px;border:1px solid rgba(207,198,240,.14);border-radius:16px;background:rgba(24,14,58,.7)}
.sx-k{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--sp-cya)}
.sx-deep h3{font-family:var(--head);font-weight:400;font-size:18px;line-height:1.4;color:#fff;margin:14px 0 12px}
.sx-deep p{margin:0 0 22px;font-size:14px;line-height:1.75;color:var(--sp-muted)}
.sx-vs{margin:auto 0 0;display:grid;gap:8px}
.sx-vs div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;align-items:center;padding:10px 14px;border-radius:8px;font-size:13px}
.sx-vs div:first-child{background:rgba(224,75,192,.08);border:1px dashed rgba(224,75,192,.45)}
.sx-vs div:last-child{background:rgba(92,242,160,.08);border:1px solid rgba(92,242,160,.45)}
.sx-vs dt{font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:11px}
.sx-vs div:first-child dt{color:#ff8ae4}.sx-vs div:last-child dt{color:var(--sp-grn)}
.sx-vs dd{margin:0;color:#fff}
@media(max-width:860px){.sx-deep{grid-template-columns:minmax(0,1fr)}}
/* Der Unterschied: vier nummerierte Karten, darunter Eywora Search gegen Standardsuche */
.sx-why4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sx-n{font-family:var(--head);font-size:26px;color:var(--sp-acc);text-shadow:0 0 14px var(--sp-acc)}
.sx-why4 a{color:var(--cyan);white-space:nowrap}
.sx-fw{margin-top:72px}
.sx-cta{justify-content:center}
.sp-final .sp-updated a{color:var(--cyan)}
@media(max-width:1100px){.sx-why4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.sx-why4{grid-template-columns:minmax(0,1fr)}.sx-stats dd{font-size:24px}.sx-q{font-size:14px;margin:16px 14px 0}}
/* Schaubilder der übrigen Module: Kopfzeile, Balken (Health, Analytics), Blätterkatalog (Marketing), Chat (KI-Assistent) */
.sx-mh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:20px 22px 6px;font-size:13px}
.sx-mh b{color:#fff}.sx-mh span{font-size:12px;color:rgba(255,255,255,.65)}
.sx-live::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--sp-grn);box-shadow:0 0 8px var(--sp-grn)}
.sx-bars{list-style:none;margin:0;padding:12px 22px 6px;display:flex;flex-direction:column;gap:16px}
.sx-bars li{display:grid;grid-template-columns:150px minmax(0,1fr) 64px;gap:14px;align-items:center;font-size:13px;color:#fff}
.sx-bars small{color:rgba(255,255,255,.55);margin-left:4px}
.sx-bars b{font-family:var(--mono);text-align:right;font-weight:600}
.sx-bar{display:block;height:12px;border-radius:6px;background:rgba(207,198,240,.08);position:relative;overflow:hidden}
.sx-bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:6px;background:var(--c);box-shadow:0 0 12px var(--c);transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.sp-js .sx-mock:not(.is-done) .sx-bar::after{width:0}
.sx-bars--q{gap:11px}.sx-bars--q li{grid-template-columns:140px minmax(0,1fr) 64px}.sx-bars--q span{font-family:var(--mono)}
.sx-foot{display:flex;flex-direction:column;gap:4px;margin:14px 22px 20px;padding:12px 14px;border-radius:8px;border:1px solid rgba(92,242,160,.35);background:rgba(92,242,160,.06);font-size:12.5px}
.sx-foot span{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.6)}
.sx-foot b{color:#fff;font-weight:600}
.sx-foot2{flex-direction:row;justify-content:space-between;flex-wrap:wrap;border-color:rgba(207,198,240,.14);background:rgba(24,14,58,.6)}
.sx-foot2 b.sx-w-grn{color:var(--sp-grn)}.sx-foot2 b.sx-w-ora{color:var(--sp-ora)}
.sp-js .sx-foot{opacity:0;transition:opacity .5s .9s}.sp-js .sx-mock.is-done .sx-foot{opacity:1}
.sx-book{display:grid;grid-template-columns:1fr 1fr;margin:14px 22px 0;border-radius:6px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.45);perspective:900px}
.sx-pg{position:relative;aspect-ratio:3/4;padding:14px;display:flex;flex-direction:column;gap:8px;background:linear-gradient(160deg,#f5f1ff,#e3dcf7)}
.sx-pg+.sx-pg{background:linear-gradient(200deg,#f5f1ff,#ddd5f4);box-shadow:inset 10px 0 14px -10px rgba(0,0,0,.35)}
.sx-pg i{display:block;font-style:normal}
.sx-pg-h{font-family:var(--head);font-size:12px;color:#2a1660}
.sx-pg-img{flex:1;border-radius:4px;background:linear-gradient(135deg,#b9a6ef,#7fd8e6)}
.sx-pg-l{height:6px;border-radius:3px;background:rgba(42,22,96,.22)}.sx-pg-l.sx-s{width:60%}
.sx-hot{position:absolute;padding:5px 9px;border-radius:999px;background:var(--sp-mag);color:#fff;font-size:11px;font-weight:700;white-space:nowrap;box-shadow:0 0 0 4px rgba(224,75,192,.25),0 0 16px rgba(224,75,192,.7)}
.sp-js .sx-hot{opacity:0;transform:scale(.6);transition:opacity .4s,transform .4s}
.sp-js .sx-mock.is-done .sx-hot{opacity:1;transform:none}
.sx-mock .sx-hot:nth-of-type(2){transition-delay:.25s}.sx-book .sx-pg+.sx-pg .sx-hot{transition-delay:.4s}.sx-book .sx-pg+.sx-pg .sx-hot+.sx-hot{transition-delay:.65s}
.sx-center{text-align:center}
.sx-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 22px 20px}
.sx-kpi div{padding:10px 12px;border-radius:8px;border:1px solid rgba(207,198,240,.12);background:rgba(24,14,58,.6);display:flex;flex-direction:column-reverse;gap:2px}
.sx-kpi dt{font-size:11px;color:rgba(255,255,255,.6);letter-spacing:1px;text-transform:uppercase}
.sx-kpi dd{margin:0;font-family:var(--head);font-size:18px;color:#fff}
.sx-tabs{display:flex;gap:4px;margin:16px 20px 0;padding:4px;border-radius:10px;background:rgba(24,14,58,.8);font-size:12.5px}
.sx-tabs span{flex:1;text-align:center;padding:8px;border-radius:7px;color:rgba(255,255,255,.65)}
.sx-tabs .on{background:rgba(63,216,232,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(63,216,232,.5)}
.sx-tabs em{font-style:normal;font-size:10px;font-weight:700;padding:2px 6px;margin-left:6px;border-radius:4px;background:var(--sp-mag);color:#fff}
.sx-chat{display:flex;flex-direction:column;gap:10px;padding:16px 20px 6px}
.sx-msg{margin:0;max-width:85%;padding:10px 14px;border-radius:12px 12px 12px 4px;background:rgba(24,14,58,.9);border:1px solid rgba(207,198,240,.12);font-size:13px;line-height:1.55;color:#fff}
.sx-msg small{display:block;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--sp-cya);margin-bottom:3px}
.sx-me{align-self:flex-end;border-radius:12px 12px 4px 12px;background:rgba(167,107,255,.22);border-color:rgba(167,107,255,.5)}
.sx-me span::after{content:"▍";color:#c9a5ff;animation:blink 1s steps(1) infinite;margin-left:2px}
.sx-chips{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.sx-chips span{padding:5px 10px;border-radius:999px;border:1px solid rgba(63,216,232,.45);font-size:11.5px;color:var(--sp-cya)}
.sp-js .sx-ans,.sp-js .sx-chips{opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s}
.sp-js .sx-mock.is-done .sx-ans,.sp-js .sx-mock.is-done .sx-chips{opacity:1;transform:none}
.sp-js .sx-mock.is-done .sx-chips{transition-delay:.3s}
.sx-mock.is-done .sx-me span::after{display:none}
.sx-prods{padding-top:10px}
.sp-js .sx-prods li:nth-child(1){transition-delay:.5s}.sp-js .sx-prods li:nth-child(2){transition-delay:.65s}.sp-js .sx-prods li:nth-child(3){transition-delay:.8s}
/* Marketing: Skizzen der Katalog-Vorlagen und die Zeile „Oder einfach beschreiben“ */
.sx-tpl{width:44px!important;height:44px!important;stroke-width:1.2!important}
.sx-tpls .sp-feat:last-child .sx-tpl{stroke-dasharray:none}
.sx-prompt{display:grid;grid-template-columns:minmax(0,.9fr) auto minmax(0,1.1fr);gap:22px;align-items:center;max-width:1000px;margin:28px auto 0;padding:22px 26px;border:1px solid rgba(255,79,216,.4);border-radius:14px;background:radial-gradient(120% 120% at 0% 0%,rgba(224,75,192,.14),transparent 60%),rgba(24,14,58,.7)}
@media(max-width:760px){.sx-prompt{grid-template-columns:minmax(0,1fr);gap:12px}.sx-bars li,.sx-bars--q li{grid-template-columns:110px minmax(0,1fr) 56px;gap:10px;font-size:12px}}
.sx-bars li>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Kopfzeile 1001–1200px: sechs Menüpunkte (mit „Search“) passen auch auf Kroatisch, ohne das Logo zu stauchen */
@media(min-width:1001px) and (max-width:1200px){.nav .wrap{gap:14px}.tn-btn,.tn-link{padding:10px 7px;gap:5px;font-size:12px}}

/* Datenseiten (FAQ, Glossar, Blog …; tools/inhalte): Präfix ds-, aufbauend auf sp-/sx-. Filter: assets/eywora-daten.js */
.ds .ds-hero{padding:56px 0 24px;text-align:center}
.ds-hero .wrap{display:flex;flex-direction:column;align-items:center}
.ds-hero .crumbs{justify-content:center}
.ds-hero h1{font-family:var(--head);font-weight:400;font-size:clamp(30px,4.6vw,54px);line-height:1.15;color:#fff;text-shadow:0 0 30px rgba(160,120,255,.55);margin:22px 0 22px;max-width:980px}
.ds-hero h1 em{font-style:normal;color:var(--green);text-shadow:0 0 18px rgba(125,255,168,.6)}
.ds-hero .sp-lead{max-width:760px}
.ds-search{display:flex;align-items:center;gap:12px;width:min(640px,100%);margin:34px 0 0;padding:14px 18px;border:1px solid rgba(63,216,232,.5);border-radius:12px;background:rgba(12,6,32,.85);box-shadow:0 0 22px rgba(63,216,232,.18)}
.ds-search svg{width:20px;height:20px;flex-shrink:0;fill:none;stroke:var(--sp-cya);stroke-width:2;stroke-linecap:round}
.ds-search input{flex:1;min-width:0;border:0;background:none;color:#fff;font:15px var(--mono);outline:none}
.ds-search input::placeholder{color:rgba(255,255,255,.55)}
.ds .ds-list{padding-top:24px}
.ds-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 48px}
.ds-chip{padding:9px 16px;border-radius:999px;border:1px solid rgba(207,198,240,.25);background:none;color:#e4ddfa;font:13px var(--mono);cursor:pointer;transition:border-color .25s,box-shadow .25s,background .25s}
.ds-chip:hover,.ds-chip:focus-visible{border-color:var(--cyan);outline:none}
.ds-chip[aria-pressed="true"]{background:rgba(63,216,232,.14);border-color:var(--cyan);color:#fff;box-shadow:0 0 16px rgba(63,230,255,.3)}
.ds-group{max-width:900px;margin:0 auto 56px}
.ds-group[hidden],.ds [data-text][hidden]{display:none}
.ds-group-h{display:flex;align-items:baseline;gap:16px;margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid rgba(207,198,240,.14)}
.ds-group-h h2{margin:0;font-size:clamp(20px,2.4vw,26px)}
.ds-group-h small{margin-left:auto;font-size:12px;color:rgba(255,255,255,.6);white-space:nowrap}
.ds .faq-item p,.ds .faq-item ul{margin:0;padding:0 20px 18px;color:#fff;line-height:1.75;font-size:14.5px}
.ds .faq-item a{color:var(--cyan)}
.ds-empty{text-align:center;color:rgba(255,255,255,.75)}
/* Kopfzeile: Panel „Search“ mit drei Spalten (Module, Lösungen, Ressourcen) */
.tn-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 14px}
.ds .sp-faq{max-width:none}