:root{
  --bg:#05070b;
  --bg2:#090d14;
  --panel:#0d121b;
  --panel2:#101722;
  --text:#f7f8fb;
  --muted:#9ba7b8;
  --line:rgba(255,255,255,.095);
  --line2:rgba(255,255,255,.16);
  --lime:#cfff23;
  --cyan:#18c8ff;
  --pink:#ff2b9d;
  --violet:#a78bfa;
  --danger:#ff5d6c;
  --radius:24px;
  --shadow:0 28px 90px rgba(0,0,0,.34);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 4%, rgba(24,200,255,.12), transparent 26rem),
    radial-gradient(circle at 88% 10%, rgba(255,43,157,.12), transparent 28rem),
    radial-gradient(circle at 50% 55%, rgba(207,255,35,.045), transparent 34rem),
    linear-gradient(180deg,#05070b 0%,#070a10 38%,#05070b 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  min-height:100vh;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  opacity:.19;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,#000 0%,transparent 70%);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:linear-gradient(90deg,rgba(24,200,255,.025),transparent 30%,transparent 70%,rgba(255,43,157,.025));
}

a{color:inherit}
button,input{font:inherit}
button{color:inherit}
img{max-width:100%}

.shell{width:min(1460px,calc(100% - 40px));margin:0 auto}

