:root{
  --bg:#f5f7fb;
  --surface:#ffffff;
  --surface2:rgba(255,255,255,.78);
  --text:#101827;
  --muted:#64748b;
  --line:rgba(15,23,42,.12);
  --teal:#008080;
  --teal2:#008080;
  --soft:#e8f7f8;
  --shadow:0 24px 70px rgba(15,23,42,.10);
  --r:28px;
  --max:1440px;
}
body.dark{
  --bg:#070d16;
  --surface:#0d1726;
  --surface2:rgba(13,23,38,.72);
  --text:#eef6fb;
  --muted:#9fb0c4;
  --line:rgba(255,255,255,.13);
  --soft:rgba(0,128,128,.13);
  --shadow:0 28px 80px rgba(0,0,0,.38);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
.bg{
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(circle at 18% 8%,rgba(0,128,128,.16),transparent 26rem),
    radial-gradient(circle at 80% 0%,rgba(0,128,128,.13),transparent 32rem),
    linear-gradient(180deg,var(--bg),var(--bg));
}
.noise{
  position:fixed;inset:0;z-index:-1;opacity:.08;
  background-image:radial-gradient(circle at 1px 1px,currentColor 1px,transparent 0);
  background-size:36px 36px;
  color:var(--teal);
  mask-image:linear-gradient(180deg,#000,transparent 76%);
}
.shell{max-width:var(--max);margin:auto;padding:0 clamp(18px,3vw,48px)}
.nav{
  position:sticky;top:14px;z-index:30;
  max-width:calc(var(--max) - 24px);
  margin:14px auto 0;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--surface2);
  backdrop-filter:blur(24px);
  box-shadow:0 12px 40px rgba(15,23,42,.08);
}
.logo img{width:310px;max-width:38vw;display:block}
body.dark .logo img{filter:invert(1) hue-rotate(160deg) saturate(.85)}
.navlinks{display:flex;justify-content:center;gap:30px;font-weight:760;color:var(--text)}
.navlinks a:hover{color:var(--teal)}
.actions{display:flex;gap:12px;align-items:center}
.theme{display:flex;gap:9px;align-items:center;font-weight:750;white-space:nowrap}
.theme input{display:none}
.switch{width:46px;height:25px;border-radius:999px;background:#d8e1ea;position:relative}
.switch:after{content:"";position:absolute;left:4px;top:3.5px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.2);transition:.22s}
body.dark .switch{background:var(--teal)}
body.dark .switch:after{left:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:14px;padding:13px 18px;font-weight:850;border:1px solid transparent;cursor:pointer;transition:.2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,128,128,.16)}
.primary{background:linear-gradient(135deg,var(--teal),var(--teal2));color:#fff}
.ghost{background:var(--surface2);border-color:var(--line)}
.small{padding:10px 14px;font-size:.92rem}
.hero{
  min-height:calc(100vh - 100px);
  display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(36px,5vw,76px);
  align-items:center;
  padding:72px 0 80px;
}
.kicker{margin:0 0 18px;color:var(--teal);font-weight:900;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem}
.hero h1{margin:0;font-size:clamp(68px,9vw,140px);letter-spacing:-.09em;line-height:.86;text-wrap:balance}
.gradient{background:linear-gradient(135deg,var(--text),var(--teal));-webkit-background-clip:text;color:transparent}
.hero h2{font-size:clamp(24px,3vw,42px);letter-spacing:-.06em;margin:18px 0}
.lead{font-size:clamp(18px,1.45vw,23px);line-height:1.62;color:var(--muted);max-width:780px}
.hero-actions,.trust{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.trust span{border:1px solid var(--line);background:var(--surface2);padding:12px 14px;border-radius:15px;color:var(--muted);font-weight:760}
.stage{
  position:relative;
  min-height:620px;
}
.device{
  position:absolute;
  inset:30px 0 92px 38px;
  border:1px solid var(--line);
  border-radius:34px;
  background:var(--surface2);
  backdrop-filter:blur(24px);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.device-top{
  height:62px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 24px;
}
.device-top b{font-size:31px;letter-spacing:-.08em;color:var(--teal)}
.traffic{display:flex;gap:8px}.traffic i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.chatshot{padding:24px;display:grid;gap:14px}
.bubble{padding:16px 18px;border-radius:20px;line-height:1.5}
.bubble.user{background:linear-gradient(135deg,var(--teal),var(--teal2));color:#fff;margin-left:18%}
.bubble.bot,.sources{background:var(--surface);border:1px solid var(--line)}
.sources{border-radius:22px;padding:17px;display:grid;gap:10px}
.file{font-size:.66rem;font-weight:900;color:#fff;border-radius:7px;padding:4px 6px;margin-right:8px}.pdf{background:#e53b3b}.xls{background:#17864b}.doc{background:#2a6be8}
.main-agents{
  position:absolute;
  left:0;right:0;bottom:0;
  display:flex;justify-content:center;align-items:end;gap:18px;
  pointer-events:none;
}
.main-agent{
  display:grid;justify-items:center;gap:8px;
}
.main-agent img{
  height:170px;
  image-rendering:pixelated;
  filter:drop-shadow(0 18px 20px rgba(0,0,0,.18));
}
.main-agent.andi img{height:184px}
.main-agent strong{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 13px;
  color:var(--teal);
  font-size:.84rem;
}
.orb{
  position:absolute;border-radius:999px;pointer-events:none;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(0,128,128,.18) 36%,transparent 72%);
}
.orb.one{width:190px;height:190px;right:8%;top:0}
.orb.two{width:110px;height:110px;left:0;top:34%}
.section{padding:88px 0}
.title,.page-title{text-align:center;max-width:960px;margin:0 auto 46px}
.title h2,.page-title h1{margin:0 0 16px;font-size:clamp(40px,5.5vw,82px);letter-spacing:-.08em;line-height:.95}
.title p,.page-title p{font-size:18px;line-height:1.68;color:var(--muted)}
.page-title{padding:74px 0 34px}
.panel{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface2);
  backdrop-filter:blur(22px);
  box-shadow:var(--shadow);
}
.explain{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;padding:52px}
.big{font-size:clamp(36px,4vw,64px);letter-spacing:-.075em;line-height:.95;margin:0 0 20px}
.muted{color:var(--muted);line-height:1.68}
.bullets{display:grid;gap:12px}.bullet{padding:18px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}.bullet b{color:var(--teal)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{min-height:198px;padding:24px;border:1px solid var(--line);border-radius:26px;background:var(--surface)}
.ico{width:58px;height:58px;border-radius:18px;background:var(--soft);display:grid;place-items:center;color:var(--teal);font-size:28px;margin-bottom:18px}
.card h3{margin:0 0 8px}.card p{margin:0;color:var(--muted);line-height:1.55}
.agent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.agent-card{padding:22px;border:1px solid var(--line);border-radius:28px;background:var(--surface);min-height:335px;text-align:left}
.agent-card img{height:166px;display:block;margin:0 auto 14px;image-rendering:pixelated;filter:drop-shadow(0 12px 18px rgba(0,0,0,.16))}
.agent-card.featured{background:linear-gradient(180deg,var(--soft),var(--surface))}
.agent-card h3{font-size:24px;letter-spacing:-.04em;margin:0 0 6px}.agent-card p{margin:0;color:var(--muted);line-height:1.5}
.pill{display:inline-flex;padding:8px 12px;border-radius:999px;background:var(--soft);color:var(--teal);font-weight:900;margin-bottom:12px;font-size:.8rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:50px;align-items:center}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.tile{padding:24px;border:1px solid var(--line);border-radius:24px;background:var(--surface);font-weight:900;color:var(--teal)}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.step{padding:25px;border:1px solid var(--line);border-radius:26px;background:var(--surface)}.num{font-size:46px;font-weight:950;letter-spacing:-.08em;color:var(--teal)}
.demo-shell{display:grid;grid-template-columns:320px 1fr 330px;gap:16px}
.demo-side,.demo-chat,.context{padding:18px}
.agentbtn{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;
  border:1px solid var(--line);border-radius:22px;background:var(--surface);
  padding:13px;margin:0 0 12px;color:var(--text);cursor:pointer;
}
.agentbtn.active{border-color:var(--teal);background:var(--soft)}
.agentbtn img{height:64px;width:54px;object-fit:contain;image-rendering:pixelated}
.agentbtn small{display:block;color:var(--muted)}
.chathead{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:15px}
.agent-title{display:flex;align-items:center;gap:12px}.agent-title img{height:74px;width:62px;object-fit:contain;image-rendering:pixelated}.online{color:#16a34a;font-weight:900}
.questions{display:flex;flex-wrap:wrap;gap:10px;padding:18px 0}
.questions button{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:11px 14px;font-weight:800;cursor:pointer}
.questions button:hover{border-color:var(--teal);color:var(--teal)}
.ask-row{display:grid;grid-template-columns:1fr auto;gap:10px;margin-bottom:16px}
.ask-row input{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:16px;padding:13px 15px;font:inherit}
.messages{display:grid;gap:12px;max-height:520px;overflow:auto;padding-right:4px}
.msg{border-radius:22px;padding:16px;line-height:1.55}.msg.user{justify-self:end;max-width:78%;background:linear-gradient(135deg,var(--teal),var(--teal2));color:#fff}.msg.bot{justify-self:start;max-width:93%;background:var(--surface);border:1px solid var(--line)}
.ctx-card{border:1px solid var(--line);border-radius:22px;padding:15px;background:var(--surface);margin-bottom:12px}.tags{display:flex;flex-wrap:wrap;gap:8px}.tags span{padding:7px 10px;border-radius:12px;background:var(--soft);color:var(--teal);font-weight:900;font-size:.82rem}
.config{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;padding:24px}.controls{display:grid;gap:18px}.control{padding:18px;border:1px solid var(--line);border-radius:22px;background:var(--surface)}.control label{display:flex;justify-content:space-between;font-weight:900;margin-bottom:10px}.control input{width:100%;accent-color:var(--teal)}
.result{padding:26px;border-radius:26px;background:linear-gradient(180deg,var(--soft),var(--surface));border:1px solid var(--line)}.specs{display:grid;gap:10px;margin-top:18px}.spec{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:10px 0}.price{font-size:44px;font-weight:950;letter-spacing:-.07em;color:var(--teal)}.bar{height:12px;border-radius:999px;background:rgba(127,127,127,.18);overflow:hidden;margin-top:18px}.bar i{display:block;height:100%;width:40%;background:linear-gradient(90deg,var(--teal),var(--teal2))}
.config-note{margin-top:18px;padding:14px 16px;border:1px solid var(--line);background:var(--surface);border-radius:18px;color:var(--muted)}
footer{text-align:center;padding:42px;color:var(--muted)}footer b{color:var(--teal)}
.reveal{opacity:1;transform:none}
@media(max-width:1200px){.navlinks{display:none}.hero{grid-template-columns:1fr}.stage{min-height:590px}.cards,.agent-grid{grid-template-columns:repeat(2,1fr)}.demo-shell{grid-template-columns:300px 1fr}.context{grid-column:1/-1}.process{grid-template-columns:repeat(2,1fr)}}
@media(max-width:780px){.nav{grid-template-columns:1fr}.actions{justify-content:space-between;flex-wrap:wrap}.logo img{width:260px;max-width:80vw}.hero h1{font-size:68px}.stage{min-height:auto}.device{position:relative;inset:auto}.main-agents{position:relative;margin-top:18px}.main-agent img{height:150px}.main-agent.andi img{height:160px}.cards,.agent-grid,.split,.explain,.tiles,.process,.demo-shell,.config{grid-template-columns:1fr}.msg.user,.msg.bot{max-width:100%}}


/* === v7 PLACEHOLDER-HINWEISE ===
   Die Agent-Bilder sind jetzt bewusst als Platzhalter-Dateien eingebunden.
   Später nur die Dateien im Ordner /assets ersetzen:
   - placeholder-klaus.svg
   - placeholder-andi.svg
   - placeholder-doku.svg
   - placeholder-angebot.svg
   - placeholder-data.svg
   - placeholder-service.svg
   - placeholder-search.svg
   - placeholder-automation.svg
*/

.hero.product-hero {
  grid-template-columns: 1fr;
  text-align: center;
  gap: 34px;
  padding-top: 86px;
}

.hero.product-hero .lead {
  margin-left: auto;
  margin-right: auto;
}

.hero.product-hero .hero-actions,
.hero.product-hero .trust {
  justify-content: center;
}

.hero-showcase {
  position: relative;
  min-height: 610px;
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
}

.hero-showcase .device {
  inset: 70px 50px 90px 50px;
  transform: none;
}

.hero-showcase .main-agents {
  bottom: 0;
  z-index: 4;
  gap: 28px;
}

.hero-showcase .main-agent img {
  height: 210px;
  width: 170px;
  object-fit: contain;
}

.hero-showcase .main-agent.andi img {
  height: 230px;
  width: 180px;
}

.hero-showcase .main-agent strong {
  font-size: .9rem;
}

.placeholder-note {
  display: inline-flex;
  margin-top: 10px;
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px dashed var(--teal);
  color: var(--teal);
  background: var(--soft);
  font-size: .78rem;
  font-weight: 800;
}

.product-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.product-strip .card {
  min-height: 230px;
}

.ask-row {
  display: none !important;
}

@media(max-width: 900px) {
  .hero-showcase {
    min-height: auto;
  }

  .hero-showcase .device {
    position: relative;
    inset: auto;
    margin-bottom: 20px;
  }

  .hero-showcase .main-agents {
    position: relative;
  }

  .hero-showcase .main-agent img {
    height: 170px;
  }

  .hero-showcase .main-agent.andi img {
    height: 184px;
  }

  .product-strip {
    grid-template-columns: 1fr;
  }
}


/* === v8 Hero: Chat + Andi/Klaus seitlich, stärkeres Einfliegen === */

.hero-showcase {
  min-height: 640px;
  display: grid;
  place-items: center;
  perspective: 1200px;
}

.hero-scene {
  position: relative;
  width: min(1120px, 100%);
  height: 620px;
  margin: 0 auto;
}

.hero-scene .device {
  position: absolute;
  left: 50%;
  top: 42px;
  width: min(650px, 72%);
  height: 430px;
  transform: translateX(-50%);
  inset: auto;
  z-index: 3;
}

.hero-side-agent {
  position: absolute;
  bottom: 34px;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 10px;
  pointer-events: none;
}

.hero-side-agent img {
  height: 250px;
  width: 190px;
  object-fit: contain;
  filter: drop-shadow(0 24px 28px rgba(0,0,0,.22));
}

.hero-side-agent.klaus {
  left: 18px;
}

.hero-side-agent.andi {
  right: 18px;
}

.hero-side-agent.andi img {
  height: 268px;
  width: 200px;
}

.hero-side-agent strong {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  color: var(--teal);
  font-size: .9rem;
}

.fly-chat {
  opacity: 0;
  transform: translate3d(0, 90px, 0) scale(.94);
  animation: flyChatIn 1100ms cubic-bezier(.16,1,.3,1) 250ms forwards;
}

.fly-left {
  opacity: 0;
  transform: translate3d(-110px, 80px, 0) rotate(-4deg) scale(.9);
  animation: flyLeftIn 1200ms cubic-bezier(.16,1,.3,1) 520ms forwards;
}

.fly-right {
  opacity: 0;
  transform: translate3d(110px, 80px, 0) rotate(4deg) scale(.9);
  animation: flyRightIn 1200ms cubic-bezier(.16,1,.3,1) 680ms forwards;
}

@keyframes flyChatIn {
  to {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
  }
}

@keyframes flyLeftIn {
  to {
    opacity: 1;
    transform: translate3d(0,0,0) rotate(0) scale(1);
  }
}

@keyframes flyRightIn {
  to {
    opacity: 1;
    transform: translate3d(0,0,0) rotate(0) scale(1);
  }
}

.hero-scene .orb.one {
  right: 3%;
  top: 4%;
  width: 240px;
  height: 240px;
}

.hero-scene .orb.two {
  left: 8%;
  top: 36%;
  width: 150px;
  height: 150px;
}

.hero-glow {
  position: absolute;
  left: 50%;
  bottom: 38px;
  width: min(760px, 78%);
  height: 110px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(0,128,128,.22), transparent 68%);
  filter: blur(6px);
  z-index: 1;
  pointer-events: none;
}

@media(max-width: 1100px) {
  .hero-scene {
    height: 680px;
  }

  .hero-scene .device {
    top: 34px;
    width: min(680px, 92%);
  }

  .hero-side-agent.klaus {
    left: 18%;
  }

  .hero-side-agent.andi {
    right: 18%;
  }

  .hero-side-agent {
    bottom: 8px;
  }

  .hero-side-agent img {
    height: 200px;
    width: 155px;
  }

  .hero-side-agent.andi img {
    height: 216px;
    width: 164px;
  }
}

@media(max-width: 720px) {
  .hero-scene {
    height: auto;
    display: grid;
    gap: 16px;
  }

  .hero-scene .device {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    transform: none;
  }

  .hero-side-agent {
    position: relative;
    bottom: auto;
    left: auto !important;
    right: auto !important;
    display: inline-grid;
  }

  .hero-scene {
    grid-template-columns: 1fr 1fr;
  }

  .hero-scene .device {
    grid-column: 1 / -1;
  }

  .hero-side-agent img,
  .hero-side-agent.andi img {
    height: 165px;
    width: 135px;
  }

  .hero-glow,
  .hero-scene .orb {
    display: none;
  }
}


/* === v9 Apple-like Scroll / keine Kollisionen ===
   Ziel:
   - Chat bleibt zentral allein.
   - Klaus und Andi stehen links/rechts außerhalb des Chatbereichs.
   - Mobile/kleinere Screens: Figuren wandern unter das Chatfenster.
   - Hero wird länger gezogen, damit weniger auf einmal sichtbar ist.
   - Parallax / Einflug deutlich stärker.
*/

.hero.product-hero {
  padding-top: 110px;
  padding-bottom: 120px;
  min-height: auto;
}

.hero.product-hero > .reveal:first-child {
  min-height: 72vh;
  display: grid;
  place-content: center;
}

.hero-showcase {
  min-height: 110vh;
  display: grid;
  place-items: center;
  padding: 12vh 0 18vh;
}

.hero-scene {
  width: min(1380px, 100%);
  height: 780px;
  display: grid;
  grid-template-columns: minmax(170px, 260px) minmax(520px, 720px) minmax(170px, 260px);
  grid-template-rows: 1fr;
  align-items: end;
  justify-content: center;
  gap: clamp(34px, 5vw, 80px);
  position: relative;
}

.hero-scene .device {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
  min-height: 470px;
  transform: none !important;
  inset: auto;
  z-index: 3;
  grid-column: 2;
  align-self: center;
}

.hero-side-agent {
  position: relative;
  bottom: auto;
  left: auto !important;
  right: auto !important;
  z-index: 2;
  align-self: end;
}

.hero-side-agent.klaus {
  grid-column: 1;
  justify-self: end;
}

.hero-side-agent.andi {
  grid-column: 3;
  justify-self: start;
}

.hero-side-agent img {
  height: 270px;
  width: 215px;
}

.hero-side-agent.andi img {
  height: 292px;
  width: 225px;
}

.hero-glow {
  left: 50%;
  bottom: 92px;
  width: min(900px, 78%);
  height: 160px;
  z-index: 0;
}

/* stronger entrance, more Apple-like */
.fly-chat {
  opacity: 0;
  transform: translate3d(0, 170px, 0) scale(.86) rotateX(10deg);
  animation: flyChatInV9 1500ms cubic-bezier(.16,1,.3,1) 320ms forwards;
  transform-origin: center bottom;
}

.fly-left {
  opacity: 0;
  transform: translate3d(-220px, 150px, 0) rotate(-9deg) scale(.78);
  animation: flyLeftInV9 1600ms cubic-bezier(.16,1,.3,1) 700ms forwards;
}

.fly-right {
  opacity: 0;
  transform: translate3d(220px, 150px, 0) rotate(9deg) scale(.78);
  animation: flyRightInV9 1600ms cubic-bezier(.16,1,.3,1) 850ms forwards;
}

@keyframes flyChatInV9 {
  0% { opacity: 0; transform: translate3d(0,170px,0) scale(.86) rotateX(10deg); filter: blur(10px); }
  55% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1) rotateX(0); filter: blur(0); }
}

@keyframes flyLeftInV9 {
  0% { opacity: 0; transform: translate3d(-220px,150px,0) rotate(-9deg) scale(.78); filter: blur(8px); }
  58% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translate3d(0,0,0) rotate(0) scale(1); filter: blur(0); }
}

@keyframes flyRightInV9 {
  0% { opacity: 0; transform: translate3d(220px,150px,0) rotate(9deg) scale(.78); filter: blur(8px); }
  58% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translate3d(0,0,0) rotate(0) scale(1); filter: blur(0); }
}

.hero-scene .orb.one {
  right: 1%;
  top: 3%;
  width: 320px;
  height: 320px;
  opacity: .85;
}

.hero-scene .orb.two {
  left: 0%;
  top: 46%;
  width: 210px;
  height: 210px;
  opacity: .75;
}

.scroll-chapter {
  min-height: 92vh;
  display: grid;
  align-items: center;
}

.section.tall {
  padding-top: 120px;
  padding-bottom: 120px;
}

.section.spacious {
  padding-top: 150px;
  padding-bottom: 150px;
}

.title {
  margin-bottom: 64px;
}

.cards,
.agent-grid,
.product-strip {
  gap: 24px;
}

.card,
.agent-card,
.panel {
  box-shadow: 0 30px 90px rgba(15,23,42,.09);
}

body.dark .card,
body.dark .agent-card,
body.dark .panel {
  box-shadow: 0 34px 100px rgba(0,0,0,.34);
}

/* Prevent overlap on normal laptop widths by moving figures below the chat */
@media(max-width: 1180px) {
  .hero-scene {
    height: auto;
    min-height: 880px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 28px;
  }

  .hero-scene .device {
    grid-column: 1 / -1;
    grid-row: 1;
    width: min(760px, 100%);
    justify-self: center;
  }

  .hero-side-agent.klaus {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
  }

  .hero-side-agent.andi {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }

  .hero-side-agent img {
    height: 220px;
    width: 175px;
  }

  .hero-side-agent.andi img {
    height: 238px;
    width: 184px;
  }

  .hero-glow {
    bottom: 110px;
  }
}

@media(max-width: 720px) {
  .hero.product-hero > .reveal:first-child {
    min-height: 78vh;
  }

  .hero-showcase {
    min-height: auto;
    padding: 60px 0 100px;
  }

  .hero-scene {
    min-height: auto;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .hero-side-agent img {
    height: 155px;
    width: 125px;
  }

  .hero-side-agent.andi img {
    height: 168px;
    width: 132px;
  }

  .fly-left,
  .fly-right,
  .fly-chat {
    animation-duration: 1100ms;
  }

  .section.tall,
  .section.spacious {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .scroll-chapter {
    min-height: auto;
  }
}


/* === v10 Index: Apple-like Fly Sections statt normalem Runterscrollen ===
   Nur Index-Seite stark angepasst:
   - Weniger Text im Hero
   - Schlagworte größer direkt unter dem Titel
   - Content-Blöcke blenden/einfliegen ein und aus
   - Mehr "Bühnen"-Gefühl statt langer Textwand
*/

.index-page .hero.product-hero {
  padding-top: 96px;
  padding-bottom: 40px;
}

.index-page .hero.product-hero > .reveal:first-child {
  min-height: 64vh;
  align-content: center;
}

.index-page .hero h1 {
  font-size: clamp(62px, 8.4vw, 128px);
  margin-bottom: 18px;
}

.index-page .hero h2 {
  max-width: 820px;
  margin: 0 auto 18px;
  font-size: clamp(23px, 2.5vw, 38px);
}

.index-page .lead {
  max-width: 760px;
  font-size: clamp(17px, 1.25vw, 20px);
}

.index-page .trust {
  margin-top: 22px;
  justify-content: center;
  gap: 14px;
}

.index-page .trust span {
  font-size: clamp(1.02rem, 1.55vw, 1.32rem);
  padding: 15px 20px;
  border-radius: 18px;
  color: var(--text);
  background: linear-gradient(180deg, var(--surface), var(--surface2));
  box-shadow: 0 18px 42px rgba(15,23,42,.08);
}

body.dark.index-page .trust span {
  color: var(--text);
  box-shadow: 0 18px 42px rgba(0,0,0,.24);
}

.index-page .hero-actions {
  margin-top: 24px;
}

.index-page .hero-showcase {
  min-height: 118vh;
  padding-top: 8vh;
}

/* Bühne für die folgenden Inhalte */
.fly-section {
  min-height: 112vh;
  display: grid;
  align-items: center;
  position: relative;
}

.fly-card {
  opacity: 0;
  transform: translate3d(0, 120px, 0) scale(.92);
  filter: blur(10px);
  transition:
    opacity .82s cubic-bezier(.16,1,.3,1),
    transform .82s cubic-bezier(.16,1,.3,1),
    filter .82s cubic-bezier(.16,1,.3,1);
}

.fly-section.is-visible .fly-card {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0);
}

.fly-section.has-left .fly-card {
  transform: translate3d(-120px, 80px, 0) scale(.92);
}

.fly-section.has-right .fly-card {
  transform: translate3d(120px, 80px, 0) scale(.92);
}

.fly-section.has-left.is-visible .fly-card,
.fly-section.has-right.is-visible .fly-card {
  transform: translate3d(0,0,0) scale(1);
}

/* Ausblenden beim Verlassen der Mitte: JS setzt is-past */
.fly-section.is-past .fly-card {
  opacity: 0;
  transform: translate3d(0, -120px, 0) scale(.94);
  filter: blur(8px);
}

.fly-section.has-left.is-past .fly-card {
  transform: translate3d(110px, -100px, 0) scale(.94);
}

.fly-section.has-right.is-past .fly-card {
  transform: translate3d(-110px, -100px, 0) scale(.94);
}

.index-page .panel.explain {
  max-width: 1040px;
  margin: 0 auto;
}

.index-page .explain {
  padding: clamp(28px, 4vw, 54px);
}

.index-page .big {
  font-size: clamp(40px, 5vw, 76px);
}

.index-page .muted {
  font-size: 1.04rem;
}

.index-page .bullets {
  gap: 10px;
}

.index-page .bullet {
  padding: 16px 18px;
}

.index-page .product-strip {
  max-width: 1120px;
  margin: 0 auto;
}

.index-page .product-strip .card {
  min-height: 210px;
  padding: 28px;
}

.index-page .agent-grid {
  max-width: 1120px;
  margin: 0 auto;
}

/* Text im ersten Index-Block ausdünnen */
.index-page .index-short-copy .muted.extra {
  display: none;
}

@media(max-width: 900px) {
  .index-page .trust span {
    font-size: 1rem;
    padding: 12px 14px;
  }

  .fly-section {
    min-height: auto;
    padding-top: 90px;
    padding-bottom: 90px;
  }

  .fly-card,
  .fly-section.has-left .fly-card,
  .fly-section.has-right .fly-card,
  .fly-section.is-past .fly-card {
    opacity: 1;
    transform: none;
    filter: none;
  }
}


/* === v11 Dramatischer, aber kompakter ===
   - Abschnitte wieder näher zusammen
   - Stärkere visuelle Trennung durch Ein-/Ausflug, Blur, Scale und Spotlight
   - Weniger gleichzeitige Sichtbarkeit trotz weniger Abstand
*/

.index-page .hero.product-hero {
  padding-top: 80px;
  padding-bottom: 0;
}

.index-page .hero.product-hero > .reveal:first-child {
  min-height: 56vh;
}

.index-page .hero-showcase {
  min-height: 96vh;
  padding-top: 3vh;
  padding-bottom: 7vh;
}

.index-page .hero-scene {
  height: 700px;
}

/* kompaktere Sections */
.fly-section {
  min-height: 86vh;
}

.section.spacious.fly-section {
  padding-top: 70px;
  padding-bottom: 70px;
}

.index-page .title {
  margin-bottom: 42px;
}

/* Dramatischeres Bühnenverhalten */
.fly-section::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(980px, 86vw);
  height: 420px;
  transform: translate(-50%, -50%) scale(.68);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at center, rgba(0,128,128,.20), rgba(0,128,128,.06) 36%, transparent 72%);
  filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity .72s cubic-bezier(.16,1,.3,1),
    transform .72s cubic-bezier(.16,1,.3,1);
  z-index: -1;
}

