/* =========================================================
   PromptReach — Premium Sales-Tech Redesign
   Designsystem: Deep-Navy/Graphite Dark · Glass + Gradient-Border
   Akzente: Mint / Cyan / Electric-Blue (sparsam, kein Hype)
   Typo: Space Grotesk (Display) · Inter (Body) · JetBrains Mono (Daten)
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Flächen */
  --bg:        #06080F;
  --bg-2:      #090C16;
  --glass:     rgba(255, 255, 255, 0.035);
  --glass-2:   rgba(255, 255, 255, 0.055);
  --line:      rgba(255, 255, 255, 0.09);
  --line-2:    rgba(255, 255, 255, 0.14);

  /* Text */
  --ink:       #F2F5FB;
  --ink-soft:  #AEB8CC;
  --muted:     #6E7991;

  /* Akzente */
  --mint:      #4FE0B0;
  --cyan:      #46DDF2;
  --blue:      #6E8BFF;
  --accent:    var(--mint);
  --accent-ink:#04130D;

  /* Effekte */
  --radius:    20px;
  --radius-sm: 13px;
  --maxw:      1200px;
  --shadow:    0 40px 90px -40px rgba(0, 0, 0, 0.85);
  --glow:      0 0 0 1px rgba(79,224,176,0.22), 0 18px 50px -18px rgba(79,224,176,0.45);

  /* Spacing-Skala (4er) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --t:  280ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --tf: 520ms cubic-bezier(0.22, 0.61, 0.36, 1);

  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; color: inherit; }

.skip-link { position: absolute; left: -999px; top: 0; z-index: 300; background: var(--accent); color: var(--accent-ink); padding: 10px 18px; border-radius: 0 0 10px 0; font-weight: 600; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 5px; }

/* =========================================================
   GLOBALER HINTERGRUND (Layering / Tiefe)
   ========================================================= */
.bg-layers { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.bg-grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 0%, transparent 75%);
}
.bg-orb { position: absolute; border-radius: 50%; filter: blur(110px); opacity: 0.5; }
.bg-orb--1 { width: 620px; height: 620px; top: -200px; right: -160px; background: radial-gradient(circle, rgba(79,224,176,0.30), transparent 65%); }
.bg-orb--2 { width: 560px; height: 560px; top: 30%; left: -240px; background: radial-gradient(circle, rgba(110,139,255,0.22), transparent 65%); }
.bg-orb--3 { width: 520px; height: 520px; bottom: -160px; right: 10%; background: radial-gradient(circle, rgba(70,221,242,0.14), transparent 65%); }
.bg-noise {
  position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* ---------- Overflow-Härtung (Grid/Flex-Kinder dürfen schrumpfen) ---------- */
.hero__inner > *, .demo__wrap > *, .aih__grid > *, .bento > *,
.cmd__main > *, .cmd__flowrow > *, .cmd__kpis > *, .demo__pipe > *,
.problem__layout > *, .phases > *, .grid > * { min-width: 0; }
.cmd__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.container--narrow { max-width: 840px; }
.section { padding: clamp(76px, 11vw, 140px) 0; position: relative; }

.section__head { max-width: 780px; margin-bottom: clamp(44px, 6vw, 70px); }
.section__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.85rem, 4.6vw, 3rem); line-height: 1.1; letter-spacing: -0.025em;
  margin-bottom: 20px; text-wrap: balance;
}
.section__lead { color: var(--ink-soft); font-size: clamp(1.02rem, 1.7vw, 1.18rem); max-width: 660px; text-wrap: pretty; }

.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mint); margin-bottom: 20px; }
.eyebrow--center { justify-content: center; }
.eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 14px var(--mint); }

.grad-text { background: linear-gradient(105deg, var(--mint) 10%, var(--cyan) 55%, var(--blue) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hide-mobile { display: none; }
@media (min-width: 760px) { .hide-mobile { display: inline; } }

/* =========================================================
   GRADIENT-BORDER GLASS (zentrale Card-Mechanik)
   ========================================================= */
.gborder { position: relative; isolation: isolate; }
.gborder::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(150deg, rgba(79,224,176,0.55), rgba(110,139,255,0.30) 38%, rgba(255,255,255,0.05) 62%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: 0.65; transition: opacity var(--t); z-index: 1;
}
.gborder:hover::after { opacity: 1; }
/* Pointer-Spotlight (von JS gesetzt: --mx/--my) */
.gborder::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(79,224,176,0.10), transparent 60%);
  opacity: 0; transition: opacity var(--t);
}
.gborder:hover::before { opacity: 1; }

/* ---------- Buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 600; font-size: 0.97rem; letter-spacing: -0.01em; padding: 14px 24px; border-radius: 13px; border: 1px solid transparent; transition: transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t); white-space: nowrap; }
.btn--sm { padding: 10px 18px; font-size: 0.9rem; }
.btn--lg { padding: 17px 30px; font-size: 1.04rem; }
.btn--primary { background: linear-gradient(180deg, #5fe9bd, var(--mint)); color: var(--accent-ink); box-shadow: var(--glow); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(79,224,176,0.4), 0 24px 50px -16px rgba(79,224,176,0.6); }
.btn--primary:active { transform: translateY(0); }
.btn--ghost { background: var(--glass); color: var(--ink); border-color: var(--line-2); backdrop-filter: blur(8px); }
.btn--ghost:hover { background: var(--glass-2); border-color: var(--mint); transform: translateY(-2px); }
.btn--ghost svg { transition: transform var(--t); }
.btn--ghost:hover svg { transform: translateX(3px); }

/* =========================================================
   NAV
   ========================================================= */
.nav { position: sticky; top: 0; z-index: 100; transition: background var(--t), border-color var(--t), backdrop-filter var(--t); border-bottom: 1px solid transparent; }
.nav.is-scrolled { background: rgba(6, 8, 15, 0.72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom-color: var(--line); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; letter-spacing: -0.02em; }
.brand__mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(150deg, var(--glass-2), var(--glass)); border: 1px solid var(--line-2); color: var(--mint); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
.brand__name { color: var(--ink); }
.brand__accent { color: var(--mint); }

.nav__links { display: none; gap: 30px; }
.nav__links a { color: var(--ink-soft); font-size: 0.92rem; font-weight: 500; transition: color var(--t); position: relative; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--mint); transition: width var(--t); border-radius: 2px; }
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { width: 100%; }
.nav__actions { display: none; }
@media (min-width: 940px) { .nav__links, .nav__actions { display: flex; align-items: center; } }

.nav__toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: var(--glass); border: 1px solid var(--line-2); border-radius: 11px; padding: 0 11px; }
.nav__toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--t), opacity var(--t); }
.nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 940px) { .nav__toggle { display: none; } }

.nav__mobile { display: flex; flex-direction: column; gap: 4px; padding: 12px 24px 24px; background: rgba(6,8,15,0.97); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.nav__mobile[hidden] { display: none; }
@media (min-width: 940px) { .nav__mobile { display: none !important; } }
.nav__mobile a { padding: 14px 4px; color: var(--ink-soft); font-weight: 500; border-bottom: 1px solid var(--line); }
.nav__mobile a:last-child { border-bottom: none; margin-top: 12px; }
.nav__mobile a.btn { color: var(--accent-ink); }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; padding: clamp(52px, 8vw, 96px) 0 clamp(56px, 8vw, 90px); }
.hero__inner { display: grid; grid-template-columns: 1fr; gap: clamp(44px, 6vw, 60px); align-items: center; }
@media (min-width: 1000px) { .hero__inner { grid-template-columns: 1.02fr 1.05fr; } }

.hero__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.5rem, 7.2vw, 4.4rem); line-height: 1.02; letter-spacing: -0.035em; margin: 8px 0 24px; text-wrap: balance; }
.hero__sub { color: var(--ink-soft); font-size: clamp(1.04rem, 1.8vw, 1.2rem); max-width: 560px; margin-bottom: 34px; text-wrap: pretty; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 32px; }
.hero__chips { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.hero__chips li { display: flex; align-items: center; gap: 11px; font-size: 0.92rem; color: var(--ink-soft); }
.hero__chips .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); flex-shrink: 0; }

.hero__scroll { display: none; }
@media (min-width: 1000px) {
  .hero__scroll { display: flex; align-items: center; gap: 9px; margin-top: 40px; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }
  .hero__scroll span { width: 22px; height: 34px; border: 1px solid var(--line-2); border-radius: 12px; position: relative; }
  .hero__scroll span::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 6px; border-radius: 2px; background: var(--mint); transform: translateX(-50%); animation: scrolldot 1.8s ease-in-out infinite; }
  @keyframes scrolldot { 0%,100% { opacity: 0; transform: translate(-50%, 0); } 50% { opacity: 1; transform: translate(-50%, 9px); } }
}

/* ====== AI SALES COMMAND CENTER ====== */
.hero__visual { position: relative; perspective: 1600px; }
.hero__reflect { position: absolute; inset: -10% -6% -16% -6%; z-index: -1; background: radial-gradient(60% 50% at 60% 30%, rgba(79,224,176,0.16), transparent 70%); filter: blur(30px); }

.cmd {
  position: relative; border-radius: 22px;
  background: linear-gradient(165deg, rgba(20,26,42,0.92), rgba(9,12,22,0.94));
  border: 1px solid var(--line); box-shadow: var(--shadow);
  overflow: hidden; transform: rotateY(-5deg) rotateX(3deg);
  transition: transform 700ms cubic-bezier(0.22,0.61,0.36,1);
  will-change: transform;
}
.hero__visual:hover .cmd { transform: rotateY(0deg) rotateX(0deg); }
@media (max-width: 700px) { .cmd { transform: none; } .hero__visual:hover .cmd { transform: none; } }

.cmd__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.02); }
.cmd__title { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 500; font-size: 0.9rem; }
.cmd__dots { display: inline-flex; gap: 6px; }
.cmd__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.cmd__dots i:first-child { background: #ff6b6b; opacity: 0.65; }
.cmd__dots i:nth-child(2) { background: #ffd166; opacity: 0.65; }
.cmd__dots i:nth-child(3) { background: var(--mint); opacity: 0.8; }
.cmd__meta { display: flex; align-items: center; gap: 12px; }
.cmd__region { font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); }
.cmd__live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; color: var(--mint); padding: 4px 10px; border: 1px solid rgba(79,224,176,0.3); border-radius: 999px; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); position: relative; flex-shrink: 0; }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--mint); animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(3.6); opacity: 0; } }

.cmd__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.ckpi { background: rgba(9,12,22,0.6); padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }
.ckpi__num { font-family: var(--font-mono); font-size: clamp(1.05rem, 3vw, 1.4rem); font-weight: 600; color: var(--ink); }
.ckpi:first-child .ckpi__num { color: var(--mint); }
.ckpi__cap { font-size: 0.66rem; color: var(--muted); letter-spacing: 0.04em; }

.cmd__main { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 18px; }
@media (min-width: 460px) { .cmd__main { grid-template-columns: 1.35fr 1fr; } }

.cmd__label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }

.funnel { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.funnel__row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.funnel__name { font-size: 0.8rem; color: var(--ink-soft); grid-column: 1 / -1; }
.funnel__bar { grid-column: 1; height: 7px; border-radius: 999px; background: rgba(255,255,255,0.05); overflow: hidden; }
.funnel__bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(79,224,176,0.5), var(--mint)); transition: width 1.1s cubic-bezier(0.22,0.61,0.36,1); }
.funnel.is-in .funnel__bar i { width: var(--w); }
.funnel__val { grid-column: 2; grid-row: 2; font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.funnel__row--accent .funnel__name { color: var(--mint); font-weight: 600; }
.funnel__row--accent .funnel__bar i { background: linear-gradient(90deg, var(--blue), var(--mint)); }
.funnel__row--accent .funnel__val { color: var(--mint); }

.cmd__side { display: flex; flex-direction: column; gap: 10px; }
.signal { background: rgba(255,255,255,0.025); border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; }
.signal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.signal__k { font-size: 0.76rem; color: var(--ink); font-weight: 500; }
.signal__score { font-family: var(--font-mono); font-size: 0.92rem; font-weight: 600; color: var(--mint); }
.signal--cyan .signal__score { color: var(--cyan); }
.signal__bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; margin-bottom: 8px; }
.signal__bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(79,224,176,0.5), var(--mint)); transition: width 1.2s cubic-bezier(0.22,0.61,0.36,1) 0.2s; }
.signal--cyan .signal__bar i { background: linear-gradient(90deg, rgba(70,221,242,0.5), var(--cyan)); }
.cmd.is-in .signal__bar i { width: var(--w); }
.signal__sub { font-size: 0.68rem; color: var(--muted); line-height: 1.35; display: block; }
.signal__badge { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--mint); }
.signal--ok { border-color: rgba(79,224,176,0.28); background: rgba(79,224,176,0.05); }

