:root{
    --bg: #080C18;
    --surface: #0E1526;
    --surface-2: #16203C;
    --line: #1E2A45;
    --text: #EDF1F8;
    --text-muted: #8B98B8;
    --accent: #3B82F6;
    --accent-rgb: 59,130,246;
    --accent-light: #60A5FA;
    --accent-dim: #1E3A6B;
    --node-line: #263252;
    --radius: 10px;
  }
  *{ box-sizing: border-box; margin:0; padding:0; }
  html{ scroll-behavior: smooth; }
  body{
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  h1,h2,h3{ font-family: 'Space Grotesk', sans-serif; font-weight: 600; letter-spacing: -0.01em; }
  .mono{ font-family: 'JetBrains Mono', monospace; }
  a{ color: inherit; text-decoration: none; }
  img{ max-width: 100%; display:block; }

  .wrap{ max-width: 1120px; margin: 0 auto; padding: 0 32px; }

  /* Skip link / focus */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  /* NAV */
  header{
    position: fixed; top:0; left:0; right:0; z-index: 100;
    background: rgba(11,14,20,0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  nav.wrap{
    display:flex; align-items:center; justify-content:space-between;
    height: 68px;
  }
  .logo{
    font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.05rem;
    display:flex; align-items:center; gap:8px;
  }
  .logo-dot{ width:8px; height:8px; border-radius:50%; background: var(--accent); display:inline-block; }
  .navlinks{ display:flex; gap: 32px; }
  .navlinks a{ font-size:0.9rem; color: var(--text-muted); transition: color .2s ease, background .2s ease, border-color .2s ease; }
  .navlinks a:hover{ color: var(--text); }
  .navlinks a.active{
    color: var(--accent-light); font-weight:600;
    padding: 6px 14px; margin: -6px 0; border-radius:999px;
    background: rgba(var(--accent-rgb),.1);
    border: 1px solid rgba(var(--accent-rgb),.35);
  }
  .navlinks a.active:hover{ color: var(--accent-light); }
  .nav-external-arrow{ font-size:0.8em; opacity:0.7; }
  .nav-cta{
    font-size:0.85rem; padding: 9px 18px; border:1px solid var(--accent);
    border-radius: 6px; color: var(--accent) !important;
    transition: background .2s ease, color .2s ease;
  }
  .nav-cta:hover{ background: var(--accent); color: var(--bg) !important; }
  .navlinks-mobile{ display:none; }
  .nav-linkedin{
    display:flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:6px; border:1px solid var(--line);
    color: var(--text-muted); transition: border-color .2s ease, color .2s ease;
    flex-shrink:0;
  }
  .nav-linkedin:hover{ border-color: var(--accent); color: var(--accent); }
  .nav-right{ display:flex; align-items:center; gap:14px; }

  /* HERO */
  .hero{
    padding: 112px 0 80px;
    position: relative;
    overflow: hidden;
  }
  .hero::before{
    content:''; position:absolute; top:-160px; right:-160px; width:640px; height:640px;
    background: radial-gradient(circle, rgba(var(--accent-rgb),.28), transparent 70%);
    filter: blur(10px); pointer-events:none; z-index:0;
  }
  .hero::after{
    content:''; position:absolute; bottom:-220px; left:-160px; width:520px; height:520px;
    background: radial-gradient(circle, rgba(var(--accent-rgb),.14), transparent 70%);
    filter: blur(10px); pointer-events:none; z-index:0;
  }
  .hero > .wrap{ position:relative; z-index:1; }
  .hero-split{ display:grid; grid-template-columns: 40% 60%; gap:40px; align-items:center; margin-bottom:40px; }
  .hero-split-text .hero-split-h1{
    font-size: clamp(0.99rem, 1.98vw, 1.53rem); line-height:1.3; margin-bottom:8px; color: var(--text);
  }
  .hero-split-text .hero-split-sub{
    font-family:'Space Grotesk', sans-serif; font-size: clamp(0.9rem, 1.58vw, 1.18rem);
    font-weight:600; color: var(--accent); line-height:1.3;
  }
  .hero-split-text .hero-actions{ margin-top:20px; }
  .hero-split-text .btn-row{ gap:14px; }
  .hero-split .hero-photo-large{ max-width:184px; }
  .hero-cta-btn{
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
    padding:10px 34px; border-radius:10px; background: var(--accent); color:#fff;
    min-width:210px; transition: transform .15s ease;
  }
  .hero-cta-btn:hover{ transform: translateY(-2px); }
  .hero-cta-btn .cta-small{ font-size:0.78rem; font-weight:400; opacity:0.9; }
  .hero-cta-btn .cta-large{ font-family:'Space Grotesk', sans-serif; font-size:1.15rem; font-weight:700; }
  .hero-visual{ position:relative; display:flex; flex-direction:column; align-items:center; }
  .hero-photo-large{
    width:100%; max-width:230px; aspect-ratio: 4/5; border-radius: var(--radius); overflow:hidden;
    border:1px solid var(--line); box-shadow: 0 24px 60px -24px rgba(var(--accent-rgb),.45);
  }
  .hero-photo-large img{ width:100%; height:100%; object-fit:cover; display:block; }
  .hero-credentials{ list-style:none; margin-top:22px; display:flex; flex-direction:column; gap:11px; max-width:280px; }
  .hero-credentials li{ font-size:0.92rem; color: var(--text-muted); padding-left:18px; position:relative; line-height:1.5; }
  .hero-credentials li::before{ content:''; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background: var(--accent); }
  .hero-diagram-full .n8n-window{ max-width:100%; }
  .hero-diagram-full .n8n-caption{ font-size:0.78rem; }
  .hero-diagram-full .n8n-caption + .n8n-caption{ margin-top:6px; opacity:0.8; }
  .hero-diagram-full .n8n-edge{ transition: stroke .25s ease, stroke-width .25s ease; }
  .hero-diagram-full .n8n-edge.flow-live{ stroke: var(--accent); stroke-width:2.4; }
  .hero-diagram-full .flow-dot{ fill: var(--accent); filter: drop-shadow(0 0 5px rgba(var(--accent-rgb),0.9)); }
  .kpi-row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:18px; }
  .kpi-chip{
    display:flex; align-items:center; gap:8px; font-family:'JetBrains Mono', monospace; font-size:0.78rem;
    padding:9px 14px; border-radius:8px; border:1px solid var(--line); background: var(--surface); color: var(--text);
  }
  .kpi-chip.bad{ border-color:#EF4444; color:#EF4444; background: rgba(239,68,68,0.08); }
  .kpi-chip.good{ border-color:#22C55E; color:#22C55E; background: rgba(34,197,94,0.08); }
  .kpi-note{ text-align:center; font-size:0.68rem; color: var(--text-muted); margin-top:10px; font-family:'JetBrains Mono', monospace; text-transform:uppercase; letter-spacing:0.04em; }
  .flow-steps{ list-style:none; max-width:640px; margin:14px auto 0; display:flex; flex-direction:column; gap:6px; }
  .flow-steps li{
    font-family:'JetBrains Mono', monospace; font-size:0.78rem; color: var(--text-muted);
    padding-left:16px; position:relative; line-height:1.5;
  }
  .flow-steps li::before{ content:'•'; position:absolute; left:0; color: var(--accent); }
  .problem-flag{ font-family:'JetBrains Mono', monospace; font-size:9.5px; fill:#EF4444; font-weight:600; }
  .eyebrow{
    font-family:'JetBrains Mono', monospace; font-size:0.72rem; color: var(--accent-light);
    text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 20px;
    display:inline-flex; align-items:center; gap:8px;
    padding: 7px 14px; border-radius: 999px;
    border: 1px solid rgba(var(--accent-rgb),.35);
    background: rgba(var(--accent-rgb),.08);
  }
  .eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background: var(--accent); display:inline-block; flex-shrink:0; }
  .hero p{
    font-size: 1.08rem; color: var(--text-muted); margin-bottom: 20px;
  }
  .hero p:last-of-type{ margin-bottom: 34px; }

  .btn-row{ display:flex; gap:16px; flex-wrap:wrap; }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding: 13px 26px; border-radius: 6px; font-size:0.92rem; font-weight:500;
    transition: transform .15s ease, background .2s ease, border-color .2s ease;
  }
  .btn-primary{ background: var(--accent); color: #fff; box-shadow: 0 8px 24px -8px rgba(var(--accent-rgb),.55); }
  .btn-primary:hover{ transform: translateY(-2px); }
  .btn-ghost{ border:1px solid var(--line); color: var(--text); }
  .btn-ghost:hover{ border-color: var(--text-muted); }

  .hero-microcopy{ font-size:0.85rem; color: var(--text-muted); margin-top:16px; max-width:none; }

  .trust-strip{
    display:flex; flex-wrap:wrap; gap: 10px 26px; margin-top:36px; padding-top:26px;
    border-top:1px solid var(--line);
  }
  .trust-item{
    font-family:'JetBrains Mono', monospace; font-size:0.78rem; color: var(--text-muted);
    display:flex; align-items:center; gap:8px;
  }
  .trust-item::before{ content:''; width:5px; height:5px; border-radius:50%; background: var(--accent); display:inline-block; flex-shrink:0; }

  /* n8n-style editor mockup (jetzt Sekundär-Visual in Leistungen) — pure SVG, scales as one unit */
  .n8n-window{
    background:#F4F5F7; border-radius: 12px; overflow:hidden;
    border:1px solid var(--line);
    box-shadow: 0 40px 80px -30px rgba(0,0,0,0.65);
  }
  .n8n-titlebar{
    display:flex; align-items:center; gap:8px; padding: 11px 14px;
    background:#FFFFFF; border-bottom:1px solid #E4E4E7;
  }
  .n8n-dot{ width:10px; height:10px; border-radius:50%; }
  .n8n-dot.red{ background:#FF5F57; } .n8n-dot.yellow{ background:#FEBC2E; } .n8n-dot.green{ background:#28C840; }
  .n8n-url{
    margin-left:8px; flex:1; font-family:'JetBrains Mono', monospace; font-size:10.5px; color:#8A8A95;
    background:#F4F5F7; border:1px solid #E4E4E7; padding:5px 12px; border-radius:6px;
  }
  .n8n-url b{ color:#3F3F46; font-weight:600; }
  .n8n-canvas-svg{ display:block; width:100%; height:auto; }
  .n8n-edge{ stroke:#D2D2D9; stroke-width:2; fill:none; }
  .n8n-edge.active{ stroke: var(--accent); }
  .n8n-port{ fill:#fff; stroke:#C6C6CE; stroke-width:1.5; }
  .n8n-pulse{ fill: var(--accent); filter: drop-shadow(0 0 5px rgba(var(--accent-rgb),0.9)); }
  .n8n-node-rect{ fill:#fff; stroke:#E1E1E6; stroke-width:1.5; filter: drop-shadow(0 3px 6px rgba(20,20,30,0.08)); }
  .n8n-node-rect.active{ stroke: var(--accent); stroke-width:2; }
  .n8n-node-icon-txt{ font-size:14px; fill:#fff; dominant-baseline:middle; }
  .n8n-node-title-txt{ font-family:'Inter', sans-serif; font-size:13px; font-weight:600; fill:#18181B; }
  .n8n-node-sub-txt{ font-family:'JetBrains Mono', monospace; font-size:8.5px; fill:#9A9AA5; letter-spacing:0.02em; }
  .n8n-edge.slow{ stroke:#B8B8C2; stroke-width:1.6; stroke-dasharray:3 4; }
  .n8n-pulse-slow{ fill:#9A9AA5; }
  .n8n-caption{
    font-family:'JetBrains Mono', monospace; font-size:0.78rem; color: var(--text-muted);
    text-align:center; margin-top:18px;
  }

  /* TOOLS FILTER (interaktive Filter-Pillen) */
  .tools-filter{ padding: 56px 0; border-top:1px solid var(--line); }
  .tools-filter-label{
    text-align:center; font-family:'JetBrains Mono', monospace; font-size:0.75rem;
    letter-spacing:0.12em; text-transform:uppercase; color: var(--text-muted); margin-bottom:26px;
  }
  .tool-pillbar{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:28px; }
  .tool-pill{
    font-family:'JetBrains Mono', monospace; font-size:0.74rem; letter-spacing:0.02em;
    padding:8px 14px; border-radius:20px; border:1px solid var(--line); background:transparent;
    color: var(--text-muted); cursor:pointer; transition: all 0.15s ease;
  }
  .tool-pill:hover{ border-color: rgba(var(--accent-rgb),0.5); color: var(--text); }
  .tool-pill.active{ background: var(--accent); border-color: var(--accent); color:#fff; font-weight:500; }
  .tool-filter-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
  .tool-filter-grid .tool-chip{ transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease; }
  .tool-filter-grid .tool-chip.dim{ opacity:0.22; transform:scale(0.97); }
  .tool-filter-grid .tool-chip.match{ border-color: rgba(var(--accent-rgb),0.55); }
  .tool-filter-note{
    text-align:center; margin:28px auto 0; max-width:560px;
    color: var(--text-muted); font-size:0.9rem;
  }
  .tool-chip{
    display:flex; align-items:center; gap:10px; padding:11px 18px; border:1px solid var(--line);
    border-radius:8px; background: var(--surface); white-space:nowrap; flex-shrink:0;
  }
  .tool-chip .tool-icon{
    width:22px; height:22px; border-radius:5px; display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:700; color:#fff; flex-shrink:0; font-family:'Space Grotesk', sans-serif;
  }
  .tool-chip .tool-icon-real{
    width:22px; height:22px; border-radius:5px; display:flex; align-items:center; justify-content:center;
    background:#fff; flex-shrink:0;
  }
  .tool-chip span.label{ font-size:0.88rem; color: var(--text); }

  /* CREDIBILITY STRIP */
  .credstrip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding: 48px 0; }

  .n8n-branch-txt{ font-family:'JetBrains Mono', monospace; font-size:9.5px; fill:#9A9AA5; }

  /* SECTIONS */
  section{ padding: 100px 0; border-top: 1px solid var(--line); }
  .section-head{ max-width: 620px; margin-bottom: 56px; }
  .section-head h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); margin-top: 14px; }
  .section-head p{ color: var(--text-muted); margin-top: 16px; font-size: 1.02rem; }
  #prozess .section-head,
  #worum-gehts .section-head,
  #ueber-mich .section-head,
  #ablauf-kurz .section-head,
  #leistungen-kurz .section-head,
  #leistungen .section-head{ max-width: none; }

  /* LEISTUNGEN */
  .services{ display:grid; grid-template-columns: 1fr auto 1fr; column-gap: 24px; row-gap: 64px; align-items:stretch; position:relative; }
  .services-arrows{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
  .services-arrows > path{ fill: var(--accent); stroke:none; opacity:0.85; }
  .services-divider{
    display:flex; align-items:center; justify-content:center; flex-direction:column;
    font-family:'JetBrains Mono', monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em;
    line-height:1.6; text-align:center;
    color: var(--text-muted); background: var(--surface-2); border:1px solid var(--line); border-radius:999px;
    padding:10px 12px; align-self:center;
  }
  .service-card{
    background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
    padding: 32px; transition: border-color .2s ease, transform .2s ease;
  }
  .service-card:hover{ border-color: var(--accent-dim); transform: translateY(-3px); }
  .service-num{ font-family:'JetBrains Mono', monospace; color: var(--accent); font-size:0.85rem; margin-bottom:14px; display:block; }
  .service-badge{
    display:inline-block; font-family:'JetBrains Mono', monospace; font-size:0.68rem; text-transform:uppercase;
    letter-spacing:0.05em; color: var(--accent); border:1px solid var(--accent-dim); background: rgba(var(--accent-rgb),0.08);
    padding:4px 9px; border-radius:4px; margin-bottom:14px;
  }
  .service-card h3{ font-size:1.15rem; margin-bottom: 12px; }
  .service-card p{ color: var(--text-muted); font-size:0.94rem; }
  .service-card.featured{ grid-column: 1 / -1; }
  .service-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
  .tag{
    font-family:'JetBrains Mono', monospace; font-size:0.72rem; color: var(--text-muted);
    border:1px solid var(--line); padding:5px 10px; border-radius: 4px;
  }

  /* PROZESS */
  .process-list{ display:flex; flex-direction:column; position:relative; }
  .process-list::before{
    content:''; position:absolute; left:19px; top:49px; bottom:49px; width:2px;
    background: linear-gradient(to bottom, var(--line), var(--accent));
    z-index:0;
  }
  .process-item{
    display:grid; grid-template-columns: 90px 1fr; gap: 28px;
    padding: 30px 0; position:relative; z-index:1;
    transition: background .25s ease;
  }
  .process-num{
    font-family:'Space Grotesk', sans-serif; font-weight:700; color:#fff; font-size:1rem;
    width:38px; height:38px; border-radius:50%; background: var(--accent);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    box-shadow: 0 6px 18px -4px rgba(var(--accent-rgb),.55);
    position:relative; z-index:2;
  }
  .process-item:last-child .process-num{
    box-shadow: 0 0 0 6px rgba(var(--accent-rgb),.18), 0 8px 26px -4px rgba(var(--accent-rgb),.8);
  }
  .process-item:last-child{
    background: linear-gradient(90deg, rgba(var(--accent-rgb),.07), transparent 65%);
    border-radius: var(--radius);
    margin-left: -20px; padding-left: 20px; margin-right: -20px; padding-right: 20px;
  }
  .process-item h3{ font-size:1.1rem; margin-bottom:8px; }
  .process-item p{ color: var(--text-muted); font-size:0.96rem; max-width:560px; }
  .process-item p strong{ color: var(--text); font-weight:600; }
  .process-content{ display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap; }
  .process-text{ flex:1 1 320px; min-width:0; }
  .process-graphic{ flex:0 0 300px; max-width:300px; }
  .process-graphic .n8n-caption{ font-size:0.7rem; }

  /* IST/SOLL-Toggle (Basis-Schritt) */
  .ist-soll-toggle{ margin-top:40px; }
  .ist-soll-switch{ display:flex; background: var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:4px; margin-bottom:14px; }
  .ist-soll-btn{
    flex:1; background:transparent; border:none; color: var(--text-muted);
    font-family:'JetBrains Mono', monospace; font-size:0.72rem; font-weight:600; letter-spacing:0.04em;
    padding:8px 0; border-radius:6px; cursor:pointer; transition: background .2s ease, color .2s ease;
  }
  .ist-soll-btn.active{ background: var(--accent); color:#fff; }
  .ist-soll-panel{ display:none; }
  .ist-soll-panel.active{ display:block; }

  /* Workflow-Vergleichskarten ((KI-)Automatisierung / Agentifizierung) */
  .workflow-compare{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px; }
  .workflow-compare-item{ background: var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:14px 16px; }
  .workflow-compare-tag{
    display:block; font-family:'JetBrains Mono', monospace; font-size:0.7rem; text-transform:uppercase;
    letter-spacing:0.04em; color: var(--accent); margin-bottom:8px;
  }
  .workflow-compare-item p{ font-size:0.85rem; color: var(--text-muted); line-height:1.55; max-width:none; }
  .workflow-compare-item p strong{ color: var(--text); }
  .workflow-example{ background: var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:14px 16px; margin-top:14px; }
  .workflow-example p{ font-size:0.85rem; color: var(--text-muted); line-height:1.55; max-width:none; }
  .workflow-example p strong{ color: var(--text); font-weight:600; }
  .workflow-details{ margin-top:20px; flex-basis:100%; }
  .workflow-details summary{
    cursor:pointer; font-family:'Space Grotesk', sans-serif; font-weight:500; font-size:0.92rem;
    list-style:none; display:flex; align-items:center; gap:12px;
    color: var(--text); padding:2px 0;
  }
  .workflow-details summary::-webkit-details-marker{ display:none; }
  .workflow-details summary::before{ content:'+'; font-family:'JetBrains Mono', monospace; color: var(--accent); font-size:1.2rem; flex-shrink:0; }
  .workflow-details[open] summary::before{ content:'–'; }
  .workflow-details .workflow-compare{ margin-top:16px; }
  .n8n-footnote{ font-family:'JetBrains Mono', monospace; font-size:0.62rem; color: var(--text-muted); text-align:center; margin-top:6px; opacity:0.85; }

  /* WORUM GEHT'S (Heute / Mit Automatisierung) */
  .friction-list{ display:flex; flex-direction:column; gap:1px; margin-top:28px; border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); background: var(--line); }
  .friction-row{ display:grid; grid-template-columns:1fr 1fr; gap:1px; }
  .friction-label{ grid-column:1 / -1; background: var(--surface); padding:16px 22px 4px; font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:0.92rem; color: var(--text); }
  .friction-col{ background: var(--surface); padding:12px 22px 18px; }
  .friction-col.is-after{ background: var(--surface-2); }
  .friction-tag{ display:block; font-family:'JetBrains Mono', monospace; font-size:0.66rem; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px; color: var(--text-muted); }
  .friction-col.is-after .friction-tag{ color: var(--accent); }
  .friction-col p{ font-size:0.9rem; color: var(--text-muted); line-height:1.55; }
  .friction-col.is-after p{ color: var(--text); }
  .friction-hook{ margin-top:26px; font-size:1.02rem; max-width:none; }

  /* SHOWCASES */
  .showcases{ display:flex; flex-direction:column; gap: 16px; }
  .showcase-card{
    background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
    overflow:hidden;
  }
  .showcase-summary{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding: 22px 30px; cursor:pointer; list-style:none;
  }
  .showcase-summary::-webkit-details-marker{ display:none; }
  .showcase-summary h3{ font-size:1.05rem; }
  .showcase-toggle{
    font-family:'JetBrains Mono', monospace; color: var(--accent); font-size:1.2rem; flex-shrink:0;
  }
  .showcase-toggle::before{ content:'+'; }
  .showcase-card[open] .showcase-toggle::before{ content:'–'; }
  .showcase-body{
    padding: 0 30px 30px; display:flex; flex-direction:row; align-items:flex-start; gap: 28px;
  }
  .showcase-body .n8n-window{ max-width: 760px; flex:1 1 760px; min-width:0; }
  .showcase-text{ flex:1 1 220px; min-width:0; padding-top:4px; }
  .demo-embed-wrap{ flex:1 1 300px; max-width:340px; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
  .demo-embed-label{
    font-family:'JetBrains Mono', monospace; font-size:0.72rem; color: var(--accent-light);
    background: rgba(var(--accent-rgb),.1); border:1px solid rgba(var(--accent-rgb),.3);
    border-radius:6px; padding:8px 12px;
  }
  .showcase-card h3{ font-size:1.05rem; }
  .showcase-card p{ color: var(--text-muted); font-size:0.92rem; }

  /* ÜBER MICH */
  .about-lead{ color: var(--text-muted); font-size:1.05rem; line-height:1.7; margin-bottom: 0; }
  .about-lead strong{ color: var(--text); font-weight:600; }
  .about{ display:grid; grid-template-columns: 0.7fr 1.3fr; gap: 48px; align-items:start; }
  .about-text{ padding-top:6px; }
  .about-heading-row{ margin-bottom: 44px; }
  .about-heading-row .eyebrow{ margin-bottom: 18px; }
  .about-heading{ font-size: clamp(1.7rem, 3vw, 2.3rem); }
  .about-points{
    list-style:none; margin:24px auto 0; max-width:811px; text-align:left;
    display:flex; flex-direction:column; gap:14px;
    background: var(--surface-2); border:1px solid var(--line); border-radius: var(--radius);
    padding:22px 24px;
  }
  .about-points li{ color: var(--text-muted); font-size:0.92rem; line-height:1.6; padding-left:18px; position:relative; }
  .about-points li::before{ content:''; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background: var(--accent); }
  .about-points li strong{ color: var(--text); font-weight:600; }
  .about-portrait{
    width:100%; aspect-ratio: 1/1; border-radius: var(--radius);
    background: linear-gradient(155deg, var(--surface-2), var(--surface));
    border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    box-shadow: 0 24px 60px -24px rgba(var(--accent-rgb),.45);
  }
  .about-portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
  .linkedin-badge{
    display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px;
    padding:10px 14px; border:1px solid var(--line); border-radius:6px;
    font-size:0.85rem; color: var(--text-muted); transition: border-color .2s ease, color .2s ease;
  }
  .linkedin-badge:hover{ border-color: var(--accent); color: var(--accent); }

  /* CV-TIMELINE (interaktive Zeitleiste) */
  .cv-timeline{ margin-top:52px; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding:28px 28px 24px; }
  .cv-timeline-scroll{ overflow-x:auto; padding-bottom:6px; }
  .cv-timeline-inner{ min-width:640px; }
  .cv-axis{ display:flex; justify-content:space-between; padding:0 2px 8px; border-bottom:1px solid var(--line); margin-bottom:18px; }
  .cv-axis span{ font-family:'JetBrains Mono', monospace; font-size:0.68rem; color: var(--text-muted); }
  .cv-lane{ display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
  .cv-lane-label{ font-family:'JetBrains Mono', monospace; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; }
  .cv-lane-label.work{ color: var(--accent-light); }
  .cv-lane-label.education{ color: #F2A93B; }
  .cv-lane-label.automation{ color: #2DD4BF; }
  .cv-track{ position:relative; width:100%; min-height:44px; }
  .cv-bar{
    position:absolute; height:44px; border-radius:7px; cursor:pointer;
    display:flex; align-items:center; padding:6px 10px;
    border:1px solid transparent; transition: transform .15s ease, box-shadow .15s ease;
  }
  .cv-bar.work{ background: rgba(var(--accent-rgb),.22); border-color: rgba(var(--accent-rgb),.5); }
  .cv-bar.education{ background: rgba(242,169,59,.18); border-color: rgba(242,169,59,.5); }
  .cv-bar.automation{ background: rgba(20,184,166,.18); border-color: rgba(20,184,166,.5); }
  .cv-bar.is-ongoing::after{
    content:''; position:absolute; right:4px; top:50%; width:6px; height:6px; margin-top:-3px;
    border-top:2px solid; border-right:2px solid; transform: rotate(45deg);
  }
  .cv-bar.work.is-ongoing::after{ border-color: var(--accent); }
  .cv-bar.education.is-ongoing::after{ border-color: #F2A93B; }
  .cv-bar.automation.is-ongoing::after{ border-color: #14B8A6; }
  .cv-bar:hover{ transform: translateY(-2px); }
  .cv-bar.active{ box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px currentColor; }
  .cv-bar.work.active{ color: var(--accent); }
  .cv-bar.education.active{ color: #F2A93B; }
  .cv-bar.automation.active{ color: #14B8A6; }
  .cv-bar-title{
    font-size:0.7rem; font-weight:600; color: var(--text); line-height:1.25;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  }
  .cv-milestone{
    position:absolute; top:18px; width:24px; height:24px; margin-left:-12px;
    background:#F2A93B; transform:rotate(45deg); border-radius:4px; cursor:pointer;
    box-shadow: 0 4px 12px -2px rgba(242,169,59,.6);
  }
  .cv-legend{ display:flex; gap:22px; margin-top:12px; }
  .cv-legend-item{ display:flex; align-items:center; gap:7px; font-family:'JetBrains Mono', monospace; font-size:0.7rem; color: var(--text-muted); }
  .cv-legend-dot{ width:9px; height:9px; border-radius:3px; }
  .cv-legend-dot.work{ background: var(--accent); }
  .cv-legend-dot.education{ background:#F2A93B; }
  .cv-legend-dot.automation{ background:#14B8A6; }
  .cv-detail{
    margin-top:20px; padding:18px 20px; background: var(--surface-2); border-radius:8px;
    border-left:3px solid var(--accent); min-height:24px;
  }
  .cv-detail-title{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:0.92rem; color: var(--text); margin-bottom:6px; }
  .cv-detail-text{ color: var(--text-muted); font-size:0.9rem; line-height:1.6; }
  .cv-detail-text strong{ color: var(--text); font-weight:600; }
  .cv-detail-text ul{ margin:2px 0 0 18px; padding:0; }
  .cv-detail-text li{ margin-bottom:6px; }
  .cv-detail-text li:last-child{ margin-bottom:0; }
  .cv-detail-text p{ margin-top:10px; }
  .cv-detail-placeholder{ color: var(--text-muted); font-size:0.88rem; font-style:italic; }

  /* FAQ */
  .faq-list{ display:flex; flex-direction:column; max-width: 760px; }
  .faq-item{
    border-top:1px solid var(--line); padding: 20px 0;
  }
  .faq-item:last-child{ border-bottom:1px solid var(--line); }
  .faq-item summary{
    cursor:pointer; font-family:'Space Grotesk', sans-serif; font-weight:500; font-size:1.02rem;
    list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{
    content:'+'; font-family:'JetBrains Mono', monospace; color: var(--accent); font-size:1.2rem; flex-shrink:0;
  }
  .faq-item[open] summary::after{ content:'–'; }
  .faq-item p{ color: var(--text-muted); margin-top:14px; font-size:0.95rem; max-width: 620px; }
  .faq-steps{
    list-style:none; margin-top:14px; max-width:620px;
    display:flex; flex-direction:column; gap:10px;
  }
  .faq-steps li{ color: var(--text-muted); font-size:0.95rem; line-height:1.55; padding-left:18px; position:relative; }
  .faq-steps li::before{ content:''; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background: var(--accent); }
  .faq-steps li strong{ color: var(--text); font-weight:600; }

  /* KONTAKT */
  .contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; }
  .contact-info h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom:18px; }
  .contact-info p{ color: var(--text-muted); margin-bottom: 28px; max-width: 420px; }
  .contact-line{
    display:flex; align-items:center; gap:12px; padding: 14px 0; border-top:1px solid var(--line);
    font-size:0.95rem;
  }
  .contact-line:last-child{ border-bottom:1px solid var(--line); }
  .contact-line span.mono{ color: var(--accent); font-size:0.78rem; min-width:80px; }

  form{ display:flex; flex-direction:column; gap:18px; }
  .field label{
    display:block; font-family:'JetBrains Mono', monospace; font-size:0.75rem;
    color: var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px;
  }
  .field input, .field textarea{
    width:100%; background: var(--surface); border:1px solid var(--line); border-radius:6px;
    padding: 13px 14px; color: var(--text); font-family:'Inter', sans-serif; font-size:0.95rem;
    transition: border-color .2s ease;
  }
  .field input:focus, .field textarea:focus{ border-color: var(--accent); outline:none; }
  .field textarea{ resize: vertical; min-height: 110px; }
  .checkbox-group{ display:flex; flex-direction:row; flex-wrap:wrap; gap:10px 24px; }
  .checkbox-option{
    display:flex; align-items:center; gap:10px; font-size:0.95rem; color: var(--text);
    text-transform:none; letter-spacing:normal; font-family:'Inter', sans-serif; cursor:pointer;
  }
  .checkbox-option input[type="checkbox"]{ width:18px; height:18px; accent-color: var(--accent); cursor:pointer; flex-shrink:0; }
  form .btn{ align-self:flex-start; border:none; cursor:pointer; font-family:'Inter', sans-serif; }
  form .btn:disabled{ opacity:0.6; cursor:not-allowed; }
  .form-status{ display:none; font-size:0.9rem; margin-top:4px; }
  .form-status.visible{ display:block; }
  .form-status.ok{ color: var(--accent); }
  .form-status.error{ color: #e5484d; }

  footer{
    border-top:1px solid var(--line); padding: 36px 0; text-align:center;
    color: var(--text-muted); font-size:0.85rem;
  }
  footer .mono{ color: var(--accent-dim); }

  /* CHATBOT WIDGET (rechts unten, alle Seiten) */
  .chatbot-widget{ position:fixed; right:24px; bottom:24px; z-index:200; font-family:'Inter', sans-serif; }
  .chatbot-toggle{
    width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
    background: var(--accent); color:#fff; font-size:1.4rem;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 12px 30px -8px rgba(0,0,0,0.6);
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .chatbot-toggle:hover{ transform: translateY(-2px); background: var(--accent-light); }
  .chatbot-toggle-icon-close{ display:none; }
  .chatbot-widget.open .chatbot-toggle-icon-open{ display:none; }
  .chatbot-widget.open .chatbot-toggle-icon-close{ display:block; }

  .chatbot-panel{
    position:absolute; right:0; bottom:72px;
    width:460px; max-width: calc(100vw - 32px);
    height:min(720px, 82vh);
    display:flex; flex-direction:column;
    background: var(--surface); border:1px solid var(--line); border-radius:14px;
    overflow:hidden; box-shadow: 0 30px 70px -30px rgba(0,0,0,0.6);
  }
  .chatbot-panel[hidden]{ display:none; }

  .chatbot-panel-header{ background: var(--surface-2); border-bottom:1px solid var(--line); padding:16px 18px 14px; flex-shrink:0; }
  .chatbot-panel-header-top{ display:flex; align-items:center; gap:10px; }
  .chatbot-avatar{
    width:34px; height:34px; border-radius:50%; background: var(--accent);
    display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex-shrink:0;
  }
  .chatbot-name{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:0.95rem; color: var(--text); }
  .chatbot-status{ font-family:'JetBrains Mono', monospace; font-size:0.68rem; color: var(--text-muted); display:flex; align-items:center; gap:5px; }
  .chatbot-dot{ width:6px; height:6px; border-radius:50%; background:#4ADE80; display:inline-block; }
  .chatbot-header-btn{
    margin-left:auto; background:rgba(255,255,255,0.06); border:1px solid var(--line); color: var(--text);
    border-radius:8px; width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:0.95rem; flex-shrink:0; transition:background 0.15s ease;
  }
  .chatbot-header-btn:hover{ background:rgba(255,255,255,0.12); }
  .chatbot-escape-row{ margin-top:12px; }
  .chatbot-escape-btn{
    width:100%; background:transparent; border:1px dashed var(--line); color: var(--text-muted);
    font-family:'Inter', sans-serif; font-size:0.78rem; padding:8px 10px; border-radius:8px;
    cursor:pointer; transition:border-color 0.15s ease, color 0.15s ease;
  }
  .chatbot-escape-btn:hover{ border-color: var(--accent); color: var(--accent-light); }
  .chatbot-escape-btn:disabled{ opacity:0.5; cursor:default; }
  .chatbot-progress-label{ margin-top:10px; font-family:'JetBrains Mono', monospace; font-size:0.68rem; color: var(--text-muted); }

  .chatbot-body{ flex:1; overflow-y:auto; padding:20px 16px; display:flex; flex-direction:column; gap:14px; }
  .chatbot-msg-row{ display:flex; gap:9px; max-width:88%; }
  .chatbot-msg-row.bot{ align-self:flex-start; }
  .chatbot-msg-row.user{ align-self:flex-end; flex-direction:row-reverse; }
  .chatbot-msg-avatar{
    width:26px; height:26px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:0.75rem; margin-top:2px;
    font-family:'JetBrains Mono', monospace;
  }
  .chatbot-msg-row.bot .chatbot-msg-avatar{ background: var(--accent-dim); color: var(--accent-light); }
  .chatbot-msg-row.user .chatbot-msg-avatar{ background: var(--surface-2); color: var(--text); border:1px solid var(--line); }
  .chatbot-bubble{ padding:10px 14px; border-radius:14px; font-size:0.88rem; line-height:1.55; white-space:pre-wrap; word-break:break-word; }
  .chatbot-msg-row.bot .chatbot-bubble{ background: var(--surface-2); border:1px solid var(--line); border-top-left-radius:4px; color: var(--text); }
  .chatbot-msg-row.user .chatbot-bubble{ background: var(--accent-dim); color: var(--text); border-top-right-radius:4px; }

  .chatbot-loading-bubble{ display:flex; align-items:center; gap:10px; }
  .chatbot-loading-dots{ display:flex; gap:3px; }
  .chatbot-loading-dots i{ width:6px; height:6px; border-radius:50%; background: var(--accent-light); display:block; animation: chatbot-blink 1.2s infinite ease-in-out; }
  .chatbot-loading-dots i:nth-child(2){ animation-delay:0.2s; }
  .chatbot-loading-dots i:nth-child(3){ animation-delay:0.4s; }
  @keyframes chatbot-blink{ 0%,80%,100%{ opacity:0.25; } 40%{ opacity:1; } }
  .chatbot-loading-time{ font-family:'JetBrains Mono', monospace; font-size:0.74rem; color: var(--text-muted); }

  .chatbot-quick-replies{ margin-left:35px; display:flex; flex-wrap:wrap; gap:8px; }
  .chatbot-quick-reply-btn{
    background:transparent; border:1px solid var(--accent); color: var(--accent-light); font-weight:500;
    font-size:0.8rem; padding:8px 14px; border-radius:20px; cursor:pointer; font-family:'Inter', sans-serif;
  }
  .chatbot-quick-reply-btn:hover{ background: var(--accent); color:#fff; }
  .chatbot-quick-reply-btn:disabled{ opacity:0.5; cursor:default; }

  .chatbot-contact-form-card{ margin-left:35px; max-width:300px; background: var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:14px; }
  .chatbot-contact-form-card h4{ font-family:'Space Grotesk', sans-serif; font-size:0.95rem; margin:0 0 10px; }
  .chatbot-cf-row{ margin-bottom:10px; }
  .chatbot-cf-row label{ display:block; font-size:0.72rem; font-weight:600; color: var(--text-muted); margin-bottom:4px; }
  .chatbot-contact-form-card input[type="text"],
  .chatbot-contact-form-card input[type="tel"],
  .chatbot-contact-form-card input[type="email"],
  .chatbot-contact-form-card textarea{
    width:100%; border:1px solid var(--line); border-radius:6px; padding:8px 10px; font-size:0.84rem;
    font-family:'Inter', sans-serif; background: var(--bg); color: var(--text);
  }
  .chatbot-contact-form-card textarea{ resize:vertical; min-height:70px; }
  .chatbot-cf-hint{ font-size:0.68rem; color: var(--text-muted); margin:-6px 0 10px; }
  .chatbot-cf-privacy{ display:flex; align-items:flex-start; gap:7px; font-size:0.72rem; color: var(--text-muted); margin:10px 0 12px; }
  .chatbot-cf-privacy input{ margin-top:2px; }
  .chatbot-cf-submit{ background: var(--accent); border:1px solid var(--accent); color:#fff; font-weight:600; font-size:0.85rem; padding:10px 16px; border-radius:8px; cursor:pointer; width:100%; font-family:'Inter', sans-serif; }
  .chatbot-cf-submit:hover{ background: var(--accent-light); border-color: var(--accent-light); }
  .chatbot-cf-submit:disabled{ opacity:0.5; cursor:default; }

  .chatbot-panel-card{ margin-left:35px; max-width:320px; background: var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:14px; }
  .chatbot-panel-group{ margin-bottom:14px; }
  .chatbot-panel-group:last-of-type{ margin-bottom:10px; }
  .chatbot-panel-group-label{ display:block; font-size:0.72rem; font-weight:600; color: var(--text-muted); margin-bottom:6px; }
  .chatbot-panel-options{ display:flex; flex-wrap:wrap; gap:6px; }
  .chatbot-panel-chip{
    background: var(--bg); border:1px solid var(--line); color: var(--text); font-family:'Inter', sans-serif;
    font-size:0.76rem; padding:6px 12px; border-radius:16px; cursor:pointer; user-select:none;
    transition:border-color 0.15s ease, background 0.15s ease;
  }
  .chatbot-panel-chip:hover{ border-color: var(--accent); }
  .chatbot-panel-chip.selected{ background: var(--accent); border-color: var(--accent); color:#fff; }
  .chatbot-panel-freitext{
    margin-top:8px; width:100%; border:1px solid var(--line); border-radius:6px; padding:7px 9px; font-size:0.82rem;
    font-family:'Inter', sans-serif; background: var(--bg); color: var(--text);
  }
  .chatbot-panel-submit{
    background: var(--accent); border:1px solid var(--accent); color:#fff; font-weight:600; font-size:0.85rem;
    padding:10px 16px; border-radius:8px; cursor:pointer; width:100%; font-family:'Inter', sans-serif; margin-top:4px;
  }
  .chatbot-panel-submit:hover{ background: var(--accent-light); border-color: var(--accent-light); }
  .chatbot-panel-submit:disabled{ opacity:0.5; cursor:default; }

  .chatbot-input-row{ padding:12px 16px 16px; display:flex; gap:8px; flex-shrink:0; border-top:1px solid var(--line); }
  .chatbot-input-row textarea{
    flex:1; border:1px solid var(--line); border-radius:20px; padding:10px 14px; font-size:0.85rem;
    font-family:'Inter', sans-serif; background: var(--surface-2); color: var(--text); resize:none;
    max-height:100px; overflow-y:auto; line-height:1.4;
  }
  .chatbot-input-row textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }
  .chatbot-input-row button{ width:40px; height:40px; border-radius:50%; border:none; background: var(--accent); color:#fff; font-size:1rem; cursor:pointer; flex-shrink:0; }
  .chatbot-input-row button:disabled{ opacity:0.5; cursor:default; }
  .chatbot-input-row button:not(:disabled):hover{ background: var(--accent-light); }

  @media (max-width: 860px){
    .navlinks{ display:none; }
    .hero-split{ grid-template-columns: 1fr; gap:32px; }
    .hero-visual{ max-width:300px; margin:0 auto; }
    .services{ grid-template-columns: 1fr; row-gap:24px; }
    .services-arrows{ display:none; }
    .showcase-body{ flex-direction:column; }
    .showcase-body .n8n-window{ max-width:100%; }
    .demo-embed-wrap{ max-width:100%; }
    .about{ grid-template-columns: 1fr; }
    .about-portrait{ max-width: 200px; margin: 0 auto; }
    .contact-grid{ grid-template-columns: 1fr; }
    .process-item{ grid-template-columns: 50px 1fr; }
    .process-graphic{ flex-basis:100%; max-width:100%; }
    .workflow-compare{ grid-template-columns: 1fr; }
    .friction-row{ grid-template-columns: 1fr; }
    .chatbot-widget{ right:16px; bottom:16px; }
    .chatbot-panel{ width: calc(100vw - 24px); height: min(78vh, 700px); bottom:68px; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation: none !important; transition: none !important; }
  }