.fly-section.is-visible::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.fly-card {
  opacity: 0;
  transform: translate3d(0, 155px, 0) scale(.82) rotateX(12deg);
  filter: blur(18px);
  transform-origin: center center;
  transition:
    opacity .95s cubic-bezier(.16,1,.3,1),
    transform .95s cubic-bezier(.16,1,.3,1),
    filter .95s cubic-bezier(.16,1,.3,1);
}

.fly-section.is-visible .fly-card {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) rotateX(0);
  filter: blur(0);
}

.fly-section.has-left .fly-card {
  transform: translate3d(-210px, 120px, 0) scale(.82) rotate(-5deg) rotateX(10deg);
}

.fly-section.has-right .fly-card {
  transform: translate3d(210px, 120px, 0) scale(.82) rotate(5deg) rotateX(10deg);
}

.fly-section.has-left.is-visible .fly-card,
.fly-section.has-right.is-visible .fly-card {
  transform: translate3d(0, 0, 0) scale(1) rotate(0) rotateX(0);
}

/* Geht noch sichtbarer raus */
.fly-section.is-past .fly-card {
  opacity: 0;
  transform: translate3d(0, -170px, 0) scale(.82) rotateX(-10deg);
  filter: blur(16px);
}

.fly-section.has-left.is-past .fly-card {
  transform: translate3d(190px, -150px, 0) scale(.82) rotate(5deg) rotateX(-8deg);
}

.fly-section.has-right.is-past .fly-card {
  transform: translate3d(-190px, -150px, 0) scale(.82) rotate(-5deg) rotateX(-8deg);
}

/* Hero noch dramatischer beim Auftauchen */
.fly-chat {
  animation-duration: 1750ms;
  animation-delay: 260ms;
}

.fly-left {
  animation-duration: 1750ms;
  animation-delay: 520ms;
}

.fly-right {
  animation-duration: 1750ms;
  animation-delay: 640ms;
}

/* Engere Karten, aber klare Trennung durch Scale/Spotlight */
.index-page .panel.explain {
  max-width: 980px;
}

.index-page .explain {
  padding: clamp(26px, 3.4vw, 46px);
}

.index-page .product-strip,
.index-page .agent-grid {
  max-width: 1040px;
}

.index-page .product-strip .card {
  min-height: 190px;
  padding: 24px;
}

.index-page .agent-card {
  min-height: 305px;
}

.index-page .agent-card img {
  height: 145px;
}

/* Zusätzlicher leichter Hintergrund-Dimmer, damit immer nur die aktive Bühne wirkt */
.index-page main,
.index-page section {
  isolation: isolate;
}

@media(max-width: 900px) {
  .fly-section {
    min-height: auto;
  }

  .section.spacious.fly-section {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .fly-section::before {
    display: none;
  }

  .fly-card,
  .fly-section.has-left .fly-card,
  .fly-section.has-right .fly-card,
  .fly-section.is-past .fly-card {
    opacity: 1;
    transform: none;
    filter: none;
  }
}


/* === v12 Meet AKi unter Titel === */
.meet-aki-line {
  margin: 0 auto 14px;
  font-size: clamp(1.55rem, 3.2vw, 3.4rem);
  line-height: 1;
  font-weight: 850;
  letter-spacing: -0.06em;
  color: var(--muted);
}

.meet-aki-line span {
  color: var(--teal);
  letter-spacing: -0.08em;
}

body.dark .meet-aki-line {
  color: rgba(238,246,251,.72);
}

body.dark .meet-aki-line span {
  color: #008080;
}


/* === v13 NAURA Farbdisziplin + Hero-Chat wie Fly-Sections ===
   Akzentfarbe ausschließlich NAURA: RGB(0,128,128) / #008080.
*/
:root {
  --teal: #008080;
  --teal2: #008080;
  --soft: rgba(0,128,128,.11);
}

body.dark {
  --soft: rgba(0,128,128,.16);
}

.gradient,
.meet-aki-line span,
.kicker,
footer b,
.device-top b,
.card .ico,
.tile,
.num,
.price,
.bullet b,
.pill,
.placeholder-note,
.tags span {
  color: var(--teal) !important;
}

.gradient {
  background: linear-gradient(135deg, var(--text), var(--teal)) !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
}

.primary,
.bar i,
.bubble.user {
  background: linear-gradient(135deg, var(--teal), var(--teal)) !important;
}

.orb,
.hero-glow,
.fly-section::before {
  background: radial-gradient(ellipse at center, rgba(0,128,128,.20), rgba(0,128,128,.06) 36%, transparent 72%) !important;
}

.trust span,
.placeholder-note,
.pill,
.tags span {
  border-color: rgba(0,128,128,.35) !important;
  background: var(--soft) !important;
}

/* Dateitypen neutral, damit keine zusätzlichen Akzentfarben entstehen */
.file,
.pdf,
.xls,
.doc {
  background: #334155 !important;
  color: #fff !important;
}

/* Hero-Chat soll wie die unteren Elemente dramatisch einfliegen */
.fly-chat {
  opacity: 0 !important;
  transform: translate3d(0, 155px, 0) scale(.82) rotateX(12deg) !important;
  filter: blur(18px) !important;
  animation: heroChatFlyInV13 1500ms cubic-bezier(.16,1,.3,1) 320ms forwards !important;
  transform-origin: center center !important;
}

@keyframes heroChatFlyInV13 {
  0% {
    opacity: 0;
    transform: translate3d(0, 155px, 0) scale(.82) rotateX(12deg);
    filter: blur(18px);
  }
  58% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotateX(0);
    filter: blur(0);
  }
}