.cmd__flowrow { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 0 18px 4px; }
@media (min-width: 460px) { .cmd__flowrow { grid-template-columns: 1.35fr 1fr; } }
.cmd__flow, .cmd__chart { background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: 12px; padding: 13px; }

.flowviz { position: relative; height: 40px; margin-bottom: 8px; }
.node { position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--mint); box-shadow: 0 0 12px rgba(79,224,176,0.7); }
.node--1 { left: 8%; } .node--2 { left: 36%; } .node--3 { left: 64%; background: var(--cyan); box-shadow: 0 0 12px rgba(70,221,242,0.7); } .node--4 { left: 92%; background: var(--blue); box-shadow: 0 0 12px rgba(110,139,255,0.7); }
.wire { position: absolute; top: 50%; height: 2px; transform: translateY(-50%); background: rgba(255,255,255,0.1); overflow: hidden; border-radius: 2px; }
.wire--1 { left: 8%; width: 28%; } .wire--2 { left: 36%; width: 28%; } .wire--3 { left: 64%; width: 28%; }
.wire b { position: absolute; top: 0; left: -30%; width: 30%; height: 100%; background: linear-gradient(90deg, transparent, var(--mint), transparent); animation: wireflow 2.4s linear infinite; }
.wire--2 b { animation-delay: 0.5s; background: linear-gradient(90deg, transparent, var(--cyan), transparent); }
.wire--3 b { animation-delay: 1s; background: linear-gradient(90deg, transparent, var(--blue), transparent); }
@keyframes wireflow { from { left: -30%; } to { left: 100%; } }
.flow__legend { display: flex; justify-content: space-between; font-size: 0.58rem; color: var(--muted); letter-spacing: 0.02em; }

.areachart { width: 100%; height: 56px; }
.areachart [data-line] { stroke-dasharray: 320; stroke-dashoffset: 320; }
.cmd.is-in .areachart [data-line] { animation: draw 1.8s ease forwards 0.3s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.cmd__events { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); background: rgba(255,255,255,0.015); overflow: hidden; }
.cmd__evlabel { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); flex-shrink: 0; }
.ticker { position: relative; height: 18px; flex: 1; overflow: hidden; }
.ticker__item { position: absolute; inset: 0; display: flex; align-items: center; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-soft); opacity: 0; transform: translateY(100%); transition: opacity 0.5s ease, transform 0.5s ease; white-space: nowrap; }
.ticker__item.is-active { opacity: 1; transform: translateY(0); }
.ticker__item.is-out { opacity: 0; transform: translateY(-100%); }

.cmd__note { font-size: 0.68rem; color: var(--muted); text-align: center; padding: 12px 18px 16px; border-top: 1px solid var(--line); font-style: italic; }

/* =========================================================
   PROBLEM
   ========================================================= */
.problem__layout { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 920px) { .problem__layout { grid-template-columns: 1.5fr 1fr; align-items: start; } }

.problem__list { list-style: none; display: flex; flex-direction: column; gap: 2px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.pitem { display: flex; gap: 18px; padding: 22px 22px; background: var(--glass); transition: background var(--t), padding-left var(--t); }
.pitem:hover { background: var(--glass-2); padding-left: 28px; }
.pitem + .pitem { border-top: 1px solid var(--line); }
.pitem__idx { font-family: var(--font-mono); font-size: 0.82rem; color: var(--mint); padding-top: 3px; flex-shrink: 0; }
.pitem h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; margin-bottom: 6px; letter-spacing: -0.01em; }
.pitem p { color: var(--ink-soft); font-size: 0.93rem; }

.problem__aside { background: linear-gradient(165deg, var(--glass-2), var(--glass)); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; text-align: center; }
.problem__asidek { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.gauge { position: relative; width: 150px; height: 150px; margin: 18px auto 16px; }
.gauge svg { width: 100%; height: 100%; }
.gauge [data-gauge] { transition: stroke-dashoffset 1.4s cubic-bezier(0.22,0.61,0.36,1); }
.gauge__c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.gauge__num { font-family: var(--font-mono); font-size: 1.8rem; font-weight: 600; color: var(--blue); }
.gauge__cap { font-size: 0.72rem; color: var(--muted); }
.problem__asidep { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 12px; }
.problem__asidefine { font-size: 0.68rem; color: var(--muted); font-style: italic; }

/* =========================================================
   SYSTEM — Prozess-Flow (Scroll-Linie)
   ========================================================= */
.flow { position: relative; }
.flow__track { position: absolute; left: 27px; top: 18px; bottom: 18px; width: 2px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
.flow__progress { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: linear-gradient(180deg, var(--mint), var(--blue)); border-radius: 2px; box-shadow: 0 0 14px rgba(79,224,176,0.5); }
.flow__list { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.flow__step { position: relative; padding-left: 70px; min-height: 56px; }
.flow__num { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; font-family: var(--font-mono); font-weight: 600; font-size: 1.15rem; color: var(--mint); background: rgba(9,12,22,0.9); border: 1px solid rgba(79,224,176,0.3); box-shadow: 0 0 0 4px var(--bg); z-index: 1; transition: transform var(--t), box-shadow var(--t); }
.flow__step:hover .flow__num { transform: scale(1.06); box-shadow: 0 0 0 4px var(--bg), 0 0 24px rgba(79,224,176,0.4); }
.flow__step h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; margin: 6px 0 6px; letter-spacing: -0.01em; }
.flow__step p { color: var(--ink-soft); font-size: 0.95rem; max-width: 620px; }
@media (min-width: 880px) {
  .flow__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 56px; }
  .flow__track { left: 50%; transform: translateX(-1px); }
  .flow__step:nth-child(odd) { padding-left: 70px; padding-right: 0; }
}

.midcta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 44px; padding: 22px 26px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--line); }
.midcta span { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; color: var(--ink); }

/* =========================================================
   AI + HUMAN
   ========================================================= */
.aih__grid { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: stretch; }
@media (min-width: 880px) { .aih__grid { grid-template-columns: 1fr auto 1fr; } }
.aih__col { background: linear-gradient(165deg, var(--glass-2), var(--glass)); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 30px; }
.aih__col--ai { background: linear-gradient(165deg, rgba(110,139,255,0.08), var(--glass)); }
.aih__col--ai.gborder::after { background: linear-gradient(150deg, rgba(110,139,255,0.55), rgba(70,221,242,0.3) 40%, transparent 65%); }
.aih__colhead { margin-bottom: 24px; }
.aih__tag { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; margin-bottom: 8px; }
.aih__tag--ai { color: var(--blue); }
.aih__coldesc { color: var(--muted); font-size: 0.9rem; }
.checklist { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.checklist li { position: relative; padding-left: 30px; color: var(--ink-soft); font-size: 0.98rem; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 6px; background: rgba(79,224,176,0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%234FE0B0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; border: 1px solid rgba(79,224,176,0.25); }
.checklist--ai li::before { background: rgba(110,139,255,0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%236E8BFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; border-color: rgba(110,139,255,0.25); }
.aih__bridge { display: none; }
@media (min-width: 880px) {
  .aih__bridge { position: relative; display: flex; align-items: center; justify-content: center; width: 110px; }
  .aih__bridge svg { width: 100%; height: 40px; }
  .aih__bridge [data-line] { stroke-dasharray: 120; stroke-dashoffset: 120; }
  .aih__bridge.is-in [data-line] { animation: draw 1.4s ease forwards; }
  .aih__bridgedot { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 16px var(--mint); transform: translateY(-50%); }
  .aih__bridge.is-in .aih__bridgedot { animation: bridgemove 2.4s ease-in-out infinite alternate 0.6s; }
  @keyframes bridgemove { from { left: 6%; background: var(--mint); } to { left: 86%; background: var(--blue); } }
}
.aih__foot { margin-top: 24px; text-align: center; color: var(--muted); font-size: 0.93rem; max-width: 700px; margin-inline: auto; }

/* =========================================================
   SERVICES — Leistungs-Index (flach, Haarlinien, keine Boxen)
   ========================================================= */
.svc { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
@media (min-width: 800px) {
  .svc { grid-template-columns: 1fr 1fr; column-gap: 0;
    background-image: linear-gradient(var(--line), var(--line));
    background-size: 1px 100%; background-position: center top; background-repeat: no-repeat; }
}
.svcrow { display: flex; gap: 16px; align-items: flex-start; padding: 22px 8px 22px 6px; border-bottom: 1px solid var(--line); position: relative; transition: background var(--t), padding-left var(--t); }
@media (min-width: 800px) {
  .svcrow { padding: 24px 28px; }
  .svcrow:nth-child(odd) { padding-left: 6px; }
  .svcrow:nth-child(even) { padding-left: 32px; }
}
.svcrow::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; background: linear-gradient(var(--mint), var(--blue)); transform: scaleY(0); transform-origin: top; transition: transform var(--t); border-radius: 2px; }
.svcrow:hover { background: var(--glass); }
.svcrow:hover::before { transform: scaleY(1); }
.svcrow__i { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; background: rgba(79,224,176,0.07); border: 1px solid rgba(79,224,176,0.2); color: var(--mint); transition: transform var(--t), background var(--t); }
.svcrow:hover .svcrow__i { transform: translateY(-2px); background: rgba(79,224,176,0.12); }
.svcrow__t h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.04rem; margin-bottom: 5px; letter-spacing: -0.01em; transition: color var(--t); }
.svcrow:hover .svcrow__t h3 { color: var(--mint); }
.svcrow__t p { color: var(--ink-soft); font-size: 0.9rem; max-width: 42ch; }

/* =========================================================
   HOW IT WORKS
   ========================================================= */
.phases { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 860px) { .phases { grid-template-columns: repeat(3, 1fr); } }
.phase { background: linear-gradient(165deg, var(--glass-2), var(--glass)); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px; transition: transform var(--t); }
.phase:hover { transform: translateY(-5px); }
.phase__top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.phase__step { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--mint); white-space: nowrap; }
.phase__line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--mint), transparent); }
.phase h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.65rem); margin-bottom: 12px; letter-spacing: -0.02em; }
.phase p { color: var(--ink-soft); font-size: 0.97rem; }

/* =========================================================
   INTERACTIVE DEMO
   ========================================================= */
.demo__wrap { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 940px) { .demo__wrap { grid-template-columns: 0.92fr 1.08fr; align-items: start; } }
.demo__controls { display: flex; flex-direction: column; gap: 26px; background: linear-gradient(165deg, var(--glass-2), var(--glass)); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px; }
.demo__field { border: none; }
.demo__field legend { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; margin-bottom: 14px; color: var(--ink); }
.demo__step { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--mint); background: rgba(79,224,176,0.1); border: 1px solid rgba(79,224,176,0.25); }
.chipset { display: flex; flex-wrap: wrap; gap: 9px; }
.chip { background: var(--glass); border: 1px solid var(--line-2); color: var(--ink-soft); padding: 9px 15px; border-radius: 999px; font-size: 0.88rem; font-weight: 500; transition: transform var(--t), background var(--t), border-color var(--t), color var(--t); }
.chip:hover { border-color: var(--mint); color: var(--ink); transform: translateY(-1px); }
.chip.is-active { background: linear-gradient(180deg, #5fe9bd, var(--mint)); border-color: var(--mint); color: var(--accent-ink); font-weight: 600; }

.demo__panel { background: linear-gradient(165deg, rgba(20,26,42,0.9), rgba(9,12,22,0.94)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.demo__panelhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.02); flex-wrap: wrap; }
.demo__paneltitle { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }
.demo__panelmeta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--mint); }