/* HEADER */
.site-header{
  position:sticky;
  top:14px;
  z-index:100;
  display:flex;
  align-items:center;
  gap:28px;
  width:min(1460px,calc(100% - 40px));
  margin:14px auto 0;
  padding:12px 14px 12px 18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(5,8,13,.82);
  backdrop-filter:blur(18px);
  box-shadow:0 16px 50px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  white-space:nowrap;
}
.brand-bolt{font-size:1.45rem;color:var(--lime);filter:drop-shadow(0 0 12px rgba(207,255,35,.5));transform:skew(-8deg)}
.brand-word{font-size:1.45rem;font-weight:900;font-style:italic;letter-spacing:-.045em}
.brand-word .ego{color:#fff}
.brand-word .krieg{color:var(--lime)}
.brand-word .de{color:#c7cfdb;font-weight:700}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.site-nav a{
  text-decoration:none;
  color:#b9c2cf;
  padding:10px 13px;
  border-radius:10px;
  font-size:.92rem;
  font-weight:650;
  transition:.18s ease;
}
.site-nav a:hover,.site-nav a:focus-visible{background:rgba(255,255,255,.06);color:#fff;outline:none}
.header-cta{
  text-decoration:none;
  padding:10px 16px;
  border:1px solid rgba(207,255,35,.72);
  border-radius:10px;
  color:#f6ffd7;
  font-weight:800;
  font-size:.9rem;
  box-shadow:inset 0 0 18px rgba(207,255,35,.04),0 0 22px rgba(207,255,35,.08);
  transition:.18s ease;
}
.header-cta:hover{background:var(--lime);color:#071006;box-shadow:0 0 28px rgba(207,255,35,.22)}
.menu-toggle{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer}
.menu-toggle span{width:18px;height:2px;background:#fff;border-radius:9px;transition:.2s}
.site-header.open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header.open .menu-toggle span:nth-child(2){opacity:0}
.site-header.open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* HERO */
.hero{
  position:relative;
  padding:64px 0 32px;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  left:50%;top:5%;width:2px;height:84%;
  background:linear-gradient(to bottom,transparent,rgba(207,255,35,.4),transparent);
  opacity:.4;
}
.hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(620px,1.08fr);gap:54px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;font-weight:850;color:#d8e0eb;margin-bottom:22px}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--lime);box-shadow:0 0 12px rgba(207,255,35,.45)}
.hero h1{font-size:clamp(3.2rem,6vw,6.3rem);line-height:.94;letter-spacing:-.065em;margin:0 0 24px;font-weight:950;max-width:760px}
.hero h1 .accent{color:var(--lime);text-shadow:0 0 34px rgba(207,255,35,.15)}
.hero-copy{font-size:clamp(1.05rem,1.5vw,1.24rem);line-height:1.65;color:#b1bccb;max-width:670px;margin:0 0 30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;border:1px solid var(--line2);border-radius:12px;padding:13px 18px;font-weight:820;background:rgba(255,255,255,.035);cursor:pointer;transition:.18s ease}
.btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.btn-primary{background:var(--lime);border-color:var(--lime);color:#081007;box-shadow:0 14px 35px rgba(207,255,35,.14)}
.btn-primary:hover{background:#ddff58;box-shadow:0 18px 42px rgba(207,255,35,.2)}
.btn-dark{background:#0b1119}

.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:34px;max-width:700px}
.hero-stat{padding:15px 16px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018))}
.hero-stat strong{display:block;font-size:1.28rem;line-height:1;margin-bottom:5px}
.hero-stat span{font-size:.8rem;color:var(--muted)}

/* BATTLE STAGE */
.battle-stage{position:relative;min-height:500px;display:grid;grid-template-columns:1fr 88px 1fr;align-items:center;gap:0}
.battle-stage::before{content:"";position:absolute;inset:9% 8%;border-radius:50%;background:radial-gradient(circle,rgba(207,255,35,.08),transparent 50%);filter:blur(18px)}
.fighter{
  position:relative;
  min-height:430px;
  padding:28px;
  border:1px solid var(--line2);
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(15,22,32,.94),rgba(6,10,16,.96));
  box-shadow:var(--shadow);
  isolation:isolate;
}
.fighter::before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:34px 34px}
.fighter::after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;filter:blur(36px);z-index:-1;opacity:.36}
.fighter.chatgpt{border-color:rgba(24,200,255,.42);box-shadow:0 28px 90px rgba(0,0,0,.32),inset 0 0 0 1px rgba(24,200,255,.05),0 0 42px rgba(24,200,255,.08)}
.fighter.chatgpt::after{left:-150px;top:40px;background:rgba(24,200,255,.55)}
.fighter.copilot{border-color:rgba(255,43,157,.42);box-shadow:0 28px 90px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,43,157,.05),0 0 42px rgba(255,43,157,.08)}
.fighter.copilot::after{right:-150px;top:40px;background:rgba(255,43,157,.55)}
.fighter-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);margin-bottom:20px}
.ai-mark{height:160px;display:grid;place-items:center;margin:0 -8px 20px;position:relative}
.ai-mark .core{width:116px;height:116px;border-radius:32px;display:grid;place-items:center;font-size:2.4rem;font-weight:950;letter-spacing:-.06em;transform:rotate(45deg);background:#071018;border:1px solid currentColor;box-shadow:0 0 40px currentColor}
.ai-mark .core span{transform:rotate(-45deg)}
.chatgpt .ai-mark{color:var(--cyan)}
.copilot .ai-mark{color:var(--pink)}
.ai-mark::before,.ai-mark::after{content:"";position:absolute;width:62%;height:1px;background:currentColor;opacity:.3}
.ai-mark::before{transform:rotate(22deg)}.ai-mark::after{transform:rotate(-22deg)}
.fighter h2{margin:0 0 6px;font-size:1.7rem;letter-spacing:-.035em}
.chatgpt h2{color:var(--cyan)}.copilot h2{color:var(--pink)}
.fighter-role{color:#dce3ec;font-weight:760;margin-bottom:16px}
.fighter p{margin:0;color:#9ca8b8;line-height:1.6}
.fighter-score{display:flex;gap:5px;margin-top:22px}
.fighter-score i{display:block;height:5px;flex:1;border-radius:8px;background:rgba(255,255,255,.08)}
.chatgpt .fighter-score i:nth-child(-n+4){background:var(--cyan);box-shadow:0 0 10px rgba(24,200,255,.35)}
.copilot .fighter-score i:nth-child(-n+4){background:var(--pink);box-shadow:0 0 10px rgba(255,43,157,.35)}
.vs-orb{position:relative;z-index:10;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;margin:auto;background:#06090e;border:1px solid rgba(207,255,35,.68);font-size:1.45rem;font-weight:950;color:var(--lime);box-shadow:0 0 0 7px rgba(255,255,255,.025),0 0 36px rgba(207,255,35,.2)}
.vs-orb::before{content:"";position:absolute;top:50%;left:-56px;right:-56px;height:1px;background:linear-gradient(90deg,var(--cyan),var(--lime),var(--pink));z-index:-1;opacity:.65}

/* SECTION BASICS */
.section{padding:86px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px}
.section-kicker{font-size:.72rem;font-weight:850;text-transform:uppercase;letter-spacing:.22em;color:var(--lime);margin-bottom:10px}
.section h2,.legal-title{font-size:clamp(2.1rem,4vw,4rem);line-height:1;letter-spacing:-.055em;margin:0}
.section-lead{max-width:650px;color:var(--muted);line-height:1.65;margin:0}
.panel{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));box-shadow:0 20px 70px rgba(0,0,0,.18)}

/* SCORE STRIP */
.score-strip{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#090e15;margin-top:36px}
.score-item{display:flex;align-items:center;gap:16px;padding:20px 24px;min-height:92px}
.score-item+ .score-item{border-left:1px solid var(--line)}
.score-icon{font-size:1.5rem;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.045)}
.score-item:nth-child(1) .score-icon{color:var(--lime)}
.score-item:nth-child(2) .score-icon{color:var(--cyan)}
.score-item:nth-child(3) .score-icon{color:var(--pink)}
.score-item strong{display:block;font-size:1.05rem;margin-bottom:4px}.score-item span{font-size:.82rem;color:var(--muted)}

/* DUEL MACHINE */
.duel-machine{display:grid;grid-template-columns:1fr 90px 1fr;align-items:stretch;gap:0;padding:1px;background:linear-gradient(90deg,rgba(24,200,255,.52),rgba(207,255,35,.18),rgba(255,43,157,.52));border-radius:26px;box-shadow:var(--shadow)}
.duel-side{padding:32px;background:#091019;min-height:255px;position:relative;overflow:hidden}
.duel-side:first-child{border-radius:25px 0 0 25px}.duel-side:last-child{border-radius:0 25px 25px 0}
.duel-side small{font-size:.72rem;text-transform:uppercase;letter-spacing:.17em;font-weight:850}.duel-side.left small{color:var(--cyan)}.duel-side.right small{color:var(--pink)}
.duel-side blockquote{margin:22px 0 0;font-size:clamp(1.25rem,2vw,1.8rem);font-weight:780;line-height:1.38;letter-spacing:-.025em}
.duel-side::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;filter:blur(35px);opacity:.12;bottom:-90px}.duel-side.left::after{background:var(--cyan);left:-70px}.duel-side.right::after{background:var(--pink);right:-70px}
.duel-center{background:#091019;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.duel-center strong{font-size:1.25rem;color:var(--lime)}
.duel-center button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(207,255,35,.5);background:rgba(207,255,35,.08);cursor:pointer;color:var(--lime);font-size:1.15rem;transition:.18s}
.duel-center button:hover{background:var(--lime);color:#061006;transform:rotate(12deg) scale(1.04)}

/* COMPARISON */
.trait-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.trait-card{padding:24px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.025);transition:.18s}
.trait-card:hover{transform:translateY(-3px);border-color:var(--line2);background:rgba(255,255,255,.045)}
.trait-no{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(207,255,35,.08);border:1px solid rgba(207,255,35,.16);color:var(--lime);font-size:.8rem;font-weight:900;margin-bottom:20px}
.trait-card h3{margin:0 0 10px;font-size:1.18rem}.trait-card p{margin:0;color:var(--muted);line-height:1.62;font-size:.94rem}

/* FEATURED */
.featured-roast{position:relative;padding:40px;border:1px solid var(--line2);border-radius:28px;background:linear-gradient(135deg,rgba(24,200,255,.08),rgba(255,255,255,.025) 48%,rgba(255,43,157,.08));overflow:hidden;box-shadow:var(--shadow)}
.featured-roast::before{content:"TODAY";position:absolute;right:-12px;top:14px;font-size:5.5rem;font-weight:950;letter-spacing:-.06em;color:rgba(255,255,255,.025);pointer-events:none}
.featured-topline{text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;font-weight:850;color:var(--lime);margin-bottom:20px}
.featured-text{font-size:clamp(1.65rem,3vw,3rem);line-height:1.18;letter-spacing:-.04em;font-weight:860;max-width:1060px;margin-bottom:24px}
.featured-meta{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.featured-badge{padding:9px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:.82rem;color:#c8d0dc}

/* ROAST ARENA */
.arena-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.category-nav{display:flex;gap:8px;flex-wrap:wrap}
.pill{border:1px solid var(--line);border-radius:999px;padding:9px 13px;background:rgba(255,255,255,.025);color:#b8c2cf;cursor:pointer;font-size:.84rem;font-weight:720;transition:.18s}
.pill:hover{background:rgba(255,255,255,.065);color:#fff}.pill.active{color:#081006;background:var(--lime);border-color:var(--lime)}
.pill[data-category="ChatGPT vs Copilot"].active{background:var(--cyan);border-color:var(--cyan);color:#021016}.pill[data-category="Copilot vs ChatGPT"].active{background:var(--pink);border-color:var(--pink);color:#16020e}
.roast-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.roast-card{position:relative;display:flex;flex-direction:column;min-height:190px;padding:22px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.036),rgba(255,255,255,.018));overflow:hidden;transition:.18s}
.roast-card:hover{transform:translateY(-3px);border-color:var(--line2);background:rgba(255,255,255,.05)}
.roast-card[data-category="ChatGPT vs Copilot"]{border-top-color:rgba(24,200,255,.68)}
.roast-card[data-category="Copilot vs ChatGPT"]{border-top-color:rgba(255,43,157,.68)}
.roast-card p{font-size:1.04rem;line-height:1.52;margin:12px 0 20px;font-weight:690;flex:1}.roast-icon{font-size:1.15rem}.roast-category{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-left:8px}.copy-btn{align-self:flex-start;border:1px solid var(--line);background:rgba(255,255,255,.035);color:#c6cfda;border-radius:9px;padding:8px 10px;cursor:pointer;font-size:.78rem;font-weight:700}.copy-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.load-more-wrap{text-align:center;margin-top:26px}

/* WHY */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.why-card{padding:26px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.025)}
.why-card .why-icon{font-size:1.35rem;margin-bottom:18px}.why-card h3{margin:0 0 10px;font-size:1.14rem}.why-card p{margin:0;color:var(--muted);line-height:1.62}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:28px;align-items:start}
.faq-intro{position:sticky;top:105px}
.faq-list{display:grid;gap:10px}
details{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025);overflow:hidden}
summary{list-style:none;cursor:pointer;padding:18px 20px;font-weight:760;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.3rem;color:var(--lime);transition:.18s}details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 20px 20px;margin:0;color:var(--muted);line-height:1.65}

/* FINAL */
.final-claim{padding:76px 30px;margin:40px 0 70px;text-align:center;border:1px solid var(--line);border-radius:28px;background:radial-gradient(circle at 50% 120%,rgba(207,255,35,.11),transparent 45%),rgba(255,255,255,.02)}
.final-claim .mini{font-size:.72rem;text-transform:uppercase;letter-spacing:.23em;color:var(--lime);font-weight:850}.final-claim h2{font-size:clamp(2.2rem,5vw,5rem);letter-spacing:-.06em;line-height:1;margin:14px 0}.final-claim p{margin:0 auto;color:var(--muted);max-width:720px;line-height:1.65}

/* FOOTER */
footer{border-top:1px solid var(--line);padding:28px 0 46px;color:var(--muted);font-size:.86rem}
.footer-row{display:flex;justify-content:space-between;gap:24px;align-items:center;flex-wrap:wrap}.footer-links{display:flex;gap:18px;flex-wrap:wrap}.footer-links a{text-decoration:none;color:var(--muted)}.footer-links a:hover{color:#fff}

.copy-toast{position:fixed;right:20px;bottom:20px;z-index:200;padding:12px 15px;border-radius:12px;border:1px solid var(--line2);background:rgba(6,9,14,.94);box-shadow:0 18px 50px rgba(0,0,0,.35);transform:translateY(16px);opacity:0;pointer-events:none;transition:.2s}.copy-toast.show{opacity:1;transform:translateY(0)}

/* LEGAL */
.legal-wrap{padding:72px 0 80px}.legal-head{margin-bottom:28px}.legal-head p{color:var(--muted);max-width:720px;line-height:1.6}.legal-panel{padding:34px;max-width:980px}.legal-panel h2{font-size:1.35rem;margin:32px 0 10px}.legal-panel h2:first-child{margin-top:0}.legal-panel p{color:#b9c3cf;line-height:1.75}.legal-panel a{color:var(--lime)}

@media (max-width:1180px){
  .hero-grid{grid-template-columns:1fr;gap:32px}.hero-copy{max-width:800px}.battle-stage{max-width:860px;margin:auto}.trait-grid{grid-template-columns:repeat(2,1fr)}.roast-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .site-nav,.header-cta{display:none}.menu-toggle{display:inline-flex}.site-header.open .site-nav{display:flex;width:100%;order:5;flex-direction:column;align-items:stretch;padding-top:8px}.site-header.open .site-nav a{text-align:center;background:rgba(255,255,255,.025)}
  .site-header{flex-wrap:wrap}.hero{padding-top:44px}.hero::before{display:none}.battle-stage{grid-template-columns:1fr;gap:12px}.vs-orb{width:62px;height:62px}.vs-orb::before{top:-45px;bottom:-45px;left:50%;right:auto;width:1px;height:auto;background:linear-gradient(to bottom,var(--cyan),var(--lime),var(--pink))}.fighter{min-height:0}.score-strip{grid-template-columns:1fr}.score-item+ .score-item{border-left:0;border-top:1px solid var(--line)}.duel-machine{grid-template-columns:1fr}.duel-side:first-child{border-radius:25px 25px 0 0}.duel-side:last-child{border-radius:0 0 25px 25px}.duel-center{padding:16px;flex-direction:row;border-left:0;border-right:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.faq-grid{grid-template-columns:1fr}.faq-intro{position:static}.why-grid{grid-template-columns:1fr}.section-head{align-items:start;flex-direction:column}
}
@media (max-width:620px){
  .shell,.site-header{width:min(100% - 22px,1460px)}.site-header{top:8px;margin-top:8px;padding:10px 12px}.brand-word{font-size:1.2rem}.brand-bolt{font-size:1.2rem}.hero h1{font-size:clamp(3rem,15vw,4.6rem)}.hero-copy{font-size:1rem}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%}.hero-stats{grid-template-columns:1fr 1fr}.hero-stat:last-child{grid-column:1/-1}.battle-stage{margin-top:10px}.fighter{padding:22px;border-radius:22px}.ai-mark{height:120px}.ai-mark .core{width:92px;height:92px;font-size:1.8rem;border-radius:26px}.score-strip{margin-top:24px}.section{padding:64px 0}.trait-grid,.roast-grid{grid-template-columns:1fr}.featured-roast{padding:26px}.featured-roast::before{font-size:4rem}.arena-tools{align-items:flex-start}.category-nav{gap:6px}.pill{font-size:.78rem}.legal-panel{padding:24px}.footer-row{align-items:flex-start;flex-direction:column}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}


/* EGO KNOWLEDGE */
.faq-divider{display:flex;align-items:center;gap:12px;margin:24px 0 4px;color:var(--lime);font-size:.72rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.faq-divider::before,.faq-divider::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--line2))}.faq-divider::after{background:linear-gradient(90deg,var(--line2),transparent)}
.ego-more{display:flex;justify-content:center;text-decoration:none;color:#081006;background:var(--lime);border-radius:14px;padding:15px 18px;font-weight:850;margin-top:4px;transition:.18s}.ego-more:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(207,255,35,.14)}
.ego-hero{padding:82px 0 44px;position:relative;overflow:hidden}.ego-hero::before{content:"EGO";position:absolute;right:-3vw;top:-5vw;font-size:26vw;font-weight:950;line-height:1;color:rgba(255,255,255,.018);letter-spacing:-.1em;pointer-events:none}
.ego-hero-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(420px,.75fr);gap:70px;align-items:center}.ego-hero h1{font-size:clamp(3.3rem,7vw,7rem);line-height:.92;letter-spacing:-.07em;margin:0 0 24px;font-weight:950}.ego-hero h1 .accent{color:var(--lime);text-shadow:0 0 34px rgba(207,255,35,.15)}
.ego-orbit{width:min(480px,100%);aspect-ratio:1;position:relative;margin:auto;border-radius:50%;border:1px solid var(--line);background:radial-gradient(circle,rgba(207,255,35,.12),rgba(24,200,255,.03) 36%,rgba(255,255,255,.015) 37%,transparent 65%);box-shadow:inset 0 0 80px rgba(207,255,35,.025)}
.ego-orbit::before,.ego-orbit::after{content:"";position:absolute;inset:14%;border:1px dashed rgba(255,255,255,.13);border-radius:50%;transform:rotate(20deg)}.ego-orbit::after{inset:29%;transform:rotate(-25deg)}
.ego-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:142px;height:142px;border-radius:38px;display:grid;place-items:center;font-size:2.2rem;font-weight:950;color:#071006;background:var(--lime);box-shadow:0 0 60px rgba(207,255,35,.28);letter-spacing:-.05em}
.orbit{position:absolute;padding:10px 13px;border:1px solid var(--line2);border-radius:999px;background:rgba(7,11,17,.94);font-size:.78rem;font-weight:800;box-shadow:0 14px 28px rgba(0,0,0,.22)}.o1{left:3%;top:18%;color:var(--cyan)}.o2{right:0;top:28%;color:var(--pink)}.o3{left:7%;bottom:18%;color:var(--lime)}.o4{right:5%;bottom:15%;color:#fff}
.ego-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.ego-story{padding:34px;max-width:1060px}.ego-story p{font-size:1.06rem;line-height:1.8;color:#b8c3cf;margin:0}.ego-story p+p{margin-top:18px}.ego-story strong{color:#fff}
@media (max-width:1000px){.ego-hero-grid{grid-template-columns:1fr}.ego-orbit{max-width:420px}.ego-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.ego-hero{padding-top:54px}.ego-cards{grid-template-columns:1fr}.ego-orbit{max-width:330px}.ego-core{width:108px;height:108px;border-radius:30px;font-size:1.7rem}.orbit{font-size:.68rem;padding:8px 10px}}

/* =========================================================
   ARENA VISUAL UPGRADE v1.2 — closer to the concept artwork
   ========================================================= */
.hero{padding-top:54px}
.hero-grid{grid-template-columns:minmax(0,.78fr) minmax(700px,1.22fr);gap:36px}
.battle-stage{min-height:560px;isolation:isolate}
.battle-stage::before{
  inset:3% -7%;
  background:
    radial-gradient(circle at 50% 50%,rgba(207,255,35,.16),transparent 17%),
    radial-gradient(circle at 28% 45%,rgba(24,200,255,.14),transparent 28%),
    radial-gradient(circle at 72% 45%,rgba(255,43,157,.14),transparent 28%);
  filter:blur(10px);
  animation:arenaBreath 4.8s ease-in-out infinite;
}
.battle-stage::after{
  content:"";
  position:absolute;
  inset:-8% -4%;
  z-index:-3;
  pointer-events:none;
  background:
    linear-gradient(112deg,transparent 0 23%,rgba(24,200,255,.15) 23.25%,transparent 23.6% 100%),
    linear-gradient(68deg,transparent 0 76%,rgba(255,43,157,.15) 76.25%,transparent 76.6% 100%);
  opacity:.55;
  animation:lightSweep 8s ease-in-out infinite alternate;
}
.fighter{
  min-height:500px;
  padding:22px 25px 26px;
  background:
    linear-gradient(180deg,rgba(10,18,27,.96),rgba(5,9,15,.98)),
    radial-gradient(circle at 50% 25%,rgba(255,255,255,.06),transparent 45%);
}
.fighter::before{
  z-index:-3;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:28px 28px;
  animation:gridDrift 16s linear infinite;
}
.fighter .fighter-label{position:relative;z-index:4;margin-bottom:4px}
.fighter h2,.fighter-role,.fighter p,.fighter-score{position:relative;z-index:4}
.fighter.chatgpt{animation:cyanBorderPulse 3.8s ease-in-out infinite}
.fighter.copilot{animation:pinkBorderPulse 4.2s ease-in-out infinite}
.fighter.chatgpt::after,.fighter.copilot::after{width:380px;height:380px;top:10px;opacity:.44;animation:haloFloat 5s ease-in-out infinite alternate}

.ai-head{
  --head-color:var(--cyan);
  position:relative;
  height:250px;
  margin:-2px -2px 6px;
  display:grid;
  place-items:center;
  color:var(--head-color);
  perspective:800px;
  overflow:hidden;
}
.ai-head-copilot{--head-color:var(--pink)}
.ai-head svg{
  width:min(100%,255px);
  height:255px;
  overflow:visible;
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--head-color) 52%,transparent)) drop-shadow(0 0 30px color-mix(in srgb,var(--head-color) 25%,transparent));
  animation:headFloat 4.2s ease-in-out infinite;
}
.ai-head-copilot svg{animation-delay:-1.3s}
.head-halo{
  position:absolute;
  width:220px;height:220px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--head-color) 70%,transparent);
  box-shadow:0 0 42px color-mix(in srgb,var(--head-color) 26%,transparent),inset 0 0 42px color-mix(in srgb,var(--head-color) 8%,transparent);
  animation:haloSpin 10s linear infinite;
}
.head-halo::before,.head-halo::after{
  content:"";position:absolute;border-radius:50%;inset:14px;border:1px dashed color-mix(in srgb,var(--head-color) 42%,transparent)
}
.head-halo::after{inset:30px;border-style:solid;opacity:.38;animation:haloPulse 2.8s ease-in-out infinite}
.head-grid path{fill:none;stroke:color-mix(in srgb,var(--head-color) 30%,transparent);stroke-width:1;stroke-dasharray:6 9;animation:dashRun 9s linear infinite}
.head-shell{fill:rgba(8,16,24,.97);stroke:currentColor;stroke-width:2.3}
.head-face{fill:color-mix(in srgb,var(--head-color) 10%,#081018);stroke:color-mix(in srgb,var(--head-color) 66%,white 6%);stroke-width:1.6}
.head-jaw,.head-temple{fill:color-mix(in srgb,var(--head-color) 6%,#071019);stroke:color-mix(in srgb,var(--head-color) 48%,transparent);stroke-width:1.4}
.head-eye-socket{fill:#02070b;stroke:color-mix(in srgb,var(--head-color) 78%,white 8%);stroke-width:1.5}
.head-eye{fill:currentColor;stroke:none;filter:drop-shadow(0 0 7px currentColor) drop-shadow(0 0 18px currentColor);transform-box:fill-box;transform-origin:center;animation:eyeBlink 5.4s steps(1,end) infinite}
.ai-head-copilot .head-eye{animation-delay:-2.1s}
.head-nose,.head-mouth{fill:none;stroke:color-mix(in srgb,var(--head-color) 63%,white 5%);stroke-width:1.5}
.circuit{fill:none;stroke:currentColor;stroke-width:1.5;stroke-dasharray:5 8;opacity:.62;animation:circuitFlow 3.4s linear infinite}
.c2{animation-delay:-.8s}.c3{animation-delay:-1.6s}.c4{animation-delay:-2.4s}
.node{fill:currentColor;opacity:.75;filter:drop-shadow(0 0 7px currentColor);animation:nodeBlink 2.6s ease-in-out infinite}
.n2{animation-delay:-.6s}.n3{animation-delay:-1.2s}.n4{animation-delay:-1.8s}
.head-scan{
  position:absolute;
  left:9%;right:9%;top:12%;height:3px;
  background:linear-gradient(90deg,transparent,var(--head-color),transparent);
  box-shadow:0 0 16px var(--head-color);
  opacity:.65;
  animation:headScan 3.7s ease-in-out infinite;
  pointer-events:none;
}
.ai-head-copilot .head-scan{animation-delay:-1.4s}

.vs-orb{
  width:96px;height:96px;
  font-size:0;
  background:radial-gradient(circle at 50% 45%,#121a10 0,#070b0b 48%,#030508 75%);
  border:2px solid rgba(207,255,35,.8);
  box-shadow:0 0 0 8px rgba(255,255,255,.02),0 0 36px rgba(207,255,35,.32),inset 0 0 28px rgba(207,255,35,.06);
  animation:vsPulse 1.9s ease-in-out infinite;
}
.vs-orb span{font-size:1.7rem;font-weight:950;color:var(--lime);text-shadow:0 0 13px rgba(207,255,35,.9)}
.vs-orb::after{
  content:"";position:absolute;inset:-16px;border:1px solid rgba(207,255,35,.25);border-radius:50%;animation:vsRing 2.2s ease-out infinite
}
.vs-orb::before{left:-68px;right:-68px;height:2px;box-shadow:0 0 13px rgba(207,255,35,.28);animation:beamFlicker 2.7s linear infinite}

.arena-fx{position:absolute;inset:0;pointer-events:none;z-index:7;overflow:hidden}
.arena-fx span{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px currentColor;opacity:0;animation:spark 4.8s linear infinite}
.arena-fx span:nth-child(3n+1){color:var(--cyan);background:currentColor}
.arena-fx span:nth-child(3n+2){color:var(--pink);background:currentColor}
.arena-fx span:nth-child(1){left:47%;top:18%;animation-delay:-.2s}.arena-fx span:nth-child(2){left:51%;top:12%;animation-delay:-1.1s}.arena-fx span:nth-child(3){left:49%;top:31%;animation-delay:-2s}.arena-fx span:nth-child(4){left:54%;top:42%;animation-delay:-3.1s}.arena-fx span:nth-child(5){left:45%;top:55%;animation-delay:-1.7s}.arena-fx span:nth-child(6){left:52%;top:66%;animation-delay:-.9s}.arena-fx span:nth-child(7){left:48%;top:76%;animation-delay:-3.8s}.arena-fx span:nth-child(8){left:55%;top:25%;animation-delay:-2.8s}.arena-fx span:nth-child(9){left:43%;top:37%;animation-delay:-4.2s}.arena-fx span:nth-child(10){left:50%;top:49%;animation-delay:-2.4s}.arena-fx span:nth-child(11){left:46%;top:68%;animation-delay:-.5s}.arena-fx span:nth-child(12){left:53%;top:82%;animation-delay:-3.4s}

.header-cta,.btn-primary{animation:ctaGlow 4.6s ease-in-out infinite}
.brand-bolt{animation:boltFlash 3.8s steps(1,end) infinite}
.fighter-score i{position:relative;overflow:hidden}
.fighter-score i::after{content:"";position:absolute;inset:0;transform:translateX(-140%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);animation:meterSweep 3.1s ease-in-out infinite}
.fighter-score i:nth-child(2)::after{animation-delay:.15s}.fighter-score i:nth-child(3)::after{animation-delay:.3s}.fighter-score i:nth-child(4)::after{animation-delay:.45s}

@keyframes eyeBlink{0%,7%,9%,51%,53%,100%{transform:scaleY(1)}8%,52%{transform:scaleY(.08)}}
@keyframes headFloat{0%,100%{transform:translateY(2px) rotate(-.7deg)}50%{transform:translateY(-7px) rotate(.7deg)}}
@keyframes headScan{0%{top:12%;opacity:0}12%{opacity:.8}55%{opacity:.45}88%{opacity:.75}100%{top:83%;opacity:0}}
@keyframes haloSpin{to{transform:rotate(360deg)}}
@keyframes haloPulse{0%,100%{transform:scale(.96);opacity:.2}50%{transform:scale(1.05);opacity:.6}}
@keyframes dashRun{to{stroke-dashoffset:-180}}
@keyframes circuitFlow{to{stroke-dashoffset:-52}}
@keyframes nodeBlink{0%,100%{opacity:.28;transform:scale(.72)}45%{opacity:1;transform:scale(1.3)}}
@keyframes vsPulse{0%,100%{transform:scale(.97);box-shadow:0 0 0 8px rgba(255,255,255,.02),0 0 28px rgba(207,255,35,.22),inset 0 0 28px rgba(207,255,35,.06)}50%{transform:scale(1.05);box-shadow:0 0 0 9px rgba(207,255,35,.025),0 0 52px rgba(207,255,35,.46),inset 0 0 34px rgba(207,255,35,.11)}}
@keyframes vsRing{0%{transform:scale(.7);opacity:.8}100%{transform:scale(1.45);opacity:0}}
@keyframes beamFlicker{0%,18%,21%,56%,60%,100%{opacity:.7}19%,58%{opacity:.18}}
@keyframes spark{0%{transform:translate(0,20px) scale(.3);opacity:0}15%{opacity:1}70%{opacity:.7}100%{transform:translate(var(--sx,18px),-90px) scale(1.4);opacity:0}}
@keyframes ctaGlow{0%,100%{filter:none}50%{filter:drop-shadow(0 0 9px rgba(207,255,35,.18))}}
@keyframes boltFlash{0%,8%,10%,55%,57%,100%{opacity:1}9%,56%{opacity:.25}}
@keyframes meterSweep{0%,45%{transform:translateX(-140%)}70%,100%{transform:translateX(140%)}}
@keyframes arenaBreath{0%,100%{opacity:.65;transform:scale(.98)}50%{opacity:1;transform:scale(1.04)}}
@keyframes lightSweep{0%{transform:translateX(-1.5%) scale(1)}100%{transform:translateX(1.5%) scale(1.03)}}
@keyframes gridDrift{to{background-position:28px 28px}}
@keyframes haloFloat{0%{transform:translateY(-6px) scale(.96)}100%{transform:translateY(8px) scale(1.05)}}
@keyframes cyanBorderPulse{0%,100%{border-color:rgba(24,200,255,.42);box-shadow:0 28px 90px rgba(0,0,0,.32),inset 0 0 0 1px rgba(24,200,255,.05),0 0 34px rgba(24,200,255,.08)}50%{border-color:rgba(24,200,255,.72);box-shadow:0 28px 90px rgba(0,0,0,.32),inset 0 0 0 1px rgba(24,200,255,.09),0 0 52px rgba(24,200,255,.17)}}
@keyframes pinkBorderPulse{0%,100%{border-color:rgba(255,43,157,.42);box-shadow:0 28px 90px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,43,157,.05),0 0 34px rgba(255,43,157,.08)}50%{border-color:rgba(255,43,157,.72);box-shadow:0 28px 90px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,43,157,.09),0 0 52px rgba(255,43,157,.17)}}

@media (max-width:1180px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .battle-stage{max-width:960px}
}
@media (max-width:860px){
  .battle-stage{min-height:0}
  .arena-fx{display:none}
  .ai-head{height:205px}
  .ai-head svg{height:205px;width:205px}
  .head-halo{width:175px;height:175px}
}
@media (max-width:620px){
  .ai-head{height:176px}
  .ai-head svg{height:176px;width:176px}
  .head-halo{width:150px;height:150px}
  .fighter{padding:20px;min-height:0}
}


/* v1.3 – Schlagfertigkeits-Konfigurator */
.generator-teaser{display:grid;grid-template-columns:1.35fr .65fr;gap:18px;padding:1px;border-radius:28px;background:linear-gradient(110deg,rgba(207,255,35,.65),rgba(24,200,255,.3) 48%,rgba(255,43,157,.48));box-shadow:var(--shadow)}
.generator-teaser>div{background:linear-gradient(180deg,#091019,#070c13);padding:34px;border-radius:27px}
.generator-teaser h2{font-size:clamp(2rem,4vw,4rem);margin:10px 0 14px;letter-spacing:-.055em;line-height:1}
.generator-teaser p{color:var(--muted);line-height:1.65;max-width:780px;margin:0}
.generator-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.generator-tags span{border:1px solid var(--line);border-radius:999px;padding:8px 11px;color:#cbd4df;background:rgba(255,255,255,.03);font-size:.78rem;font-weight:750}
.generator-teaser-action{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.generator-teaser-action .teaser-icon{font-size:2.5rem;color:var(--lime);filter:drop-shadow(0 0 18px rgba(207,255,35,.42));animation:boltBlink 3.2s ease-in-out infinite}.generator-teaser-action strong{font-size:1.35rem;margin:10px 0}.generator-teaser-action .btn{margin-top:22px}

.config-hero{padding:82px 0 26px}.config-hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:28px;align-items:center}.config-hero h1{font-size:clamp(3.2rem,7vw,7.4rem);line-height:.88;letter-spacing:-.075em;margin:14px 0 20px}.config-hero h1 span{color:var(--lime);text-shadow:0 0 30px rgba(207,255,35,.18)}.config-hero p{font-size:1.1rem;line-height:1.65;color:var(--muted);max-width:760px}.config-example{border:1px solid var(--line2);border-radius:28px;padding:28px;background:linear-gradient(145deg,rgba(24,200,255,.07),rgba(255,255,255,.025) 50%,rgba(255,43,157,.08));box-shadow:var(--shadow);position:relative;overflow:hidden}.config-example::before{content:"KONTER";position:absolute;right:-8px;top:-10px;font-size:5rem;font-weight:950;color:rgba(255,255,255,.025);letter-spacing:-.06em}.example-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;color:var(--cyan);font-weight:900}.example-quote{font-size:1.35rem;font-weight:800;line-height:1.4;margin:14px 0}.example-answer{border-left:3px solid var(--lime);padding:13px 0 13px 16px;color:#e9f0f7;line-height:1.55}.config-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.config-badges span{padding:7px 10px;border:1px solid var(--line);border-radius:999px;font-size:.74rem;color:var(--muted)}

.config-shell{display:grid;grid-template-columns:1fr .9fr;gap:18px;align-items:start}.config-panel,.result-panel{border:1px solid var(--line);border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.036),rgba(255,255,255,.018));padding:28px;box-shadow:var(--shadow)}.result-panel{position:sticky;top:105px;border-color:rgba(207,255,35,.23)}.config-panel h2,.result-panel h2{font-size:1.55rem;margin:0 0 6px;letter-spacing:-.03em}.config-sub{color:var(--muted);line-height:1.6;margin:0 0 24px}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:grid;gap:8px;margin-bottom:14px}.field.full{grid-column:1/-1}.field label{font-size:.75rem;font-weight:850;text-transform:uppercase;letter-spacing:.1em;color:#b9c4cf}.field textarea,.field select,.field input[type="text"]{width:100%;border:1px solid var(--line2);background:#07101a;color:#f5f7fa;border-radius:14px;padding:14px 15px;font:inherit;outline:none}.field textarea{min-height:112px;resize:vertical}.field textarea:focus,.field select:focus,.field input:focus{border-color:rgba(207,255,35,.55);box-shadow:0 0 0 3px rgba(207,255,35,.06)}.range-wrap{border:1px solid var(--line);background:rgba(255,255,255,.02);border-radius:14px;padding:14px}.range-top{display:flex;justify-content:space-between;gap:10px;font-size:.82rem}.range-top strong{color:var(--lime)}.range-wrap input[type="range"]{width:100%;accent-color:var(--lime);margin-top:10px}.range-scale{display:flex;justify-content:space-between;color:#647181;font-size:.68rem;margin-top:3px}.config-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}.config-actions .btn{cursor:pointer}.prompt-output{width:100%;min-height:340px;resize:vertical;background:#05090f;color:#dce6ef;border:1px solid var(--line);border-radius:16px;padding:18px;font:500 .86rem/1.62 ui-monospace,SFMono-Regular,Consolas,monospace;outline:none;white-space:pre-wrap}.prompt-output:focus{border-color:rgba(24,200,255,.45)}.result-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.result-note{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:14px;border-radius:14px;background:rgba(207,255,35,.055);border:1px solid rgba(207,255,35,.14);color:#b9c6d0;font-size:.84rem;line-height:1.55}.result-note strong{color:var(--lime)}
.prompt-mini{margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.prompt-mini div{padding:13px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}.prompt-mini strong{display:block;color:#fff;font-size:.82rem}.prompt-mini span{display:block;color:var(--muted);font-size:.74rem;margin-top:4px}
.config-faq{display:grid;grid-template-columns:.65fr 1.35fr;gap:26px;align-items:start}.config-faq .faq-intro{position:sticky;top:105px}
@media(max-width:980px){.generator-teaser,.config-hero-grid,.config-shell,.config-faq{grid-template-columns:1fr}.result-panel,.config-faq .faq-intro{position:static}.prompt-mini{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.generator-teaser>div,.config-panel,.result-panel,.config-example{padding:22px}.field-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.prompt-mini{grid-template-columns:1fr}.config-hero{padding-top:52px}.config-hero h1{font-size:clamp(3rem,15vw,5rem)}}


/* GOOGLE OBSERVER / SCHIEDSRICHTER */
.observer-section{position:relative;overflow:hidden;padding-top:74px;padding-bottom:74px;background:linear-gradient(180deg,rgba(255,255,255,.008),rgba(207,255,35,.018),rgba(255,255,255,.008))}
.observer-section::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 78% 45%,rgba(207,255,35,.08),transparent 28%),linear-gradient(90deg,transparent 0 49.95%,rgba(207,255,35,.09) 50%,transparent 50.05%);opacity:.9}
.observer-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);gap:42px;align-items:center;position:relative}
.observer-card{position:relative;border:1px solid rgba(207,255,35,.22);border-radius:28px;padding:38px;background:linear-gradient(145deg,rgba(11,17,25,.96),rgba(7,11,17,.86));box-shadow:0 30px 90px rgba(0,0,0,.28),0 0 55px rgba(207,255,35,.045);overflow:hidden}
.observer-card::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-120px;top:-110px;background:rgba(207,255,35,.12);filter:blur(38px)}
.observer-badge{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.035);font-size:.76rem;font-weight:850;text-transform:uppercase;letter-spacing:.12em;color:#dce6f0;margin-bottom:22px}
.observer-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 14px rgba(207,255,35,.75);animation:observerDot 2.2s ease-in-out infinite}
.observer-card h2{font-size:clamp(2.6rem,5vw,5.1rem);line-height:.94;letter-spacing:-.06em;margin:0 0 24px;max-width:760px}
.observer-card h2 span{color:var(--lime);text-shadow:0 0 28px rgba(207,255,35,.12)}
.observer-card p{color:#aeb9c7;line-height:1.72;font-size:1.02rem;max-width:760px;margin:0 0 15px}
.observer-card .observer-note{color:#dce3ea;font-weight:650}
.observer-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.observer-visual{display:grid;place-items:center;gap:18px;min-height:460px;position:relative}
.observer-radar{width:min(390px,82vw);aspect-ratio:1;border-radius:50%;position:relative;display:grid;place-items:center;background:radial-gradient(circle,rgba(207,255,35,.09) 0 10%,rgba(207,255,35,.025) 34%,transparent 66%),repeating-radial-gradient(circle,rgba(207,255,35,.13) 0 1px,transparent 1px 58px);box-shadow:inset 0 0 70px rgba(207,255,35,.035),0 0 70px rgba(207,255,35,.04)}
.observer-radar::before,.observer-radar::after{content:"";position:absolute;background:linear-gradient(90deg,transparent,rgba(207,255,35,.22),transparent)}
.observer-radar::before{width:100%;height:1px}.observer-radar::after{height:100%;width:1px;background:linear-gradient(180deg,transparent,rgba(207,255,35,.22),transparent)}
.radar-ring{position:absolute;border:1px solid rgba(207,255,35,.2);border-radius:50%;animation:radarPulse 4.6s ease-in-out infinite}
.radar-ring.r1{inset:9%}.radar-ring.r2{inset:25%;animation-delay:-1.4s}.radar-ring.r3{inset:40%;animation-delay:-2.8s}
.radar-sweep{position:absolute;inset:4%;border-radius:50%;background:conic-gradient(from 0deg,rgba(207,255,35,.35),rgba(207,255,35,.08) 8%,transparent 19% 100%);filter:blur(.2px);animation:radarSweep 5.8s linear infinite;opacity:.72}
.radar-core{position:relative;z-index:3;width:118px;height:118px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(207,255,35,.55);background:#071008;color:var(--lime);font-size:2.3rem;font-weight:950;letter-spacing:-.06em;box-shadow:0 0 0 12px rgba(207,255,35,.035),0 0 42px rgba(207,255,35,.18),inset 0 0 24px rgba(207,255,35,.08);animation:observerCore 3.8s ease-in-out infinite}
.radar-node{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 15px rgba(207,255,35,.8);z-index:4;animation:nodeBlink 2.6s ease-in-out infinite}
.radar-node.n1{left:18%;top:28%}.radar-node.n2{right:15%;top:38%;animation-delay:-.8s}.radar-node.n3{left:34%;bottom:13%;animation-delay:-1.4s}.radar-node.n4{right:28%;bottom:24%;animation-delay:-2s}
.observer-caption{text-align:center;display:grid;gap:6px}.observer-caption strong{font-size:1.16rem}.observer-caption span{color:var(--muted);font-size:.9rem}
.observer-role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px;position:relative}
.observer-role{border:1px solid var(--line);border-radius:18px;padding:18px 20px;background:rgba(255,255,255,.025);display:grid;gap:3px;position:relative;overflow:hidden}
.observer-role::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:currentColor;box-shadow:0 0 20px currentColor}
.observer-role small{text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-size:.66rem}.observer-role strong{font-size:1.06rem}.observer-role span{color:#9da9b8;font-size:.84rem}.observer-role.cyan{color:var(--cyan)}.observer-role.lime{color:var(--lime)}.observer-role.violet{color:var(--violet)}.observer-role.pink{color:var(--pink)}
.observer-footnote{margin-top:10px;color:#748091;font-size:.73rem;text-align:center}
@keyframes radarSweep{to{transform:rotate(360deg)}}
@keyframes radarPulse{0%,100%{opacity:.32;transform:scale(.98)}50%{opacity:.82;transform:scale(1.025)}}
@keyframes observerCore{0%,100%{transform:scale(.97);box-shadow:0 0 0 10px rgba(207,255,35,.025),0 0 35px rgba(207,255,35,.12)}50%{transform:scale(1.025);box-shadow:0 0 0 16px rgba(207,255,35,.04),0 0 54px rgba(207,255,35,.23)}}
@keyframes observerDot{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes nodeBlink{0%,70%,100%{opacity:.22;transform:scale(.75)}78%{opacity:1;transform:scale(1.35)}}
@media(max-width:980px){.observer-grid{grid-template-columns:1fr}.observer-visual{min-height:380px}.observer-role-grid{grid-template-columns:1fr}}
@media(max-width:620px){.observer-card{padding:25px}.observer-visual{min-height:320px}.observer-radar{width:min(310px,88vw)}.radar-core{width:92px;height:92px;font-size:1.8rem}.observer-actions{flex-direction:column}.observer-actions .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.observer-dot,.radar-ring,.radar-sweep,.radar-core,.radar-node{animation:none!important}}


/* CLAUDE · DIE EHRLICHE SEKUNDE */
.observer-role-grid.four{grid-template-columns:repeat(4,1fr)}
.claude-entry{
  margin-top:28px;
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:22px;
  padding:30px;
  border:1px solid rgba(167,139,250,.24);
  border-radius:28px;
  background:
    radial-gradient(circle at 12% 20%,rgba(167,139,250,.11),transparent 28rem),
    linear-gradient(145deg,rgba(13,15,25,.95),rgba(8,11,17,.88));
  box-shadow:0 26px 80px rgba(0,0,0,.26),0 0 54px rgba(167,139,250,.035);
  position:relative;
  overflow:hidden;
}
.claude-entry::after{content:"";position:absolute;right:-90px;bottom:-120px;width:270px;height:270px;border-radius:50%;background:rgba(167,139,250,.09);filter:blur(38px);pointer-events:none}
.claude-copy,.claude-roasts{position:relative;z-index:2}
.claude-kicker{display:inline-flex;padding:7px 11px;border:1px solid rgba(167,139,250,.27);border-radius:999px;color:#d9ccff;background:rgba(167,139,250,.055);font-size:.69rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}
.claude-copy h3{margin:0 0 16px;font-size:clamp(2rem,3.6vw,3.8rem);line-height:1;letter-spacing:-.05em;max-width:760px}
.claude-copy p{margin:0 0 14px;color:#aeb9c7;line-height:1.68}
.claude-copy strong{color:#eee9ff}
.claude-note{color:#ddd5f7!important;font-weight:700}
.claude-roasts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.claude-roasts article{border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:18px;background:rgba(255,255,255,.025);min-height:145px;transition:.22s ease}
.claude-roasts article:hover{transform:translateY(-3px);border-color:rgba(167,139,250,.32);box-shadow:0 14px 34px rgba(0,0,0,.2)}
.claude-roasts article.self{border-color:rgba(167,139,250,.26);background:rgba(167,139,250,.045)}
.claude-roasts small{display:block;color:#d6c9ff;font-weight:900;letter-spacing:.07em;text-transform:uppercase;margin-bottom:9px}
.claude-roasts p{margin:0;color:#c3ccd7;line-height:1.55;font-size:.92rem}
@media(max-width:1080px){.observer-role-grid.four{grid-template-columns:1fr 1fr}.claude-entry{grid-template-columns:1fr}.claude-roasts article{min-height:0}}
@media(max-width:620px){.observer-role-grid.four,.claude-roasts{grid-template-columns:1fr}.claude-entry{padding:22px}.claude-copy h3{font-size:2.15rem}}


/* v1.7 — Die KIs übernehmen */
.takeover-section{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.006),rgba(18,13,31,.42),rgba(255,255,255,.006));border-top:1px solid rgba(255,255,255,.035);border-bottom:1px solid rgba(255,255,255,.035)}
.takeover-section::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 14% 16%,rgba(46,211,255,.07),transparent 25%),radial-gradient(circle at 84% 12%,rgba(167,139,250,.08),transparent 26%),radial-gradient(circle at 50% 88%,rgba(207,255,35,.055),transparent 28%)}
.takeover-head{position:relative}.takeover-head h2{font-size:clamp(3rem,6vw,6.2rem);letter-spacing:-.065em;line-height:.92}
.takeover-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
.takeover-card{position:relative;border:1px solid var(--line);border-radius:24px;padding:28px;background:linear-gradient(145deg,rgba(10,15,23,.96),rgba(7,10,16,.88));overflow:hidden;box-shadow:0 22px 58px rgba(0,0,0,.22)}
.takeover-card::after{content:"";position:absolute;inset:auto -70px -100px auto;width:230px;height:230px;border-radius:50%;filter:blur(40px);opacity:.55;pointer-events:none}
.takeover-card.google{border-color:rgba(207,255,35,.2)}.takeover-card.google::after{background:rgba(207,255,35,.12)}
.takeover-card.claude{border-color:rgba(167,139,250,.24)}.takeover-card.claude::after{background:rgba(167,139,250,.14)}
.takeover-card.loop{grid-column:1/-1;border-color:rgba(46,211,255,.18);background:linear-gradient(110deg,rgba(8,15,22,.96),rgba(12,9,23,.9))}.takeover-card.loop::after{background:rgba(46,211,255,.11)}
.takeover-top{display:flex;gap:15px;align-items:center;margin-bottom:20px;position:relative;z-index:2}.takeover-top>div{display:grid;gap:4px}.takeover-top small{color:#8190a0;text-transform:uppercase;font-weight:850;letter-spacing:.12em;font-size:.67rem}.takeover-top strong{font-size:1.13rem;color:#f3f6fa}
.takeover-orb{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font-weight:950;font-size:1.15rem;border:1px solid rgba(255,255,255,.1);background:#0a1018;box-shadow:inset 0 0 24px rgba(255,255,255,.025)}
.google .takeover-orb{color:var(--lime);box-shadow:0 0 28px rgba(207,255,35,.08),inset 0 0 24px rgba(207,255,35,.05)}.claude .takeover-orb{color:#c7b4ff;box-shadow:0 0 28px rgba(167,139,250,.11),inset 0 0 24px rgba(167,139,250,.06)}.loop .takeover-orb{color:var(--cyan)}
.takeover-card p{position:relative;z-index:2;color:#aeb9c7;line-height:1.68;margin:0 0 18px}.takeover-card blockquote{position:relative;z-index:2;margin:18px 0;padding:15px 17px;border-left:3px solid currentColor;background:rgba(255,255,255,.025);border-radius:0 14px 14px 0;color:#eef2f7;font-weight:760}.google blockquote{color:#e8ffc1;border-left-color:var(--lime)}.claude blockquote{color:#e5ddff;border-left-color:#a78bfa}
.takeover-tag{display:inline-flex;position:relative;z-index:2;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:7px 10px;color:#8e9aa8;background:rgba(255,255,255,.025);font-size:.72rem;font-weight:800}
.meta-loop{display:flex;gap:10px;align-items:center;flex-wrap:wrap;position:relative;z-index:2;margin-top:18px}.meta-loop span{border:1px solid rgba(46,211,255,.2);background:rgba(46,211,255,.045);color:#caf5ff;border-radius:999px;padding:9px 13px;font-size:.78rem;font-weight:850}.meta-loop b{color:#647181}
.takeover-lab{position:relative;margin-top:16px;border:1px solid rgba(207,255,35,.18);border-radius:26px;padding:28px;display:grid;grid-template-columns:.92fr 1.08fr;gap:28px;align-items:center;background:linear-gradient(120deg,rgba(207,255,35,.035),rgba(255,255,255,.018))}
.takeover-lab h3{font-size:clamp(1.7rem,3vw,2.8rem);margin:8px 0 12px;letter-spacing:-.04em}.takeover-lab p{margin:0;color:#9eabb9;line-height:1.6}.takeover-prompt{border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:18px;background:rgba(3,7,12,.55);display:grid;gap:14px}.takeover-prompt code{white-space:normal;color:#cbd5df;line-height:1.55;font-family:inherit;font-size:.9rem}.takeover-prompt .btn{justify-self:start}
.takeover-note{position:relative;margin:18px 0 0;color:#6f7b89!important;font-size:.75rem!important;line-height:1.55!important}
@media(max-width:860px){.takeover-grid,.takeover-lab{grid-template-columns:1fr}.takeover-card.loop{grid-column:auto}.takeover-prompt .btn{width:100%}}
@media(max-width:560px){.takeover-card,.takeover-lab{padding:21px}.takeover-head h2{font-size:3rem}.meta-loop{gap:6px}.meta-loop span{padding:7px 9px;font-size:.7rem}}


/* v1.8 — Startseiten-Rhythmus + ausfallsichere Roast-Anzeige */
/* Alle 480 Roasts bleiben im HTML. Sichtbar sind zunächst nur 18. */
.roast-card.roast-hidden{display:none}

/* Mehr Ruhe zwischen den Hauptakten der Arena, ohne das Design umzubauen. */
.hero{padding-bottom:62px}
#schiedsrichter{padding-top:86px;padding-bottom:86px}
#kis-uebernehmen{padding-top:94px;padding-bottom:94px}
#duell{padding-top:108px;padding-bottom:88px}
#vergleich{padding-top:76px;padding-bottom:78px}
#featured{padding-top:46px;padding-bottom:54px}
#roasts{padding-top:72px;padding-bottom:106px}
#roasts .section-head{margin-bottom:34px}
#roasts .arena-tools{margin-bottom:24px}
#roasts .load-more-wrap{margin-top:34px}

/* Das Tool nach der Arena bewusst als eigenen starken Block freistellen. */
.quick-config{padding-top:96px;padding-bottom:92px;position:relative}
.quick-config::before{content:"";position:absolute;left:50%;top:20px;width:min(760px,70vw);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(207,255,35,.34),transparent)}
.quick-config .generator-teaser{box-shadow:0 30px 100px rgba(0,0,0,.34),0 0 54px rgba(207,255,35,.045)}
.quick-config + .section{padding-top:76px;padding-bottom:82px}
#faq{padding-top:92px;padding-bottom:50px}
#faq .faq-grid{gap:42px}
#faq .faq-intro .section-lead{max-width:520px}
.final-claim{margin-top:34px}

@media(max-width:860px){
  .hero{padding-bottom:52px}
  #schiedsrichter,#kis-uebernehmen,#duell,#vergleich,#roasts,.quick-config,#faq{padding-top:72px;padding-bottom:72px}
  #featured{padding-top:38px;padding-bottom:42px}
  .quick-config + .section{padding-top:62px;padding-bottom:68px}
  #faq .faq-grid{gap:30px}
}

@media(max-width:620px){
  .hero{padding-bottom:46px}
  #schiedsrichter,#kis-uebernehmen,#duell,#vergleich,#roasts,.quick-config,#faq{padding-top:58px;padding-bottom:58px}
  #featured{padding-top:30px;padding-bottom:34px}
  #roasts .section-head{margin-bottom:24px}
  #roasts .arena-tools{margin-bottom:18px}
  #roasts .load-more-wrap{margin-top:26px}
  .quick-config::before{top:12px;width:78vw}
  .quick-config + .section{padding-top:54px;padding-bottom:58px}
  .final-claim{margin-top:20px}
}

/* v1.9 — letzter visueller Feinschliff */
/* Mehr Luft zwischen Roast-Gitter, Nachladen und dem folgenden Tool. */
#roasts .load-more-wrap{margin-top:44px;margin-bottom:12px}

/* Konfigurator-Teaser minimal großzügiger, ohne Proportionen oder Farben zu ändern. */
.quick-config .generator-teaser>div{padding-top:40px;padding-bottom:40px}
.quick-config .generator-teaser-action .btn{margin-top:26px}

/* FAQ-Einstieg etwas ruhiger gegen die Accordion-Spalte absetzen. */
#faq .faq-intro{padding-right:14px}
#faq .faq-intro .section-lead{line-height:1.72}

@media(max-width:640px){
  #roasts .load-more-wrap{margin-top:32px;margin-bottom:4px}
  .quick-config .generator-teaser>div{padding:24px 22px}
  .quick-config .generator-teaser-action .btn{margin-top:22px}
  #faq .faq-intro{padding-right:0}
}