/* Beim Scrollen aus dem Fokus soll auch der Hero-Chat stärker verschwinden */
.hero-scene.is-past .fly-chat {
  opacity: 0 !important;
  transform: translate3d(0, -170px, 0) scale(.84) rotateX(-10deg) !important;
  filter: blur(16px) !important;
  transition: opacity .85s cubic-bezier(.16,1,.3,1),
              transform .85s cubic-bezier(.16,1,.3,1),
              filter .85s cubic-bezier(.16,1,.3,1);
}

.hero-scene.is-active .fly-chat {
  opacity: 1 !important;
}


/* === v14 FIX: Hero-Chat nicht dauerhaft blurred + untere Elemente mit Effekt === */

/* alte v13-Important-Regeln sauber überschreiben */
.fly-chat {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}

/* Stattdessen bekommt das gesamte Hero-Chat-Element eine eigene Klasse,
   die über JS sauber ein-/ausgeblendet wird, ohne den Zustand dauerhaft blurred zu lassen. */
.hero-scene .device.fly-chat {
  transition:
    opacity .95s cubic-bezier(.16,1,.3,1),
    transform .95s cubic-bezier(.16,1,.3,1),
    filter .95s cubic-bezier(.16,1,.3,1);
  transform-origin: center center;
  will-change: transform, opacity, filter;
}

.hero-scene:not(.hero-ready) .device.fly-chat {
  opacity: 0 !important;
  transform: translate3d(0, 155px, 0) scale(.84) rotateX(12deg) !important;
  filter: blur(16px) !important;
}

.hero-scene.hero-ready .device.fly-chat {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) rotateX(0) !important;
  filter: blur(0) !important;
}

.hero-scene.hero-past .device.fly-chat {
  opacity: 0 !important;
  transform: translate3d(0, -150px, 0) scale(.86) rotateX(-10deg) !important;
  filter: blur(14px) !important;
}

/* Untere Fly-Sections: stärker und zuverlässiger sichtbar/unsichtbar.
   Nicht nur per threshold kurz sichtbar, sondern mit klaren Zuständen. */
.index-page .fly-section .fly-card {
  opacity: 0 !important;
  filter: blur(18px) !important;
  transform: translate3d(0, 135px, 0) scale(.84) rotateX(10deg) !important;
  transition:
    opacity .95s cubic-bezier(.16,1,.3,1),
    transform .95s cubic-bezier(.16,1,.3,1),
    filter .95s cubic-bezier(.16,1,.3,1) !important;
  will-change: opacity, transform, filter;
}

.index-page .fly-section.has-left .fly-card {
  transform: translate3d(-190px, 115px, 0) scale(.84) rotate(-5deg) rotateX(10deg) !important;
}

.index-page .fly-section.has-right .fly-card {
  transform: translate3d(190px, 115px, 0) scale(.84) rotate(5deg) rotateX(10deg) !important;
}

.index-page .fly-section.is-visible .fly-card,
.index-page .fly-section.has-left.is-visible .fly-card,
.index-page .fly-section.has-right.is-visible .fly-card {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translate3d(0,0,0) scale(1) rotate(0) rotateX(0) !important;
}

.index-page .fly-section.is-past .fly-card {
  opacity: 0 !important;
  filter: blur(14px) !important;
  transform: translate3d(0,-135px,0) scale(.86) rotateX(-8deg) !important;
}

.index-page .fly-section.has-left.is-past .fly-card {
  transform: translate3d(150px,-120px,0) scale(.86) rotate(4deg) rotateX(-8deg) !important;
}

.index-page .fly-section.has-right.is-past .fly-card {
  transform: translate3d(-150px,-120px,0) scale(.86) rotate(-4deg) rotateX(-8deg) !important;
}

/* Spotlight der unteren Elemente wieder aktiv und sichtbarer */
.index-page .fly-section::before {
  opacity: 0;
  transition:
    opacity .85s cubic-bezier(.16,1,.3,1),
    transform .85s cubic-bezier(.16,1,.3,1);
}

.index-page .fly-section.is-visible::before {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1.05) !important;
}

/* Mobile: keine versteckten Inhalte */
@media(max-width: 900px) {
  .hero-scene:not(.hero-ready) .device.fly-chat,
  .hero-scene.hero-ready .device.fly-chat,
  .hero-scene.hero-past .device.fly-chat,
  .index-page .fly-section .fly-card,
  .index-page .fly-section.has-left .fly-card,
  .index-page .fly-section.has-right .fly-card,
  .index-page .fly-section.is-past .fly-card {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}


/* === v15 FIX: Chat sichtbar + "Was ist AKi" Effekt erzwingen === */

/* Chat nie komplett durch Scroll-State verstecken.
   Er bekommt stattdessen nur eine saubere Startanimation und bleibt sichtbar. */
.hero-scene .device.fly-chat,
.hero-scene:not(.hero-ready) .device.fly-chat,
.hero-scene.hero-ready .device.fly-chat,
.hero-scene.hero-past .device.fly-chat {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}

/* Innerer Animations-Layer: dadurch kollidiert die Animation nicht mit Layout/Parallax */
.hero-chat-inner {
  opacity: 0;
  transform: translate3d(0, 150px, 0) scale(.84) rotateX(12deg);
  filter: blur(16px);
  animation: heroChatInnerInV15 1450ms cubic-bezier(.16,1,.3,1) 260ms forwards;
  transform-origin: center center;
  will-change: transform, opacity, filter;
}

@keyframes heroChatInnerInV15 {
  0% {
    opacity: 0;
    transform: translate3d(0, 150px, 0) scale(.84) rotateX(12deg);
    filter: blur(16px);
  }
  58% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1) rotateX(0);
    filter: blur(0);
  }
}

/* Was-ist-AKi Block garantiert mit Fly-Effekt */
.index-page .fly-section.force-effect .fly-card,
.index-page .fly-section.force-effect.has-left .fly-card {
  opacity: 0 !important;
  filter: blur(20px) !important;
  transform: translate3d(-220px, 140px, 0) scale(.82) rotate(-5deg) rotateX(12deg) !important;
  transition:
    opacity .95s cubic-bezier(.16,1,.3,1),
    transform .95s cubic-bezier(.16,1,.3,1),
    filter .95s cubic-bezier(.16,1,.3,1) !important;
}

.index-page .fly-section.force-effect.is-visible .fly-card,
.index-page .fly-section.force-effect.has-left.is-visible .fly-card {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translate3d(0,0,0) scale(1) rotate(0) rotateX(0) !important;
}

.index-page .fly-section.force-effect.is-past .fly-card,
.index-page .fly-section.force-effect.has-left.is-past .fly-card {
  opacity: 0 !important;
  filter: blur(16px) !important;
  transform: translate3d(170px,-130px,0) scale(.84) rotate(4deg) rotateX(-10deg) !important;
}

/* Falls JS aus irgendeinem Grund später lädt: nach kurzer Zeit bleibt nichts dauerhaft unsichtbar */
body:not(.js-ready) .index-page .fly-section .fly-card {
  opacity: 1;
}

@media(max-width: 900px) {
  .hero-chat-inner,
  .index-page .fly-section.force-effect .fly-card,
  .index-page .fly-section.force-effect.has-left .fly-card,
  .index-page .fly-section.force-effect.is-past .fly-card {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}


/* === v16 FIX: "Was ist AKi" eigener Effekt + schöneres Chatfenster === */

/* Unabhängig von fly-section: eigener, zuverlässiger Effekt für den Was-ist-AKi-Block */
.aki-stage {
  min-height: 88vh;
  display: grid;
  place-items: center;
  position: relative;
}

.aki-stage::before {
  content: "";
  position: absolute;
  inset: 18% 8%;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(0,128,128,.20), rgba(0,128,128,.06) 38%, transparent 74%);
  filter: blur(18px);
  opacity: 0;
  transform: scale(.62);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
  z-index: -1;
}

.aki-effect-card {
  opacity: 0;
  transform: translate3d(-230px, 150px, 0) scale(.82) rotate(-5deg) rotateX(12deg);
  filter: blur(20px);
  transition:
    opacity 1s cubic-bezier(.16,1,.3,1),
    transform 1s cubic-bezier(.16,1,.3,1),
    filter 1s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform, filter;
}

.aki-stage.aki-visible::before {
  opacity: 1;
  transform: scale(1);
}

.aki-stage.aki-visible .aki-effect-card {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1) rotate(0) rotateX(0);
  filter: blur(0);
}

.aki-stage.aki-past .aki-effect-card {
  opacity: 0;
  transform: translate3d(180px,-135px,0) scale(.84) rotate(4deg) rotateX(-10deg);
  filter: blur(16px);
}

/* Hero Chat: hochwertiger, produktseitenartiger Aufbau */
.hero-scene .device.fly-chat {
  overflow: hidden;
}

.chat-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 16px;
  padding: 20px;
  min-height: 408px;
}

.chat-main {
  display: grid;
  gap: 14px;
  align-content: start;
}

.chat-agent-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}

.chat-agent-row img {
  width: 54px;
  height: 64px;
  object-fit: contain;
}

.chat-agent-row strong {
  display: block;
  color: var(--text);
}

.chat-agent-row small {
  display: block;
  color: var(--muted);
  margin-top: 2px;
}

.chat-product .bubble {
  margin: 0;
}

.chat-product .bubble.bot {
  background: linear-gradient(180deg, var(--surface), var(--surface2));
}

.chat-product .bubble.bot b {
  display: block;
  margin-bottom: 8px;
  color: var(--teal);
}

.chat-product ol {
  margin: 8px 0 0 20px;
  padding: 0;
  color: var(--muted);
}

.chat-product li {
  margin: 7px 0;
}

.chat-context {
  display: grid;
  gap: 12px;
  align-content: start;
}

.context-block {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 20px;
  padding: 14px;
}

.context-block strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
}

.context-block p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.42;
}

.context-label {
  display: inline-flex;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--teal);
}

.mini-tags {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.mini-tags span {
  padding: 7px 9px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--teal);
  font-size: .78rem;
  font-weight: 850;
}

@media(max-width: 1180px) {
  .chat-product {
    grid-template-columns: 1fr;
  }

  .chat-context {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media(max-width: 720px) {
  .aki-stage {
    min-height: auto;
  }

  .aki-effect-card,
  .aki-stage.aki-past .aki-effect-card {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .chat-context {
    grid-template-columns: 1fr;
  }
}


/* === v17 Dashboard-Anlehnung + Was-ist-AKi Effekt wirklich zuverlässig === */

/* Hero Dashboard statt einfachem Chat */
.hero-scene.dashboard-scene,
.hero-scene {
  width: min(1500px, 100%);
}

.hero-scene .device.fly-chat {
  width: min(1440px, 100%) !important;
  min-height: 760px !important;
  overflow: hidden !important;
}

.hero-chat-inner {
  min-height: 760px;
}

.dashboard-topbar {
  height: 64px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.dash-search {
  justify-self: center;
  width: min(540px, 100%);
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  color: var(--muted);
  font-weight: 700;
}

.dash-search kbd {
  margin-left: auto;
  border: 1px solid var(--line);
  background: var(--surface2);
  border-radius: 7px;
  padding: 3px 8px;
  color: var(--text);
  font: inherit;
  font-size: .82rem;
}

.dash-top-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text);
  font-weight: 800;
  font-size: .86rem;
}

.dash-top-actions b {
  color: var(--teal);
}

.dash-top-actions i,
.dash-top-actions strong {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--soft);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--teal);
}

.dashboard-product {
  display: grid;
  grid-template-columns: 190px 260px minmax(480px, 1fr) 290px;
  min-height: 696px;
}

.dash-sidebar,
.dash-agents,
.dash-chat,
.dash-context {
  min-width: 0;
  border-right: 1px solid var(--line);
}

.dash-context {
  border-right: 0;
}

.dash-sidebar {
  padding: 18px;
  background: var(--surface2);
}

.dash-brand-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--teal);
  font-weight: 950;
  letter-spacing: -.04em;
}

.dash-brand-mini span {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--soft);
  display: grid;
  place-items: center;
}

.dash-nav {
  display: grid;
  gap: 8px;
}

.dash-nav a,
.dash-chat-history {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  color: var(--muted);
  font-weight: 760;
  font-size: .9rem;
}

.dash-nav a.active,
.dash-chat-history.active {
  background: var(--soft);
  color: var(--teal);
}

.dash-nav a i,
.dash-chat-history i {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 6px;
  flex: 0 0 auto;
}

.dash-history-title {
  margin: 28px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: .82rem;
  font-weight: 900;
}

.dash-chat-history {
  align-items: flex-start;
  line-height: 1.22;
}

.dash-chat-history small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
  font-weight: 650;
}

.dash-agents {
  padding: 18px;
  background: var(--surface);
}

.dash-title {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 900;
}

.dash-agent-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 18px;
  margin-bottom: 12px;
  background: var(--surface);
}

.dash-agent-card.active {
  border-color: var(--teal);
  background: var(--soft);
}

.dash-agent-card img {
  width: 54px;
  height: 64px;
  object-fit: contain;
}

.dash-agent-card b {
  display: block;
  font-size: .92rem;
}

.dash-agent-card small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
  font-size: .78rem;
}

.dash-chat {
  padding: 18px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.dash-chat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dash-agent-mini {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash-agent-mini img {
  width: 44px;
  height: 52px;
  object-fit: contain;
}

.dash-agent-mini span {
  margin-left: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--teal);
  font-size: .78rem;
  font-weight: 900;
}

.dash-chat-head button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 850;
}

.dash-question {
  justify-self: end;
  max-width: 520px;
  background: var(--teal);
  color: #fff;
  border-radius: 18px;
  padding: 14px 16px;
  line-height: 1.45;
  box-shadow: 0 16px 30px rgba(0,128,128,.20);
}

.dash-answer {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 20px;
  padding: 16px 18px;
  line-height: 1.48;
  color: var(--muted);
  overflow: auto;
}

.dash-answer h4 {
  color: var(--text);
  margin: 12px 0 8px;
}

.dash-answer ol {
  margin: 0 0 0 20px;
  padding: 0;
}

.dash-answer li {
  margin: 6px 0;
}

.dash-answer b {
  color: var(--text);
}

.dash-warning {
  margin-top: 12px;
  color: var(--text);
}

.dash-input {
  height: 54px;
  border: 1px solid var(--teal);
  border-radius: 15px;
  background: var(--surface);
  color: var(--muted);
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-weight: 650;
}

.dash-input span {
  margin-left: auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--teal);
  color: #fff;
  display: grid;
  place-items: center;
}

.dash-context {
  padding: 18px;
  background: var(--surface);
}

.dash-context h3 {
  margin: 0 0 18px;
}

.dash-source {
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.dash-source b {
  display: block;
  margin: 6px 0 4px;
  font-size: .86rem;
}

.dash-source small {
  color: var(--muted);
}

.dash-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}

.dash-tags span {
  padding: 8px 10px;
  background: var(--soft);
  color: var(--teal);
  border-radius: 10px;
  font-weight: 800;
  font-size: .8rem;
}

.dash-project {
  padding-top: 18px;
}

.dash-project b {
  font-size: 1.08rem;
}

.dash-project p {
  color: var(--muted);
  line-height: 1.45;
}

.dash-project div {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 850;
}

.dash-project div span {
  width: 9px;
  height: 9px;
  background: var(--teal);
  border-radius: 50%;
}