.demo__pipe { display: flex; align-items: stretch; gap: 6px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.dpstage { position: relative; flex: 1; display: flex; flex-direction: column; gap: 7px; }
.dpstage b { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.01em; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dpstage i { height: 5px; border-radius: 999px; background: rgba(255,255,255,0.08); position: relative; overflow: hidden; }
.dpstage i::after { content: ""; position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(79,224,176,0.5), var(--mint)); transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease; }
.demo__panel.is-live .dpstage i::after { transform: scaleX(1); }
.demo__panel.is-live .dpstage:nth-child(2) i::after { transition-delay: 0.1s; }
.demo__panel.is-live .dpstage:nth-child(3) i::after { transition-delay: 0.2s; }
.demo__panel.is-live .dpstage:nth-child(4) i::after { transition-delay: 0.3s; }
.demo__panel.is-live .dpstage:nth-child(5) i::after { transition-delay: 0.4s; }
.dpstage--end i::after { background: linear-gradient(90deg, var(--blue), var(--mint)); }

.demo__rows { padding: 8px 22px; }
.demo__row { display: grid; grid-template-columns: 1fr; gap: 3px; padding: 14px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 480px) { .demo__row { grid-template-columns: 0.55fr 1fr; gap: 16px; align-items: baseline; } }
.demo__row:last-child { border-bottom: none; }
.demo__k { font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.demo__v { color: var(--ink); font-size: 0.95rem; font-weight: 500; }
.demo__v.is-flip { animation: flip 380ms cubic-bezier(0.22,0.61,0.36,1); }
@keyframes flip { 0% { opacity: 0; transform: translateY(7px); } 100% { opacity: 1; transform: none; } }
.demo__v--lvl { display: flex; flex-direction: column; gap: 7px; }
.lvl { display: inline-flex; gap: 4px; }
.lvl i { width: 22px; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.1); transition: background var(--t); }
.lvl i.on { background: var(--mint); box-shadow: 0 0 8px rgba(79,224,176,0.5); }

.demo__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 18px 22px; border-top: 1px solid var(--line); }
.kpi { background: rgba(255,255,255,0.025); border: 1px solid var(--line); border-radius: 12px; padding: 14px 10px; text-align: center; }
.kpi__num { display: block; font-family: var(--font-mono); font-size: clamp(0.95rem, 3vw, 1.25rem); font-weight: 600; color: var(--mint); margin-bottom: 4px; }
.kpi__num.is-flip { animation: flip 380ms ease; }
.kpi__cap { font-size: 0.64rem; color: var(--muted); line-height: 1.3; }
.demo__note { font-size: 0.72rem; color: var(--muted); font-style: italic; text-align: center; padding: 4px 22px 18px; }

.grid { display: grid; gap: 16px; }

/* =========================================================
   FOR WHOM — interaktiver Switcher (Liste + Detail)
   ========================================================= */
.whom2 { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 880px) { .whom2 { grid-template-columns: 0.95fr 1.05fr; gap: 40px; align-items: start; } }

.whom2__list { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.whom2__item { width: 100%; display: flex; align-items: center; gap: 16px; padding: 18px 10px 18px 4px; background: transparent; border: none; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-family: var(--font-display); font-weight: 500; font-size: clamp(1.02rem, 2.2vw, 1.22rem); text-align: left; letter-spacing: -0.01em; cursor: pointer; position: relative; transition: color var(--t), padding-left var(--t); }
.whom2__item::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; background: linear-gradient(var(--mint), var(--blue)); transform: scaleY(0); transform-origin: center; transition: transform var(--t); border-radius: 2px; }
.whom2__n { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; color: var(--muted); transition: color var(--t); }
.whom2__item:hover { color: var(--ink); padding-left: 12px; }
.whom2__item.is-active { color: var(--ink); padding-left: 14px; }
.whom2__item.is-active::before { transform: scaleY(1); }
.whom2__item.is-active .whom2__n { color: var(--mint); }

.whom2__detail { position: relative; background: linear-gradient(165deg, var(--glass-2), var(--glass)); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(28px, 4vw, 40px); min-height: 230px; overflow: hidden; }
.whom2__detail::after { content: ""; position: absolute; right: -40px; top: -40px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(79,224,176,0.14), transparent 65%); pointer-events: none; }
.whom2__idx { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; color: var(--mint); }
.whom2__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3.2vw, 2rem); letter-spacing: -0.02em; margin: 14px 0 14px; }
.whom2__benefit { color: var(--ink-soft); font-size: 1.04rem; line-height: 1.55; max-width: 46ch; text-wrap: pretty; }
.whom2__fit { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 5px; }
.whom2__fitk { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.whom2__fitv { color: var(--ink); font-size: 0.92rem; }
.whom2__detail.is-flip .whom2__idx, .whom2__detail.is-flip .whom2__name, .whom2__detail.is-flip .whom2__benefit, .whom2__detail.is-flip .whom2__fitv { animation: flip 420ms cubic-bezier(0.22,0.61,0.36,1); }

/* =========================================================
   PRINCIPLES — Manifest-Liste (Outline-Nummern, Haarlinien)
   ========================================================= */
.manifest { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
@media (min-width: 800px) {
  .manifest { grid-template-columns: 1fr 1fr; column-gap: 56px;
    background-image: linear-gradient(var(--line), var(--line));
    background-size: 1px 100%; background-position: center top; background-repeat: no-repeat; }
}
.manifest__row { display: flex; gap: 20px; align-items: baseline; padding: 26px 4px; border-bottom: 1px solid var(--line); transition: background var(--t); }
@media (min-width: 800px) {
  .manifest__row:nth-child(even) { padding-left: 56px; }
  .manifest__row:nth-child(odd) { padding-right: 56px; }
}
.manifest__n { font-family: var(--font-mono); font-weight: 500; font-size: 1.5rem; line-height: 1; letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1px var(--line-2); flex-shrink: 0; transition: -webkit-text-stroke-color var(--t), color var(--t); }
.manifest__row:hover .manifest__n { color: var(--mint); -webkit-text-stroke-color: var(--mint); }
.manifest__t h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; letter-spacing: -0.015em; margin-bottom: 6px; }
.manifest__t p { color: var(--ink-soft); font-size: 0.93rem; max-width: 40ch; }

/* =========================================================
   FAQ
   ========================================================= */
.accordion { display: flex; flex-direction: column; gap: 12px; }
.acc { background: linear-gradient(165deg, var(--glass-2), var(--glass)); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; transition: border-color var(--t); }
.acc.is-open { border-color: rgba(79,224,176,0.35); }
.acc__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: transparent; border: none; color: var(--ink); text-align: left; font-family: var(--font-display); font-weight: 500; font-size: clamp(1rem, 2vw, 1.1rem); padding: 21px 22px; transition: color var(--t); }
.acc__btn:hover { color: var(--mint); }
.acc__icon { position: relative; flex-shrink: 0; width: 20px; height: 20px; }
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; background: var(--mint); border-radius: 2px; transition: transform var(--t), opacity var(--t); }
.acc__icon::before { top: 9px; left: 2px; width: 16px; height: 2px; }
.acc__icon::after { top: 2px; left: 9px; width: 2px; height: 16px; }
.acc.is-open .acc__icon::after { transform: rotate(90deg); opacity: 0; }
.acc__panel { max-height: 0; overflow: hidden; transition: max-height var(--t); }
.acc__panel p { padding: 0 22px 22px; color: var(--ink-soft); font-size: 0.96rem; max-width: 66ch; }

/* =========================================================
   FINAL CTA
   ========================================================= */
.cta__box { position: relative; overflow: hidden; text-align: center; background: linear-gradient(165deg, rgba(20,26,42,0.85), var(--bg-2)); border: 1px solid var(--line-2); border-radius: 28px; padding: clamp(48px, 7vw, 84px) clamp(24px, 5vw, 64px); }
.cta__grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000, transparent 70%); }
.cta__glow { position: absolute; width: 560px; height: 380px; left: 50%; top: -55%; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(79,224,176,0.32), transparent 65%); filter: blur(46px); pointer-events: none; }
.cta__box .eyebrow, .cta__title, .cta__text, .cta__actions { position: relative; }
.cta__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 4.6vw, 2.9rem); line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 20px; max-width: 740px; margin-inline: auto; text-wrap: balance; }
.cta__text { color: var(--ink-soft); font-size: clamp(1.02rem, 1.8vw, 1.15rem); max-width: 620px; margin: 0 auto 34px; text-wrap: pretty; }
.cta__actions { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cta__mail { font-family: var(--font-mono); font-size: 0.9rem; color: var(--mint); border-bottom: 1px solid transparent; transition: border-color var(--t); }
.cta__mail:hover { border-color: var(--mint); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { border-top: 1px solid var(--line); padding: 60px 0 38px; background: var(--bg-2); position: relative; }
.footer__inner { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 38px; }
@media (min-width: 720px) { .footer__inner { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.footer__tag { color: var(--muted); font-size: 0.9rem; margin: 14px 0 8px; }
.footer__mail a { color: var(--mint); font-family: var(--font-mono); font-size: 0.88rem; }
.footer__links { display: flex; flex-wrap: wrap; gap: 14px 26px; }
.footer__links a { color: var(--ink-soft); font-size: 0.92rem; transition: color var(--t); }
.footer__links a:hover { color: var(--mint); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.82rem; }
.footer__fine { font-style: italic; }

/* =========================================================
   MOTION — Reveal / Hero-Entrance (Fallback wenn kein GSAP)
   ========================================================= */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity var(--tf), transform var(--tf); }
.reveal.is-in { opacity: 1; transform: none; }
.grid > .reveal, .bento > .reveal, .problem__list > .reveal, .trustgrid > .trust { transition-delay: var(--d, 0ms); }

/* Hero-Entrance: nur aktiv, solange JS die Klasse noch nicht entfernt hat */
.js .anim-up { opacity: 0; transform: translateY(24px); }
.js .anim-cmd { opacity: 0; transform: translateY(30px) scale(0.985); }
.hero__copy.is-ready .anim-up { opacity: 1; transform: none; transition: opacity var(--tf), transform var(--tf); }
.hero__visual.is-ready.anim-cmd { opacity: 1; transform: none; transition: opacity 0.8s ease, transform 0.8s ease; }
.hero__copy.is-ready .anim-up:nth-child(1) { transition-delay: 0.05s; }
.hero__copy.is-ready .anim-up:nth-child(2) { transition-delay: 0.12s; }
.hero__copy.is-ready .anim-up:nth-child(3) { transition-delay: 0.20s; }
.hero__copy.is-ready .anim-up:nth-child(4) { transition-delay: 0.28s; }
.hero__copy.is-ready .anim-up:nth-child(5) { transition-delay: 0.36s; }
.hero__scroll.anim-up { transition-delay: 0.5s; }

/* =========================================================
   VISUAL UPGRADES (v4) — alle GPU-freundlich, reduced-motion safe
   ========================================================= */

/* @property für weiche Conic-Rotation (Fallback: statisch) */
@property --beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---- Scroll-Fortschrittsbalken ---- */
.scrollprog { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--mint), var(--cyan) 55%, var(--blue)); z-index: 200; box-shadow: 0 0 12px rgba(79,224,176,0.5); will-change: transform; }

/* ---- Cursor-Glow (nur Maus) ---- */
.cursor-glow { position: fixed; top: 0; left: 0; width: 230px; height: 230px; border-radius: 50%; pointer-events: none; z-index: 1; opacity: 0; transform: translate3d(-50%, -50%, 0); background: radial-gradient(circle, rgba(79,224,176,0.10), rgba(70,221,242,0.05) 35%, transparent 60%); transition: opacity 0.4s ease; mix-blend-mode: screen; }
@media (pointer: fine) { .cursor-glow.is-on { opacity: 1; } }

/* ---- Aurora-Mesh-Hintergrund ---- */
.bg-aurora { position: absolute; inset: -20%; opacity: 0.55;
  background:
    radial-gradient(40% 35% at 30% 25%, rgba(79,224,176,0.18), transparent 60%),
    radial-gradient(35% 40% at 75% 20%, rgba(110,139,255,0.16), transparent 60%),
    radial-gradient(45% 35% at 60% 70%, rgba(70,221,242,0.10), transparent 60%);
  filter: blur(40px); animation: auroraDrift 32s ease-in-out infinite alternate; will-change: transform; }
@keyframes auroraDrift { 0% { transform: translate3d(-3%, -2%, 0) scale(1); } 50% { transform: translate3d(4%, 3%, 0) scale(1.08); } 100% { transform: translate3d(-2%, 4%, 0) scale(1.03); } }
.bg-orb--1 { animation: orbDrift1 26s ease-in-out infinite alternate; }
.bg-orb--2 { animation: orbDrift2 30s ease-in-out infinite alternate; }
@keyframes orbDrift1 { to { transform: translate3d(-40px, 50px, 0); } }
@keyframes orbDrift2 { to { transform: translate3d(50px, -40px, 0); } }

/* ---- Command Center: animierte Lichtkante + Scanline + Tilt ---- */
.cmd { transform-style: preserve-3d; }
.cmd::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--beam), rgba(79,224,176,0.7), rgba(70,221,242,0.25) 25%, transparent 45%, rgba(110,139,255,0.55) 70%, rgba(79,224,176,0.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2;
  animation: beamSpin 7s linear infinite; }
