/* Über mich V9 · ergänzt ueber-mich-v6. Basis V8.1 (Einstieg, Systemkarte, Verbindungskarte, Erfahrung, Leitgedanke, Kontakt). Neu: eine durchgehende Bühne statt harter Abschnittsgrenzen, ein Lichtfaden durch alle Abschnitte, erhabene Karten und scrollgesteuerte Übergänge. Ohne Unterstützung, ohne Skript oder bei reduzierter Bewegung bleibt alles statisch lesbar. */ @property --lit{syntax:"";inherits:true;initial-value:1} #pk-about-v6{--line:#ffffff1f;--line-strong:#ffffff57;--muted:#8f8f8f;--deep:#0a0a0a;--glass:linear-gradient(180deg,#1b1b1b,#131313);--mono:"PK Hero Mono","IBM Plex Mono",ui-monospace,monospace;--ease:cubic-bezier(.2,.7,.2,1);--thread-x:50%;--sheet-r:44px; /* Erhabene Karte wie im Reel „Denkweise“ (--node-off/--node-on): Verlauf, helle Lichtkante oben, dunkle Unterkante, Kontakt- und Schlagschatten */ --card-face:linear-gradient(180deg,#2b2b2b,#1a1a1a 50%,#131313); --card-rim:inset 0 1px 0 #ffffff3d,inset 0 -1px 0 #000000a6; --card-rim-on:inset 0 1px 0 #ffffff6b,inset 0 -1px 0 #000000a6; --card-drop:0 2px 3px #000000cc,0 18px 30px -10px #000; --card-glow:0 0 0 3px #ffffff14,0 16px 34px -14px #ffffff6b; overflow-x:clip} #pk-about-v6 :where(h4,ul,dl,dd){margin:0;padding:0;font:inherit} #pk-about-v6 .kicker{font:500 11px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)} /* Buttons */ #pk-about-v6 .intro-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:44px} #pk-about-v6 .btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:52px;padding:0 28px;border:1px solid #ffffff6b;border-radius:999px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;transition:background .2s,color .2s,border-color .2s,box-shadow .2s} #pk-about-v6 .btn span{transition:transform .2s} #pk-about-v6 .btn:hover span{transform:translate(3px,-3px)} #pk-about-v6 .btn-primary{background:#fff;color:#111;border-color:#fff;box-shadow:0 0 0 0 #fff0} #pk-about-v6 .btn-primary:hover{box-shadow:0 0 0 5px #ffffff1a,0 10px 40px -10px #ffffff66} #pk-about-v6 .btn-ghost:hover{border-color:#fff;background:#ffffff12} #pk-about-v6 .arrow-link{display:inline-flex;align-items:center;gap:28px;padding-bottom:7px;border-bottom:1px solid #fff;font-size:13px} #pk-about-v6 .arrow-link span{transition:transform .2s} #pk-about-v6 .arrow-link:hover span{transform:translate(3px,-3px)} /* Einstieg */ #pk-about-v6 #pk-intro{position:relative;overflow:clip;padding:clamp(72px,10vw,150px) max(24px,4.4vw) calc(clamp(80px,10vw,140px) + var(--sheet-r))} #pk-about-v6 #pk-intro::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:72px 72px;background-position:center top;-webkit-mask-image:radial-gradient(ellipse 60% 75% at 76% 45%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 60% 75% at 76% 45%,#000 15%,transparent 72%)} #pk-about-v6 #pk-intro::after{content:"";position:absolute;right:-8%;top:0;width:min(780px,90vw);aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(circle closest-side,#ffffff17,#ffffff06 45%,transparent);animation:pk-breathe 9s ease-in-out infinite} #pk-about-v6 .intro-wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,440px);gap:clamp(48px,6vw,100px);align-items:center;max-width:1280px;margin:auto;perspective:1400px;transform-origin:50% 100%} #pk-about-v6 .intro-copy{animation:pk-rise .9s var(--ease) both} #pk-about-v6 .intro-title{margin-top:30px;font-size:clamp(44px,5.4vw,84px);font-weight:500;line-height:1;letter-spacing:-.06em} #pk-about-v6 .intro-title span{display:block} #pk-about-v6 .intro-title .intro-title-accent{background:linear-gradient(90deg,#ffffffe6,#ffffff52 85%);-webkit-background-clip:text;background-clip:text;color:transparent} #pk-about-v6 .intro-lead{max-width:600px;margin-top:36px;font-size:clamp(17px,1.3vw,19px);line-height:1.75;color:var(--pk-copy);text-wrap:pretty} #pk-about-v6 .intro-lead-short{margin-top:16px;color:#f4f4f1} /* Systemkarte im Einstieg */ #pk-about-v6 .sys{position:relative;isolation:isolate;padding:10px;border:1px solid #ffffff26;border-radius:24px;background:var(--glass);box-shadow:0 50px 100px -50px #000,inset 0 1px 0 #ffffff17;animation:pk-rise .9s .15s var(--ease) both;transform-origin:50% 0} #pk-about-v6 .sys::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(380px circle at var(--mx,80%) var(--my,0%),#ffffff1a,transparent 50%)} #pk-about-v6 .sys::after{content:"";position:absolute;inset:-1px;z-index:-2;border-radius:25px;pointer-events:none;background:conic-gradient(from var(--pk-angle,0deg),#ffffff00 0deg,#ffffff8c 40deg,#ffffff00 90deg,#ffffff00 360deg);animation:pk-border 7s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);padding:1px} #pk-about-v6 .sys-head{display:flex;justify-content:space-between;gap:16px;padding:8px 10px 12px;font:500 10px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} #pk-about-v6 .sys-live{display:inline-flex;align-items:center;gap:8px;color:#fff} #pk-about-v6 .sys-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff,0 0 14px #fff8;animation:pk-pulse 2.4s ease-in-out infinite} #pk-about-v6 .sys-bar{display:flex;align-items:center;gap:12px;min-height:54px;padding:12px 16px;border:1px solid #ffffff21;border-radius:16px;background:#0c0c0c;box-shadow:inset 0 1px 0 #ffffff0a;font-size:14px;line-height:1.4;color:#f4f4f1} #pk-about-v6 .sys-spark{flex:none;width:14px;height:14px;fill:#fff;filter:drop-shadow(0 0 4px #fffa);animation:pk-spin 8s linear infinite} #pk-about-v6 .sys-query{min-width:0} #pk-about-v6 .sys-caret{flex:none;width:1px;height:18px;margin-left:-8px;background:#fff;animation:pk-blink 1s steps(1) infinite} #pk-about-v6 .sys-flow{position:relative;display:grid;gap:4px;margin-top:10px;list-style:none} #pk-about-v6 .sys-flow::before,#pk-about-v6 .sys-flow::after{content:"";position:absolute;left:31px;width:1px;pointer-events:none} #pk-about-v6 .sys-flow::before{top:32px;bottom:32px;background:#ffffff24} #pk-about-v6 .sys-flow::after{top:32px;height:56px;opacity:0;background:linear-gradient(#fff0,#fff,#fff0);box-shadow:0 0 8px #fff;animation:pk-flow 3.6s cubic-bezier(.5,0,.5,1) infinite} #pk-about-v6 .sys-step{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 16px 12px 10px;border:1px solid #fff0;border-radius:16px;color:#ffffff99;transition:border-color .45s,background .45s,box-shadow .45s,color .45s} #pk-about-v6 .sys-step.is-active{border-color:#ffffffb8;color:#fff;background:linear-gradient(180deg,#ffffff14,#ffffff05);box-shadow:0 0 0 4px #ffffff0a,0 18px 40px -18px #ffffff52} #pk-about-v6 .sys-num{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff30;border-radius:50%;background:#141414;font:500 11px/1 var(--mono);letter-spacing:.04em;transition:background .45s,color .45s,border-color .45s} #pk-about-v6 .sys-step.is-active .sys-num{background:#fff;border-color:#fff;color:#111;box-shadow:0 0 18px #ffffff6b} #pk-about-v6 .sys-name{font-size:16px;font-weight:500;line-height:1.3;letter-spacing:-.02em} #pk-about-v6 .sys-meta{margin-top:4px;font:500 10px/1.5 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)} #pk-about-v6 .sys-state{width:7px;height:7px;border-radius:50%;background:#ffffff2e;transition:background .45s,box-shadow .45s} #pk-about-v6 .sys-step.is-active .sys-state{background:#fff;box-shadow:0 0 8px #fff,0 0 18px #fff8} #pk-about-v6 .sys-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;padding:12px 8px 6px;border-top:1px solid var(--line);font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase} #pk-about-v6 .sys-foot span{padding:6px 10px;border:1px solid #ffffff21;border-radius:999px;color:#cfcfcf} #pk-about-v6 .sys-foot .sys-foot-end{margin-left:auto;padding-inline:0;border:0;color:#fff} /* Bühne: Denkweise, Erfahrung und Leitgedanke liegen auf einer Fläche, die sich über den Einstieg schiebt */ #pk-about-v6 .v9-sheet{position:relative;z-index:1;margin-top:calc(-1 * var(--sheet-r));border-radius:var(--sheet-r) var(--sheet-r) 0 0;background:radial-gradient(70% 520px at 50% 0,#ffffff0b,#fff0 70%),var(--deep);box-shadow:0 -40px 80px -30px #000} #pk-about-v6 .v9-sheet::before{content:"";position:absolute;inset:0 0 auto;height:calc(var(--sheet-r) * 2);border:1px solid #ffffff2e;border-bottom:0;border-radius:inherit;pointer-events:none;-webkit-mask-image:linear-gradient(#000,#0000);mask-image:linear-gradient(#000,#0000)} #pk-about-v6 .v9-horizon{position:absolute;z-index:2;top:-1px;left:50%;width:min(960px,82%);height:1px;translate:-50% 0;pointer-events:none;background:linear-gradient(90deg,#fff0,#fff 50%,#fff0);box-shadow:0 0 14px #ffffff8c,0 0 48px #ffffff40} #pk-about-v6 .v9-horizon::after{content:"";position:absolute;left:50%;top:0;width:min(560px,70vw);height:120px;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,#ffffff1f,#fff0);pointer-events:none} /* Lichtfaden: Grundlinie über die volle Abschnittshöhe, der leuchtende Kopf hält sich per sticky in der Bildschirmmitte */ #pk-about-v6 .thread{position:absolute;z-index:0;top:var(--thread-top,0);bottom:0;left:var(--thread-x);width:48px;margin-left:-24px;overflow:clip;pointer-events:none;background:linear-gradient(90deg,#fff0 calc(50% - .5px),#ffffff26 0 calc(50% + .5px),#fff0 0)} #pk-about-v6 .thread-head{position:sticky;top:50vh;display:block;height:0} #pk-about-v6 .thread-head::before{content:"";position:absolute;left:50%;bottom:0;width:1px;height:400vh;translate:-50% 0;background:linear-gradient(#ffffffa6,#ffffffd9 calc(100% - 160px),#fff);box-shadow:0 0 6px #ffffff73} #pk-about-v6 .thread-head::after{content:"";position:absolute;left:50%;top:0;width:7px;height:7px;translate:-50% -50%;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff,0 0 22px #ffffffa6,0 0 44px #ffffff4d} #pk-about-v6 :where(.skills-wrap,.erf-wrap){position:relative;z-index:1} /* Verbindungskarte · Kopf */ #pk-about-v6 #pk-skills{position:relative;border-top:0;padding-top:clamp(96px,11vw,160px)} #pk-about-v6 .skills-head{column-gap:max(8%,96px)} #pk-about-v6 .skills-head #skills-title{margin-top:24px} /* Verbindungskarte · Desktop und Tablet */ #pk-about-v6 .skills-map{counter-reset:pk-node;isolation:isolate;view-timeline:--map block} #pk-about-v6 .skills-map::before{content:"";position:absolute;z-index:-1;inset:-48px 18%;pointer-events:none;background-image:radial-gradient(#ffffff26 1px,#fff0 1.3px);background-size:22px 22px;-webkit-mask-image:radial-gradient(closest-side,#000 30%,#0000);mask-image:radial-gradient(closest-side,#000 30%,#0000)} #pk-about-v6 .skills-map::after{content:"";position:absolute;z-index:-2;inset:-10% -4%;pointer-events:none;background:radial-gradient(closest-side,#ffffff0d,#fff0)} /* pathLength=100 gilt nur ohne non-scaling-stroke aus V6; sonst endet die gezeichnete Linie vor der Karte */ #pk-about-v6 .skills-map .edge{stroke:#ffffff2e;stroke-dasharray:100;vector-effect:none;transition:stroke .5s,filter .5s} #pk-about-v6 .skills-map .pulse{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:4 96;stroke-dashoffset:0;opacity:.85;filter:drop-shadow(0 0 3px #fff);animation:pk-dash 5.6s linear infinite} #pk-about-v6 .skills-map .pulse-4{animation-delay:-.7s} #pk-about-v6 .skills-map .pulse-2{animation-delay:-1.4s} #pk-about-v6 .skills-map .pulse-3{animation-delay:-2.1s} #pk-about-v6 .skills-map .pulse-5{animation-delay:-2.8s} #pk-about-v6 .skills-map .pulse-6{animation-delay:-3.5s} #pk-about-v6 .skills-map .pulse-0{animation-delay:-4.2s} #pk-about-v6 .skills-map .pulse-7{animation-delay:-4.9s} #pk-about-v6 .map-hub{width:256px;border:0;background:none;box-shadow:none} #pk-about-v6 :is(.map-hub,.mmap-hub)::before{content:"";position:absolute;inset:-34%;z-index:-1;border-radius:50%;background:radial-gradient(circle closest-side,#ffffff21,#ffffff08 55%,#fff0);animation:pk-breathe 6s ease-in-out infinite} #pk-about-v6 .hub-rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible} #pk-about-v6 .hub-ring{fill:none;stroke:#ffffff47;stroke-width:1} #pk-about-v6 .hub-ring-outer{stroke:#ffffff1f} #pk-about-v6 .hub-ring-dash{stroke:#ffffff66;stroke-dasharray:1 5} #pk-about-v6 .hub-turn{transform-origin:100px 100px;animation:pk-spin 16s linear infinite} #pk-about-v6 .hub-turn-slow{animation-duration:80s} #pk-about-v6 .hub-turn-rev{animation-duration:26s;animation-direction:reverse} #pk-about-v6 .hub-sat{fill:#fff;filter:drop-shadow(0 0 4px #fff)} #pk-about-v6 .hub-sat-dim{fill:#ffffffb3} #pk-about-v6 .hub-core{position:absolute;inset:23%;display:grid;place-items:center;border:1px solid #ffffff99;border-radius:50%;background:radial-gradient(circle at 50% 45%,#1f1f1f,#0b0b0b 72%);box-shadow:0 0 34px #ffffff21,inset 0 0 24px #ffffff0f} #pk-about-v6 .hub-core::after{content:"";position:absolute;inset:-26%;z-index:-1;border-radius:50%;pointer-events:none;background:radial-gradient(circle closest-side,#ffffff3d,#ffffff0d 60%,#fff0);animation:pk-feed .7s ease-out infinite} /* Logo im Kern: wird im Takt der ankommenden Impulse (alle .7s, vgl. .pulse-Verzögerungen) gespeist */ #pk-about-v6 :is(.skills-map,.mmap) .hub-logo{position:static;inset:auto;grid-area:1/1;width:54%;height:auto;overflow:visible;fill:#fff} #pk-about-v6 :is(.skills-map,.mmap) .hub-logo-mark{filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 7px #ffffffb3)} #pk-about-v6 :is(.skills-map,.mmap) .hub-logo-glow{filter:blur(9px);transform:scale(1.08);opacity:.5;animation:pk-feed .7s ease-out infinite} /* Karten der Verbindungskarte · leicht erhaben wie ein hervorgehobener Button, kein echtes 3D */ #pk-about-v6 .map-node{counter-increment:pk-node;padding:20px 22px;border:1px solid #ffffff24;border-radius:18px;background:radial-gradient(260px circle at var(--mx,50%) var(--my,-80%),#ffffff14,#fff0 60%),var(--card-face);box-shadow:var(--card-rim),var(--card-drop);transition:border-color .45s,box-shadow .45s,transform .45s} #pk-about-v6 .map-node::before{content:counter(pk-node,decimal-leading-zero);display:block;margin-bottom:10px;font:500 10px/1 var(--mono);letter-spacing:.1em;color:var(--muted);transition:color .45s} #pk-about-v6 .map-node::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-4px;border-radius:50%;background:#555;box-shadow:0 0 0 3px var(--deep);transition:background .45s,box-shadow .45s} #pk-about-v6 .map-left::after{right:-4px} #pk-about-v6 .map-right::after{left:-4px} #pk-about-v6 .node-short{color:#a9a9a9} #pk-about-v6 .map-node:hover{border-color:#ffffffad;transform:translateY(-3px);box-shadow:var(--card-rim-on),var(--card-drop),var(--card-glow)} #pk-about-v6 .map-node:hover::before{color:#fff} #pk-about-v6 .map-node:hover::after{background:#fff;box-shadow:0 0 0 3px var(--deep),0 0 12px #fff} #pk-about-v6 .skills-map[data-lit="0"] .node-0,#pk-about-v6 .skills-map[data-lit="1"] .node-1,#pk-about-v6 .skills-map[data-lit="2"] .node-2,#pk-about-v6 .skills-map[data-lit="3"] .node-3,#pk-about-v6 .skills-map[data-lit="4"] .node-4,#pk-about-v6 .skills-map[data-lit="5"] .node-5,#pk-about-v6 .skills-map[data-lit="6"] .node-6,#pk-about-v6 .skills-map[data-lit="7"] .node-7{border-color:#ffffffad;box-shadow:var(--card-rim-on),var(--card-drop),var(--card-glow)} #pk-about-v6 .skills-map[data-lit="0"] .node-0::after,#pk-about-v6 .skills-map[data-lit="1"] .node-1::after,#pk-about-v6 .skills-map[data-lit="2"] .node-2::after,#pk-about-v6 .skills-map[data-lit="3"] .node-3::after,#pk-about-v6 .skills-map[data-lit="4"] .node-4::after,#pk-about-v6 .skills-map[data-lit="5"] .node-5::after,#pk-about-v6 .skills-map[data-lit="6"] .node-6::after,#pk-about-v6 .skills-map[data-lit="7"] .node-7::after{background:#fff;box-shadow:0 0 0 3px var(--deep),0 0 12px #fff} #pk-about-v6 .skills-map[data-lit="0"] .edge-0,#pk-about-v6 .skills-map[data-lit="1"] .edge-1,#pk-about-v6 .skills-map[data-lit="2"] .edge-2,#pk-about-v6 .skills-map[data-lit="3"] .edge-3,#pk-about-v6 .skills-map[data-lit="4"] .edge-4,#pk-about-v6 .skills-map[data-lit="5"] .edge-5,#pk-about-v6 .skills-map[data-lit="6"] .edge-6,#pk-about-v6 .skills-map[data-lit="7"] .edge-7{stroke:#ffffffd9;filter:drop-shadow(0 0 3px #fff9)} /* Verbindungskarte · Mobil: derselbe Kern wie auf dem Desktop, drei Bereiche, je eine Linie mit einem Impuls. Ankunft alle .7s im Takt des Logos */ #pk-about-v6 .mmap{position:relative;isolation:isolate;width:100%;max-width:400px;margin:auto;aspect-ratio:360/400} #pk-about-v6 .mmap::before{content:"";position:absolute;z-index:-1;inset:4% -6%;pointer-events:none;background-image:radial-gradient(#ffffff26 1px,#fff0 1.3px);background-size:18px 18px;-webkit-mask-image:radial-gradient(closest-side,#000 30%,#0000);mask-image:radial-gradient(closest-side,#000 30%,#0000)} #pk-about-v6 .mmap-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none} #pk-about-v6 .mmap-edge{fill:none;stroke:#ffffff2e;stroke-width:1;stroke-dasharray:100;transition:stroke .5s,filter .5s} #pk-about-v6 .mmap-pulse{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:7 93;opacity:.85;filter:drop-shadow(0 0 3px #fff);animation:pk-dash 2.1s linear infinite} #pk-about-v6 .mmap-pulse:nth-child(2){animation-delay:-.7s} #pk-about-v6 .mmap-pulse:nth-child(3){animation-delay:-1.4s} #pk-about-v6 .mmap-hub{position:absolute;z-index:1;left:50%;top:50%;width:40%;aspect-ratio:1;translate:-50% -50%} #pk-about-v6 .mmap-node{position:absolute;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:6px;width:38%;height:18%;padding:0 16px;border:1px solid #ffffff24;border-radius:16px;background:var(--card-face);box-shadow:var(--card-rim),var(--card-drop);transition:border-color .45s,box-shadow .45s} #pk-about-v6 .mmap-node::after{content:"";position:absolute;left:50%;width:7px;height:7px;margin-left:-4px;border-radius:50%;background:#555;box-shadow:0 0 0 3px var(--deep);transition:background .45s,box-shadow .45s} #pk-about-v6 .mmap-node-0{--fx:-40px;left:0;top:0} #pk-about-v6 .mmap-node-1{--fx:40px;right:0;top:0} #pk-about-v6 .mmap-node-2{left:31%;bottom:0} #pk-about-v6 :is(.mmap-node-0,.mmap-node-1)::after{bottom:-4px} #pk-about-v6 .mmap-node-2::after{top:-4px} #pk-about-v6 .mmap-num{font:500 10px/1 var(--mono);letter-spacing:.1em;color:var(--muted);transition:color .45s} #pk-about-v6 .mmap-name{font-size:17px;font-weight:500;line-height:1.2;letter-spacing:-.02em;color:#fff} #pk-about-v6 .mmap[data-lit="0"] .mmap-node-0,#pk-about-v6 .mmap[data-lit="1"] .mmap-node-1,#pk-about-v6 .mmap[data-lit="2"] .mmap-node-2{border-color:#ffffffad;box-shadow:var(--card-rim-on),var(--card-drop),var(--card-glow)} #pk-about-v6 .mmap[data-lit="0"] .mmap-node-0 .mmap-num,#pk-about-v6 .mmap[data-lit="1"] .mmap-node-1 .mmap-num,#pk-about-v6 .mmap[data-lit="2"] .mmap-node-2 .mmap-num{color:#fff} #pk-about-v6 .mmap[data-lit="0"] .mmap-node-0::after,#pk-about-v6 .mmap[data-lit="1"] .mmap-node-1::after,#pk-about-v6 .mmap[data-lit="2"] .mmap-node-2::after{background:#fff;box-shadow:0 0 0 3px var(--deep),0 0 12px #fff} #pk-about-v6 .mmap[data-lit="0"] .mmap-edge-0,#pk-about-v6 .mmap[data-lit="1"] .mmap-edge-1,#pk-about-v6 .mmap[data-lit="2"] .mmap-edge-2{stroke:#ffffffd9;filter:drop-shadow(0 0 3px #fff9)} /* Erfahrung · Reißverschluss: links die Erfahrung, rechts der Nutzen, dazwischen der Lichtfaden */ #pk-about-v6 #pk-erfahrung{--zip-gap:clamp(72px,9vw,136px);--erf-axis:50%;position:relative;padding:clamp(48px,6vw,96px) max(24px,4.4vw) clamp(56px,6vw,96px)} #pk-about-v6 .erf-wrap{max-width:1280px;margin:auto} #pk-about-v6 .erf-head{display:grid;grid-template-columns:1fr 1fr;column-gap:max(8%,96px);align-items:end;margin-bottom:clamp(40px,6vw,88px)} #pk-about-v6 .erf-title{margin-top:24px;font-size:clamp(38px,5.1vw,76px);font-weight:500;line-height:1.02;letter-spacing:-.055em;text-wrap:balance} #pk-about-v6 .erf-intro{max-width:540px;font-size:17px;line-height:1.8;color:var(--pk-copy)} #pk-about-v6 .erf-list{position:relative;list-style:none} #pk-about-v6 .erf-item{--lit:1;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--zip-gap);padding:56px 0 64px} #pk-about-v6 .erf-item::before{content:"";position:absolute;z-index:1;left:calc(var(--erf-axis) - 6px);top:72px;width:12px;height:12px;border-radius:50%;background:color-mix(in srgb,#fff calc(var(--lit) * 100%),#2b2b2b);box-shadow:0 0 0 5px var(--deep),0 0 calc(var(--lit) * 22px) color-mix(in srgb,#fff calc(var(--lit) * 70%),#fff0)} #pk-about-v6 .erf-marker{display:flex;align-items:baseline;gap:16px;margin-bottom:20px} #pk-about-v6 .erf-index{font-size:clamp(40px,4vw,56px);font-weight:300;line-height:.9;letter-spacing:-.06em;color:color-mix(in srgb,#fff calc(18% + var(--lit) * 30%),#fff0);font-variant-numeric:tabular-nums;transition:color .25s} #pk-about-v6 .erf-item:hover .erf-index{color:#ffffffa6} #pk-about-v6 .erf-phase{font:500 10px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#fff} #pk-about-v6 .erf-main h3{font-size:clamp(24px,2.5vw,34px);font-weight:500;line-height:1.18;letter-spacing:-.04em;text-wrap:balance} #pk-about-v6 .erf-origin{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:14px;font-size:13px;line-height:1.6;color:#eee} #pk-about-v6 .erf-origin span{font:500 11px/1.9 var(--mono);letter-spacing:.05em;color:var(--muted)} #pk-about-v6 .erf-body{max-width:600px;margin-top:20px;font-size:15px;line-height:1.8;color:var(--pk-copy);text-wrap:pretty} #pk-about-v6 .erf-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;list-style:none} #pk-about-v6 .erf-tags li{padding:6px 11px;border:1px solid var(--line);border-radius:999px;font:500 10px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#cfcfcf} #pk-about-v6 .erf-value{--fx:48px;position:relative;align-self:start;max-width:480px;padding:22px 24px 24px;border:1px solid color-mix(in srgb,#fff calc(14% + var(--lit) * 22%),#fff0);border-radius:18px;background:radial-gradient(260px circle at var(--mx,30%) var(--my,-80%),#ffffff14,#fff0 60%),var(--card-face);box-shadow:var(--card-rim),var(--card-drop),0 16px 34px -18px color-mix(in srgb,#fff calc(var(--lit) * 30%),#fff0);transition:border-color .3s,box-shadow .3s} #pk-about-v6 .erf-value::before{content:"";position:absolute;top:22px;right:100%;width:calc(var(--zip-gap) / 2 - 6px);height:1px;transform-origin:0 50%;scale:var(--lit) 1;background:linear-gradient(90deg,#fff,#ffffff59);box-shadow:0 0 6px #ffffff73} #pk-about-v6 .erf-item:hover .erf-value{border-color:#ffffffad;box-shadow:var(--card-rim-on),var(--card-drop),var(--card-glow)} #pk-about-v6 .erf-value-label{display:flex;align-items:center;gap:10px;font:500 10px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} #pk-about-v6 .erf-value-label::after{content:"→";font-family:PKAboutInter,Arial,sans-serif;letter-spacing:0;color:#fff} #pk-about-v6 .erf-value p+p{margin-top:12px;font-size:clamp(16px,1.35vw,19px);line-height:1.5;letter-spacing:-.02em;color:#fff;text-wrap:pretty} #pk-about-v6 .erf-main{--fx:-48px} #pk-about-v6 .erf-sum{position:relative;isolation:isolate;max-width:880px;margin:32px auto 0;padding:44px 48px;border:1px solid var(--line-strong);border-top-color:#ffffff80;border-radius:24px;background:var(--card-face);box-shadow:var(--card-rim),var(--card-drop),0 -1px 30px -12px #ffffff40;text-align:center} #pk-about-v6 .erf-sum::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),#ffffff17,transparent 55%)} #pk-about-v6 .erf-sum::after{content:"";position:absolute;left:50%;top:-4px;width:7px;height:7px;translate:-50% 0;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff,0 0 22px #ffffffa6} #pk-about-v6 .erf-sum h3{font-size:clamp(22px,2.3vw,32px);font-weight:500;line-height:1.2;letter-spacing:-.04em;text-wrap:balance} #pk-about-v6 .erf-sum p{max-width:640px;margin:14px auto 0;font-size:15px;line-height:1.8;color:var(--pk-copy)} /* Leitgedanke */ #pk-about-v6 #pk-haltung{position:relative;padding:0 max(24px,4.4vw) clamp(96px,11vw,160px);border-top:0;text-align:center} #pk-about-v6 .haltung-stage{display:flex;flex-direction:column;align-items:center} #pk-about-v6 .haltung-wrap{display:flex;flex-direction:column;align-items:center;max-width:1040px;margin:auto} #pk-about-v6 .haltung-line{position:relative;display:block;width:1px;height:clamp(72px,12vh,140px);margin-bottom:28px;background:#ffffff26} #pk-about-v6 .haltung-line::before{content:"";position:absolute;inset:0;transform-origin:50% 0;background:linear-gradient(#ffffffa6,#fff);box-shadow:0 0 6px #ffffff73} #pk-about-v6 .haltung-line::after{content:"";position:absolute;left:50%;bottom:-4px;width:7px;height:7px;translate:-50% 0;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff,0 0 22px #ffffffa6} #pk-about-v6 .haltung-title{margin-top:26px;font-size:clamp(32px,4.8vw,72px);font-weight:500;line-height:1.06;letter-spacing:-.055em;text-wrap:balance} #pk-about-v6 .haltung-text{max-width:640px;margin-top:30px;font-size:17px;line-height:1.8;color:var(--pk-copy)} #pk-about-v6 #pk-haltung .arrow-link{margin-top:36px} /* Kontakt · zweite Fläche, schiebt sich über das Ende der Bühne */ #pk-about-v6 #pk-kontakt{position:relative;z-index:2;isolation:isolate;overflow:clip;padding:clamp(88px,10vw,150px) max(24px,4.4vw) clamp(88px,10vw,140px);border-radius:var(--sheet-r) var(--sheet-r) 0 0;background:linear-gradient(#0d0d0d,#111 70%);box-shadow:0 -40px 90px -20px #000} #pk-about-v6 #pk-kontakt::before{content:"";position:absolute;inset:0 0 auto;height:calc(var(--sheet-r) * 2);border:1px solid #ffffff2e;border-bottom:0;border-radius:inherit;pointer-events:none;-webkit-mask-image:linear-gradient(#000,#0000);mask-image:linear-gradient(#000,#0000)} #pk-about-v6 .kontakt-glow{position:absolute;z-index:-1;left:50%;bottom:-42%;width:min(1100px,140vw);aspect-ratio:1.6;translate:-50% 0;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,#ffffff1f,#ffffff08 50%,#fff0)} #pk-about-v6 .kontakt-wrap{display:flex;flex-direction:column;align-items:center;max-width:920px;margin:auto;text-align:center} #pk-about-v6 .kontakt-title{margin-top:24px;font-size:clamp(38px,5.1vw,76px);font-weight:500;line-height:1.02;letter-spacing:-.055em;text-wrap:balance} #pk-about-v6 .kontakt-text{max-width:560px;margin-top:28px;font-size:17px;line-height:1.8;color:var(--pk-copy)} #pk-about-v6 #pk-kontakt .intro-actions{justify-content:center;margin-top:36px} @property --pk-angle{syntax:"";inherits:false;initial-value:0deg} @keyframes pk-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @keyframes pk-pulse{0%,100%{opacity:1}50%{opacity:.35}} @keyframes pk-blink{50%{opacity:0}} @keyframes pk-spin{to{transform:rotate(360deg)}} @keyframes pk-border{to{--pk-angle:360deg}} @keyframes pk-breathe{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}} @keyframes pk-glow{0%,100%{opacity:.35}50%{opacity:.8}} @keyframes pk-feed{0%{opacity:1}100%{opacity:.4}} @keyframes pk-dash{from{stroke-dashoffset:0}to{stroke-dashoffset:100}} @keyframes pk-flow{0%{top:32px;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:calc(100% - 88px);opacity:0}} /* Scrollgesteuerte Übergänge. Ausgangswerte oben sind der Endzustand; die Keyframes beschreiben nur den Weg dorthin. */ @keyframes sx-rise{from{opacity:0;translate:var(--fx,0) 56px;filter:blur(10px)}} @keyframes sx-zip{from{opacity:0;translate:var(--fx,0) 24px;filter:blur(8px)}} @keyframes sx-node{from{opacity:0;translate:var(--fx,0) 0;filter:blur(8px)}} @keyframes sx-pop{from{opacity:0;scale:.55}} @keyframes sx-draw{from{stroke-dashoffset:100}} @keyframes sx-fade{from{opacity:0}} @keyframes sx-recede{to{opacity:.12;scale:.93;translate:0 8%}} @keyframes sx-tilt{to{rotate:x 16deg}} @keyframes sx-horizon{from{scale:.08 1;opacity:.25}} @keyframes sx-lit{from{--lit:0}to{--lit:1}} @keyframes sx-fill{from{scale:1 0}} @keyframes sx-word{from{color:#ffffff24}} @keyframes sx-stage{to{opacity:.15;scale:.92;translate:0 -6%}} @keyframes sx-glow{from{opacity:0;scale:.6}} @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ /* Einstieg weicht zurück, die Bühne schiebt sich darüber */ #pk-about-v6 .intro-wrap{animation:sx-recede linear both;animation-timeline:view();animation-range:exit 25% exit 100%} #pk-about-v6 .sys{animation:pk-rise .9s .15s var(--ease) both,sx-tilt linear both;animation-timeline:auto,view();animation-range:normal,exit 0% exit 100%} #pk-about-v6 .v9-horizon{animation:sx-horizon var(--ease) both;animation-timeline:view();animation-range:cover 0% cover 65vh} /* Allgemeines Auftauchen */ #pk-about-v6 .sx{animation:sx-rise var(--ease) both;animation-timeline:view();animation-range:entry 0% cover 30%} /* Verbindungskarte: Kern zündet, Linien laufen vom Kern zu den Karten, Karten docken von außen an */ #pk-about-v6 .map-hub{animation:sx-pop var(--ease) both;animation-timeline:--map;animation-range:entry 0% entry 55%} #pk-about-v6 .skills-map .edge{animation:sx-draw cubic-bezier(.4,0,.2,1) both;animation-timeline:--map;animation-range:entry 20% entry 80%} #pk-about-v6 .skills-map .pulses{animation:sx-fade linear both;animation-timeline:--map;animation-range:entry 70% entry 100%} #pk-about-v6 .map-left{--fx:-72px} #pk-about-v6 .map-right{--fx:72px} #pk-about-v6 .map-node{animation:sx-node var(--ease) both;animation-timeline:--map} #pk-about-v6 .map-node.row-1{animation-range:entry 15% entry 60%} #pk-about-v6 .map-node.row-2{animation-range:entry 25% entry 70%} #pk-about-v6 .map-node.row-3{animation-range:entry 35% entry 80%} #pk-about-v6 .map-node.row-4{animation-range:entry 45% entry 90%} /* Verbindungskarte mobil: wie Desktop, Kern zündet, Linien laufen zu den Karten, Karten docken an */ #pk-about-v6 .mmap{view-timeline:--mmap block} #pk-about-v6 .mmap-hub{animation:sx-pop var(--ease) both;animation-timeline:--mmap;animation-range:entry 0% entry 55%} #pk-about-v6 .mmap-edge{animation:sx-draw cubic-bezier(.4,0,.2,1) both;animation-timeline:--mmap;animation-range:entry 20% entry 80%} #pk-about-v6 .mmap-pulses{animation:sx-fade linear both;animation-timeline:--mmap;animation-range:entry 70% entry 100%} #pk-about-v6 .mmap-node{animation:sx-node var(--ease) both;animation-timeline:--mmap} #pk-about-v6 :is(.mmap-node-0,.mmap-node-1){animation-range:entry 20% entry 65%} #pk-about-v6 .mmap-node-2{animation-range:entry 40% entry 85%} /* Erfahrung: Erfahrung und Nutzen greifen von beiden Seiten ineinander, der Knoten leuchtet, sobald der Faden ihn erreicht */ #pk-about-v6 .erf-item{animation:sx-lit linear both;animation-timeline:view();animation-range:cover calc(50vh + 56px) cover calc(50vh + 112px)} #pk-about-v6 .erf-item .sx{animation-name:sx-zip;animation-range:entry 0% cover 32%} #pk-about-v6 .erf-sum{animation-name:sx-pop;animation-range:entry 0% cover 35%} /* Leitgedanke: ohne Bühne Wort für Wort beim Durchscrollen */ #pk-about-v6 #pk-haltung{view-timeline:--haltung block} #pk-about-v6 .haltung-title .w{animation:sx-word linear both;animation-timeline:--haltung} #pk-about-v6 .haltung-title .w:nth-child(1){animation-range:cover 8% cover 20%} #pk-about-v6 .haltung-title .w:nth-child(2){animation-range:cover 13% cover 25%} #pk-about-v6 .haltung-title .w:nth-child(3){animation-range:cover 18% cover 30%} #pk-about-v6 .haltung-title .w:nth-child(4){animation-range:cover 23% cover 35%} #pk-about-v6 .haltung-title .w:nth-child(5){animation-range:cover 28% cover 40%} #pk-about-v6 .haltung-title .w:nth-child(6){animation-range:cover 33% cover 45%} #pk-about-v6 .haltung-title .w:nth-child(7){animation-range:cover 38% cover 50%} #pk-about-v6 .haltung-line::before{animation:sx-fill linear both;animation-timeline:--haltung;animation-range:cover 0% cover 40%} /* Kontakt: Elemente sind am Seitenende vollständig sichtbar, daher nur Eintrittsbereich */ #pk-about-v6 #pk-kontakt .sx{animation-range:entry 0% entry 100%} #pk-about-v6 .kontakt-glow{animation:sx-glow var(--ease) both;animation-timeline:view();animation-range:entry 0% entry 100%} } } /* Ersatz für Browser ohne scrollgesteuerte Animationen: das Skript setzt .sx-fallback und blendet Elemente beim Erscheinen ein */ @media (prefers-reduced-motion:no-preference){ .sx-fallback #pk-about-v6 .sx{transition:opacity .9s var(--ease),translate .9s var(--ease)} .sx-fallback #pk-about-v6 .sx:not(.is-in){opacity:0;translate:var(--fx,0) 40px} } /* Reduzierte Bewegung: Faden vollständig und ruhig zeigen */ @media (prefers-reduced-motion:reduce){ #pk-about-v6 .thread-head{display:none} #pk-about-v6 .thread{background:linear-gradient(90deg,#fff0 calc(50% - .5px),#ffffff8c 0 calc(50% + .5px),#fff0 0)} } @media(max-width:1000px){ #pk-about-v6 .intro-wrap{grid-template-columns:1fr;align-items:start} #pk-about-v6 .sys{max-width:560px} #pk-about-v6 .map-hub{width:172px} #pk-about-v6 .map-node{padding:16px 16px} #pk-about-v6 #pk-erfahrung{--zip-gap:64px} #pk-about-v6 .erf-body{font-size:14.5px} } @media(max-width:760px){ #pk-about-v6{--thread-x:12px;--sheet-r:28px} #pk-about-v6 #pk-intro{padding:56px 24px calc(72px + var(--sheet-r))} #pk-about-v6 .intro-title{margin-top:22px;font-size:clamp(38px,11vw,56px)} #pk-about-v6 .intro-lead{margin-top:26px;font-size:16px} #pk-about-v6 .intro-lead-short{margin-top:14px} #pk-about-v6 .intro-actions{margin-top:32px} #pk-about-v6 .btn{flex:1 1 220px} #pk-about-v6 .sys{padding:8px;border-radius:20px} #pk-about-v6 .sys::after{border-radius:21px} #pk-about-v6 .sys-bar{min-height:64px;font-size:13.5px} #pk-about-v6 .sys-step{grid-template-columns:40px minmax(0,1fr) auto;gap:12px;padding:10px 12px 10px 8px} #pk-about-v6 .sys-num{width:40px;height:40px} #pk-about-v6 .sys-flow::before,#pk-about-v6 .sys-flow::after{left:28px} #pk-about-v6 .sys-name{font-size:15px} /* Mobil ist der Einstieg höher als der Bildschirm: erst zurückweichen, wenn die Systemkarte weitgehend gelesen ist */ #pk-about-v6 .intro-wrap{animation-range:exit 50% exit 100%} #pk-about-v6 .sys{animation-range:normal,exit 45% exit 100%} #pk-about-v6 #pk-skills .thread{--thread-top:var(--sheet-r)} #pk-about-v6 .v9-horizon{width:76%} #pk-about-v6 #pk-skills{padding:80px 24px 64px} #pk-about-v6 .skills-head #skills-title{margin-top:20px} #pk-about-v6 .triad-group{margin-top:12px;padding:41px 22px 30px;border:1px solid #ffffff24;border-radius:20px;background:var(--card-face);box-shadow:var(--card-rim),var(--card-drop)} #pk-about-v6 .triad-group-title{margin-bottom:22px} #pk-about-v6 #pk-erfahrung{--erf-axis:-12px;padding:40px 24px 72px} #pk-about-v6 .erf-head{grid-template-columns:1fr;gap:24px;margin-bottom:28px} #pk-about-v6 .erf-title{margin-top:20px;font-size:clamp(36px,8vw,56px)} #pk-about-v6 .erf-intro{font-size:16px} #pk-about-v6 .erf-item{display:block;padding:36px 0 40px 10px} #pk-about-v6 .erf-item::before{top:44px} #pk-about-v6 .erf-item{animation-range:cover calc(50vh + 26px) cover calc(50vh + 80px)} #pk-about-v6 .erf-marker{gap:14px;margin-bottom:18px} #pk-about-v6 .erf-index{font-size:40px} #pk-about-v6 .erf-main,#pk-about-v6 .erf-value{--fx:0} #pk-about-v6 .erf-value{max-width:none;margin-top:26px;padding:20px} #pk-about-v6 .erf-value::before{display:none} #pk-about-v6 .erf-sum{margin:12px 0 0 10px;padding:30px 22px;border-radius:20px;text-align:left} #pk-about-v6 .erf-sum::after{left:-26px;top:36px;translate:none} #pk-about-v6 .erf-sum p{margin-left:0} #pk-about-v6 #pk-haltung{padding:0 24px 88px;text-align:left} #pk-about-v6 .haltung-stage{align-items:flex-start;padding:0} #pk-about-v6 .haltung-wrap{align-items:flex-start} #pk-about-v6 .haltung-line{margin-left:-12px} #pk-about-v6 .haltung-title{margin-top:20px;font-size:clamp(30px,8vw,44px)} #pk-about-v6 .haltung-text{font-size:16px} #pk-about-v6 #pk-kontakt{padding:80px 24px 72px} #pk-about-v6 .kontakt-wrap{align-items:flex-start;text-align:left} #pk-about-v6 .kontakt-title{margin-top:20px;font-size:clamp(36px,8vw,56px)} #pk-about-v6 .kontakt-text{font-size:16px} #pk-about-v6 #pk-kontakt .intro-actions{justify-content:flex-start;width:100%} } /* Leitgedanke als Bühne: bleibt stehen, die Worte leuchten nacheinander auf, dann schiebt sich der Kontakt darüber */ @media (prefers-reduced-motion:no-preference) and (min-height:620px){ @supports (animation-timeline:view()){ #pk-about-v6 #pk-haltung{height:250vh;padding:0;view-timeline:--haltung block} #pk-about-v6 .haltung-stage{position:sticky;top:0;display:grid;grid-template-rows:minmax(48px,1fr) auto 1fr;justify-items:center;height:100vh;height:100svh;padding:0 max(24px,4.4vw);animation:sx-stage linear both;animation-timeline:--haltung;animation-range:contain 72% contain 100%} #pk-about-v6 .haltung-line{height:auto;align-self:stretch} #pk-about-v6 #pk-kontakt{margin-top:-55vh} #pk-about-v6 .haltung-line::before{animation-timeline:--haltung;animation-range:entry 50% entry 100%} #pk-about-v6 .haltung-title .w{animation-timeline:--haltung} #pk-about-v6 .haltung-title .w:nth-child(1){animation-range:contain 2% contain 9%} #pk-about-v6 .haltung-title .w:nth-child(2){animation-range:contain 7% contain 14%} #pk-about-v6 .haltung-title .w:nth-child(3){animation-range:contain 12% contain 19%} #pk-about-v6 .haltung-title .w:nth-child(4){animation-range:contain 17% contain 24%} #pk-about-v6 .haltung-title .w:nth-child(5){animation-range:contain 22% contain 29%} #pk-about-v6 .haltung-title .w:nth-child(6){animation-range:contain 27% contain 34%} #pk-about-v6 .haltung-title .w:nth-child(7){animation-range:contain 32% contain 40%} #pk-about-v6 .haltung-text,#pk-about-v6 #pk-haltung .arrow-link{animation:sx-rise var(--ease) both;animation-timeline:--haltung;animation-range:contain 30% contain 42%} @media(max-width:760px){#pk-about-v6 .haltung-stage{justify-items:start;padding:0 24px}} } }