/* Was ist AKi: nicht scroll-abhängig kaputtbar, triggert sobald im View */
#what-is-aki.aki-stage {
  min-height: 88vh;
  display: grid;
  place-items: center;
  position: relative;
}

#what-is-aki.aki-stage::before {
  content: "";
  position: absolute;
  inset: 18% 8%;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(0,128,128,.22), rgba(0,128,128,.06) 38%, transparent 74%);
  filter: blur(18px);
  opacity: 0;
  transform: scale(.55);
  transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
  z-index: -1;
}

#what-is-aki .aki-effect-card {
  opacity: 0 !important;
  transform: translate3d(-260px, 160px, 0) scale(.80) rotate(-6deg) rotateX(12deg) !important;
  filter: blur(22px) !important;
  transition:
    opacity 1.05s cubic-bezier(.16,1,.3,1),
    transform 1.05s cubic-bezier(.16,1,.3,1),
    filter 1.05s cubic-bezier(.16,1,.3,1) !important;
}

#what-is-aki.aki-visible::before {
  opacity: 1;
  transform: scale(1.06);
}

#what-is-aki.aki-visible .aki-effect-card {
  opacity: 1 !important;
  transform: translate3d(0,0,0) scale(1) rotate(0) rotateX(0) !important;
  filter: blur(0) !important;
}

#what-is-aki.aki-past .aki-effect-card {
  opacity: 0 !important;
  transform: translate3d(180px,-150px,0) scale(.82) rotate(5deg) rotateX(-10deg) !important;
  filter: blur(18px) !important;
}

@media(max-width: 1180px) {
  .hero-scene .device.fly-chat {
    min-height: auto !important;
  }

  .hero-chat-inner {
    min-height: auto;
  }

  .dashboard-product {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .dash-sidebar,
  .dash-context {
    display: none;
  }

  .dash-agents {
    border-right: 1px solid var(--line);
  }
}

@media(max-width: 760px) {
  .dashboard-topbar {
    grid-template-columns: 1fr;
  }

  .dash-top-actions {
    display: none;
  }

  .dashboard-product {
    grid-template-columns: 1fr;
  }

  .dash-agents {
    display: none;
  }

  #what-is-aki .aki-effect-card,
  #what-is-aki.aki-past .aki-effect-card {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}


/* === v18 Hinweis: AKi kann weitere Agents bekommen === */
.agent-card .ico {
  margin-left: auto;
  margin-right: auto;
}


/* === v20 FIX Hauptseite: Hero-Chat wieder simpler und stabil ===
   Nur das Bild/Mockup im Hero wurde vereinfacht. Rest der Seite bleibt unverändert.
*/

.hero-scene .device.fly-chat {
  width: min(760px, 100%) !important;
  min-height: 470px !important;
  height: auto !important;
  overflow: hidden !important;
  justify-self: center;
}

.hero-chat-inner {
  min-height: auto !important;
}

.simple-hero-chat {
  padding: 22px;
  display: grid;
  gap: 14px;
}

.simple-agent-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}

.simple-agent-head img {
  width: 54px;
  height: 64px;
  object-fit: contain;
}

.simple-agent-head strong {
  display: block;
  color: var(--text);
}

.simple-agent-head small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
}

.simple-hero-chat .bubble {
  margin: 0;
}

.simple-hero-chat .bubble.bot b {
  color: var(--teal);
  display: block;
  margin-bottom: 6px;
}

.simple-hero-chat .bubble.bot p {
  margin: 0;
  color: var(--muted);
}

.simple-context-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 12px;
}

.simple-context-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  padding: 14px;
}

.simple-context-card span:first-child {
  display: inline-flex;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--teal);
  margin-bottom: 8px;
}

.simple-context-card strong {
  display: block;
  color: var(--text);
  margin-bottom: 6px;
}

.simple-context-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.4;
}

/* altes Dashboard-CSS neutralisieren, falls Klassen anderswo noch geladen sind */
.dashboard-product,
.dashboard-topbar,
.dash-sidebar,
.dash-agents,
.dash-chat,
.dash-context {
  all: unset;
}

@media(max-width: 1180px) {
  .hero-scene .device.fly-chat {
    width: min(760px, 100%) !important;
    min-height: auto !important;
  }
}

@media(max-width: 720px) {
  .simple-context-grid {
    grid-template-columns: 1fr;
  }
}


/* === v21 FIX: Andi/Klaus definitiv außerhalb vom Chatcontainer ===
   Layout:
   Klaus links | Chat in der Mitte | Andi rechts
   Die Agenten sind eigene Grid-Spalten und können nicht mehr im Chat-Container landen.
*/

.hero-scene {
  width: min(1420px, 100%) !important;
  min-height: 720px;
  height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(160px, 240px) minmax(560px, 760px) minmax(160px, 240px) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(28px, 4vw, 70px) !important;
  position: relative !important;
}

.hero-scene .device.fly-chat {
  position: relative !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 760px !important;
  min-height: 470px !important;
  justify-self: center !important;
  align-self: center !important;
  z-index: 3 !important;
}

.hero-side-agent {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 2 !important;
  align-self: end !important;
  pointer-events: none !important;
}

.hero-side-agent.klaus {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: end !important;
}

.hero-side-agent.andi {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: start !important;
}

.hero-side-agent img {
  height: 245px !important;
  width: 190px !important;
  object-fit: contain !important;
}

.hero-side-agent.andi img {
  height: 265px !important;
  width: 205px !important;
}

.hero-side-agent strong {
  white-space: nowrap;
}

/* Orbs/Glow bleiben im Hintergrund, aber beeinflussen das Layout nicht */
.hero-scene .orb,
.hero-scene .hero-glow {
  position: absolute !important;
  pointer-events: none !important;
}

/* Bei mittleren Screens: Figuren UNTER dem Chat, aber weiterhin außerhalb */
@media(max-width: 1180px) {
  .hero-scene {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    min-height: auto !important;
    gap: 22px !important;
  }

  .hero-scene .device.fly-chat {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    max-width: 760px !important;
  }

  .hero-side-agent.klaus {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: end !important;
  }

  .hero-side-agent.andi {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
  }

  .hero-side-agent img {
    height: 190px !important;
    width: 150px !important;
  }

  .hero-side-agent.andi img {
    height: 205px !important;
    width: 160px !important;
  }
}

@media(max-width: 720px) {
  .hero-scene {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  .hero-side-agent img {
    height: 150px !important;
    width: 120px !important;
  }

  .hero-side-agent.andi img {
    height: 162px !important;
    width: 128px !important;
  }
}


.aki-chat-badge {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--soft);
  color: var(--teal);
  font-weight: 950;
  letter-spacing: -0.08em;
  border: 1px solid rgba(0,128,128,.28);
}

.simple-agent-head img {
  display: none !important;
}


/* === v22 FINAL FIX: Figuren sind NICHT im Chatcontainer ===
   Neue Struktur:
   .hero-layout-wrapper = 3-Spalten-Layout
   .chat-only-scene = enthält ausschließlich das Chatfenster
   .hero-agent-outside = Figuren komplett außerhalb vom Chat/Scene-Container
*/

.hero-layout-wrapper {
  width: min(1380px, calc(100% - 32px));
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(560px, 760px) minmax(150px, 220px);
  gap: clamp(28px, 4vw, 72px);
  align-items: end;
  justify-content: center;
  position: relative;
  z-index: 2;
}

/* Der alte hero-scene Container ist jetzt nur noch der Chat-Container */
.hero-layout-wrapper .chat-only-scene {
  width: 100% !important;
  min-height: auto !important;
  height: auto !important;
  display: block !important;
  grid-column: 2 !important;
  position: relative !important;
  overflow: visible !important;
  margin: 0 !important;
}

/* Chatfenster selbst */
.hero-layout-wrapper .chat-only-scene .device.fly-chat {
  width: 100% !important;
  max-width: 760px !important;
  min-height: 470px !important;
  margin: 0 auto !important;
  position: relative !important;
  grid-column: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  z-index: 3 !important;
}

/* Alle alten Agenten im Chat/Scene Container sicher ausblenden, falls alte Blöcke durch Cache/Markup noch existieren */
.chat-only-scene .hero-side-agent,
.device.fly-chat .hero-side-agent,
.device.fly-chat img[src*="placeholder-andi"],
.device.fly-chat img[src*="placeholder-klaus"] {
  display: none !important;
}

/* Die einzigen sichtbaren Hero-Figuren */
.hero-agent-outside {
  position: relative !important;
  z-index: 4 !important;
  display: grid !important;
  justify-items: center !important;
  align-content: end !important;
  pointer-events: none !important;
  transform: translateZ(0);
}

.hero-agent-klaus {
  grid-column: 1;
  justify-self: end;
}

.hero-agent-andi {
  grid-column: 3;
  justify-self: start;
}

.hero-agent-outside img {
  display: block !important;
  width: 190px !important;
  height: 250px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 28px 38px rgba(0,0,0,.28));
}

.hero-agent-andi img {
  width: 205px !important;
  height: 270px !important;
}

.hero-agent-outside strong {
  margin-top: 10px;
  color: var(--text);
  font-weight: 950;
  font-size: 1rem;
}

.hero-agent-outside span {
  margin-top: 3px;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 750;
  text-align: center;
}

/* Im Chatkopf darf KEIN Andi-Bild erscheinen */
.simple-agent-head img {
  display: none !important;
}

.aki-chat-badge {
  display: grid !important;
}

/* Alte v21 hero-scene Grid-Regeln für diese neue Struktur neutralisieren */
.hero-layout-wrapper .hero-scene {
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  gap: 0 !important;
}

@media(max-width: 1180px) {
  .hero-layout-wrapper {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: end;
  }

  .hero-layout-wrapper .chat-only-scene {
    grid-column: 1 / -1 !important;
    grid-row: 1;
  }

  .hero-agent-klaus {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
  }

  .hero-agent-andi {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }

  .hero-agent-outside img {
    width: 145px !important;
    height: 190px !important;
  }

  .hero-agent-andi img {
    width: 155px !important;
    height: 205px !important;
  }
}

@media(max-width: 720px) {
  .hero-layout-wrapper {
    width: min(100% - 20px, 760px);
    gap: 14px;
  }

  .hero-agent-outside img {
    width: 115px !important;
    height: 150px !important;
  }

  .hero-agent-andi img {
    width: 124px !important;
    height: 162px !important;
  }

  .hero-agent-outside strong,
  .hero-agent-outside span {
    font-size: .78rem;
  }
}


/* === v23: Chat-Bereich und Was-ist-AKi nutzen denselben Effekt wie die unteren Inhalte === */

/* Hero-Bereich als Fly-Section, aber ohne das Layout kaputtzumachen */
.hero-layout-wrapper.fly-section {
  min-height: 78vh;
  padding: 28px 0 60px;
  position: relative;
}

.hero-layout-wrapper.fly-section::before,
.what-aki-section.fly-section::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(900px, 90vw);
  height: min(460px, 55vh);
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(0,128,128,.20), rgba(0,128,128,.055) 40%, transparent 72%);
  filter: blur(20px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.68);
  transition:
    opacity .9s cubic-bezier(.16,1,.3,1),
    transform .9s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
  z-index: -1;
}

/* Gleicher Fly-Grundzustand wie unten */
.index-page .hero-layout-wrapper.fly-section > .fly-card,
.index-page .what-aki-section.fly-section > .fly-card {
  opacity: 0 !important;
  filter: blur(18px) !important;
  transform: translate3d(0, 135px, 0) scale(.84) rotateX(10deg) !important;
  transition:
    opacity .95s cubic-bezier(.16,1,.3,1),
    transform .95s cubic-bezier(.16,1,.3,1),
    filter .95s cubic-bezier(.16,1,.3,1) !important;
  will-change: opacity, transform, filter;
}

/* Chatbereich kommt als Gesamtbild leicht von rechts, wie die unteren Inhalte */
.index-page .hero-layout-wrapper.fly-section.has-right > .fly-card {
  transform: translate3d(190px, 115px, 0) scale(.84) rotate(5deg) rotateX(10deg) !important;
}

/* Klaus/Andi mit minimalem Delay, damit es hochwertiger wirkt */
.index-page .hero-layout-wrapper.fly-section > .hero-agent-klaus.fly-card {
  transition-delay: .04s !important;
}

.index-page .hero-layout-wrapper.fly-section > .chat-only-scene.fly-card {
  transition-delay: .11s !important;
}

.index-page .hero-layout-wrapper.fly-section > .hero-agent-andi.fly-card {
  transition-delay: .18s !important;
}

/* Was ist AKi exakt wie die unteren linken Sections */
.index-page .what-aki-section.fly-section.has-left > .fly-card {
  transform: translate3d(-190px, 115px, 0) scale(.84) rotate(-5deg) rotateX(10deg) !important;
}

/* Sichtbar */
.index-page .hero-layout-wrapper.fly-section.is-visible::before,
.index-page .what-aki-section.fly-section.is-visible::before {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1.05) !important;
}

.index-page .hero-layout-wrapper.fly-section.is-visible > .fly-card,
.index-page .hero-layout-wrapper.fly-section.has-right.is-visible > .fly-card,
.index-page .what-aki-section.fly-section.is-visible > .fly-card,
.index-page .what-aki-section.fly-section.has-left.is-visible > .fly-card {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translate3d(0,0,0) scale(1) rotate(0) rotateX(0) !important;
}

/* Vergangen / raus */
.index-page .hero-layout-wrapper.fly-section.is-past > .fly-card,
.index-page .hero-layout-wrapper.fly-section.has-right.is-past > .fly-card,
.index-page .what-aki-section.fly-section.is-past > .fly-card,
.index-page .what-aki-section.fly-section.has-left.is-past > .fly-card {
  opacity: 0 !important;
  filter: blur(14px) !important;
  transform: translate3d(0,-135px,0) scale(.86) rotateX(-8deg) !important;
}

/* Alte spezielle AKi-Stage-Regeln neutralisieren, damit nur noch das einheitliche System greift */
#what-is-aki.aki-stage,
#what-is-aki.aki-visible,
#what-is-aki.aki-past {
  all: unset;
}

#what-is-aki.what-aki-section {
  min-height: 88vh;
  display: grid;
  place-items: center;
  position: relative;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

/* Demo: Quellen rechts dürfen nicht mehr aus der Box laufen */
.demo-panel,
.demo-result,
.demo-source,
.demo-sources,
.source-card,
.sources,
.source-list,
.context-card,
.demo aside,
.demo .panel,
.demo .card {
  min-width: 0;
}

.demo-source,
.demo-sources *,
.source-card,
.source-card *,
.sources,
.sources *,
.source-list,
.source-list *,
.demo-result,
.demo-result *,
.context-card,
.context-card *,
.demo aside,
.demo aside *,
.demo .panel,
.demo .panel * {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  max-width: 100%;
}

/* Falls Dateien/Quellen als eine Zeile ausgegeben werden: in zwei Zeilen umbrechen */
.demo-source,
.source-card,
.sources div,
.source-list div,
.context-card p,
.demo aside p {
  line-height: 1.45;
}

.demo-source b,
.source-card b,
.sources b,
.source-list b,
.context-card b,
.demo aside b {
  display: block;
  margin-bottom: 4px;
}

/* File-Badge bleibt links, Dateiname darf danach umbrechen */
.file {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 7px;
  flex: 0 0 auto;
}

/* Mobile sicher sichtbar */
@media(max-width: 900px) {
  .index-page .hero-layout-wrapper.fly-section > .fly-card,
  .index-page .what-aki-section.fly-section > .fly-card,
  .index-page .hero-layout-wrapper.fly-section.is-past > .fly-card,
  .index-page .what-aki-section.fly-section.is-past > .fly-card {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}


/* === v24: Header CTA "Anfragen" + Demo Zurücksetzen Button lesbar === */

/* Demo Reset/Zurücksetzen Button kontrastreicher */
#resetDemo,
.reset-demo,
.demo-reset,
button[data-reset],
.demo button.reset,
.demo-actions button,
.demo .ghost,
.demo .secondary,
button.ghost {
  color: var(--text) !important;
  background: var(--surface) !important;
  border: 1px solid rgba(0,128,128,.42) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.12) !important;
}

body.dark #resetDemo,
body.dark .reset-demo,
body.dark .demo-reset,
body.dark button[data-reset],
body.dark .demo button.reset,
body.dark .demo-actions button,
body.dark .demo .ghost,
body.dark .demo .secondary,
body.dark button.ghost {
  color: #eef6fb !important;
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(0,128,128,.55) !important;
}