@keyframes beamSpin { to { --beam: 360deg; } }
.cmd__scan { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; overflow: hidden;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px); opacity: 0.6; }
.cmd__scan::after { content: ""; position: absolute; left: 0; right: 0; height: 32%; top: -32%; background: linear-gradient(180deg, transparent, rgba(79,224,176,0.06), transparent); animation: scanMove 6s linear infinite; }
@keyframes scanMove { to { top: 100%; } }

/* ---- AI-Composer (Typewriter) ---- */
.tw { position: relative; height: 18px; flex: 1; display: flex; align-items: center; overflow: hidden; }
.tw__text { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; }
.tw__caret { width: 7px; height: 14px; margin-left: 3px; background: var(--mint); flex-shrink: 0; animation: caretBlink 1s steps(1) infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }

/* ---- Headline Mask-Reveal ---- */
.section__title, .cta__title { clip-path: inset(0 0 0 0); }
.js .section__head .section__title { clip-path: inset(0 0 110% 0); transition: clip-path 0.85s cubic-bezier(0.22,0.61,0.36,1) 0.1s; }
.js .section__head.is-in .section__title { clip-path: inset(0 0 -15% 0); }

/* ---- Magnetische Buttons (Transition für JS-Transform) ---- */
.btn--primary, .btn--lg { transition: transform 0.25s cubic-bezier(0.22,0.61,0.36,1), box-shadow var(--t), background var(--t); }

/* ---- Aktiver Nav-Link (Scrollspy) ---- */
.nav__links a.is-current { color: var(--ink); }
.nav__links a.is-current::after { width: 100%; }

/* ---- Custom Scrollbar ---- */
* { scrollbar-width: thin; scrollbar-color: rgba(79,224,176,0.4) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--mint), var(--blue)); border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--cyan), var(--mint)); }

/* ---- Pinned Process: aktiver Step-Zustand ---- */
@media (min-width: 880px) {
  .flow.is-pinned .flow__step { opacity: 0.32; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; }
  .flow.is-pinned .flow__step.is-on { opacity: 1; transform: none; }
  .flow.is-pinned .flow__step.is-on .flow__num { box-shadow: 0 0 0 4px var(--bg), 0 0 26px rgba(79,224,176,0.45); }
}

/* ---- Live-Ticker-Zahl ---- */
.ckpi__num .is-tick { animation: flip 380ms ease; }

/* =========================================================
   COMMAND CENTER v5 — echtes „Pipeline OS" Produkt-Mockup
   ========================================================= */
.cmd__search { display: inline-flex; align-items: center; gap: 6px; font-size: 0.68rem; color: var(--muted); padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; }
.cmd__search svg { color: var(--muted); }

.cmd__os { display: grid; grid-template-columns: 46px 1fr; }
.cmd__nav { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0; border-right: 1px solid var(--line); background: rgba(255,255,255,0.015); }
.cmd__navi { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--muted); transition: color var(--t), background var(--t); }
.cmd__navi.is-active { color: var(--mint); background: rgba(79,224,176,0.1); box-shadow: inset 0 0 0 1px rgba(79,224,176,0.25); }
.cmd__view { padding: 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* KPI-Reihe (überschreibt alte .cmd__kpis/.ckpi) */
.cmd__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background: none; border: none; }
.ckpi { position: relative; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 13px; padding: 12px 13px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.ckpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--mint), transparent); }
.ckpi:nth-child(2)::before { background: linear-gradient(var(--cyan), transparent); }
.ckpi:nth-child(3)::before { background: linear-gradient(var(--blue), transparent); }
.ckpi__num { font-family: var(--font-mono); font-size: clamp(1.05rem, 2.6vw, 1.42rem); font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.cmd__kpis .ckpi:first-child .ckpi__num { color: var(--mint); }
.ckpi__cap { font-size: 0.64rem; color: var(--muted); letter-spacing: 0.02em; }
.ckpi__trend { font-family: var(--font-mono); font-size: 0.6rem; color: var(--mint); margin-top: 2px; }

/* Pipeline Stage View */
.cmd__board { background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.cmd__boardhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.cmd__boardsub { font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted); }
.stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 13px; }
.stage { position: relative; background: rgba(255,255,255,0.025); border: 1px solid var(--line); border-radius: 9px; padding: 9px 6px; text-align: center; display: flex; flex-direction: column; gap: 3px; transition: transform var(--t), border-color var(--t); }
.stage::after { content: ""; position: absolute; right: -6px; top: 50%; width: 6px; height: 1px; background: var(--line-2); transform: translateY(-50%); }
.stage:last-child::after { display: none; }
.stage__n { font-family: var(--font-mono); font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); }
.stage__l { font-size: 0.56rem; color: var(--muted); letter-spacing: 0.02em; }
.stage.is-focus { border-color: rgba(79,224,176,0.4); background: rgba(79,224,176,0.06); }
.stage.is-focus .stage__n { color: var(--mint); }
.stage--win { border-color: rgba(110,139,255,0.4); background: rgba(110,139,255,0.06); }
.stage--win .stage__n { color: var(--blue); }

.deals { display: flex; flex-direction: column; gap: 7px; }
.deal { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; transition: transform var(--t), border-color var(--t); }
.deal:hover { transform: translateX(2px); border-color: var(--line-2); }
.deal__logo { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; font-family: var(--font-mono); font-weight: 600; font-size: 0.82rem; color: var(--mint); background: rgba(79,224,176,0.1); border: 1px solid rgba(79,224,176,0.22); }
.deal__logo--cyan { color: var(--cyan); background: rgba(70,221,242,0.1); border-color: rgba(70,221,242,0.22); }
.deal__b { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.deal__name { font-size: 0.8rem; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal__meta { font-size: 0.64rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal__fit { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; color: var(--mint); flex-shrink: 0; }
.deal__fit--cyan { color: var(--cyan); }

/* Activity Stream + AI Status */
.cmd__low { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 470px) { .cmd__low { grid-template-columns: 1.3fr 1fr; } }
.cmd__feed, .cmd__ai { background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; }
.feed { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.feed li { display: flex; align-items: center; gap: 9px; font-size: 0.72rem; color: var(--ink-soft); min-width: 0; }
.feed__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); flex-shrink: 0; box-shadow: 0 0 8px rgba(79,224,176,0.6); }
.feed__dot--cyan { background: var(--cyan); box-shadow: 0 0 8px rgba(70,221,242,0.6); }
.feed__dot--blue { background: var(--blue); box-shadow: 0 0 8px rgba(110,139,255,0.6); }
.feed__type { font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); }
.feed__type .tw__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cmd__ai { display: flex; flex-direction: column; gap: 10px; }
.ai__lvl { display: flex; gap: 4px; }
.ai__lvl i { flex: 1; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.08); transition: background var(--t); }
.ai__lvl i.on { background: linear-gradient(90deg, var(--mint), var(--cyan)); box-shadow: 0 0 8px rgba(79,224,176,0.4); }
.ai__txt { font-size: 0.66rem; color: var(--muted); line-height: 1.4; }

@media (max-width: 380px) {
  .cmd__view { padding: 12px; gap: 11px; }
  .ckpi { padding: 10px; }
  .stage { padding: 8px 3px; }
}

/* =========================================================
   SERVICES — Bento v5 (Hierarchie: 2 groß, 1 breit, 4 klein)
   ========================================================= */
.bento2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .bento2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .bento2 { grid-template-columns: repeat(4, 1fr); } }

.bcard { background: linear-gradient(165deg, var(--glass-2), var(--glass)); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; display: flex; flex-direction: column; transition: transform var(--t), background var(--t); min-width: 0; }
.bcard:hover { transform: translateY(-5px); }
.bcard__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.bcard__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: rgba(79,224,176,0.08); border: 1px solid rgba(79,224,176,0.22); color: var(--mint); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); flex-shrink: 0; }
.bcard__tag { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; }
.bcard h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.015em; margin-bottom: 9px; }
.bcard p { color: var(--ink-soft); font-size: 0.93rem; }
.bcard--s h3 { font-size: 1.02rem; }
.bcard--s .bcard__icon { width: 40px; height: 40px; margin-bottom: 16px; }
.bcard--s p { font-size: 0.88rem; }

@media (min-width: 1000px) {
  .bcard--a, .bcard--b { grid-column: span 2; grid-row: span 2; }
  .bcard--wide { grid-column: span 4; }
  .bcard--s { grid-column: span 1; }
}
@media (min-width: 640px) and (max-width: 999px) {
  .bcard--a, .bcard--b, .bcard--wide { grid-column: span 2; }
}

.bcard__viz { margin-top: auto; padding-top: 22px; }
.seglist { display: flex; flex-direction: column; gap: 12px; }
.seg { display: flex; flex-direction: column; gap: 6px; }
.seg__l { font-size: 0.78rem; color: var(--ink-soft); }
.seg__bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; }
.seg__bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(79,224,176,0.5), var(--mint)); transition: width 1.1s cubic-bezier(0.22,0.61,0.36,1); }
.seg__bar i[data-cyan] { background: linear-gradient(90deg, rgba(70,221,242,0.45), var(--cyan)); }
.seg__bar i[data-blue] { background: linear-gradient(90deg, rgba(110,139,255,0.45), var(--blue)); }
.bcard.is-in .seg__bar i { width: var(--w); }
.seg:nth-child(2) .seg__bar i { transition-delay: 0.1s; }
.seg:nth-child(3) .seg__bar i { transition-delay: 0.2s; }

.seq { display: flex; flex-direction: column; gap: 9px; }
.seqmsg { background: rgba(255,255,255,0.025); border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; display: flex; flex-direction: column; gap: 5px; }
.seqmsg__h { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.04em; color: var(--mint); }
.seqmsg__t { font-size: 0.82rem; color: var(--ink-soft); }
.seqmsg--muted { opacity: 0.5; }
.seqmsg--muted .seqmsg__h { color: var(--muted); }

.bcard--wide .bcard__wideinner { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; }
@media (min-width: 760px) { .bcard--wide .bcard__wideinner { grid-template-columns: 1fr 1fr; } }
.bcard__chart { background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: 13px; padding: 16px; }
.bcard__chart svg { width: 100%; height: 78px; }
.bcard__chart [data-bchart] { stroke-dasharray: 380; stroke-dashoffset: 380; }
.bcard.is-in [data-bchart] { animation: draw 1.7s ease forwards 0.2s; }
.bcard__chartstats { display: flex; gap: 22px; margin-top: 10px; font-size: 0.78rem; color: var(--muted); }
.bcard__chartstats b { color: var(--mint); font-family: var(--font-mono); }

/* =========================================================
   SCROLL-STORY — wandernder Lead auf der Pipeline-Linie
   ========================================================= */
.flow__lead { display: none; }
@media (min-width: 880px) {
  .flow__lead { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; transition: top 0.12s linear; opacity: 0; }
  .flow.is-pinned .flow__lead { opacity: 1; }
  .flow__leaddot { width: 18px; height: 18px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px var(--bg), 0 0 22px rgba(79,224,176,0.8); position: relative; }
  .flow__leaddot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(79,224,176,0.5); animation: leadPulse 1.8s ease-out infinite; }
  @keyframes leadPulse { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(2.2); opacity: 0; } }
  .flow__leadlabel { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; color: var(--mint); background: rgba(9,12,22,0.92); border: 1px solid rgba(79,224,176,0.3); border-radius: 999px; padding: 4px 11px; white-space: nowrap; box-shadow: var(--shadow); }
}

