:root {
  --bg:#0F1218;
  --panel:#171B23;
  --soft:#1C2130;
  --muted:#A4AEC1;
  --text:#F1F4FF;
  --gold:#E4B34C;
  --purple:#6E61FF;
  --line:#2A3042;
  --shadow:0 20px 60px rgba(0,0,0,.35);
}

/* Base */
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 520px at 90% -20%, rgba(110,97,255,.10), transparent 60%),
    radial-gradient(1000px 520px at 10% -10%, rgba(228,179,76,.08), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Ubuntu;
  line-height:1.6;
}
a{color:#cdd7ff;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block;border:0}
.container{width:min(1180px,92%);margin-inline:auto}
h1,h2,h3{font-family:'Space Grotesk',Inter,system-ui;line-height:1.15}
h1{font-size:clamp(38px,6vw,68px)}
h2{font-size:clamp(26px,3.6vw,36px)}
h3{font-size:clamp(18px,2.2vw,22px)}
.muted{color:var(--muted)}
.gold{color:var(--gold)}

/* Header */
.site-header{
  background:#222637;
  border-bottom:1px solid #2A3042;
  position:sticky; top:0; z-index:50;
}
.nav{display:flex;align-items:center;gap:18px;padding:16px 0}
.logo{color:var(--text);font-weight:800;display:flex;align-items:center;gap:12px}
.nav-links{margin-left:auto;display:flex;gap:18px;align-items:center}
.nav-links a{color:#C5CEE3}
.nav-links a:hover{color:#fff}

/* ===== Header-Brand (Logo + Slogan) ===== */
.site-header{
  position: sticky; top: 0; z-index: 1000;
  background: rgba(26, 31, 53, 0.9);
  backdrop-filter: blur(8px);
}
.site-header .nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand-group{display:flex;align-items:center;gap:14px}
.brand-group .tagline{
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 700;
  letter-spacing: .2px;
  color: #C9D2E8;
  white-space: nowrap;
}
.brand-group .tagline .ai{color:var(--gold)}
.site-header .logo img{height:80px;width:auto}
@media (max-width:900px){
  .brand-group .tagline{display:none}
  .site-header .logo img{height:56px}
}

/* Hero */
.hero-wrap{background:#2A2F44;border-bottom:1px solid #343954}
.hero{
  display:grid;grid-template-columns:1.2fr .8fr;gap:0;
  padding:42px 0 60px;position:relative
}
.hero::before{
  content:""; position:absolute; right:6%; top:4px; width:460px; height:460px; border-radius:50%;
  background:#3B4163; opacity:.22; z-index:0;
}
.hero .intro{position:relative; z-index:2; padding-right:26px}
.hero .intro .lead{color:#C9D2E8; max-width:60ch}

/* Social icons (direkt unter Lead) */
.socials{display:flex; gap:10px; margin-top:12px}
.socials a{
  width:32px;height:32px; display:grid; place-items:center;
  border-radius:999px; background:#24293B; border:1px solid #343954;
}
.socials a:hover{background:#2b3250}

/* Portrait im Kreis (rechts) */
.circle-wrap{
  position:absolute; right:6%; top:4px; width:460px; height:460px;
  border-radius:50%; display:grid; place-items:center; z-index:1; pointer-events:none;
}
.circle-wrap img{width:68%; opacity:.18; filter:grayscale(100%)}

/* Brand Slider */
.brands-panel{
  width:min(1000px,92%); margin:20px auto 0;
  background:rgba(28,33,45,.92); border:1px solid #343954;
  border-radius:14px; padding:10px 0; box-shadow:var(--shadow); overflow:hidden;
}
.marquee{overflow:hidden}
.track{display:flex; gap:16px; padding:6px 0; will-change:transform; animation:scroll 32s linear infinite}
.track:hover{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.brand{
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:#24293B; border:1px solid #343954; border-radius:12px; margin:0 2px;
}
.brand .logo{width:26px; height:26px; object-fit:contain; border-radius:6px; flex-shrink:0}

/* Layout content */
.section{padding:32px 0}
.grid-2{display:grid; grid-template-columns:1.2fr .8fr; gap:22px}

/* Metrics */
.metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:10px}
.metric{display:flex; flex-direction:column; gap:2px}
.metric b{font-size:1.6rem; color:var(--gold)}

/* Work tiles */
.worklist{display:flex; flex-direction:column; gap:12px}
.work-item{
  display:grid; grid-template-columns:160px 1fr auto; gap:12px; align-items:center;
  background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:12px;
  transition:.2s;
}
.work-item:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.25)}
.work-item .thumb img{width:160px; height:100px; object-fit:cover; border-radius:10px; border:1px solid #343954}
.work-item h3{margin:0}
.work-item .muted{font-size:.9rem}

/* CTA & footer */
.site-foot{margin-top:28px; border-top:1px solid #2A3042}
.foot{display:flex; align-items:center; justify-content:space-between; padding:18px 0; color:#AEB7CC}

/* Blog preview */
.blog-preview{margin-top:26px}
.blog-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:18px; margin-top:12px}
.blog-card{background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:14px; transition:all .2s}
.blog-card:hover{transform:translateY(-4px); box-shadow:0 14px 28px rgba(0,0,0,.28)}
.blog-card img{width:100%; height:180px; object-fit:cover; border-radius:10px; border:1px solid #343954; margin-bottom:8px}
.blog-card .meta{color:#9ab0ff; font-size:.85rem; margin-bottom:4px}
.blog-card h4{margin:4px 0 2px; font-family:'Space Grotesk'; font-size:1.12rem; color:#fff}
.blog-card a{color:var(--gold)}
.blog-card a:hover{text-decoration:underline}

/* Responsive */
@media (max-width:980px){
  .hero{grid-template-columns:1fr; text-align:center}
  .circle-wrap{display:none}
  .grid-2{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr 1fr}
  .work-item{grid-template-columns:120px 1fr auto}
  .blog-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .brands-panel{width:96%}
  .work-item{grid-template-columns:1fr; align-items:flex-start}
  .work-item .thumb img{width:100%; height:160px}
  .blog-grid{grid-template-columns:1fr}
  .hero .intro .lead{max-width:90%}
}

/* ===== Maskottchen (zentriert) ===== */
.mascot{
  position:fixed; inset:0; display:grid; place-items:center; z-index:1200;
  pointer-events:none; opacity:0; transform:translateY(12px); transition:opacity .28s ease, transform .28s ease;
}
.mascot.in{opacity:1; transform:translateY(0); pointer-events:auto}
.mascot.out{opacity:0; transform:translateY(12px); pointer-events:none}
.mascot-video{
  width:min(520px, 90vw); height:auto; background:transparent;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.4)); border-radius:16px;
}
.mascot-btn{
  position:fixed; z-index:1201; bottom:18px; right:18px;
  background:rgba(39,44,73,.92); color:#E9EEFF; border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:8px 10px; cursor:pointer; margin-left:8px;
}
#kai-mascot-sound{right:62px}
@media (max-width:640px){
  .mascot-video{width:min(380px, 92vw)}
  #kai-mascot-sound{right:58px}
}
@media (prefers-reduced-motion:reduce){
  .mascot, .mascot *{transition:none!important; animation:none!important}
}