#resetDemo:hover,
.reset-demo:hover,
.demo-reset:hover,
button[data-reset]:hover,
.demo button.reset:hover,
.demo-actions button:hover,
.demo .ghost:hover,
.demo .secondary:hover,
button.ghost:hover {
  color: #fff !important;
  background: var(--teal) !important;
  border-color: var(--teal) !important;
}


/* === v25: Brand-Box exakt um Logo + Texte, Powered by NAURA darunter zentriert === */

.brand.brand-box {
  display: inline-grid !important;
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: center;
  gap: 5px;
  width: max-content;
  max-width: max-content;
  padding: 10px 14px 9px;
  border: 1px solid rgba(0,128,128,.32);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--surface), var(--surface2));
  box-shadow: 0 14px 32px rgba(0,0,0,.10);
  text-decoration: none !important;
  line-height: 1;
  flex: 0 0 auto;
}

body.dark .brand.brand-box {
  background: rgba(255,255,255,.055);
  border-color: rgba(0,128,128,.42);
  box-shadow: 0 16px 36px rgba(0,0,0,.28);
}

.brand-box .brand-main {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  width: max-content;
}

.brand-box .brand-aki {
  font-weight: 950;
  font-size: 1.38rem;
  letter-spacing: -0.08em;
  color: var(--text);
}

.brand-box .brand-words {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--muted);
}

.brand-box .brand-powered {
  display: block;
  width: 100%;
  text-align: center;
  color: var(--teal);
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .17em;
  text-transform: uppercase;
  padding-top: 5px;
  border-top: 1px solid rgba(0,128,128,.20);
  white-space: nowrap;
}

/* Alte Logo-Bild-Regeln nicht auf neue Box anwenden */
.brand.brand-box img {
  display: none !important;
}

@media(max-width: 760px) {
  .brand.brand-box {
    padding: 9px 11px 8px;
  }

  .brand-box .brand-main {
    gap: 8px;
  }

  .brand-box .brand-aki {
    font-size: 1.18rem;
  }

  .brand-box .brand-words {
    font-size: .58rem;
    letter-spacing: .045em;
  }

  .brand-box .brand-powered {
    font-size: .56rem;
    letter-spacing: .12em;
  }
}

@media(max-width: 440px) {
  .brand-box .brand-words {
    max-width: 150px;
    white-space: normal;
    line-height: 1.15;
    text-align: left;
  }
}


/* === v26: Smart Navbar + NAURA-Link + Anfrageformular === */

/* Header neu: Brand-Box + ausklappbares Panel */
.smart-nav {
  grid-template-columns: auto 1fr !important;
  transition:
    max-width .42s cubic-bezier(.16,1,.3,1),
    width .42s cubic-bezier(.16,1,.3,1),
    padding .42s cubic-bezier(.16,1,.3,1),
    border-radius .42s cubic-bezier(.16,1,.3,1),
    transform .42s cubic-bezier(.16,1,.3,1),
    background .42s cubic-bezier(.16,1,.3,1);
}

.nav-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 22px;
  min-width: 0;
  transition:
    opacity .28s cubic-bezier(.16,1,.3,1),
    transform .28s cubic-bezier(.16,1,.3,1);
}

.naura-nav-link {
  color: var(--teal) !important;
  font-weight: 950 !important;
}

.naura-nav-link:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.nav-collapse-toggle {
  display: none;
  appearance: none;
  border: 1px solid rgba(0,128,128,.40);
  background: var(--soft);
  color: var(--teal);
  border-radius: 18px;
  padding: 10px 13px;
  font: inherit;
  cursor: pointer;
  align-items: center;
  gap: 9px;
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
}

.nav-collapse-toggle span {
  font-weight: 950;
  font-size: 1.12rem;
  letter-spacing: -0.08em;
}

.nav-collapse-toggle em {
  font-style: normal;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
}

/* Beim Scrollen wird die Navbar zum AKi-Logo */
.smart-nav.nav-collapsed:not(.nav-open) {
  width: max-content !important;
  max-width: max-content !important;
  grid-template-columns: auto !important;
  padding: 8px !important;
  border-radius: 22px !important;
}

.smart-nav.nav-collapsed:not(.nav-open) .brand-box,
.smart-nav.nav-collapsed:not(.nav-open) .nav-panel {
  display: none !important;
}

.smart-nav.nav-collapsed .nav-collapse-toggle {
  display: inline-flex !important;
}

/* Aufgeklappt nach Klick */
.smart-nav.nav-collapsed.nav-open {
  width: min(calc(var(--max) - 24px), calc(100% - 28px)) !important;
  max-width: calc(var(--max) - 24px) !important;
  grid-template-columns: auto 1fr !important;
}

.smart-nav.nav-collapsed.nav-open .brand-box {
  display: inline-grid !important;
}

.smart-nav.nav-collapsed.nav-open .nav-panel {
  display: grid !important;
}

/* Brand-Box wirklich statt altem Bildlogo */
.logo {
  display: none !important;
}

.brand.brand-box {
  display: inline-grid !important;
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: center;
  gap: 5px;
  width: max-content;
  max-width: max-content;
  padding: 10px 14px 9px;
  border: 1px solid rgba(0,128,128,.32);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--surface), var(--surface2));
  box-shadow: 0 14px 32px rgba(0,0,0,.10);
  text-decoration: none !important;
  line-height: 1;
  flex: 0 0 auto;
}

body.dark .brand.brand-box {
  background: rgba(255,255,255,.055);
  border-color: rgba(0,128,128,.42);
  box-shadow: 0 16px 36px rgba(0,0,0,.28);
}

.brand-box .brand-main {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  width: max-content;
}

.brand-box .brand-aki {
  font-weight: 950;
  font-size: 1.38rem;
  letter-spacing: -0.08em;
  color: var(--text);
}

.brand-box .brand-words {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--muted);
}

.brand-box .brand-powered {
  display: block;
  width: 100%;
  text-align: center;
  color: var(--teal);
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .17em;
  text-transform: uppercase;
  padding-top: 5px;
  border-top: 1px solid rgba(0,128,128,.20);
  white-space: nowrap;
}

/* Anfrageformular */
.anfrage-panel {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(24px, 4vw, 58px);
  align-items: start;
}

.compact-tiles {
  margin-top: 22px;
}

.anfrage-form {
  display: grid;
  gap: 18px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.anfrage-form label {
  display: grid;
  gap: 8px;
  color: var(--text);
  font-weight: 850;
}

.anfrage-form input,
.anfrage-form select,
.anfrage-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  padding: 13px 14px;
  font: inherit;
  outline: none;
}

.anfrage-form textarea {
  resize: vertical;
}

.anfrage-form input:focus,
.anfrage-form select:focus,
.anfrage-form textarea:focus {
  border-color: rgba(0,128,128,.70);
  box-shadow: 0 0 0 4px rgba(0,128,128,.12);
}

.form-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.form-note {
  color: var(--muted);
  font-size: .9rem;
  margin: 0;
  line-height: 1.45;
}

@media(max-width: 1080px) {
  .smart-nav,
  .smart-nav.nav-collapsed.nav-open {
    grid-template-columns: 1fr !important;
    width: min(calc(100% - 28px), calc(var(--max) - 24px)) !important;
  }

  .nav-panel,
  .smart-nav.nav-collapsed.nav-open .nav-panel {
    grid-template-columns: 1fr !important;
    justify-items: start;
  }

  .navlinks {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 14px 20px;
  }

  .anfrage-panel {
    grid-template-columns: 1fr;
  }
}

@media(max-width: 760px) {
  .brand.brand-box {
    padding: 9px 11px 8px;
  }

  .brand-box .brand-main {
    gap: 8px;
  }

  .brand-box .brand-aki {
    font-size: 1.18rem;
  }

  .brand-box .brand-words {
    font-size: .58rem;
    letter-spacing: .045em;
  }

  .brand-box .brand-powered {
    font-size: .56rem;
    letter-spacing: .12em;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }
}

@media(max-width: 440px) {
  .brand-box .brand-words {
    max-width: 150px;
    white-space: normal;
    line-height: 1.15;
    text-align: left;
  }
}


/* === v27: Responsive Navbar + Brand ohne große Box ===
   - Box nur noch um "Powered by NAURA"
   - Automation / Knowledge / Intelligence steht untereinander
   - Navbar wird beim Öffnen nur so breit wie nötig
   - Mobile: Menü bleibt sichtbar und klappt sauber auf
*/

/* Grundstruktur: kein leerer rechter Bereich mehr */
.nav.smart-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 12px 18px !important;
  width: max-content !important;
  max-width: calc(100% - 28px) !important;
  grid-template-columns: none !important;
  padding: 10px 12px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* alte Brand-Box komplett neutralisieren */
.brand.brand-box {
  display: none !important;
}

/* Neues AKi Lockup: keine Box außen */
.brand.brand-lockup {
  display: inline-grid !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 5px !important;
  width: max-content !important;
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

.brand-lockup .brand-head {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  white-space: nowrap !important;
}

.brand-lockup .brand-aki {
  color: var(--text) !important;
  font-weight: 950 !important;
  font-size: 1.58rem !important;
  letter-spacing: -0.085em !important;
  line-height: .9 !important;
}

.brand-lockup .brand-stack {
  display: grid !important;
  gap: 1px !important;
  color: var(--muted) !important;
  font-size: .55rem !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
}

.brand-lockup .brand-powered-box {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  max-width: 100% !important;
  padding: 5px 9px !important;
  border: 1px solid rgba(0,128,128,.40) !important;
  border-radius: 999px !important;
  background: var(--soft) !important;
  color: var(--teal) !important;
  font-size: .56rem !important;
  font-weight: 950 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-align: center !important;
}

body.dark .brand-lockup .brand-powered-box {
  border-color: rgba(0,128,128,.58) !important;
  background: rgba(0,128,128,.14) !important;
}

/* Panel schrumpft auf Inhalt statt freien Raum zu erzeugen */
.nav-panel,
.smart-nav.nav-collapsed.nav-open .nav-panel,
.smart-nav:not(.nav-collapsed) .nav-panel {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  width: max-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: none !important;
  flex: 0 1 auto !important;
}

.navlinks,
.smart-nav .navlinks {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 10px 20px !important;
  width: max-content !important;
  max-width: 100% !important;
}

.navlinks a {
  white-space: nowrap;
}

.actions,
.smart-nav .actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
}

/* Naura bleibt Firmenfarbe */
.naura-nav-link {
  color: var(--teal) !important;
  font-weight: 950 !important;
}

/* Collapse-Zustände: geöffnet auch nur Inhaltbreite */
.smart-nav.nav-collapsed:not(.nav-open) {
  width: max-content !important;
  max-width: max-content !important;
  display: flex !important;
  padding: 8px !important;
}

.smart-nav.nav-collapsed:not(.nav-open) .brand-lockup,
.smart-nav.nav-collapsed:not(.nav-open) .nav-panel {
  display: none !important;
}

.smart-nav.nav-collapsed .nav-collapse-toggle {
  display: inline-flex !important;
}

.smart-nav.nav-collapsed.nav-open {
  width: max-content !important;
  max-width: calc(100% - 28px) !important;
  grid-template-columns: none !important;
  padding: 10px 12px !important;
}

.smart-nav.nav-collapsed.nav-open .brand-lockup {
  display: inline-grid !important;
}

/* Bereich 1080-1200: alte Regel hatte die Links versteckt */
@media(max-width: 1200px) {
  .smart-nav .navlinks {
    display: flex !important;
  }
}

/* Tablet/Handy: immer ein sichtbarer AKi-Menü-Button, Panel als Dropdown */
@media(max-width: 860px) {
  .nav.smart-nav {
    width: min(100% - 20px, 720px) !important;
    max-width: calc(100% - 20px) !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .smart-nav .nav-collapse-toggle {
    display: inline-flex !important;
    order: 1;
  }

  .smart-nav .brand-lockup {
    order: 2;
    margin-left: auto !important;
  }

  .smart-nav .nav-panel {
    order: 3;
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--line) !important;
  }

  .smart-nav.nav-open .nav-panel {
    display: flex !important;
  }

  .smart-nav .navlinks {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .smart-nav .navlinks a {
    padding: 10px 11px !important;
    border-radius: 12px !important;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .smart-nav .navlinks .naura-nav-link {
    border-color: rgba(0,128,128,.36) !important;
    background: var(--soft) !important;
  }

  .smart-nav .actions {
    width: 100% !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
  }

  .smart-nav.nav-collapsed.nav-open {
    width: min(100% - 20px, 720px) !important;
    max-width: calc(100% - 20px) !important;
  }

  .brand-lockup .brand-aki {
    font-size: 1.36rem !important;
  }

  .brand-lockup .brand-stack {
    font-size: .48rem !important;
    letter-spacing: .08em !important;
  }

  .brand-lockup .brand-powered-box {
    font-size: .50rem !important;
    letter-spacing: .11em !important;
    padding: 4px 8px !important;
  }
}

@media(max-width: 460px) {
  .nav.smart-nav {
    padding: 9px !important;
  }

  .brand-lockup .brand-head {
    gap: 7px !important;
  }

  .brand-lockup .brand-aki {
    font-size: 1.18rem !important;
  }

  .brand-lockup .brand-stack {
    font-size: .40rem !important;
    letter-spacing: .055em !important;
  }

  .brand-lockup .brand-powered-box {
    font-size: .44rem !important;
    letter-spacing: .08em !important;
    padding: 4px 7px !important;
  }

  .smart-nav .navlinks {
    grid-template-columns: 1fr !important;
  }

  .smart-nav .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .smart-nav .actions .btn,
  .smart-nav .theme {
    width: 100% !important;
    justify-content: center !important;
  }
}


/* === v28: AKi in Navbar Firmenfarbe + Meet AKi stärker inszeniert === */

/* AKi im Navbar-Logo in NAURA-Firmenfarbe */
.brand-lockup .brand-aki,
.nav-collapse-toggle span {
  color: var(--teal) !important;
  text-shadow: 0 0 22px rgba(0,128,128,.22);
}

/* Meet AKi auffälliger, aber weiterhin sauber/Apple-artig */
.meet-aki-line {
  position: relative;
  width: max-content;
  max-width: min(100%, 620px);
  margin: 4px auto 18px !important;
  padding: 12px 22px 13px;
  border: 1px solid rgba(0,128,128,.34);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 20%, rgba(0,128,128,.20), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  box-shadow:
    0 18px 55px rgba(0,128,128,.16),
    inset 0 1px 0 rgba(255,255,255,.12);
  color: var(--text) !important;
  overflow: hidden;
  isolation: isolate;
  animation: meetAkiFloatV28 4.8s ease-in-out infinite;
}

.meet-aki-line::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.34) 38%, rgba(0,128,128,.28) 50%, transparent 64%);
  transform: translateX(-120%);
  animation: meetAkiShineV28 4.2s cubic-bezier(.16,1,.3,1) infinite;
  z-index: -1;
}

.meet-aki-line::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  border: 1px solid rgba(0,128,128,.20);
  pointer-events: none;
}

.meet-aki-line span {
  color: var(--teal) !important;
  text-shadow:
    0 0 18px rgba(0,128,128,.38),
    0 0 42px rgba(0,128,128,.20);
}

@keyframes meetAkiShineV28 {
  0%, 28% { transform: translateX(-120%); opacity: 0; }
  38% { opacity: 1; }
  62% { transform: translateX(120%); opacity: .9; }
  100% { transform: translateX(120%); opacity: 0; }
}

@keyframes meetAkiFloatV28 {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.012); }
}

@media(max-width: 620px) {
  .meet-aki-line {
    padding: 10px 16px 11px;
    font-size: clamp(1.25rem, 8vw, 2.25rem) !important;
  }
}


/* === v30: Kompakter Dark/Light Toggle mit Mond/Sonne + mehr Luft in der Navbar === */