/* =========================================================
   TYPOGRAFIE & RHYTHMUS v5 — stärker, luftiger
   ========================================================= */
.section { padding: clamp(84px, 12vw, 160px) 0; }
.hero__title { font-size: clamp(2.6rem, 7.4vw, 4.7rem); letter-spacing: -0.04em; line-height: 1.0; }
.section__title { font-size: clamp(1.95rem, 4.7vw, 3.05rem); line-height: 1.07; letter-spacing: -0.03em; }
.section__lead { font-size: clamp(1.05rem, 1.7vw, 1.2rem); color: #B8C2D6; max-width: 60ch; }
.section__head { margin-bottom: clamp(48px, 6.5vw, 76px); }
.eyebrow { gap: 11px; }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, var(--mint), transparent); }
.eyebrow--center::before { display: none; }
.cta__title { font-size: clamp(1.9rem, 4.8vw, 3.1rem); letter-spacing: -0.03em; }

/* =========================================================
   FINAL PREMIUM POLISH v6 — Lesbarkeit, Luft, Hierarchie
   ========================================================= */

/* ---- Hero-Dashboard: größer, luftiger, hochwertiger ---- */
@media (min-width: 1000px) { .hero__inner { grid-template-columns: 1fr 1.14fr; gap: clamp(48px, 5vw, 72px); } }
.cmd { border-radius: 24px; box-shadow: 0 50px 110px -45px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.02); }
.cmd__bar { padding: 16px 20px; }
.cmd__title { font-size: 0.95rem; }
.cmd__view { padding: 20px; gap: 18px; }
.cmd__kpis { gap: 12px; }
.ckpi { padding: 16px 16px; border-radius: 15px; gap: 4px; }
.ckpi__num { font-size: clamp(1.2rem, 2.7vw, 1.6rem); }
.ckpi__cap { font-size: 0.7rem; color: var(--ink-soft); }
.ckpi__trend { font-size: 0.68rem; margin-top: 4px; }
.cmd__board { padding: 17px; border-radius: 16px; }
.cmd__boardhead { margin-bottom: 14px; }
.stages { gap: 7px; margin-bottom: 15px; }
.stage { padding: 11px 6px; border-radius: 10px; }
.stage__n { font-size: 1rem; }
.stage__l { font-size: 0.6rem; }
.deals { gap: 8px; }
.deal { padding: 10px 12px; border-radius: 11px; }
.deal__name { font-size: 0.85rem; }
.deal__meta { font-size: 0.68rem; }
.deal__logo { width: 30px; height: 30px; }
.cmd__low { gap: 12px; }
.cmd__feed, .cmd__ai { padding: 15px; border-radius: 14px; }
.feed { gap: 12px; margin-top: 12px; }
.feed li { font-size: 0.78rem; color: #C5CDDD; }
.feed__type { font-size: 0.72rem; color: var(--ink-soft); }
.ai__lvl i { height: 7px; }
.ai__txt { font-size: 0.72rem; color: var(--ink-soft); line-height: 1.45; }
.cmd__note { font-size: 0.7rem; padding: 14px 20px 18px; }

/* ---- Problem-Aside: Vorher/Nachher-Vergleich ---- */
.problem__aside { text-align: left; padding: 32px 28px; }
.problem__asidek { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.cmp { display: flex; flex-direction: column; gap: 18px; margin: 22px 0 20px; }
.cmp__row { display: flex; flex-direction: column; gap: 9px; }
.cmp__top { display: flex; align-items: center; justify-content: space-between; }
.cmp__label { font-size: 0.92rem; font-weight: 500; color: var(--ink); }
.cmp__tag { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--muted); padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; }
.cmp__tag--mint { color: var(--mint); border-color: rgba(79,224,176,0.3); }
.cmp__bar { height: 9px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; }
.cmp__bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: rgba(174,184,204,0.5); transition: width 1.1s cubic-bezier(0.22,0.61,0.36,1) 0.15s; }
.cmp__bar--mint i { background: linear-gradient(90deg, var(--mint), var(--cyan)); box-shadow: 0 0 14px rgba(79,224,176,0.4); }
.problem__aside.is-in .cmp__bar i { width: var(--w); }
.problem__asidep { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 14px; }

/* ---- Bento: noch stärker als Premium-Grid ---- */
.bcard { padding: 28px 26px; border-radius: 22px; transition: transform 0.4s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.4s ease; }
.bcard:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7); }
.bcard--a, .bcard--b { padding: 32px 30px; background: radial-gradient(120% 80% at 0% 0%, rgba(79,224,176,0.07), transparent 50%), linear-gradient(165deg, var(--glass-2), var(--glass)); }
.bcard--b { background: radial-gradient(120% 80% at 100% 0%, rgba(110,139,255,0.08), transparent 50%), linear-gradient(165deg, var(--glass-2), var(--glass)); }
.bcard--a .bcard__icon, .bcard--b .bcard__icon { width: 52px; height: 52px; border-radius: 15px; }
.bcard--a h3, .bcard--b h3 { font-size: 1.32rem; letter-spacing: -0.02em; }
.bcard--a p, .bcard--b p { font-size: 0.96rem; max-width: 40ch; }
.bcard--wide { padding: 30px 28px; }
.bcard__tag { font-size: 0.6rem; padding: 5px 11px; color: var(--ink-soft); background: rgba(255,255,255,0.03); }
.seg__l { font-size: 0.82rem; color: #C5CDDD; }
.seg__bar { height: 8px; }
.bcard--s h3 { font-size: 1.05rem; }

/* ---- Final CTA: konkreter, stärker ---- */
.cta__list { list-style: none; display: inline-flex; flex-direction: column; gap: 12px; margin: 4px auto 30px; text-align: left; position: relative; }
.cta__list li { position: relative; padding-left: 32px; color: var(--ink-soft); font-size: clamp(0.96rem, 1.6vw, 1.05rem); }
.cta__list li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 21px; height: 21px; border-radius: 7px; background: rgba(79,224,176,0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%234FE0B0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; border: 1px solid rgba(79,224,176,0.3); }
.cta__assure { position: relative; margin-top: 20px; font-size: 0.82rem; color: var(--muted); }

/* ---- Microinteractions: sauberer, ruhiger ---- */
.btn { transition: transform 0.28s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; }
.chip, .deal, .stage, .acc, .svcrow, .whom2__item { will-change: auto; }
.nav__links a::after { height: 2px; }

/* ---- Mobile-Feinschliff ---- */
@media (max-width: 560px) {
  .problem__aside { padding: 26px 22px; }
  .bcard--a, .bcard--b { padding: 26px 22px; }
  .bcard--a h3, .bcard--b h3 { font-size: 1.18rem; }
  .cta__list { margin-bottom: 26px; }
}

/* =========================================================
   UI-POLISH v7 — Bento-Feature-Grid, Profilpanel, Dashboard-Feinheiten
   ========================================================= */

/* ---- Dashboard: AI-Box entquetschen + Sidebar sauberer ---- */
.cmd__nav { gap: 4px; padding: 16px 0; justify-content: flex-start; }
.cmd__navi { width: 34px; height: 34px; border-radius: 10px; position: relative; }
.cmd__navi.is-active::before { content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 3px; height: 16px; border-radius: 2px; background: var(--mint); box-shadow: 0 0 10px rgba(79,224,176,0.6); }
.cmd__ai { gap: 13px; padding: 16px; justify-content: flex-start; }
.cmd__ai .cmd__label { margin-bottom: 2px; }
.ai__lvl { gap: 5px; margin: 2px 0; }
.ai__lvl i { height: 8px; }
.ai__txt { font-size: 0.74rem; line-height: 1.5; }
.feed { gap: 13px; }
.ckpi { padding: 17px 16px; }
.ckpi__cap { letter-spacing: 0.01em; }

/* ---- Services: Bento mit 3 Feature-Cards + 4 kleinen ---- */
.bento2 { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) and (max-width: 999px) {
  .bento2 { grid-template-columns: repeat(6, 1fr); }
  .bcard--feature { grid-column: span 3; }
  .bcard--feature3 { grid-column: span 6; }
  .bcard--s { grid-column: span 3; }
}
@media (min-width: 1000px) {
  .bento2 { grid-template-columns: repeat(12, 1fr); }
  .bcard--feature { grid-column: span 4; }
  .bcard--s { grid-column: span 3; }
}

.bcard--feature { padding: 30px 28px; display: flex; flex-direction: column; background: radial-gradient(120% 80% at 0% 0%, rgba(79,224,176,0.08), transparent 52%), linear-gradient(165deg, var(--glass-2), var(--glass)); }
.bcard--feature2 { background: radial-gradient(120% 80% at 100% 0%, rgba(110,139,255,0.09), transparent 52%), linear-gradient(165deg, var(--glass-2), var(--glass)); }
.bcard--feature3 { background: radial-gradient(120% 80% at 50% 0%, rgba(70,221,242,0.08), transparent 52%), linear-gradient(165deg, var(--glass-2), var(--glass)); }
.bcard--feature .bcard__top { margin-bottom: 16px; }
.bcard--feature .bcard__icon { width: 50px; height: 50px; border-radius: 15px; }
.bcard--feature h3 { font-size: 1.26rem; letter-spacing: -0.02em; margin-bottom: 8px; }
.bcard--feature p { font-size: 0.95rem; max-width: 38ch; }

.bcard__tag { display: inline-flex; align-self: flex-start; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint); background: rgba(79,224,176,0.08); border: 1px solid rgba(79,224,176,0.22); border-radius: 999px; padding: 4px 11px; margin-bottom: 11px; }
.bcard__tag--s { font-size: 0.58rem; padding: 3px 9px; color: var(--ink-soft); background: rgba(255,255,255,0.03); border-color: var(--line-2); margin-bottom: 0; }

.bcard__status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.04em; color: var(--mint); padding: 5px 11px; border: 1px solid rgba(79,224,176,0.25); border-radius: 999px; }
.bcard__status--cyan { color: var(--cyan); border-color: rgba(70,221,242,0.25); }
.bcard__statusdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.bcard--s .bcard__top { margin-bottom: 16px; }
.bcard--s .bcard__icon { margin-bottom: 0; }

.bcard__chart { margin-top: auto; padding-top: 20px; }
.bcard__chart svg { width: 100%; height: 64px; }
.bcard__chart [data-bchart] { stroke-dasharray: 380; stroke-dashoffset: 380; }
.bcard.is-in .bcard__chart [data-bchart] { animation: draw 1.7s ease forwards 0.2s; }
.bcard__chartstats { display: flex; gap: 20px; margin-top: 12px; font-size: 0.78rem; color: var(--muted); }
.bcard__chartstats b { color: var(--mint); font-family: var(--font-mono); }

