/* aikompetenz.ch homepage — STARTEND one-bar pattern (dark, moving dots, one CTA). 2026-10-04 */
:root{--bg:#070b16;--panel:#0f1526;--line:rgba(255,255,255,.09);--text:#eef1f8;--muted:#9aa3b8;--a1:#ff4d5a;--a2:#ffb347;--ok:#3ddc97;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0}
body.ak{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font:16px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
a{color:inherit}
.ak-skip{position:absolute;left:-9999px}.ak-skip:focus{left:16px;top:16px;z-index:9;background:#fff;color:#000;padding:8px 12px;border-radius:8px}
.ak-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* background */
.ak-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ak-dots{position:absolute;inset:-60px;background-image:radial-gradient(rgba(255,255,255,.16) 1.2px,transparent 1.3px);background-size:28px 28px;animation:ak-drift 40s linear infinite;mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%)}
@keyframes ak-drift{to{transform:translate(28px,56px)}}
.ak-blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.45}
.ak-blob.a{width:520px;height:520px;background:var(--a1);top:-180px;left:-120px;animation:ak-float 18s ease-in-out infinite}
.ak-blob.b{width:460px;height:460px;background:#3b5bff;bottom:-200px;right:-120px;opacity:.35;animation:ak-float 22s ease-in-out infinite reverse}
@keyframes ak-float{50%{transform:translate(60px,40px) scale(1.08)}}
.ak-p{position:absolute;left:-10px;width:6px;height:6px;border-radius:50%;background:var(--a2);box-shadow:0 0 12px var(--a2);animation:ak-stream 7s linear infinite;opacity:0}
.ak-p.p1{top:34%}.ak-p.p2{top:42%;animation-delay:1.2s;background:var(--a1);box-shadow:0 0 12px var(--a1)}.ak-p.p3{top:50%;animation-delay:2.4s}.ak-p.p4{top:38%;animation-delay:3.6s;background:#7c9bff;box-shadow:0 0 12px #7c9bff}.ak-p.p5{top:46%;animation-delay:4.8s}.ak-p.p6{top:54%;animation-delay:6s;background:var(--a1)}
@keyframes ak-stream{0%{transform:translateX(0);opacity:0}10%{opacity:.9}60%{opacity:.9}70%{transform:translateX(42vw);opacity:0}100%{opacity:0}}
/* header */
.ak-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:22px clamp(16px,4vw,56px)}
.ak-brand{display:flex;align-items:center;gap:10px;text-decoration:none}.ak-brand svg{width:28px;height:28px;color:var(--a1)}
.ak-brand span{display:flex;flex-direction:column;line-height:1.1;font-weight:500;letter-spacing:.04em}.ak-brand b{font-weight:800}.ak-brand small{font-size:10px;color:var(--muted);letter-spacing:.14em}
.ak-lang{display:flex;gap:4px;border:1px solid var(--line);border-radius:999px;padding:3px}
.ak-lang a{font-size:12px;font-weight:700;text-decoration:none;padding:4px 10px;border-radius:999px;color:var(--muted)}.ak-lang a[aria-current]{background:rgba(255,255,255,.1);color:var(--text)}
/* hero */
.ak-hero{position:relative;z-index:1;flex:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:center;width:100%;max-width:1320px;margin:0 auto;padding:8px clamp(16px,4vw,56px) 24px}
.ak-pill{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04);font-size:13px;color:var(--muted)}
.ak-live{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(61,220,151,.6);animation:ak-pulse 2s infinite}
@keyframes ak-pulse{70%{box-shadow:0 0 0 8px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}
.ak-hero h1{margin:0;font-size:clamp(40px,5.6vw,76px);line-height:1.02;letter-spacing:-.035em;font-weight:800}
.ak-grad{background:linear-gradient(90deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}
.ak-sub{max-width:540px;margin:18px 0 26px;font-size:clamp(16px,1.4vw,19px);color:var(--muted)}
.ak-ask{position:relative;display:flex;align-items:flex-end;gap:8px;max-width:620px;padding:8px 8px 8px 46px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);box-shadow:0 0 0 1px rgba(255,77,90,.0),0 20px 60px -20px rgba(255,77,90,.45);transition:border-color .2s,box-shadow .2s}
.ak-ask:focus-within{border-color:rgba(255,77,90,.7);box-shadow:0 0 0 4px rgba(255,77,90,.18),0 20px 60px -20px rgba(255,77,90,.6)}
.ak-ask-ico{position:absolute;left:16px;bottom:19px;color:var(--muted)}
.ak-ask textarea{flex:1;min-width:0;min-height:44px;max-height:140px;field-sizing:content;resize:none;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:16px;line-height:1.4;padding:11px 4px}
.ak-ask textarea::placeholder{color:#7c859b}
.ak-ask button{flex:none;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 20px;border:0;border-radius:12px;background:linear-gradient(90deg,var(--a1),#ff7a45);color:#fff;font:700 15px/1 inherit;font-family:inherit;cursor:pointer;transition:transform .15s,filter .15s}
.ak-ask button:hover{filter:brightness(1.08);transform:translateY(-1px)}
.ak-micro{margin:10px 0 0 4px;font-size:13px;color:var(--muted)}
.ak-feats{display:flex;flex-wrap:wrap;gap:22px;list-style:none;margin:28px 0 0;padding:0}
.ak-feats li{display:flex;align-items:center;gap:10px}.ak-feats strong{display:block;font-size:14px}.ak-feats small{display:block;font-size:12px;color:var(--muted)}
.ak-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(255,77,90,.12);color:var(--a2);font-size:17px}
/* right card */
.ak-right{position:relative;margin:0;padding:34px 18px}
.ak-card{position:relative;padding:22px;border-radius:22px;background:linear-gradient(180deg,rgba(23,31,54,.92),rgba(13,18,33,.92));border:1px solid var(--line);box-shadow:0 40px 100px -30px rgba(0,0,0,.8);animation:ak-rise .8s ease both}
@keyframes ak-rise{from{opacity:0;transform:translateY(16px)}}
.ak-card-top{display:flex;align-items:center;gap:16px;margin-bottom:18px}.ak-card-top strong{display:block;font-size:17px}.ak-card-top small{color:var(--muted);font-size:13px}
.ak-ring{--v:68;flex:none;display:grid;place-items:center;align-content:center;width:84px;height:84px;border-radius:50%;background:radial-gradient(closest-side,#141b30 78%,transparent 79%),conic-gradient(var(--a2) calc(var(--v)*1%),rgba(255,255,255,.08) 0);animation:ak-ring 1.4s ease-out both}
@property --v{syntax:'<number>';inherits:false;initial-value:0}
@keyframes ak-ring{from{--v:0}}
.ak-ring b{font-size:26px;line-height:1}.ak-ring small{font-size:11px;color:var(--muted)}
.ak-bars{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ak-bars li{display:grid;grid-template-columns:110px 1fr 28px;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.ak-bars i{display:block;height:7px;border-radius:9px;background:rgba(255,255,255,.07);position:relative;overflow:hidden}
.ak-bars i::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--w)*1%);border-radius:9px;background:linear-gradient(90deg,var(--a1),var(--a2));transform-origin:left;animation:ak-fill 1.1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.3s + var(--i)*.12s)}
@keyframes ak-fill{from{transform:scaleX(0)}}
.ak-bars em{font-style:normal;text-align:right;color:var(--text);font-weight:600}
.ak-lever,.ak-tip{margin-top:14px;padding:12px 14px;border-radius:12px;background:rgba(255,77,90,.1);border:1px solid rgba(255,77,90,.25)}
.ak-tip{margin-top:8px;background:rgba(61,220,151,.08);border-color:rgba(61,220,151,.25)}
.ak-lever small,.ak-tip small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.ak-lever strong,.ak-tip strong{font-size:14px}
.ak-card figcaption{margin-top:12px;font-size:11px;color:#6d7690;text-align:center}
.ak-float{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:rgba(17,24,43,.95);border:1px solid var(--line);box-shadow:0 20px 50px -20px rgba(0,0,0,.8);font-size:13px;animation:ak-bob 6s ease-in-out infinite}
.ak-float strong{display:block}.ak-float small{display:block;color:var(--muted);font-size:11px}
.ak-gain{top:0;right:0}.ak-gain b{font-size:22px;color:var(--ok)}
.ak-ok{bottom:4px;left:-6px;animation-delay:-3s}
.ak-env{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(61,220,151,.15);color:var(--ok);font-weight:800}
@keyframes ak-bob{50%{transform:translateY(-8px)}}
/* stats */
.ak-stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--line)}
.ak-stats div{padding:14px 18px;background:rgba(10,15,28,.9)}.ak-stats b{display:block;font-size:20px}.ak-stats small{color:var(--muted);font-size:12px}
/* footer */
.ak-foot{position:relative;z-index:1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:16px clamp(16px,4vw,56px);border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.ak-foot>span:first-child{font-weight:700;color:var(--text)}.ak-dim{color:var(--muted);font-weight:400}.ak-legal a{color:var(--muted)}.ak-legal a:hover{color:var(--text)}
/* responsive */
@media (max-width:900px){.ak-hero{grid-template-columns:1fr}.ak-right{padding:30px 4px 24px}.ak-stats{grid-template-columns:repeat(2,1fr)}.ak-p{display:none}}
@media (max-width:520px){.ak-ask{flex-direction:column;align-items:stretch;padding:8px}.ak-ask-ico{display:none}.ak-ask textarea{padding:10px 8px}.ak-ask button{justify-content:center}.ak-bars li{grid-template-columns:90px 1fr 26px}.ak-gain{right:-2px}.ak-ok{left:0}.ak-feats{gap:14px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.ak-name{font-style:normal;white-space:nowrap}
.ak-right{padding-bottom:48px}.ak-ok{bottom:0}.ak-card figcaption{margin-bottom:18px}

/* D-BAR-SUGGEST-1 (owner, 7 Oct 2026): LinkedIn-link bar with live check, CSS only. */
.ak-ask{align-items:center}
.ak-ask-ico{bottom:auto;top:50%;transform:translateY(-50%)}
.ak-ask input[type=text]{flex:1;min-width:0;height:48px;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:16px;line-height:1.4;padding:0 4px}
.ak-ask input[type=text]::placeholder{color:#7c859b}
.ak-tick{flex:none;display:none;width:24px;height:24px;border-radius:50%;background:#1f9d55;color:#fff;font-size:14px;font-weight:700;line-height:24px;text-align:center}
.ak-ask input[type=text]:valid~.ak-tick{display:block}
.ak-ask:has(input[type=text]:valid){border-color:rgba(61,220,132,.7)}
.ak-hint{display:none;position:absolute;left:4px;right:4px;top:calc(100% + 10px);font-size:13px;color:#ffb454}
.ak-ask input[type=text]:not(:placeholder-shown):invalid~.ak-hint{display:block}
.ak-ask:has(input[type=text]:not(:placeholder-shown):invalid)+.ak-micro{visibility:hidden}
@media(max-width:640px){.ak-ask{align-items:stretch}.ak-ask input[type=text]{padding:0 8px}.ak-tick{position:absolute;right:16px;top:20px}}