/* Navbar etwas luftiger */
.nav.smart-nav {
  gap: 14px 28px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.nav-panel,
.smart-nav.nav-collapsed.nav-open .nav-panel,
.smart-nav:not(.nav-collapsed) .nav-panel {
  gap: 28px !important;
}

.navlinks,
.smart-nav .navlinks {
  gap: 12px 30px !important;
}

.actions,
.smart-nav .actions {
  gap: 16px !important;
}

.navlinks a {
  padding-inline: 2px;
}

/* Alter Text/Switch raus, nur Icons bleiben */
.theme.icon-theme {
  width: 62px !important;
  height: 34px !important;
  min-width: 62px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(0,128,128,.38) !important;
  border-radius: 999px !important;
  background: var(--surface) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  color: var(--muted) !important;
  font-size: 0 !important;
}

body.dark .theme.icon-theme {
  background: rgba(255,255,255,.065) !important;
  border-color: rgba(0,128,128,.50) !important;
}

.theme.icon-theme input {
  position: absolute !important;
  opacity: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
}

.theme-icons {
  width: 100%;
  height: 100%;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  position: relative;
  z-index: 1;
}

.theme-icons::before {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  top: 2px;
  left: 2px;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 8px 18px rgba(0,128,128,.26);
  transition: transform .25s cubic-bezier(.16,1,.3,1);
  z-index: -1;
}

.theme-icons .moon,
.theme-icons .sun {
  display: grid !important;
  place-items: center !important;
  width: 28px;
  height: 28px;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: var(--muted);
  transition: color .2s ease, transform .2s ease;
}

body.dark .theme-icons::before {
  transform: translateX(28px);
}

body.dark .theme-icons .sun,
body:not(.dark) .theme-icons .moon {
  color: #fff !important;
  transform: scale(1.04);
}

body.dark .theme-icons .moon,
body:not(.dark) .theme-icons .sun {
  color: var(--muted) !important;
}

/* Alte Switch-Styles sicher deaktivieren */
.theme.icon-theme .switch {
  display: none !important;
}

/* Mobile: mehr Abstand, aber weiterhin kompakt */
@media(max-width: 860px) {
  .nav.smart-nav {
    gap: 12px !important;
  }

  .smart-nav .navlinks {
    gap: 10px !important;
  }

  .smart-nav .actions {
    gap: 12px !important;
  }

  .theme.icon-theme {
    width: 62px !important;
    min-width: 62px !important;
  }
}

@media(max-width: 460px) {
  .smart-nav .actions {
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
  }

  .theme.icon-theme {
    justify-self: start !important;
  }
}


/* === v31: Agent-Karten ohne Referenzbild-Hinweisbox + Team-Erweiterungsbereich === */

.agent-card .placeholder-note {
  display: none !important;
}

.team-boost {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(24px, 4vw, 58px);
  align-items: center;
}

.team-boost-grid {
  display: grid;
  gap: 14px;
}

.team-boost-grid div {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num title"
    "num text";
  gap: 4px 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}

.team-boost-grid strong {
  grid-area: num;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--soft);
  color: var(--teal);
  font-weight: 950;
}

.team-boost-grid span {
  grid-area: title;
  color: var(--text);
  font-weight: 900;
}

.team-boost-grid p {
  grid-area: text;
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}

@media(max-width: 900px) {
  .team-boost {
    grid-template-columns: 1fr;
  }
}


/* === v32: Agenten bekommen klare Namen === */
.agent-name-grid .ico {
  margin-left: 0;
  margin-right: 0;
}

.agent-name-grid .card h3 {
  font-size: 1.45rem;
}

.agent-card h3 {
  letter-spacing: -0.03em;
}


/* === v33: Agent-Rollen nach gewünschter Geschlechterwirkung benannt ===
   Dana weiblich, Sven männlich, Nico männlich, Tia weiblich.
*/


/* === v34: Agents-Reiter auf 4 Haupt-Agents fokussiert === */

.main-agent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 34px);
}

.main-agent-card {
  min-height: 520px;
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--line);
  border-radius: 34px;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 0%, rgba(0,128,128,.16), transparent 34%),
    linear-gradient(180deg, var(--surface), var(--surface2));
  box-shadow: 0 28px 70px rgba(0,0,0,.13);
  position: relative;
  isolation: isolate;
}

body.dark .main-agent-card {
  box-shadow: 0 34px 90px rgba(0,0,0,.34);
}

.main-agent-card::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: rgba(0,128,128,.16);
  filter: blur(34px);
  z-index: -1;
}

.main-agent-visual {
  min-height: 235px;
  display: grid;
  place-items: end center;
  padding: 28px 28px 0;
  background:
    linear-gradient(180deg, rgba(0,128,128,.10), transparent),
    radial-gradient(circle at center, rgba(0,128,128,.18), transparent 52%);
  border-bottom: 1px solid var(--line);
}

.main-agent-visual img {
  width: min(240px, 74%);
  height: 225px;
  object-fit: contain;
  filter: drop-shadow(0 22px 34px rgba(0,0,0,.24));
}

.main-agent-card.andi .main-agent-visual img,
.main-agent-card.klaus .main-agent-visual img {
  height: 245px;
}

.main-agent-content {
  padding: 28px;
  display: grid;
  align-content: start;
  gap: 15px;
}

.main-agent-content .agent-role {
  margin: 0;
  color: var(--teal);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .76rem;
}

.main-agent-content h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.15rem);
  letter-spacing: -0.07em;
  line-height: .95;
}

.main-agent-content p {
  margin: 0;
  color: var(--muted);
  line-height: 1.58;
  font-size: 1.02rem;
}

.main-agent-content ul {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.main-agent-content li {
  color: var(--text);
  line-height: 1.42;
  padding-left: 26px;
  position: relative;
  font-weight: 720;
}

.main-agent-content li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--teal);
  font-weight: 950;
}

.agent-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.agent-tags span {
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--teal);
  border: 1px solid rgba(0,128,128,.24);
  font-size: .82rem;
  font-weight: 850;
}

@media(max-width: 980px) {
  .main-agent-grid {
    grid-template-columns: 1fr;
  }

  .main-agent-card {
    min-height: auto;
  }
}

@media(max-width: 560px) {
  .main-agent-content {
    padding: 22px;
  }

  .main-agent-visual {
    min-height: 200px;
  }

  .main-agent-visual img,
  .main-agent-card.andi .main-agent-visual img,
  .main-agent-card.klaus .main-agent-visual img {
    height: 200px;
  }
}


/* ==========================================================
   v36 RESPONSIVE REWORK
   - stabile Navbar ohne Ein-/Ausklapp-Flackern
   - bessere Mobile-Navigation
   - Container/Grids ab kleineren Breiten sauber umbrechen
   ========================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ---------- Navbar v36 ---------- */

.nav.nav-v36 {
  position: sticky !important;
  top: 12px !important;
  z-index: 1000 !important;

  width: fit-content !important;
  max-width: calc(100% - 24px) !important;
  min-width: 0 !important;
  margin: 12px auto 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 22px !important;

  padding: 10px 14px !important;
  border: 1px solid var(--line) !important;
  border-radius: 24px !important;
  background: color-mix(in srgb, var(--surface2) 88%, transparent) !important;
  backdrop-filter: blur(24px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.15) !important;
  box-shadow: 0 14px 46px rgba(15,23,42,.10) !important;

  transition:
    width .28s cubic-bezier(.16,1,.3,1),
    max-width .28s cubic-bezier(.16,1,.3,1),
    padding .28s cubic-bezier(.16,1,.3,1),
    border-radius .28s cubic-bezier(.16,1,.3,1),
    box-shadow .28s cubic-bezier(.16,1,.3,1);
}

body.dark .nav.nav-v36 {
  background: rgba(8, 15, 22, .72) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,.30) !important;
}