/* ---- Für-wen: strukturiertes Profilpanel ---- */
.whom2__detailhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.whom2__badge { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--muted); padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; }
.whom2__kicker { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint); }
.whom2__name { margin: 8px 0 12px; }
.whom2__benefit { margin-bottom: 24px; font-size: 1rem; }
.profile { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.profile__row { display: grid; grid-template-columns: 1fr; gap: 3px; padding: 14px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 480px) { .profile__row { grid-template-columns: 0.65fr 1fr; gap: 16px; align-items: center; } }
.profile dt { font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.profile dd { font-size: 0.95rem; color: var(--ink); }
.chanpill { display: inline-flex; font-family: var(--font-mono); font-size: 0.8rem; color: var(--mint); background: rgba(79,224,176,0.08); border: 1px solid rgba(79,224,176,0.22); border-radius: 999px; padding: 4px 13px; }
.whom2__detail.is-flip .whom2__name, .whom2__detail.is-flip .whom2__benefit, .whom2__detail.is-flip .profile dd, .whom2__detail.is-flip .whom2__idx { animation: flip 420ms cubic-bezier(0.22,0.61,0.36,1); }

@media (max-width: 560px) {
  .bcard--feature { padding: 26px 22px; }
  .bcard--feature h3 { font-size: 1.18rem; }
}

/* =========================================================
   MULTI-PAGE v8 — Page-Hero, Teaser, Kontakt, Recht
   (wiederverwendete Tokens/Komponenten, gleiche Designrichtung)
   ========================================================= */

/* ---- Page-Hero (schlanker als Start-Hero) ---- */
.pagehero { position: relative; padding: clamp(64px, 10vw, 116px) 0 clamp(40px, 6vw, 64px); }
/* Links verankert: volle Inhaltsspalte nutzen (bündig mit Nav & Cards),
   nur die Textbreite für gute Lesbarkeit begrenzen — kein „zentrierter Block, Text links". */
.pagehero__inner { max-width: var(--maxw); }
.pagehero__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.3rem, 6vw, 3.7rem); line-height: 1.04; letter-spacing: -0.035em; margin: 8px 0 20px; text-wrap: balance; max-width: 18ch; }
.pagehero__lead { color: var(--ink-soft); font-size: clamp(1.05rem, 1.8vw, 1.22rem); max-width: 60ch; text-wrap: pretty; }
.pagehero__cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; }
.pagehero__crumb { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 6px; }
.pagehero__crumb a { color: var(--muted); transition: color var(--t); }
.pagehero__crumb a:hover { color: var(--mint); }

/* dünne Sektionen auf Unterseiten etwas kompakter starten */
.section--tight { padding-top: clamp(40px, 6vw, 72px); }

/* ---- „Mehr"-Link (Teaser → Unterseite) ---- */
.morelink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.95rem; color: var(--mint); transition: gap var(--t); }
.morelink svg { transition: transform var(--t); }
.morelink:hover { gap: 12px; }
.morelink:hover svg { transform: translateX(3px); }
.section__head .morelink { margin-top: 18px; }

/* Teaser-Kopf mit Link rechts */
.headrow { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; }
.headrow .section__head { margin-bottom: 0; }

/* aktive Seite im Mobile-Menü */
.nav__mobile a.is-current { color: var(--mint); }

/* lange CTA-Buttons dürfen auf Mobile umbrechen (kein Overflow) */
@media (max-width: 560px) {
  .btn { white-space: normal; }
  .pagehero__cta { flex-direction: column; align-items: stretch; }
  .pagehero__cta .btn { width: 100%; }
  .midcta { flex-direction: column; align-items: flex-start; }
}

/* Nav-Breakpoint für 7 Menüpunkte sauber setzen */
.nav__links { gap: 24px; }
@media (max-width: 1099px) { .nav__links, .nav__actions { display: none !important; } .nav__toggle { display: inline-flex !important; } }
@media (min-width: 1100px) { .nav__links, .nav__actions { display: flex !important; } .nav__toggle { display: none !important; } }

/* ---- Demo-Teaser auf der Startseite (nicht interaktiv) ---- */
.demoteaser { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
@media (min-width: 900px) { .demoteaser { grid-template-columns: 1fr 1fr; } }
.demoteaser__panel { pointer-events: none; }

/* ---- Branchen-Teaser Pills ---- */
.audchips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.audchip { font-size: 0.9rem; color: var(--ink-soft); padding: 9px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255,255,255,0.02); transition: border-color var(--t), color var(--t); }
.audchip:hover { border-color: var(--mint); color: var(--ink); }

/* ---- Kontakt-Seite ---- */
.contact { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 880px) { .contact { grid-template-columns: 1.1fr 0.9fr; align-items: start; } }
.ksteps { list-style: none; counter-reset: ks; display: flex; flex-direction: column; gap: 4px; }
.ksteps li { position: relative; padding: 18px 0 18px 64px; border-bottom: 1px solid var(--line); }
.ksteps li:last-child { border-bottom: none; }
.ksteps li::before { counter-increment: ks; content: counter(ks, decimal-leading-zero); position: absolute; left: 0; top: 16px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-family: var(--font-mono); font-weight: 600; color: var(--mint); background: rgba(79,224,176,0.08); border: 1px solid rgba(79,224,176,0.25); }
.ksteps h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; margin-bottom: 5px; letter-spacing: -0.01em; }
.ksteps p { color: var(--ink-soft); font-size: 0.93rem; }
.contactcard { background: linear-gradient(165deg, var(--glass-2), var(--glass)); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px; }
.contactcard h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; margin-bottom: 10px; letter-spacing: -0.01em; }
.contactcard p { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 20px; }
.contactcard .btn { width: 100%; margin-bottom: 14px; }
.contactcard__mail { display: block; text-align: center; font-family: var(--font-mono); font-size: 0.9rem; color: var(--mint); }
.trustpoints { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.trustpoints li { position: relative; padding-left: 30px; color: var(--ink-soft); font-size: 0.95rem; }
.trustpoints li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 6px; background: rgba(79,224,176,0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%234FE0B0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; border: 1px solid rgba(79,224,176,0.25); }

/* Netlify-Form (optional) */
.cform { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.cform label { display: flex; flex-direction: column; gap: 6px; font-size: 0.84rem; color: var(--ink-soft); }
.cform input, .cform textarea { font-family: inherit; font-size: 0.95rem; color: var(--ink); background: rgba(255,255,255,0.03); border: 1px solid var(--line-2); border-radius: 11px; padding: 12px 14px; transition: border-color var(--t); }
.cform input:focus, .cform textarea:focus { outline: none; border-color: var(--mint); }
.cform textarea { resize: vertical; min-height: 110px; }
.cform button { margin-top: 4px; }
.cform__err { font-size: 0.85rem; color: #ff9a8b; margin-top: 2px; }
.cform__err a { color: inherit; text-decoration: underline; }
.cform__success { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px 24px; border: 1px solid rgba(79,224,176,0.35); background: rgba(79,224,176,0.06); border-radius: var(--radius-sm); margin-top: 6px; }
.cform__success[hidden] { display: none; }
.cform__success h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--ink); letter-spacing: -0.01em; }
.cform__success p { color: var(--ink-soft); font-size: 0.95rem; }
.cform__check { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(140deg, var(--mint), var(--cyan)); position: relative; box-shadow: 0 0 18px rgba(79,224,176,0.4); }
.cform__check::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='%2304130D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat; }

/* ---- Rechtsseiten ---- */
.legal { max-width: 760px; }
.legal__notice { background: rgba(110,139,255,0.08); border: 1px solid rgba(110,139,255,0.3); border-radius: var(--radius-sm); padding: 18px 20px; color: var(--ink); font-size: 0.95rem; margin-bottom: 32px; }
.legal h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em; margin: 30px 0 12px; }
.legal p, .legal li { color: var(--ink-soft); font-size: 0.96rem; line-height: 1.7; }
.legal ul { padding-left: 20px; margin: 10px 0; }
.legal .placeholder { color: var(--muted); font-style: italic; }

/* ---- prefers-reduced-motion: alle Zusatz-Effekte beruhigen ---- */
@media (prefers-reduced-motion: reduce) {
  .bg-aurora, .bg-orb--1, .bg-orb--2, .cmd::after, .cmd__scan::after, .tw__caret, .scanMove { animation: none !important; }
  .js .section__head .section__title { clip-path: none; transition: none; }
  .cursor-glow { display: none; }
  .scrollprog { display: none; }
  .flow.is-pinned .flow__step { opacity: 1; transform: none; }
}

/* =========================================================
   SPACING NORMALIZATION v12 — konsistenter 8px-Rhythmus
   ========================================================= */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 96px;
  --space-11: 120px;
  --space-12: var(--space-11);

  --s1: var(--space-1);
  --s2: var(--space-2);
  --s3: var(--space-3);
  --s4: var(--space-4);
  --s5: var(--space-5);
  --s6: var(--space-6);
  --s7: var(--space-7);
  --s8: var(--space-8);

  --layout-container-x: clamp(var(--space-4), 4vw, var(--space-6));
  --layout-section-y: clamp(var(--space-8), 7vw, var(--space-10));
  --layout-section-y-compact: clamp(var(--space-7), 6vw, var(--space-8));
  --layout-section-head-gap: clamp(var(--space-6), 4vw, var(--space-7));
  --layout-grid-gap: var(--space-5);
  --layout-grid-gap-lg: var(--space-6);
  --layout-card-pad: clamp(var(--space-5), 3vw, var(--space-6));
}

html { overflow-x: hidden; }
.container { padding-inline: var(--layout-container-x); }
.section { padding-block: var(--layout-section-y); }
.section--tight { padding-top: var(--layout-section-y-compact); }
.section__head { margin-bottom: var(--layout-section-head-gap); }
.section__title { margin-bottom: var(--space-5); }
.section__lead { max-width: 60ch; }
.eyebrow { gap: var(--space-3); margin-bottom: var(--space-4); }
.eyebrow::before { width: var(--space-5); }

.reveal.headrow,
.headrow.reveal {
  opacity: 1;
  transform: none;
}
.js .section__head .section__title,
.js .headrow .section__title {
  clip-path: none;
  transition: none;
}

.btn {
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  line-height: 1.22;
  text-align: center;
}
.btn--sm { padding: var(--space-2) var(--space-4); }
.btn--lg { padding: var(--space-4) var(--space-6); }

.nav__inner { gap: var(--space-5); }
.brand { gap: var(--space-3); }
.nav__links { gap: var(--space-5); }
.nav__mobile { gap: var(--space-1); padding: var(--space-4) var(--layout-container-x) var(--space-5); }
.nav__mobile a { padding: var(--space-4) var(--space-1); }
.nav__mobile a:last-child { margin-top: var(--space-3); }

.hero { padding-block: clamp(var(--space-8), 8vw, var(--space-10)); }
.hero__inner { gap: clamp(var(--space-7), 6vw, var(--space-9)); }
@media (min-width: 1000px) { .hero__inner { gap: clamp(var(--space-7), 5vw, var(--space-9)); } }
.hero__title { margin: var(--space-2) 0 var(--space-5); }
.hero__sub { margin-bottom: var(--space-6); }
.hero__cta { gap: var(--space-4); margin-bottom: var(--space-6); }
.hero__chips { gap: var(--space-3); }
.hero__chips li { gap: var(--space-3); }
@media (min-width: 1000px) { .hero__scroll { gap: var(--space-2); margin-top: var(--space-7); } }

.pagehero {
  padding: clamp(var(--space-8), 8vw, var(--space-10)) 0 var(--space-7);
}
.pagehero__crumb { gap: var(--space-2); margin-bottom: var(--space-2); }
.pagehero__title { margin: var(--space-2) 0 var(--space-5); letter-spacing: -0.025em; }
.pagehero__lead { max-width: 60ch; }
.pagehero__cta { gap: var(--space-4); margin-top: var(--space-6); }

