/* Projektseite Lebens-Cockpit: nachgebaute Oberfläche (Beispielwerte) */
.ck-mock{position:relative;border-radius:22px;overflow:hidden;background:linear-gradient(160deg,#141f36,#0b1324 70%);
  border:1px solid rgba(150,185,230,.18);box-shadow:0 50px 100px -40px rgba(2,6,14,.95),0 0 90px -30px var(--acc-glow)}
.ck-mock__bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid rgba(150,185,230,.1);background:rgba(255,255,255,.03)}
.ck-mock__bar i{width:10px;height:10px;border-radius:50%;background:#ff5f57}
.ck-mock__bar i:nth-child(2){background:#febc2e}.ck-mock__bar i:nth-child(3){background:#28c840}
.ck-mock__bar span{margin-left:.8rem;font-size:.72rem;color:rgba(214,228,247,.7);letter-spacing:.04em}
.ck-mock__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:92px;gap:10px;padding:14px}
.ck-w{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:12px 13px;border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.05);border:1px solid rgba(150,185,230,.12);animation:ckIn .8s cubic-bezier(.2,.8,.2,1) both}
.ck-w:nth-child(2){animation-delay:.08s}.ck-w:nth-child(3){animation-delay:.16s}.ck-w:nth-child(4){animation-delay:.24s}
.ck-w:nth-child(5){animation-delay:.32s}.ck-w:nth-child(6){animation-delay:.4s}.ck-w:nth-child(7){animation-delay:.48s}
@keyframes ckIn{from{opacity:0;transform:translateY(14px) scale(.97)}}
.ck-w small{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(214,228,247,.62);font-weight:600}
.ck-w b{font-family:var(--ff-display);font-weight:700;font-size:1.45rem;color:#fff;letter-spacing:-.02em}
.ck-w__z{font-size:.72rem;color:rgba(214,228,247,.75);line-height:1.35}
.ck-w--gross{grid-column:span 2;grid-row:span 2;background:linear-gradient(145deg,rgba(77,120,196,.55),rgba(42,83,156,.25));border-color:rgba(156,192,242,.35)}
.ck-w--gross b{font-size:2.2rem}
.ck-w--uhr{grid-column:span 2;align-items:flex-start}
.ck-w--uhr b{font-size:2rem;background:linear-gradient(115deg,#fff,#9cc0f2);-webkit-background-clip:text;background-clip:text;color:transparent}
.ck-w--ok b{color:#5ee49a}
.ck-w--breit{grid-column:span 2}
.ck-w__bars{display:flex;align-items:flex-end;gap:4px;height:26px}
.ck-w__bars i{flex:1;border-radius:3px;background:linear-gradient(180deg,#9cc0f2,#4d78c4)}
.ck-ring{width:44px;height:44px;border-radius:50%;background:conic-gradient(#5ee49a 0 100%);-webkit-mask:radial-gradient(circle,transparent 14px,#000 15px);mask:radial-gradient(circle,transparent 14px,#000 15px);
  animation:ckRing 2.4s cubic-bezier(.65,0,.35,1) both .6s}
@keyframes ckRing{from{background:conic-gradient(#5ee49a 0 0%,rgba(255,255,255,.1) 0 100%)}}
.ck-hinweis{margin:.9rem 0 0;font-size:.8rem;color:var(--faint)}
.ck-auto li{font-size:.98rem}
.ck-stats{border-top-color:var(--line)}
.ck-stats b{background:linear-gradient(115deg,#fff,#9cc0f2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ck-stats span{color:var(--muted)}
.ck-live li{font-size:1.02rem}
@media (max-width:560px){.ck-mock__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:86px}.ck-w--gross,.ck-w--uhr,.ck-w--breit{grid-column:span 2}.ck-w--gross{grid-row:span 1}}
@media (prefers-reduced-motion:reduce){.ck-w,.ck-ring{animation:none}}

/* Der Plan im Kopf: Slogan + 80/20 */
.ck-slogan{font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.08}
.ck-plan__head{max-width:62rem}
.ck-pareto{margin:clamp(2rem,4vw,3rem) 0 clamp(2.4rem,5vw,3.4rem);display:grid;gap:.9rem;max-width:56rem}
.ck-pareto__zeile{display:grid;grid-template-columns:6.5rem 1fr;align-items:center;gap:1rem}
.ck-pareto__lbl{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#5b6a80}
.ck-pareto__bar{display:flex;height:46px;gap:4px}
.ck-pareto__bar i{position:relative;display:flex;align-items:center;padding:0 .9rem;border-radius:10px;width:0;overflow:hidden;
  transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.ck-pareto__bar i b{font-family:var(--ff-display);font-weight:700;font-size:1rem;white-space:nowrap}
.ck-pareto__a{background:linear-gradient(110deg,#4d78c4,#7f9fe0);color:#fff}
.ck-pareto__b{background:linear-gradient(110deg,#6a4fc4,#a98ae8);color:#fff}
.ck-pareto.is-in .ck-pareto__bar i,.ck-pareto.in .ck-pareto__bar i{width:var(--w)}
.ck-pareto__zeile:nth-child(2) i{transition-delay:.35s}
.ck-pareto__txt{margin:.8rem 0 0;color:#46546a;line-height:1.65;max-width:46rem}
.ck-pareto__txt b{color:#0b1626}

/* Sprachassistenz: nachgebaute Ansicht */
.ck-ai{position:relative;overflow:hidden;border-radius:26px;padding:2.2rem 1.8rem 1.6rem;min-height:440px;display:flex;flex-direction:column;align-items:center;
  background:#0b1324;border:1px solid rgba(150,185,230,.18);box-shadow:0 50px 100px -40px rgba(2,6,14,.95),0 0 90px -30px var(--acc-glow)}
.ck-ai__schleier{position:absolute;inset:-30%;pointer-events:none;filter:blur(40px);opacity:.55;
  background:radial-gradient(35% 30% at 25% 30%,#4d78c4,transparent 70%),radial-gradient(30% 28% at 75% 25%,#a24fd8,transparent 70%),radial-gradient(35% 30% at 60% 80%,#2ec5c0,transparent 70%);
  animation:ckSchleier 14s ease-in-out infinite alternate}
@keyframes ckSchleier{to{transform:rotate(25deg) scale(1.1)}}
.ck-ai>*:not(.ck-ai__schleier){position:relative}
.ck-ai__c{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(from 0deg,#4d78c4,#a24fd8,#ff6fa8,#2ec5c0,#4d78c4);animation:ckAtmen 3.2s ease-in-out infinite;
  box-shadow:0 0 40px -6px rgba(162,79,216,.7)}
.ck-ai__c span{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:#0e1830;color:#fff;
  font-family:var(--ff-display);font-weight:700;font-size:2rem;line-height:1;padding-bottom:4px}
@keyframes ckAtmen{50%{transform:scale(1.07);filter:hue-rotate(40deg)}}
.ck-ai__frage{margin:1rem 0 1.4rem;font-family:var(--ff-display);font-weight:700;font-size:1.25rem;color:#fff}
.ck-ai__ich{align-self:flex-end;max-width:80%;padding:.6rem 1rem;border-radius:16px 16px 4px 16px;background:rgba(77,120,196,.55);color:#fff;font-size:.92rem;
  animation:ckIn .7s .3s both}
.ck-ai__antwort{align-self:flex-start;max-width:88%;margin-top:.7rem;padding:.8rem 1rem;border-radius:16px 16px 16px 4px;
  background:rgba(255,255,255,.08);border:1px solid rgba(150,185,230,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:rgba(226,236,250,.88);font-size:.88rem;line-height:1.5;animation:ckIn .7s .9s both}
.ck-ai__antwort p{margin:0}
.ck-ai__antwort ul{margin:.4rem 0;padding-left:1.1rem}
.ck-ai__antwort b{color:#fff}
.ck-ai__weiter{color:#9cc0f2}
.ck-ai__eingabe{margin-top:auto;align-self:stretch;display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(150,185,230,.22)}
.ck-ai__eingabe small{color:rgba(214,228,247,.7);font-size:.8rem}
.ck-ai__welle{display:flex;align-items:center;gap:3px;height:22px}
.ck-ai__welle i{width:3px;height:30%;border-radius:2px;background:linear-gradient(180deg,#a98ae8,#4d78c4);animation:ckWelle 1.1s ease-in-out infinite}
.ck-ai__welle i:nth-child(2){animation-delay:.12s}.ck-ai__welle i:nth-child(3){animation-delay:.24s}.ck-ai__welle i:nth-child(4){animation-delay:.36s}
.ck-ai__welle i:nth-child(5){animation-delay:.48s}.ck-ai__welle i:nth-child(6){animation-delay:.6s}.ck-ai__welle i:nth-child(7){animation-delay:.72s}
@keyframes ckWelle{50%{height:100%}}
@media (max-width:640px){.ck-pareto__zeile{grid-template-columns:1fr;gap:.4rem}.ck-ai{min-height:400px;padding:1.8rem 1.1rem 1.2rem}}
@media (prefers-reduced-motion:reduce){.ck-ai__schleier,.ck-ai__c,.ck-ai__welle i,.ck-ai__ich,.ck-ai__antwort{animation:none}.ck-pareto__bar i{transition:none;width:var(--w)}}
@media (min-width:1001px){.ck-if{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:clamp(2.2rem,4vw,3rem)}}
.ck-plan__klar{margin-top:1.2rem;padding-left:1.1rem;border-left:3px solid transparent;border-image:linear-gradient(180deg,#4d78c4,#a98ae8) 1}
.ck-plan__klar strong{color:#0b1626}

/* Echte Screenshots im Browser-Rahmen (Hero, Einblicke, Sprache, Schnittstellen, Datenschutz) */
.ck-fig{margin:0;display:flex;flex-direction:column;gap:.9rem}
.ck-shot{display:block;width:100%;padding:0;border:1px solid rgba(150,185,230,.18);border-radius:16px;overflow:hidden;cursor:zoom-in;text-align:left;
  background:#0b1324;box-shadow:0 40px 90px -40px rgba(2,6,14,.9),0 0 70px -36px var(--acc-glow);transition:box-shadow .4s}
.ck-shot:hover{box-shadow:0 50px 100px -40px rgba(2,6,14,.95),0 0 90px -30px var(--acc-glow)}
.ck-shot:focus-visible{outline:2px solid #9cc0f2;outline-offset:4px}
.ck-shot .ck-mock__bar{background:#111b30}
.ck-shot img{display:block;width:100%;height:auto}
.ck-fig figcaption{font-size:.92rem;line-height:1.55;color:var(--muted);max-width:44rem}
.ck-fig figcaption b{color:#fff;font-weight:600}
.is-light .ck-fig figcaption{color:#46546a}
.is-light .ck-fig figcaption b{color:#0b1626}
.is-light .ck-shot{border-color:rgba(15,40,90,.12);box-shadow:0 40px 80px -44px rgba(10,30,70,.45)}
.ck-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,3.2rem) clamp(1.4rem,3vw,2.4rem);margin-top:clamp(3rem,6vw,4.5rem)}
.ck-shots--eins{margin:clamp(2.4rem,5vw,3.6rem) 0}
.ck-fig--breit{grid-column:1 / -1}
.ck-fig--hero .ck-shot{border-radius:20px}
@media (max-width:760px){.ck-shots{grid-template-columns:1fr}}

/* Großansicht */
.ck-lb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);background:rgba(4,8,16,.88);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s linear .3s;cursor:zoom-out}
.ck-lb.offen{opacity:1;visibility:visible;transition:opacity .3s}
.ck-lb img{max-width:min(1600px,100%);max-height:100%;border-radius:12px;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.ck-lb button{position:absolute;top:1rem;right:1rem;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:1.4rem;cursor:pointer}
#oberflaeche .ds__blk ul{gap:.45rem}
/* Zahlen neben dem Text: 2 × 2 statt 4 nebeneinander (sonst schneidet „770+“/„100k+“ ab) */
.ck-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1rem}
.ck-stats b{font-size:clamp(2.6rem,5vw,4.4rem);white-space:nowrap}

/* Zeitersparnis: Früher → Mit dem Cockpit, ohne Boxen */
.ck-zeit{list-style:none;margin:clamp(2rem,4vw,3rem) 0 0;padding:0;border-top:1px solid var(--line)}
.ck-zeit__kopf,.ck-zeit__z{display:grid;grid-template-columns:minmax(10rem,.8fr) 1fr 2rem 1.2fr;gap:1.2rem;align-items:baseline}
.ck-zeit__kopf{padding:.9rem 0;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--faint)}
.ck-zeit__kopf span:last-child{color:#9cc0f2}
.ck-zeit__z{padding:1.25rem 0;border-bottom:1px solid var(--line)}
.ck-zeit__z b{font-family:var(--ff-display);font-weight:600;font-size:1.08rem;color:#fff}
.ck-zeit__v{color:var(--faint);text-decoration:line-through;text-decoration-color:rgba(214,228,247,.25);line-height:1.55}
.ck-zeit__p{color:#7f9fe0;font-size:1.2rem;text-align:center}
.ck-zeit__j{color:#e6eefb;line-height:1.55}
@media (max-width:820px){
  .ck-zeit__kopf{display:none}
  .ck-zeit__z{grid-template-columns:1fr;gap:.35rem}
  .ck-zeit__p{display:none}
  .ck-zeit__v::before{content:"Früher: ";text-decoration:none;display:inline}
  .ck-zeit__j::before{content:"Jetzt: ";color:#9cc0f2;font-weight:600}
}
.ck-rechnung{margin-top:clamp(2rem,4vw,3rem)}
.ck-rechnung__titel{margin:0 0 1rem;color:var(--muted);max-width:48rem;line-height:1.6}
.ck-rechnung__titel b{color:#fff}
.ck-rechnung__liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem .6rem}
.ck-rechnung__liste li{padding:.45rem .9rem;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:.86rem;color:rgba(214,228,247,.8)}
.ck-rechnung__liste b{color:#9cc0f2;font-weight:700;margin-right:.2rem}
.ck-zeit__zahlen{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(1.6rem,3vw,2.4rem)}
@media (max-width:640px){.ck-zeit__zahlen{grid-template-columns:1fr}}

/* Screenshots „zoomen aus der Matrix“: beim Hereinscrollen wachsen sie aus einem Punkteraster, das sich dabei auflöst (Scroll-gekoppelt) */
.ck-shot{position:relative}
.ck-shot::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(156,192,242,.95) 1.1px,transparent 1.6px) 0 0/7px 7px,#0b1324}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ck-shot{animation:ckZoom linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    .ck-shot::after{animation:ckMatrix linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    .ck-fig--hero .ck-shot,.ck-fig--hero .ck-shot::after{animation:none}
    @keyframes ckZoom{0%{transform:perspective(1200px) translateZ(-420px) scale(.7);opacity:0}35%{opacity:1}100%{transform:none;opacity:1}}
    @keyframes ckMatrix{0%{opacity:1;background-size:3px 3px,auto}60%{opacity:.85;background-size:9px 9px,auto}100%{opacity:0;background-size:22px 22px,auto}}
  }
}
/* overflow:clip statt hidden – sonst wäre .ck-shot ein Scroll-Container und die Matrix-Ebene sähe ihre eigene „Zeitleiste“ */
.ck-shot{overflow:clip}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes ckZoom{0%{transform:perspective(1200px) translateZ(-260px) scale(.82);opacity:0}30%{opacity:1}100%{transform:none;opacity:1}}
  }
}

/* Matrix aus 0 und 1 statt Punkten */
.ck-shot::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='112'%3E%3Cg font-family='Menlo,Consolas,monospace' font-size='12' font-weight='700' fill='%239cc0f2'%3E%3Ctext x='0' y='11' fill-opacity='.85' textLength='108'%3E101000100001%3C/text%3E%3Ctext x='0' y='25' fill-opacity='.7' textLength='108'%3E000100001000%3C/text%3E%3Ctext x='0' y='39' fill-opacity='.7' textLength='108'%3E110010001000%3C/text%3E%3Ctext x='0' y='53' fill-opacity='.85' textLength='108'%3E111111100001%3C/text%3E%3Ctext x='0' y='67' fill-opacity='.95' textLength='108'%3E111001010110%3C/text%3E%3Ctext x='0' y='81' fill-opacity='.85' textLength='108'%3E111110011001%3C/text%3E%3Ctext x='0' y='95' fill-opacity='.7' textLength='108'%3E111011001001%3C/text%3E%3Ctext x='0' y='109' fill-opacity='.85' textLength='108'%3E011100111011%3C/text%3E%3C/g%3E%3C/svg%3E") 0 0/108px 112px,#0b1324}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes ckMatrix{0%{opacity:1;background-size:65px 67px,auto}60%{opacity:.85;background-size:108px 112px,auto}100%{opacity:0;background-size:238px 246px,auto}}
  }
}