/* Brand: keine große Box außen, nur Powered by in kleiner Box */
.nav-v36 .brand-lockup {
  display: inline-grid !important;
  justify-items: center !important;
  gap: 5px !important;
  flex: 0 0 auto !important;
  width: max-content !important;
  max-width: 100% !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

.nav-v36 .brand-head {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  white-space: nowrap !important;
}

.nav-v36 .brand-aki {
  color: var(--teal) !important;
  font-size: 1.56rem !important;
  font-weight: 950 !important;
  letter-spacing: -0.09em !important;
  line-height: .92 !important;
  text-shadow: 0 0 18px rgba(0,128,128,.18);
}

.nav-v36 .brand-stack {
  display: grid !important;
  gap: 1px !important;
  color: var(--muted) !important;
  font-size: .54rem !important;
  font-weight: 900 !important;
  letter-spacing: .11em !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
}

.nav-v36 .brand-powered-box {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  padding: 5px 9px !important;
  border: 1px solid rgba(0,128,128,.42) !important;
  border-radius: 999px !important;
  background: var(--soft) !important;
  color: var(--teal) !important;
  font-size: .55rem !important;
  font-weight: 950 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.nav-menu-toggle-v36 {
  display: none !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;

  appearance: none !important;
  border: 1px solid rgba(0,128,128,.42) !important;
  border-radius: 18px !important;
  background: var(--soft) !important;
  color: var(--teal) !important;
  padding: 10px 12px !important;
  font: inherit !important;
  cursor: pointer !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;
}

.nav-menu-toggle-v36 span {
  color: var(--teal) !important;
  font-size: 1.14rem !important;
  font-weight: 950 !important;
  letter-spacing: -0.08em !important;
  line-height: 1 !important;
}

.nav-menu-toggle-v36 em {
  color: var(--muted) !important;
  font-style: normal !important;
  font-size: .70rem !important;
  font-weight: 950 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

.nav-drawer-v36 {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
}

.navlinks-v36 {
  display: flex !important;
  align-items: center !important;
  gap: 26px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
  font-weight: 800 !important;
}

.navlinks-v36 a {
  color: var(--text) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color .18s ease, transform .18s ease, background .18s ease;
}

.navlinks-v36 a:hover {
  color: var(--teal) !important;
  transform: translateY(-1px);
}

.navlinks-v36 .naura-nav-link {
  color: var(--teal) !important;
  font-weight: 950 !important;
}

.nav-actions-v36 {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex: 0 0 auto !important;
}

/* Kompakter Scroll-Zustand nur Desktop */
.nav-v36.is-compact:not(.is-open) {
  padding: 8px !important;
  border-radius: 22px !important;
  width: fit-content !important;
  max-width: fit-content !important;
}

.nav-v36.is-compact:not(.is-open) .brand-lockup,
.nav-v36.is-compact:not(.is-open) .nav-drawer-v36 {
  display: none !important;
}

.nav-v36.is-compact .nav-menu-toggle-v36 {
  display: inline-flex !important;
}

.nav-v36.is-compact.is-open {
  width: fit-content !important;
  max-width: calc(100% - 24px) !important;
}

/* Theme Toggle v36 kompakt */
.nav-v36 .theme.icon-theme {
  width: 60px !important;
  height: 34px !important;
  min-width: 60px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(0,128,128,.38) !important;
  border-radius: 999px !important;
  background: var(--surface) !important;
  overflow: hidden !important;
  position: relative !important;
  cursor: pointer !important;
  font-size: 0 !important;
}

.nav-v36 .theme.icon-theme input {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

.nav-v36 .theme-icons {
  width: 100%;
  height: 100%;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  position: relative;
  z-index: 1;
}

.nav-v36 .theme-icons::before {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  left: 2px;
  top: 2px;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 8px 18px rgba(0,128,128,.24);
  transition: transform .24s cubic-bezier(.16,1,.3,1);
  z-index: -1;
}

body.dark .nav-v36 .theme-icons::before {
  transform: translateX(26px);
}

.nav-v36 .theme-icons .moon,
.nav-v36 .theme-icons .sun {
  width: 28px;
  height: 28px;
  display: grid !important;
  place-items: center !important;
  font-size: 15px !important;
  line-height: 1 !important;
  color: var(--muted);
}

body.dark .nav-v36 .theme-icons .sun,
body:not(.dark) .nav-v36 .theme-icons .moon {
  color: #fff !important;
}

/* Alte Navbar-Klassen in v36-Header neutralisieren */
.nav-v36 .nav-panel,
.nav-v36 .navlinks,
.nav-v36 .actions,
.nav-v36 .nav-collapse-toggle {
  display: none !important;
}

/* ---------- Allgemein bessere responsive Container ---------- */

.shell,
.page-title,
.section.shell {
  width: min(var(--max), calc(100% - 32px)) !important;
}

.page-title {
  padding-top: clamp(56px, 8vw, 110px) !important;
}

.section {
  padding-top: clamp(56px, 8vw, 92px) !important;
  padding-bottom: clamp(56px, 8vw, 92px) !important;
}

.panel,
.card,
.agent-card,
.main-agent-card,
.control,
.result,
.demo-side,
.demo-chat,
.context {
  min-width: 0 !important;
}

img,
svg,
video {
  max-width: 100%;
}

p,
li,
h1,
h2,
h3,
span,
a,
button,
input,
textarea,
select {
  overflow-wrap: anywhere;
}

/* Grids ab Tablet sauber umbrechen */
@media(max-width: 1120px) {
  .cards,
  .agent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .config,
  .demo-shell,
  .anfrage-panel,
  .team-boost {
    grid-template-columns: 1fr !important;
  }

  .demo-side,
  .demo-chat,
  .context {
    padding: 18px !important;
  }

  .context {
    order: 3;
  }
}

/* Hero ab mittleren Breiten stabil */
@media(max-width: 1180px) {
  .hero-layout-wrapper {
    width: min(100% - 28px, 840px) !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 22px !important;
    align-items: end !important;
  }

  .hero-layout-wrapper .chat-only-scene {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  .hero-agent-klaus {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: end !important;
  }

  .hero-agent-andi {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
  }

  .hero-agent-outside img {
    width: 145px !important;
    height: 190px !important;
  }

  .hero-agent-andi img {
    width: 155px !important;
    height: 205px !important;
  }
}

/* ---------- Mobile Navbar ---------- */

@media(max-width: 900px) {
  .nav.nav-v36 {
    width: min(100% - 20px, 720px) !important;
    max-width: calc(100% - 20px) !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "brand toggle"
      "drawer drawer";
    align-items: center !important;
    gap: 10px 12px !important;
    padding: 10px !important;
    border-radius: 22px !important;
  }

  .nav-v36 .brand-lockup {
    grid-area: brand;
    justify-self: start;
    max-width: 100%;
  }

  .nav-v36 .nav-menu-toggle-v36 {
    grid-area: toggle;
    display: inline-flex !important;
    justify-self: end;
  }

  .nav-v36 .nav-drawer-v36 {
    grid-area: drawer;
    display: none !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding-top: 12px !important;
    margin-top: 4px !important;
    border-top: 1px solid var(--line) !important;
  }

  .nav-v36.is-open .nav-drawer-v36 {
    display: flex !important;
  }

  .nav-v36 .navlinks-v36 {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .nav-v36 .navlinks-v36 a {
    padding: 12px 10px !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    background: var(--surface) !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .nav-v36 .navlinks-v36 .naura-nav-link {
    border-color: rgba(0,128,128,.34) !important;
    background: var(--soft) !important;
  }

  .nav-v36 .nav-actions-v36 {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .nav-v36.is-compact,
  .nav-v36.is-compact.is-open,
  .nav-v36.is-compact:not(.is-open) {
    width: min(100% - 20px, 720px) !important;
    max-width: calc(100% - 20px) !important;
    padding: 10px !important;
  }

  .nav-v36.is-compact:not(.is-open) .brand-lockup {
    display: inline-grid !important;
  }

  .nav-v36.is-compact:not(.is-open) .nav-drawer-v36 {
    display: none !important;
  }

  .nav-v36 .brand-aki {
    font-size: 1.34rem !important;
  }

  .nav-v36 .brand-stack {
    font-size: .47rem !important;
    letter-spacing: .075em !important;
  }

  .nav-v36 .brand-powered-box {
    font-size: .49rem !important;
    letter-spacing: .10em !important;
    padding: 4px 7px !important;
  }

  .section,
  .page-title {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .panel {
    border-radius: 26px !important;
  }

  .main-agent-grid,
  .cards,
  .agent-grid {
    grid-template-columns: 1fr !important;
  }

  .main-agent-card {
    min-height: auto !important;
  }

  .form-grid,
  .simple-context-grid,
  .specs {
    grid-template-columns: 1fr !important;
  }
}

@media(max-width: 640px) {
  .shell,
  .page-title,
  .section.shell {
    width: min(100% - 22px, var(--max)) !important;
  }

  .hero {
    padding-top: clamp(56px, 10vw, 80px) !important;
  }

  .hero h1,
  .page-title h1 {
    font-size: clamp(2.25rem, 12vw, 4.2rem) !important;
    letter-spacing: -0.07em !important;
  }

  .hero h2,
  .page-title p {
    font-size: 1rem !important;
  }

  .meet-aki-line {
    max-width: calc(100vw - 32px) !important;
    white-space: nowrap !important;
  }

  .hero-layout-wrapper {
    width: min(100% - 20px, 760px) !important;
    gap: 14px !important;
    margin-top: 36px !important;
  }

  .hero-layout-wrapper .chat-only-scene .device.fly-chat {
    min-height: auto !important;
    border-radius: 24px !important;
  }

  .simple-hero-chat {
    padding: 16px !important;
  }

  .bubble {
    max-width: 100% !important;
  }

  .hero-agent-outside img {
    width: 112px !important;
    height: 145px !important;
  }

  .hero-agent-andi img {
    width: 120px !important;
    height: 158px !important;
  }

  .hero-agent-outside strong,
  .hero-agent-outside span {
    font-size: .78rem !important;
  }

  .card,
  .panel,
  .agent-card,
  .main-agent-card,
  .control,
  .result {
    border-radius: 22px !important;
  }

  .card,
  .panel,
  .main-agent-content,
  .demo-side,
  .demo-chat,
  .context,
  .result {
    padding: 18px !important;
  }

  .main-agent-visual {
    min-height: 190px !important;
    padding: 20px 18px 0 !important;
  }

  .main-agent-visual img,
  .main-agent-card.andi .main-agent-visual img,
  .main-agent-card.klaus .main-agent-visual img {
    height: 190px !important;
  }

  .questions button,
  .agentbtn,
  .nav-v36 .navlinks-v36 a {
    min-height: 44px;
  }
}

@media(max-width: 460px) {
  .nav.nav-v36 {
    width: calc(100% - 14px) !important;
    max-width: calc(100% - 14px) !important;
    grid-template-columns: 1fr auto !important;
    padding: 8px !important;
  }

  .nav-v36 .brand-head {
    gap: 6px !important;
  }

  .nav-v36 .brand-aki {
    font-size: 1.12rem !important;
  }

  .nav-v36 .brand-stack {
    font-size: .38rem !important;
    letter-spacing: .045em !important;
  }

  .nav-v36 .brand-powered-box {
    font-size: .42rem !important;
    letter-spacing: .065em !important;
    padding: 4px 6px !important;
  }

  .nav-menu-toggle-v36 {
    padding: 9px 10px !important;
  }

  .nav-menu-toggle-v36 em {
    display: none !important;
  }

  .nav-v36 .navlinks-v36 {
    grid-template-columns: 1fr !important;
  }

  .nav-v36 .nav-actions-v36 {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
  }

  .nav-v36 .nav-actions-v36 .btn {
    width: 100% !important;
  }

  .theme.icon-theme {
    justify-self: start !important;
  }

  .trust,
  .tags,
  .hero-ctas,
  .form-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .hero-ctas .btn,
  .form-actions .btn {
    width: 100% !important;
  }
}


/* ==========================================================
   v37: Mobile Navbar klappt wieder schön zusammen + Burger
   und Hero-Agents verschwinden mobil nicht mehr beim Scrollen
   ========================================================== */

/* Burger-Button */
.nav-menu-toggle-v36.burger-toggle {
  display: none !important;
  align-items: center !important;
  gap: 10px !important;
}

.nav-menu-toggle-v36 .toggle-aki {
  color: var(--teal) !important;
  font-size: 1.18rem !important;
  font-weight: 950 !important;
  letter-spacing: -0.08em !important;
  line-height: 1 !important;
}

.burger-icon {
  width: 22px;
  height: 16px;
  position: relative;
  display: grid;
  align-content: space-between;
  flex: 0 0 auto;
}

.burger-icon i {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: var(--teal);
  transform-origin: center;
  transition:
    transform .24s cubic-bezier(.16,1,.3,1),
    opacity .18s ease,
    width .2s ease;
}

.nav-v36.is-open .burger-icon i:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-v36.is-open .burger-icon i:nth-child(2) {
  opacity: 0;
  transform: scaleX(.2);
}

.nav-v36.is-open .burger-icon i:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Desktop compact weiterhin: Toggle sichtbar, aber ohne große Menü-Schrift */
.nav-v36.is-compact .nav-menu-toggle-v36.burger-toggle {
  display: inline-flex !important;
}

/* Mobile: Header normal oben vollständig, beim Scrollen nur noch AKi+Burger */
@media(max-width: 900px) {
  .nav.nav-v36 {
    transition:
      width .32s cubic-bezier(.16,1,.3,1),
      max-width .32s cubic-bezier(.16,1,.3,1),
      padding .32s cubic-bezier(.16,1,.3,1),
      border-radius .32s cubic-bezier(.16,1,.3,1),
      transform .32s cubic-bezier(.16,1,.3,1),
      box-shadow .32s cubic-bezier(.16,1,.3,1),
      background .32s cubic-bezier(.16,1,.3,1) !important;
  }

  .nav-v36 .nav-menu-toggle-v36.burger-toggle {
    display: inline-flex !important;
  }

  /* Collapsed geschlossen: Navbar versteckt sich hinter AKi/Burger */
  .nav-v36.is-compact:not(.is-open) {
    width: max-content !important;
    max-width: max-content !important;
    min-width: 0 !important;
    display: flex !important;
    grid-template-columns: none !important;
    padding: 8px !important;
    border-radius: 22px !important;
    transform: translateY(-2px) scale(.98);
  }

  .nav-v36.is-compact:not(.is-open) .brand-lockup,
  .nav-v36.is-compact:not(.is-open) .nav-drawer-v36 {
    display: none !important;
  }

  .nav-v36.is-compact:not(.is-open) .nav-menu-toggle-v36.burger-toggle {
    display: inline-flex !important;
    padding: 10px 12px !important;
  }

  /* Aufgeklappt: wieder vollständiges Mobile-Menü */
  .nav-v36.is-compact.is-open,
  .nav-v36.is-open {
    width: min(100% - 20px, 720px) !important;
    max-width: calc(100% - 20px) !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "brand toggle"
      "drawer drawer";
    padding: 10px !important;
    border-radius: 24px !important;
    transform: translateY(0) scale(1);
  }

  .nav-v36.is-compact.is-open .brand-lockup,
  .nav-v36.is-open .brand-lockup {
    display: inline-grid !important;
    grid-area: brand;
    justify-self: start;
  }

  .nav-v36.is-compact.is-open .nav-menu-toggle-v36.burger-toggle,
  .nav-v36.is-open .nav-menu-toggle-v36.burger-toggle {
    grid-area: toggle;
    justify-self: end;
  }

  .nav-v36.is-compact.is-open .nav-drawer-v36,
  .nav-v36.is-open .nav-drawer-v36 {
    grid-area: drawer;
    display: flex !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding-top: 12px !important;
    margin-top: 4px !important;
    border-top: 1px solid var(--line) !important;
    animation: navDrawerInV37 .28s cubic-bezier(.16,1,.3,1) both;
  }

  @keyframes navDrawerInV37 {
    from {
      opacity: 0;
      transform: translateY(-8px) scale(.98);
      filter: blur(6px);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }
  }

  /* Mobile Hero-Fly-Sections dürfen die Agenten nicht mehr weganimieren */
  .index-page .hero-layout-wrapper.fly-section,
  .index-page .hero-layout-wrapper.fly-section.is-visible,
  .index-page .hero-layout-wrapper.fly-section.is-past {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .index-page .hero-layout-wrapper.fly-section > .fly-card,
  .index-page .hero-layout-wrapper.fly-section.has-right > .fly-card,
  .index-page .hero-layout-wrapper.fly-section.is-visible > .fly-card,
  .index-page .hero-layout-wrapper.fly-section.has-right.is-visible > .fly-card,
  .index-page .hero-layout-wrapper.fly-section.is-past > .fly-card,
  .index-page .hero-layout-wrapper.fly-section.has-right.is-past > .fly-card,
  .hero-agent-outside,
  .hero-agent-outside.fly-card,
  .hero-agent-klaus,
  .hero-agent-andi {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    transform: none !important;
  }

  .hero-agent-outside img {
    opacity: 1 !important;
    visibility: visible !important;
    filter: drop-shadow(0 18px 24px rgba(0,0,0,.22)) !important;
  }
}

/* Ganz klein: Burger bleibt klar, Brand darf etwas kompakter sein */
@media(max-width: 460px) {
  .nav-menu-toggle-v36.burger-toggle {
    gap: 8px !important;
  }

  .burger-icon,
  .burger-icon i {
    width: 20px;
  }

  .burger-icon {
    height: 15px;
  }

  .nav-v36.is-compact:not(.is-open) .nav-menu-toggle-v36.burger-toggle {
    padding: 9px 10px !important;
  }
}


/* ==========================================================
   v38: Mobile Burger ohne AKi-Text + klare eingeklappte Navbar
   + unterer Agents-Bereich auf der Hauptseite bleibt mobil sichtbar
   ========================================================== */

/* Burger-Button nur als Icon */
.nav-menu-toggle-v36.burger-toggle {
  width: 48px !important;
  height: 44px !important;
  padding: 0 !important;
  justify-content: center !important;
  gap: 0 !important;
}

.nav-menu-toggle-v36 .toggle-aki {
  display: none !important;
}

/* Compact Zustand beim Scrollen: auf Mobile wirklich eingeklappt als kleine Burger-Pill */
@media(max-width: 900px) {
  .nav.nav-v36.is-compact:not(.is-open) {
    width: max-content !important;
    max-width: max-content !important;
    min-width: 0 !important;
    display: flex !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    padding: 7px !important;
    border-radius: 999px !important;
    transform: translateY(-2px) scale(.98) !important;
  }

  .nav-v36.is-compact:not(.is-open) .brand-lockup,
  .nav-v36.is-compact:not(.is-open) .nav-drawer-v36 {
    display: none !important;
  }

  .nav-v36.is-compact:not(.is-open) .nav-menu-toggle-v36.burger-toggle {
    display: inline-flex !important;
    width: 46px !important;
    height: 42px !important;
    padding: 0 !important;
    border-radius: 999px !important;
  }

  /* Nicht eingeklappt: Brand links, Burger rechts */
  .nav.nav-v36:not(.is-compact),
  .nav.nav-v36.is-open {
    width: min(100% - 20px, 720px) !important;
    max-width: calc(100% - 20px) !important;
  }

  /* Beim Öffnen aus compact heraus volle Navbar mit Brand + Drawer */
  .nav-v36.is-compact.is-open {
    width: min(100% - 20px, 720px) !important;
    max-width: calc(100% - 20px) !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "brand toggle"
      "drawer drawer" !important;
    padding: 10px !important;
    border-radius: 24px !important;
  }

  .nav-v36.is-compact.is-open .brand-lockup {
    display: inline-grid !important;
    grid-area: brand !important;
  }

  .nav-v36.is-compact.is-open .nav-menu-toggle-v36.burger-toggle {
    grid-area: toggle !important;
    justify-self: end !important;
  }

  .nav-v36.is-compact.is-open .nav-drawer-v36 {
    grid-area: drawer !important;
    display: flex !important;
  }

  /* Unterer Agenten-Bereich auf der Hauptseite:
     Mobil keine Fly-Out-Animation, damit die Boxen nicht vorzeitig verschwinden. */
  .index-page .homepage-agents-section,
  .index-page .homepage-agents-section.is-visible,
  .index-page .homepage-agents-section.is-past,
  .index-page .homepage-agents-section .agent-grid,
  .index-page .homepage-agents-section .agent-card,
  .index-page .homepage-agents-section .fly-card,
  .index-page .homepage-agents-section.is-past .fly-card,
  .index-page .homepage-agents-section.is-past .agent-card {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    transform: none !important;
  }
}

/* Sehr klein: Burger bleibt gut klickbar */
@media(max-width: 460px) {
  .nav-menu-toggle-v36.burger-toggle {
    width: 44px !important;
    height: 42px !important;
  }

  .burger-icon,
  .burger-icon i {
    width: 21px !important;
  }
}


/* ==========================================================
   v39: Navbar wirklich dynamisch + Mobile Compact mit AKi-Markenzeichen
   ========================================================== */

/* Burger bleibt nur Icon, ohne Text */
.nav-menu-toggle-v36.burger-toggle,
.nav-v36 .nav-menu-toggle-v36.burger-toggle {
  width: 48px !important;
  height: 44px !important;
  padding: 0 !important;
  justify-content: center !important;
}

.nav-menu-toggle-v36 .toggle-aki,
.nav-v36 .nav-menu-toggle-v36 .toggle-aki {
  display: none !important;
}

.nav-menu-toggle-v36.burger-toggle .burger-icon {
  width: 22px !important;
  height: 16px !important;
}

/* Desktop: Eingeklappt = AKi-Markenzeichen + Burger statt komplett statisch */
@media(min-width: 901px) {
  .nav.nav-v36.is-compact:not(.is-open) {
    width: max-content !important;
    max-width: max-content !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
    transform: translateY(-2px) scale(.985) !important;
  }

  .nav-v36.is-compact:not(.is-open) .brand-lockup {
    display: inline-grid !important;
  }

  .nav-v36.is-compact:not(.is-open) .brand-stack,
  .nav-v36.is-compact:not(.is-open) .brand-powered-box,
  .nav-v36.is-compact:not(.is-open) .nav-drawer-v36 {
    display: none !important;
  }

  .nav-v36.is-compact:not(.is-open) .brand-aki {
    font-size: 1.34rem !important;
    color: var(--teal) !important;
  }

  .nav-v36.is-compact:not(.is-open) .nav-menu-toggle-v36.burger-toggle {
    display: inline-flex !important;
    width: 44px !important;
    height: 40px !important;
  }

  .nav-v36.is-compact.is-open {
    width: fit-content !important;
    max-width: calc(100% - 24px) !important;
  }
}

/* Mobile: beim Scrollen kleine eingeklappte Ansicht mit AKi + Burger */
@media(max-width: 900px) {
  .nav.nav-v36 {
    transition:
      width .34s cubic-bezier(.16,1,.3,1),
      max-width .34s cubic-bezier(.16,1,.3,1),
      padding .34s cubic-bezier(.16,1,.3,1),
      border-radius .34s cubic-bezier(.16,1,.3,1),
      transform .34s cubic-bezier(.16,1,.3,1),
      box-shadow .34s cubic-bezier(.16,1,.3,1),
      background .34s cubic-bezier(.16,1,.3,1) !important;
  }

  /* Normale mobile Ansicht oben */
  .nav.nav-v36:not(.is-compact):not(.is-open) {
    width: min(100% - 20px, 720px) !important;
    max-width: calc(100% - 20px) !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "brand toggle" !important;
    padding: 10px !important;
    border-radius: 22px !important;
  }

  .nav.nav-v36:not(.is-compact):not(.is-open) .brand-lockup {
    display: inline-grid !important;
    grid-area: brand !important;
    justify-self: start !important;
  }

  .nav.nav-v36:not(.is-compact):not(.is-open) .nav-menu-toggle-v36.burger-toggle {
    display: inline-flex !important;
    grid-area: toggle !important;
    justify-self: end !important;
  }

  .nav.nav-v36:not(.is-open) .nav-drawer-v36 {
    display: none !important;
  }

  /* Eingeklappte Ansicht beim Scrollen */
  .nav.nav-v36.is-compact:not(.is-open) {
    width: max-content !important;
    max-width: max-content !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 9px !important;
    border-radius: 999px !important;
    transform: translateY(-3px) scale(.985) !important;
  }

  .nav-v36.is-compact:not(.is-open) .brand-lockup {
    display: inline-grid !important;
  }

  .nav-v36.is-compact:not(.is-open) .brand-head {
    gap: 0 !important;
  }

  .nav-v36.is-compact:not(.is-open) .brand-stack,
  .nav-v36.is-compact:not(.is-open) .brand-powered-box,
  .nav-v36.is-compact:not(.is-open) .nav-drawer-v36 {
    display: none !important;
  }

  .nav-v36.is-compact:not(.is-open) .brand-aki {
    display: inline-block !important;
    color: var(--teal) !important;
    font-size: 1.22rem !important;
    line-height: 1 !important;
  }

  .nav-v36.is-compact:not(.is-open) .nav-menu-toggle-v36.burger-toggle {
    display: inline-flex !important;
    width: 42px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 999px !important;
  }

  /* Aufgeklappt: volle mobile Navbar */
  .nav.nav-v36.is-open,
  .nav.nav-v36.is-compact.is-open {
    width: min(100% - 20px, 720px) !important;
    max-width: calc(100% - 20px) !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "brand toggle"
      "drawer drawer" !important;
    padding: 10px !important;
    border-radius: 24px !important;
    transform: translateY(0) scale(1) !important;
  }

  .nav-v36.is-open .brand-lockup,
  .nav-v36.is-compact.is-open .brand-lockup {
    display: inline-grid !important;
    grid-area: brand !important;
    justify-self: start !important;
  }

  .nav-v36.is-open .brand-stack,
  .nav-v36.is-open .brand-powered-box,
  .nav-v36.is-compact.is-open .brand-stack,
  .nav-v36.is-compact.is-open .brand-powered-box {
    display: grid !important;
  }

  .nav-v36.is-open .brand-powered-box,
  .nav-v36.is-compact.is-open .brand-powered-box {
    display: inline-flex !important;
  }

  .nav-v36.is-open .nav-menu-toggle-v36.burger-toggle,
  .nav-v36.is-compact.is-open .nav-menu-toggle-v36.burger-toggle {
    grid-area: toggle !important;
    justify-self: end !important;
    display: inline-flex !important;
  }

  .nav-v36.is-open .nav-drawer-v36,
  .nav-v36.is-compact.is-open .nav-drawer-v36 {
    grid-area: drawer !important;
    display: flex !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding-top: 12px !important;
    margin-top: 4px !important;
    border-top: 1px solid var(--line) !important;
    animation: navDrawerInV39 .28s cubic-bezier(.16,1,.3,1) both;
  }

  @keyframes navDrawerInV39 {
    from {
      opacity: 0;
      transform: translateY(-8px) scale(.98);
      filter: blur(6px);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }
  }

  /* Unterer Agents-Bereich der Hauptseite bleibt mobil sichtbar */
  .index-page .homepage-agents-section,
  .index-page .homepage-agents-section.is-visible,
  .index-page .homepage-agents-section.is-past,
  .index-page .homepage-agents-section > .fly-card,
  .index-page .homepage-agents-section.is-visible > .fly-card,
  .index-page .homepage-agents-section.is-past > .fly-card,
  .index-page .homepage-agents-section .agent-grid,
  .index-page .homepage-agents-section .agent-card {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    transform: none !important;
  }
}

@media(max-width: 460px) {
  .nav-v36.is-compact:not(.is-open) .brand-aki {
    font-size: 1.12rem !important;
  }

  .nav-v36.is-compact:not(.is-open) .nav-menu-toggle-v36.burger-toggle {
    width: 40px !important;
    height: 38px !important;
  }
}


/* ==========================================================
   v40 FINAL NAV FIX
   Navbar ist jetzt fixed statt sticky/static.
   Dadurch bleibt sie beim Scrollen sichtbar und kann dynamisch einklappen.
   ========================================================== */

.nav.nav-v36,
header#siteNav.nav.nav-v36 {
  position: fixed !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
  z-index: 9999 !important;
  will-change: transform, width, max-width, padding, border-radius !important;
}

/* Abstand, damit die fixe Navbar nicht auf dem Content liegt */
body {
  padding-top: 0 !important;
}

main {
  padding-top: 84px !important;
}

body.index-page main {
  padding-top: 62px !important;
}

/* Desktop eingeklappt */
@media(min-width: 901px) {
  .nav.nav-v36.is-compact:not(.is-open),
  header#siteNav.nav.nav-v36.is-compact:not(.is-open) {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-3px) scale(.985) !important;
    width: max-content !important;
    max-width: max-content !important;
  }

  .nav.nav-v36.is-compact.is-open,
  header#siteNav.nav.nav-v36.is-compact.is-open {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
    width: fit-content !important;
    max-width: calc(100% - 24px) !important;
  }
}

/* Mobile eingeklappt / aufgeklappt */
@media(max-width: 900px) {
  .nav.nav-v36,
  header#siteNav.nav.nav-v36 {
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    left: 50% !important;
    right: auto !important;
    margin: 0 !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
    z-index: 9999 !important;
  }

  main {
    padding-top: 86px !important;
  }

  body.index-page main {
    padding-top: 64px !important;
  }

  .nav.nav-v36.is-compact:not(.is-open),
  header#siteNav.nav.nav-v36.is-compact:not(.is-open) {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-2px) scale(.985) !important;
    width: max-content !important;
    max-width: max-content !important;
    min-width: 0 !important;
  }

  .nav.nav-v36.is-open,
  .nav.nav-v36.is-compact.is-open,
  header#siteNav.nav.nav-v36.is-open,
  header#siteNav.nav.nav-v36.is-compact.is-open {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
    width: min(100% - 20px, 720px) !important;
    max-width: calc(100% - 20px) !important;
  }

  /* Mobile: unterer Agents-Bereich bleibt sichtbar, nicht rausfliegen */
  .index-page .homepage-agents-section,
  .index-page .homepage-agents-section.is-visible,
  .index-page .homepage-agents-section.is-past,
  .index-page .homepage-agents-section > .fly-card,
  .index-page .homepage-agents-section.is-visible > .fly-card,
  .index-page .homepage-agents-section.is-past > .fly-card,
  .index-page .homepage-agents-section .agent-grid,
  .index-page .homepage-agents-section .agent-card {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    transform: none !important;
  }
}

/* Ganz kleine Ansicht */
@media(max-width: 460px) {
  .nav.nav-v36,
  header#siteNav.nav.nav-v36 {
    top: max(7px, env(safe-area-inset-top)) !important;
  }

  .nav.nav-v36.is-open,
  .nav.nav-v36.is-compact.is-open {
    width: calc(100% - 14px) !important;
    max-width: calc(100% - 14px) !important;
  }
}


/* ==========================================================
   v41: Desktop Navbar einzeilig + mobile Headline sauber
   ========================================================== */

/* Desktop: alle Navbar-Punkte nebeneinander, keine zweite Reihe */
@media(min-width: 901px) {
  .nav.nav-v36:not(.is-compact),
  header#siteNav.nav.nav-v36:not(.is-compact) {
    width: fit-content !important;
    max-width: calc(100% - 24px) !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 18px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    overflow: visible !important;
  }

  .nav-v36:not(.is-compact) .brand-lockup {
    flex: 0 0 auto !important;
  }

  .nav-v36:not(.is-compact) .nav-drawer-v36 {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 22px !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
  }

  .nav-v36:not(.is-compact) .navlinks-v36 {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: clamp(14px, 1.55vw, 24px) !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  .nav-v36:not(.is-compact) .navlinks-v36 a {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    font-size: clamp(.82rem, .82vw, .96rem) !important;
  }

  .nav-v36:not(.is-compact) .nav-actions-v36 {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .nav-v36:not(.is-compact) .brand-aki {
    font-size: clamp(1.20rem, 1.35vw, 1.56rem) !important;
  }

  .nav-v36:not(.is-compact) .brand-stack {
    font-size: clamp(.42rem, .48vw, .54rem) !important;
  }

  .nav-v36:not(.is-compact) .brand-powered-box {
    font-size: clamp(.43rem, .48vw, .55rem) !important;
    padding: 4px 8px !important;
  }
}

/* Übergangsbereich kurz vor Mobile: noch einzeilig halten, aber kompakter */
@media(min-width: 901px) and (max-width: 1120px) {
  .nav.nav-v36:not(.is-compact) {
    gap: 12px !important;
    padding-left: 11px !important;
    padding-right: 11px !important;
  }

  .nav-v36:not(.is-compact) .nav-drawer-v36 {
    gap: 14px !important;
  }

  .nav-v36:not(.is-compact) .navlinks-v36 {
    gap: 12px !important;
  }

  .nav-v36:not(.is-compact) .navlinks-v36 a {
    font-size: .80rem !important;
  }

  .nav-v36:not(.is-compact) .nav-actions-v36 {
    gap: 8px !important;
  }

  .nav-v36:not(.is-compact) .brand-stack,
  .nav-v36:not(.is-compact) .brand-powered-box {
    letter-spacing: .06em !important;
  }
}

/* Mobile Headline: keine unschönen Worttrennungen wie "Unternehmens-wissen" */
.hero h1,
.page-title h1,
.hero h1 *,
.page-title h1 *,
.gradient,
.meet-aki-line {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

@media(max-width: 640px) {
  .hero h1 {
    font-size: clamp(2.05rem, 10.4vw, 3.35rem) !important;
    line-height: .98 !important;
    letter-spacing: -0.065em !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero h1 .gradient {
    display: inline-block !important;
    white-space: nowrap !important;
  }

  .hero h1 br {
    display: block !important;
  }

  .page-title h1 {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
}

@media(max-width: 420px) {
  .hero h1 {
    font-size: clamp(1.88rem, 9.7vw, 2.65rem) !important;
    letter-spacing: -0.055em !important;
  }
}


/* ==========================================================
   v42: Mobile Fly-Outs korrigiert
   Elemente stehen mobil nicht mehr statisch da, sondern fliegen
   sauber ein UND erst später wieder raus.
   ========================================================== */

@media(max-width: 900px) {
  /* Grundzustand für alle Scroll-Sections auf der Hauptseite */
  body.index-page .fly-section > .fly-card {
    opacity: 0 !important;
    visibility: visible !important;
    filter: blur(12px) !important;
    transform: translate3d(0, 72px, 0) scale(.94) rotateX(4deg) !important;
    transition:
      opacity .72s cubic-bezier(.16,1,.3,1),
      transform .72s cubic-bezier(.16,1,.3,1),
      filter .72s cubic-bezier(.16,1,.3,1) !important;
    will-change: opacity, transform, filter;
  }

  body.index-page .fly-section.has-left > .fly-card {
    transform: translate3d(-44px, 72px, 0) scale(.94) rotate(-2deg) rotateX(4deg) !important;
  }

  body.index-page .fly-section.has-right > .fly-card {
    transform: translate3d(44px, 72px, 0) scale(.94) rotate(2deg) rotateX(4deg) !important;
  }

  /* Sichtbar = sauberer Fly-In */
  body.index-page .fly-section.is-visible > .fly-card,
  body.index-page .fly-section.has-left.is-visible > .fly-card,
  body.index-page .fly-section.has-right.is-visible > .fly-card {
    opacity: 1 !important;
    filter: blur(0) !important;
    transform: translate3d(0,0,0) scale(1) rotate(0) rotateX(0) !important;
  }

  /* Past = Fly-Out nach oben, aber erst wenn JS die Section wirklich als past markiert */
  body.index-page .fly-section.is-past > .fly-card,
  body.index-page .fly-section.has-left.is-past > .fly-card,
  body.index-page .fly-section.has-right.is-past > .fly-card {
    opacity: 0 !important;
    filter: blur(10px) !important;
    transform: translate3d(0,-72px,0) scale(.95) rotateX(-3deg) !important;
  }

  /* Hero-Bereich bleibt stabil: Klaus/Chat/Andi fliegen als Block, Figuren verschwinden nicht einzeln */
  body.index-page .hero-layout-wrapper.fly-section > .fly-card {
    transition-duration: .78s !important;
  }

  body.index-page .hero-agent-outside,
  body.index-page .hero-agent-outside.fly-card {
    visibility: visible !important;
  }

  /* Unterer Agents-Bereich: vorher war er mobil statisch erzwungen.
     Jetzt fliegt die ganze Section wieder ein, aber nicht mehr zu früh raus. */
  body.index-page .homepage-agents-section > .fly-card {
    opacity: 0 !important;
    filter: blur(12px) !important;
    transform: translate3d(44px, 76px, 0) scale(.94) rotate(2deg) !important;
  }

  body.index-page .homepage-agents-section.is-visible > .fly-card {
    opacity: 1 !important;
    filter: blur(0) !important;
    transform: translate3d(0,0,0) scale(1) rotate(0) !important;
  }

  body.index-page .homepage-agents-section.is-past > .fly-card {
    opacity: 0 !important;
    filter: blur(10px) !important;
    transform: translate3d(0,-76px,0) scale(.95) rotate(-1deg) !important;
  }

  /* Karten selbst dürfen sichtbar bleiben; der animierte Zustand liegt auf dem Wrapper */
  body.index-page .homepage-agents-section .agent-card {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    transform: none !important;
  }
}

@media(max-width: 640px) {
  body.index-page .fly-section > .fly-card {
    transform: translate3d(0, 58px, 0) scale(.955) !important;
  }

  body.index-page .fly-section.has-left > .fly-card {
    transform: translate3d(-24px, 58px, 0) scale(.955) rotate(-1.5deg) !important;
  }

  body.index-page .fly-section.has-right > .fly-card,
  body.index-page .homepage-agents-section > .fly-card {
    transform: translate3d(24px, 58px, 0) scale(.955) rotate(1.5deg) !important;
  }

  body.index-page .fly-section.is-visible > .fly-card,
  body.index-page .fly-section.has-left.is-visible > .fly-card,
  body.index-page .fly-section.has-right.is-visible > .fly-card,
  body.index-page .homepage-agents-section.is-visible > .fly-card {
    transform: translate3d(0,0,0) scale(1) rotate(0) !important;
  }
}


/* ==========================================================
   v43: Eingeklappte Navbar beim Aufklappen immer einzeilig
   ========================================================== */

/* Desktop/Tablet: wenn nach dem Scrollen geöffnet wird, darf nichts umbrechen */
@media(min-width: 901px) {
  .nav.nav-v36.is-compact.is-open,
  header#siteNav.nav.nav-v36.is-compact.is-open {
    width: fit-content !important;
    max-width: calc(100% - 24px) !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding: 8px 12px !important;
    overflow: visible !important;
  }

  /* In der geöffneten Scroll-Navbar bleibt das Branding kompakt,
     damit alle Links in einer Reihe Platz haben. */
  .nav-v36.is-compact.is-open .brand-lockup {
    display: inline-grid !important;
    flex: 0 0 auto !important;
    width: max-content !important;
  }

  .nav-v36.is-compact.is-open .brand-head {
    gap: 0 !important;
  }

  .nav-v36.is-compact.is-open .brand-stack,
  .nav-v36.is-compact.is-open .brand-powered-box {
    display: none !important;
  }

  .nav-v36.is-compact.is-open .brand-aki {
    display: inline-block !important;
    font-size: 1.24rem !important;
    line-height: 1 !important;
    color: var(--teal) !important;
  }

  .nav-v36.is-compact.is-open .nav-menu-toggle-v36.burger-toggle {
    display: inline-flex !important;
    width: 42px !important;
    height: 38px !important;
    flex: 0 0 auto !important;
  }

  .nav-v36.is-compact.is-open .nav-drawer-v36 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 14px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border-top: 0 !important;
  }

  .nav-v36.is-compact.is-open .navlinks-v36 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    flex: 0 1 auto !important;
  }

  .nav-v36.is-compact.is-open .navlinks-v36 a {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    font-size: clamp(.76rem, .78vw, .88rem) !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .nav-v36.is-compact.is-open .nav-actions-v36 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 9px !important;
    width: auto !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .nav-v36.is-compact.is-open .theme.icon-theme {
    width: 56px !important;
    min-width: 56px !important;
    height: 32px !important;
  }

  .nav-v36.is-compact.is-open .btn.small {
    white-space: nowrap !important;
    padding: 10px 13px !important;
    font-size: .82rem !important;
  }
}

/* Knapp oberhalb Mobile noch stärker verdichten, aber weiterhin einzeilig */
@media(min-width: 901px) and (max-width: 1080px) {
  .nav.nav-v36.is-compact.is-open,
  header#siteNav.nav.nav-v36.is-compact.is-open {
    gap: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .nav-v36.is-compact.is-open .nav-drawer-v36 {
    gap: 10px !important;
  }

  .nav-v36.is-compact.is-open .navlinks-v36 {
    gap: 9px !important;
  }

  .nav-v36.is-compact.is-open .navlinks-v36 a {
    font-size: .74rem !important;
  }

  .nav-v36.is-compact.is-open .btn.small {
    padding: 9px 11px !important;
    font-size: .78rem !important;
  }
}


/* ==========================================================
   v44: Agents-Seite Erweiterungsbox mit mehr Innenabstand
   ========================================================== */

.agents-page .team-boost,
body:has(.team-boost) .team-boost {
  padding: clamp(30px, 4vw, 54px) !important;
}

.team-boost > div:first-child {
  padding-right: clamp(8px, 2vw, 22px) !important;
}

.team-boost .muted {
  max-width: 58ch;
}

.team-boost-grid div {
  padding: clamp(18px, 2.4vw, 24px) !important;
}

@media(max-width: 900px) {
  .team-boost,
  body:has(.team-boost) .team-boost {
    padding: 26px !important;
  }

  .team-boost > div:first-child {
    padding-right: 0 !important;
  }
}

@media(max-width: 560px) {
  .team-boost,
  body:has(.team-boost) .team-boost {
    padding: 22px !important;
  }

  .team-boost-grid div {
    padding: 18px !important;
  }
}