.cmd__bar { gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.cmd__title, .cmd__meta { gap: var(--space-3); }
.cmd__search, .cmd__live { padding: var(--space-1) var(--space-3); }
.cmd__os { grid-template-columns: var(--space-7) 1fr; }
.cmd__nav { gap: var(--space-2); padding: var(--space-4) 0; }
.cmd__navi { width: var(--space-6); height: var(--space-6); border-radius: var(--space-2); }
.cmd__view { gap: var(--space-4); padding: var(--space-5); }
.cmd__kpis { gap: var(--space-3); }
.ckpi { gap: var(--space-1); padding: var(--space-4); }
.ckpi__trend { margin-top: var(--space-1); }
.cmd__board { padding: var(--space-4); }
.cmd__boardhead { margin-bottom: var(--space-4); }
.stages { gap: var(--space-2); margin-bottom: var(--space-4); }
.stage { gap: var(--space-1); padding: var(--space-2); }
.deals { gap: var(--space-2); }
.deal { gap: var(--space-3); padding: var(--space-2) var(--space-3); }
.deal__b { gap: var(--space-1); }
.cmd__low { gap: var(--space-3); }
.cmd__feed, .cmd__ai { gap: var(--space-3); padding: var(--space-4); }
.cmd__ai .cmd__label { margin-bottom: 0; }
.feed { gap: var(--space-3); margin-top: var(--space-3); }
.feed li { gap: var(--space-2); }
.ai__lvl { gap: var(--space-1); margin-block: 0; }
.cmd__note { padding: var(--space-4) var(--space-5); }

.problem__layout { gap: var(--layout-grid-gap); }
@media (min-width: 920px) { .problem__layout { gap: var(--layout-grid-gap-lg); } }
.problem__list { gap: 0; }
.pitem { gap: var(--space-4); padding: var(--space-5); }
.pitem:hover { padding-left: var(--space-6); }
.pitem__idx { padding-top: var(--space-1); }
.pitem h3 { margin-bottom: var(--space-2); }
.problem__aside { padding: var(--layout-card-pad); }
.gauge { margin: var(--space-4) auto; }
.problem__asidep { margin-bottom: var(--space-3); }
.cmp { gap: var(--space-4); margin: var(--space-5) 0; }
.cmp__row { gap: var(--space-2); }
.cmp__tag { padding: var(--space-1) var(--space-3); }

.flow__list { gap: var(--space-4); }
.flow__step { padding-left: calc(var(--space-8) + var(--space-2)); }
.flow__step h3 { margin: var(--space-2) 0; }
@media (min-width: 880px) { .flow__list { gap: var(--space-6) var(--space-7); } }
.midcta { gap: var(--space-4); margin-top: var(--space-7); padding: var(--space-5); }

.headrow {
  gap: var(--space-5);
}
.headrow + .phases,
.headrow + .aih__grid,
.headrow + .bento2,
.headrow + .whom2 {
  margin-top: 0;
}
.headrow .section__head {
  margin-bottom: 0;
}
.headrow .morelink {
  margin-top: 0;
}
#system-teaser .headrow,
#ki-teaser .headrow,
#leistungen-teaser .headrow,
#branchen-teaser .headrow {
  margin-bottom: 0;
  padding-bottom: 0;
}
#system-teaser .headrow .morelink,
#ki-teaser .headrow .morelink,
#leistungen-teaser .headrow .morelink,
#branchen-teaser .headrow .morelink {
  margin-bottom: var(--space-6);
}
.section__head .morelink { margin-top: var(--space-4); }
.morelink { gap: var(--space-2); transition: gap var(--t), color var(--t); }
.morelink:hover { gap: var(--space-3); }
.morelink:hover svg { transform: translateX(var(--space-1)); }

.aih__grid { gap: var(--layout-grid-gap); }
@media (min-width: 880px) { .aih__grid { gap: var(--space-5); } }
.aih__col { padding: var(--layout-card-pad); }
.aih__colhead { margin-bottom: var(--space-5); }
.aih__tag { margin-bottom: var(--space-2); }
.checklist { gap: var(--space-3); }
.checklist li { padding-left: var(--space-6); }
.aih__foot { margin-top: var(--space-5); }

.svcrow { gap: var(--space-4); padding: var(--space-5) var(--space-2); }
@media (min-width: 800px) {
  .svcrow { padding: var(--space-5) var(--space-6); }
  .svcrow:nth-child(odd) { padding-left: var(--space-2); }
  .svcrow:nth-child(even) { padding-left: var(--space-6); }
}
.svcrow__t h3 { margin-bottom: var(--space-2); }

.phases { gap: var(--layout-grid-gap); }
.phase { padding: var(--layout-card-pad); }
.phase__top { gap: var(--space-4); margin-bottom: var(--space-5); }
.phase h3 { margin-bottom: var(--space-3); }

.demo__wrap { gap: var(--layout-grid-gap); }
@media (min-width: 940px) { .demo__wrap { gap: var(--layout-grid-gap-lg); } }
.demo__controls { gap: var(--space-5); padding: var(--layout-card-pad); }
.demo__field legend { gap: var(--space-2); margin-bottom: var(--space-4); }
.chipset { gap: var(--space-2); }
.chip { padding: var(--space-2) var(--space-4); }
.demo__panelhead { gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.demo__paneltitle { gap: var(--space-2); }
.demo__pipe { gap: var(--space-2); padding: var(--space-4) var(--space-5); }
.dpstage { gap: var(--space-2); }
.demo__rows { padding: var(--space-2) var(--space-5); }
.demo__row { gap: var(--space-1); padding: var(--space-4) 0; }
@media (min-width: 480px) { .demo__row { gap: var(--space-4); } }
.demo__v--lvl { gap: var(--space-2); }
.demo__kpis { gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.kpi { padding: var(--space-3); }
.kpi__num { margin-bottom: var(--space-1); }
.demo__note { padding: var(--space-2) var(--space-5) var(--space-4); }

.grid, .bento2 { gap: var(--layout-grid-gap); }
@media (min-width: 1000px) { .bento2 { gap: var(--layout-grid-gap); } }
.bcard, .bcard--a, .bcard--b, .bcard--wide, .bcard--feature { padding: var(--layout-card-pad); }
.bcard__top, .bcard--feature .bcard__top, .bcard--s .bcard__top { margin-bottom: var(--space-4); }
.bcard h3, .bcard--feature h3 { margin-bottom: var(--space-2); }
.bcard__tag { padding: var(--space-1) var(--space-3); margin-bottom: var(--space-3); }
.bcard__tag--s { padding: var(--space-1) var(--space-2); margin-bottom: 0; }
.bcard__viz { padding-top: var(--space-5); }
.seglist { gap: var(--space-3); }
.seg { gap: var(--space-2); }
.seq { gap: var(--space-2); }
.seqmsg { gap: var(--space-1); padding: var(--space-3); }
.bcard--wide .bcard__wideinner { gap: var(--space-5); }
.bcard__chart { padding: var(--space-4); }
.bcard__chartstats { gap: var(--space-5); margin-top: var(--space-3); }

.whom2 { gap: var(--layout-grid-gap); }
@media (min-width: 880px) { .whom2 { gap: var(--space-7); } }
.whom2__item { gap: var(--space-4); padding: var(--space-4) var(--space-2); }
.whom2__item:hover { padding-left: var(--space-3); }
.whom2__item.is-active { padding-left: var(--space-4); }
.whom2__detail { padding: var(--layout-card-pad); }
.whom2__detailhead { margin-bottom: var(--space-4); }
.whom2__name { margin: var(--space-2) 0 var(--space-3); }
.whom2__benefit { margin-bottom: var(--space-5); }
.profile__row { gap: var(--space-1); padding: var(--space-4) 0; }
@media (min-width: 480px) { .profile__row { gap: var(--space-4); } }
.chanpill { padding: var(--space-1) var(--space-3); }

.manifest { column-gap: var(--space-7); }
.manifest__row { gap: var(--space-5); padding: var(--space-5) var(--space-1); }
@media (min-width: 800px) {
  .manifest__row:nth-child(even) { padding-left: var(--space-7); }
  .manifest__row:nth-child(odd) { padding-right: var(--space-7); }
}
.manifest__t h3 { margin-bottom: var(--space-2); }

.accordion { gap: var(--space-3); }
.acc__btn { gap: var(--space-4); padding: var(--space-5); }
.acc__panel p { padding: 0 var(--space-5) var(--space-5); }

.cta__box { padding: clamp(var(--space-7), 7vw, var(--space-9)) clamp(var(--space-5), 5vw, var(--space-8)); }
.cta__box .eyebrow, .cta__title, .cta__text, .cta__actions { position: relative; }
.cta__title { margin-bottom: var(--space-5); }
.cta__text { margin: 0 auto var(--space-6); }
.cta__list { gap: var(--space-3); margin: 0 auto var(--space-6); }
.cta__list li { padding-left: var(--space-6); }
.cta__actions { gap: var(--space-4); }
.cta__assure { margin-top: var(--space-5); }

.demoteaser {
  gap: var(--layout-grid-gap);
}
.demoteaser .section__head {
  margin-bottom: 0;
}
.demoteaser .btn {
  margin-top: var(--space-5) !important;
}
.audchips {
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.audchip {
  padding: var(--space-2) var(--space-4);
}

.contact {
  gap: var(--layout-grid-gap);
}
.contact .section__head {
  margin-bottom: var(--space-5) !important;
}
.ksteps {
  gap: 0;
}
.ksteps li {
  padding: var(--space-5) 0 var(--space-5) calc(var(--space-7) + var(--space-4));
}
.ksteps li::before {
  top: var(--space-5);
  width: var(--space-7);
  height: var(--space-7);
  border-radius: var(--space-3);
}
.ksteps h3 {
  margin-bottom: var(--space-2);
}
.contactcard {
  padding: var(--layout-card-pad);
}
.contactcard h3 {
  margin-bottom: var(--space-3);
}
.contactcard p {
  margin-bottom: var(--space-5);
}
.contactcard .btn {
  margin-bottom: var(--space-4);
}
.trustpoints {
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.trustpoints li {
  padding-left: var(--space-6);
}
.cform {
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.cform label {
  gap: var(--space-2);
}
.cform input,
.cform textarea {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--space-3);
}
.cform textarea {
  min-height: 112px;
}
.cform button {
  margin-top: var(--space-1);
}
.cform__err {
  margin-top: var(--space-1);
}
.cform__success {
  gap: var(--space-3);
  padding: var(--space-5);
  margin-top: var(--space-2);
}

.legal {
  max-width: 760px;
  padding: 0;
}
.legal__notice {
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
}
.legal h2 {
  margin: var(--space-6) 0 var(--space-3);
}
.legal ul {
  margin: var(--space-3) 0;
  padding-left: var(--space-5);
}

.footer { padding: var(--space-8) 0 var(--space-7); }
.footer__inner { gap: var(--space-6); margin-bottom: var(--space-6); }
.footer__tag { margin: var(--space-4) 0 var(--space-2); }
.footer__links { gap: var(--space-4) var(--space-5); }
.footer__bottom { gap: var(--space-4); padding-top: var(--space-5); }

@media (max-width: 700px) {
  :root {
    --layout-section-y: var(--space-8);
    --layout-section-y-compact: var(--space-7);
    --layout-section-head-gap: var(--space-6);
    --layout-grid-gap: var(--space-4);
    --layout-grid-gap-lg: var(--space-5);
    --layout-card-pad: var(--space-5);
  }

  .hero { padding-block: var(--space-7) var(--space-8); }
  .hero__inner { gap: var(--space-6); }
  .hero__sub { margin-bottom: var(--space-5); }
  .hero__cta { margin-bottom: var(--space-5); }
  .cmd__bar,
  .cmd__view,
  .demo__panelhead,
  .demo__pipe,
  .demo__rows,
  .demo__kpis,
  .demo__note {
    padding-inline: var(--space-4);
  }
  .cmd__view { padding-block: var(--space-4); }
  .cmd__kpis,
  .demo__kpis {
    gap: var(--space-2);
  }
  .ckpi { padding: var(--space-3); }
  .midcta { margin-top: var(--space-6); }
  .btn,
  .btn--lg {
    line-height: 1.2;
  }
  .btn--lg {
    padding-block: var(--space-3);
  }
  .pagehero {
    padding: var(--space-7) 0 var(--space-6);
  }
  .pagehero__title {
    margin-bottom: var(--space-4);
  }
  .pagehero__cta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    margin-top: var(--space-5);
  }
  .pagehero__cta .btn {
    width: 100%;
  }
  .headrow {
    align-items: flex-start;
    gap: var(--space-4);
  }
  #system-teaser .headrow,
  #ki-teaser .headrow,
  #leistungen-teaser .headrow,
  #branchen-teaser .headrow {
    padding-bottom: 0;
  }
  .headrow + .phases,
  .headrow + .aih__grid,
  .headrow + .bento2,
  .headrow + .whom2 {
    margin-top: 0;
  }
  .midcta {
    flex-direction: column;
    align-items: flex-start;
  }
  .ksteps li {
    padding-left: var(--space-8);
  }
  .contactcard {
    padding: var(--space-5);
  }
  .cta__box {
    padding: var(--space-6) var(--space-5);
  }
  .footer {
    padding-block: var(--space-7);
  }
}

@media (max-width: 420px) {
  :root { --layout-container-x: var(--space-4); }
  .btn,
  .btn--lg {
    width: 100%;
    white-space: normal;
  }
  .demo__kpis {
    grid-template-columns: 1fr;
  }
  .stage {
    padding-inline: var(--space-1);
  }
  .footer__links {
    gap: var(--space-3) var(--space-4);
  }
}

/* =========================================================
   STARTPAGE SPACING v13 — Headrow/Card-Rhythmus
   ========================================================= */
.home-page .section {
  padding-block: clamp(var(--space-7), 6vw, var(--space-9));
}

.home-page .headrow {
  margin-bottom: var(--space-7);
  gap: var(--space-6) var(--space-7);
}

.home-page #system-teaser .headrow,
.home-page #ki-teaser .headrow,
.home-page #leistungen-teaser .headrow,
.home-page #branchen-teaser .headrow {
  margin-bottom: var(--space-7);
  padding-bottom: 0;
}

.home-page .headrow .section__head {
  margin-bottom: 0;
}

.home-page .headrow .section__lead {
  margin-bottom: 0;
}

.home-page .headrow .morelink,
.home-page #system-teaser .headrow .morelink,
.home-page #ki-teaser .headrow .morelink,
.home-page #leistungen-teaser .headrow .morelink,
.home-page #branchen-teaser .headrow .morelink {
  align-self: flex-end;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: var(--space-2);
}

.home-page .headrow + .phases,
.home-page .headrow + .aih__grid,
.home-page .headrow + .bento2,
.home-page .headrow + .whom2 {
  margin-top: 0;
}

.home-page .demoteaser {
  gap: var(--space-7);
}

@media (min-width: 900px) {
  .home-page .headrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

@media (max-width: 700px) {
  .home-page .section {
    padding-block: var(--space-7);
  }

  .home-page .headrow,
  .home-page #system-teaser .headrow,
  .home-page #ki-teaser .headrow,
  .home-page #leistungen-teaser .headrow,
  .home-page #branchen-teaser .headrow {
    margin-bottom: var(--space-6);
    gap: var(--space-4);
  }

  .home-page .headrow .morelink,
  .home-page #system-teaser .headrow .morelink,
  .home-page #ki-teaser .headrow .morelink,
  .home-page #leistungen-teaser .headrow .morelink,
  .home-page #branchen-teaser .headrow .morelink {
    align-self: flex-start;
    padding-bottom: 0;
  }

  .home-page .demoteaser {
    gap: var(--space-6);
  }
}

/* =========================================================
   CONTENT v12 — Drei-Säulen (Menschen/Strategie/Technologie) + Team-Grid
   ========================================================= */
.pillars { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 760px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { position: relative; background: linear-gradient(165deg, var(--glass-2), var(--glass)); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px; }
.pillar--ai { background: radial-gradient(120% 80% at 100% 0%, rgba(110,139,255,0.08), transparent 52%), linear-gradient(165deg, var(--glass-2), var(--glass)); }
.pillar__num { position: absolute; top: 22px; right: 24px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }
.pillar .aih__colhead { margin-bottom: 20px; }

.grid--team { grid-template-columns: 1fr; }
@media (min-width: 600px) { .grid--team { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--team { grid-template-columns: repeat(4, 1fr); } }
.tcard { background: linear-gradient(165deg, var(--glass-2), var(--glass)); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; transition: transform var(--t); display: flex; flex-direction: column; }
.tcard:hover { transform: translateY(-5px); }
.tcard__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: rgba(79,224,176,0.08); border: 1px solid rgba(79,224,176,0.22); color: var(--mint); margin-bottom: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
.tcard h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; margin-bottom: 8px; }
.tcard p { color: var(--ink-soft); font-size: 0.9rem; }
.team__foot { margin-top: 28px; text-align: center; color: var(--muted); font-size: 0.95rem; max-width: 720px; margin-inline: auto; }

/* =========================================================
   v15 — Nav (8 Punkte), interaktive Team-Pipeline, Member-Cards
   ========================================================= */

/* ---- Nav: 8 Menüpunkte sauber umbrechen ---- */
@media (max-width: 1199px) { .nav__links, .nav__actions { display: none !important; } .nav__toggle { display: inline-flex !important; } }
@media (min-width: 1200px) { .nav__links, .nav__actions { display: flex !important; } .nav__toggle { display: none !important; } }
.nav__links { gap: 16px !important; }
.nav__links a { font-size: 0.9rem; }

/* ---- Interaktive Team-Pipeline (ersetzt das Team-Karten-Grid) ---- */
.tflow { display: flex; flex-direction: column; gap: 28px; }
.tflow__rail { position: relative; }
.tflow__avatars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tflow__node { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 2px; color: inherit; }
.tflow__avatar { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--ink); background: rgba(255,255,255,0.04); border: 1px solid var(--line-2); transition: transform var(--t), border-color var(--t), box-shadow var(--t), background var(--t), color var(--t); }
.tflow__role { font-size: 0.74rem; color: var(--muted); text-align: center; line-height: 1.25; transition: color var(--t); max-width: 12ch; }
.tflow__node:hover .tflow__avatar { border-color: var(--mint); transform: translateY(-2px); }
.tflow__node.is-active .tflow__avatar { background: linear-gradient(140deg, var(--mint), var(--cyan)); color: var(--accent-ink); border-color: transparent; box-shadow: 0 0 0 4px rgba(79,224,176,0.12), 0 0 22px rgba(79,224,176,0.45); transform: translateY(-3px) scale(1.04); }
.tflow__node.is-active .tflow__role { color: var(--ink); }
:focus-visible.tflow__node .tflow__avatar { outline: 2px solid var(--mint); outline-offset: 3px; }

.tflow__track { position: relative; height: 18px; margin-top: 14px; }
.tflow__line { position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
.tflow__fill { position: absolute; left: 0; top: 0; height: 100%; width: 10%; background: linear-gradient(90deg, var(--mint), var(--blue)); border-radius: 2px; box-shadow: 0 0 12px rgba(79,224,176,0.5); transition: width 0.6s cubic-bezier(0.22,0.61,0.36,1); }
.tflow__token { position: absolute; top: 50%; left: 10%; width: 18px; height: 18px; border-radius: 50%; background: var(--mint); transform: translate(-50%, -50%); box-shadow: 0 0 0 5px var(--bg), 0 0 18px rgba(79,224,176,0.85); transition: left 0.6s cubic-bezier(0.22,0.61,0.36,1); z-index: 2; }
.tflow__token::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(79,224,176,0.5); animation: leadPulse 1.8s ease-out infinite; }
.tflow__caps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; }
.tflow__cap { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); text-align: center; transition: color var(--t); }
.tflow__cap.is-active { color: var(--mint); }

.tflow__detail { position: relative; background: linear-gradient(165deg, var(--glass-2), var(--glass)); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 34px); overflow: hidden; }
.tflow__detail::after { content: ""; position: absolute; right: -40px; top: -40px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(79,224,176,0.12), transparent 65%); pointer-events: none; }
.tflow__dkicker { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint); }
.tflow__drole { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 3vw, 1.7rem); letter-spacing: -0.02em; margin: 8px 0 12px; }
.tflow__ddesc { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.55; max-width: 54ch; }
.tflow__dmeta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tflow__dpill { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink); background: rgba(255,255,255,0.03); border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 12px; }
.tflow__dpill b { color: var(--mint); font-weight: 600; }
.tflow__detail.is-flip .tflow__drole, .tflow__detail.is-flip .tflow__ddesc, .tflow__detail.is-flip .tflow__dkicker { animation: flip 420ms cubic-bezier(0.22,0.61,0.36,1); }
@media (max-width: 560px) {
  .tflow__avatar { width: 46px; height: 46px; font-size: 0.95rem; }
  .tflow__role { font-size: 0.6rem; max-width: 9ch; }
  .tflow__cap { font-size: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) { .tflow__token::after { animation: none; } }

/* ---- Team-Mitglieder (Über uns) ---- */
.members { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 600px) { .members { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .members { grid-template-columns: repeat(3, 1fr); } }
.member { background: linear-gradient(165deg, var(--glass-2), var(--glass)); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; transition: transform var(--t); }
.member:hover { transform: translateY(-5px); }
.member__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.member__avatar { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--accent-ink); flex-shrink: 0; background: linear-gradient(140deg, var(--mint), var(--cyan)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.15); }
.member__avatar--b { background: linear-gradient(140deg, var(--cyan), var(--blue)); }
.member__avatar--c { background: linear-gradient(140deg, var(--blue), var(--mint)); }
.member__name { font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; letter-spacing: -0.01em; }
.member__role { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mint); margin-top: 3px; }
.member__bio { color: var(--ink-soft); font-size: 0.92rem; }
.member__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.member__tag { font-family: var(--font-mono); font-size: 0.6rem; color: var(--ink-soft); background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
/* Foto-Layout (Foto oben, Text darunter) */
.member--photo { padding: 14px 14px 24px; }
.member__photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: 14px; margin-bottom: 16px; background: #0a0e1a; border: 1px solid var(--line); }
.member--photo .member__name { font-size: 1.1rem; padding: 0 10px; }
.member--photo .member__role { padding: 0 10px; margin-bottom: 12px; }
.member--photo .member__bio { padding: 0 10px; }
.member--photo .member__tags { padding: 0 10px; }

/* =========================================================
   v18 — Über-uns-Seite: kompakter, menschlicher (gescopt)
   ========================================================= */

/* Reveals fail-safe: Inhalte bleiben sichtbar, auch wenn JS nicht lädt.
   Subtile Einblend-Animation rein per CSS (kein JS nötig). */
.about-page .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .about-page .reveal { animation: aboutIn 0.6s cubic-bezier(0.22,0.61,0.36,1) both; }
}
@keyframes aboutIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.section__head--center { text-align: center; margin-inline: auto; }

/* ---- Hero mit Team-Portraits ---- */
.abouthero { padding-bottom: clamp(34px, 5vw, 56px); }
.abouthero__inner { display: grid; grid-template-columns: 1fr; gap: clamp(34px, 5vw, 60px); align-items: center; max-width: var(--maxw); }
@media (min-width: 920px) { .abouthero__inner { grid-template-columns: 1.05fr 0.95fr; } }
.abouthero__copy { max-width: 600px; }
.abouthero__faces { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.aface { width: 118px; height: 118px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-2); background: #0a0e1a; box-shadow: var(--shadow); transition: transform var(--t); }
.aface img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aface:hover { transform: translateY(-4px); }
.abouthero__cap { text-align: center; margin-top: 16px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--muted); }
@media (max-width: 560px) { .aface { width: 92px; height: 92px; border-radius: 14px; } }

/* ---- Drei Arbeitsprinzipien (kompakt) ---- */
.principles3 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .principles3 { grid-template-columns: repeat(3, 1fr); } }
.principle { background: linear-gradient(165deg, var(--glass-2), var(--glass)); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; }
.principle__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(79,224,176,0.08); border: 1px solid rgba(79,224,176,0.22); color: var(--mint); margin-bottom: 14px; }
.principle h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.04rem; letter-spacing: -0.01em; margin-bottom: 6px; }
.principle p { color: var(--ink-soft); font-size: 0.92rem; }

/* ---- Gründer prominent ---- */
.founder { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 44px); align-items: center; }
@media (min-width: 820px) { .founder { grid-template-columns: 0.8fr 1.2fr; } }
.founder__media { position: relative; max-width: 360px; }
.founder__photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line-2); display: block; }
.founder__badge { position: absolute; left: 14px; right: 14px; bottom: 14px; background: rgba(9,12,22,0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 13px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.founder__name { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; }
.founder__role { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mint); }
.founder__quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.1rem, 2.2vw, 1.4rem); line-height: 1.5; letter-spacing: -0.01em; color: var(--ink); margin: 8px 0 16px; text-wrap: pretty; }
.founder__attr { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }

/* ---- Team kompakt (4 Personen) ---- */
.team-compact { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 760px) { .team-compact { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.tmember { background: linear-gradient(165deg, var(--glass-2), var(--glass)); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 14px 18px; transition: transform var(--t); }
.tmember:hover { transform: translateY(-4px); }
.tmember__photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; display: block; margin-bottom: 12px; border: 1px solid var(--line); background: #0a0e1a; }
.tmember__name { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em; }
.tmember__role { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mint); margin: 3px 0 8px; }
.tmember__bio { color: var(--ink-soft); font-size: 0.82rem; margin-bottom: 10px; }
.tmember__tags { display: flex; flex-wrap: wrap; gap: 5px; }
@media (max-width: 560px) { .tmember { padding: 12px 12px 16px; } .tmember__bio { font-size: 0.78rem; } }