html:not([data-sec-lang="de"]) .l-de{display:none}
html[data-sec-lang="de"] .l-en{display:none}




.nav-lang{position:relative;isolation:isolate;display:inline-flex;padding:2px;border:1px solid rgba(57,255,20,.16);border-radius:999px;margin-right:4px}
.nav-lang::before{content:"";position:absolute;z-index:-1;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);border-radius:999px;background:rgba(57,255,20,.10);border:1px solid rgba(57,255,20,.28);box-shadow:inset 0 0 8px rgba(57,255,20,.14),inset 0 1px 0 rgba(124,255,90,.10);transition:transform 230ms cubic-bezier(.3,1.4,.4,1)}
.nav-lang:has(.sec-l[data-lang-btn="de"].is-active)::before{transform:translateX(100%)}
.sec-l{width:37px;padding:4px 0;border:0;border-radius:999px;background:none;text-align:center;font-family:var(--font-mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:rgba(143,199,138,.5);cursor:pointer;transition:color .2s ease}
.sec-l:hover{color:var(--green)}
.sec-l.is-active{color:var(--green);text-shadow:0 0 9px rgba(57,255,20,.35)}
.sec-l:focus-visible{outline:1px solid rgba(57,255,20,.45);outline-offset:2px}
 
@supports not (selector(:has(*))){
  .nav-lang::before{content:none}
  .sec-l.is-active{background:rgba(57,255,20,.10);box-shadow:inset 0 0 0 1px rgba(57,255,20,.28)}
}
@media (prefers-reduced-motion:reduce){.nav-lang::before{transition:none}}

 
.sec-disc{margin-top:30px;padding-top:20px;border-top:1px solid rgba(57,255,20,.08)}
.sec-tog{display:inline-flex;align-items:center;gap:11px;padding:9px 14px;border:1px solid var(--line-strong);border-radius:6px;background:rgba(57,255,20,.05);font-family:var(--font-mono);font-size:13px;letter-spacing:1.5px;color:var(--green);cursor:pointer;transition:border-color 200ms ease,background 200ms ease}
.sec-tog:hover,.sec-tog:focus-visible{border-color:var(--green);background:rgba(57,255,20,.1)}
.sec-tog-hint{font-style:normal;font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--ink-dim)}
.sec-tog[aria-expanded="true"] .sec-tog-hint{display:none}
.sec-tog > span::after{content:'';display:inline-block;width:7px;height:14px;margin-left:3px;vertical-align:-2px;background:var(--green);opacity:0}
.sec-tog:hover > span::after,.sec-tog:focus-visible > span::after{opacity:.85;animation:abtCur 1.1s steps(2) infinite}
.sec-tog i{font-style:normal;display:grid;place-items:center;width:21px;height:21px;border:1px solid rgba(57,255,20,.45);border-radius:6px;font-size:10px;line-height:1;color:var(--green)}
.sec-tog[aria-expanded="false"] i{animation:secTogPulse 2.6s ease-in-out infinite}
.sec-tog:hover i,.sec-tog:focus-visible i{border-color:var(--green);color:var(--green);animation:none}
@keyframes secTogPulse{0%,100%{box-shadow:0 0 0 0 rgba(57,255,20,0)}50%{box-shadow:0 0 12px -2px rgba(57,255,20,.55)}}
.sec-tog[aria-expanded="true"] i{transform:rotate(180deg);border-color:rgba(57,255,20,.45);color:var(--green)}
.sec-tog:focus-visible{outline:1px solid rgba(57,255,20,.4);outline-offset:5px;border-radius:4px}
.sec-more{display:grid;grid-template-columns:minmax(0,1fr);gap:12px 0;margin:20px 0 0;font-family:var(--font-mono)}
.sec-more[hidden]{display:none}
.sec-more>div{display:flex;flex-direction:column;gap:5px}
.sec-more dt{font-size:9px;letter-spacing:2.2px;text-transform:uppercase;color:rgba(143,199,138,.42)}
.sec-more dd{margin:0;font-size:12px;letter-spacing:.9px;color:rgba(228,238,228,.82)}
@media (min-width:900px){.sec-more{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 30px}}

 
.mot-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
@media (min-width:1000px){.mot-grid{grid-template-columns:minmax(0,1fr) minmax(220px,268px);gap:0 clamp(30px,4vw,64px);align-items:start}}
.mot-b+.mot-b{margin-top:26px}
.mot-b h3{display:flex;align-items:center;gap:11px;margin:0 0 12px;font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:2.6px;text-transform:uppercase;color:rgba(143,199,138,.5)}
.mot-b h3 em{font-style:normal;color:var(--green)}
.mot-b h3::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(57,255,20,.16),transparent)}
#motivation .about-text{font-size:16px;line-height:1.8;color:rgba(228,238,228,.86);max-width:62ch}
.mot-panel{padding:20px 22px;border:1px solid rgba(57,255,20,.12);border-radius:12px;background:linear-gradient(180deg,rgba(57,255,20,.04),rgba(0,8,0,.35));font-family:var(--font-mono)}
.mot-panel>b{display:block;margin-bottom:16px;font-size:10px;font-weight:500;letter-spacing:2.2px;color:var(--green)}
.mot-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.mot-panel li{position:relative;padding-left:16px;font-size:12.5px;letter-spacing:1px;color:rgba(228,238,228,.8)}
.mot-panel li::before{content:'';position:absolute;left:0;top:6px;width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 7px rgba(57,255,20,.5)}
.mot-sig{display:flex;align-items:center;gap:4px;margin-top:20px;padding-top:14px;border-top:1px solid rgba(57,255,20,.08)}
.mot-sig i{width:3px;height:9px;background:rgba(57,255,20,.35);animation:motSig 1.6s ease-in-out infinite}
.mot-sig i:nth-child(2){height:13px;animation-delay:.18s}
.mot-sig i:nth-child(3){height:7px;animation-delay:.36s}
.mot-sig em{margin-left:9px;font-style:normal;font-size:9px;letter-spacing:1.8px;text-transform:uppercase;color:rgba(143,199,138,.45)}
@keyframes motSig{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.mot-sig i{animation:none}.sec-tog:hover > span::after{animation:none}.sec-tog[aria-expanded="false"] i{animation:none}}



#about .abt-line{margin:0;max-width:62ch;padding-left:16px;border-left:1px solid rgba(57,255,20,.22);font-size:15px;line-height:1.7;color:rgba(198,214,198,.72);text-wrap:pretty}
#about .abt-line em{font-style:normal;color:var(--green)}
#about .abt-meta{display:grid;grid-template-columns:minmax(0,1fr);gap:14px 0;margin:26px 0 0;padding-top:18px;border-top:1px solid rgba(57,255,20,.08);font-family:var(--font-mono)}
#about .abt-meta>div{display:flex;flex-direction:column;gap:5px}
#about .abt-meta dt{font-size:9px;letter-spacing:2.2px;text-transform:uppercase;color:rgba(143,199,138,.42)}
#about .abt-meta dd{margin:0;font-size:12px;letter-spacing:.9px;color:rgba(228,238,228,.84)}
#about .abt-meta dd.on{display:flex;align-items:center;gap:2px;color:var(--green)}
#about .abt-meta dd.on i{display:inline-block;width:7px;height:13px;background:var(--green);animation:abtCur 1.1s steps(2) infinite}
@keyframes abtCur{50%{opacity:0}}
 
@media (min-width:900px){
  #about .abt-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  #about .abt-meta>div{padding:0 20px;border-left:1px solid rgba(57,255,20,.1)}
  #about .abt-meta>div:nth-child(odd){padding-left:0;border-left:0}
}
@media (prefers-reduced-motion:reduce){#about .abt-meta dd.on i{animation:none}}






 
#background .bx-panel{border:0;border-left:1px solid rgba(57,255,20,.22);border-radius:0;background:linear-gradient(90deg,rgba(57,255,20,.035),rgba(0,8,0,.32) 42%,transparent);box-shadow:none}
#background .about-body{max-width:1040px}
#background .bx-body{padding:clamp(22px,2.6vw,34px) clamp(20px,2.6vw,38px);container-type:inline-size;container-name:bx}
#background .bx-panel.is-opening{animation:none}
#background .bx-panel.is-opening .bx-body::after{content:none}
 
#background .bx-h2-btn:focus-visible{outline:1px solid rgba(57,255,20,.45);outline-offset:2px;border-radius:10px}

 
.bx-top{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px 28px;margin-bottom:26px}
.cp-state{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;margin:0 0 0 auto;font-family:var(--font-mono);font-size:11px;letter-spacing:1.1px}
.cp-state dt{color:rgba(143,199,138,.45);text-transform:uppercase;letter-spacing:1.9px;font-size:9.5px;padding-top:1px}
.cp-state dd{margin:0;color:rgba(230,240,230,.82)}
.cp-state dd.on{color:var(--green)}
@media (max-width:720px){.cp-state{margin-left:0}}

 
.cp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;align-items:start}
.cp-rail{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:22px 0}
.cp-n{position:relative;padding:0 0 0 22px;border-left:1px solid rgba(57,255,20,.14)}
.cp-n i{position:absolute;left:-5.5px;top:3px;width:10px;height:10px;border-radius:50%;border:1px solid rgba(57,255,20,.35);background:#040804}
.cp-n b{display:block;font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:rgba(143,199,138,.55)}
.cp-s{display:block;margin-top:5px;font-family:var(--font-mono);font-size:10px;letter-spacing:1px;color:rgba(143,199,138,.4)}
.cp-n.is-on i{background:var(--green);border-color:var(--green);box-shadow:0 0 9px rgba(57,255,20,.55)}
.cp-n.is-on{border-left-color:rgba(57,255,20,.3)}
.cp-n.is-on b{color:rgba(230,240,230,.9)}
.cp-n.is-on .cp-s{color:rgba(143,199,138,.55)}
.cp-n.cp-shift i{left:-7px;top:2px;width:13px;height:13px;border-radius:2px;transform:rotate(45deg)}
.cp-n.cp-shift.is-on i{box-shadow:0 0 14px rgba(57,255,20,.75)}
.cp-n.cp-shift.is-on b{color:var(--green);letter-spacing:2.4px}
.cp-n.cp-now.is-on b{color:var(--green)}
@container bx (min-width:560px){
  .cp-grid{grid-template-columns:minmax(180px,224px) minmax(0,1fr);gap:0 clamp(24px,3.4cqi,48px)}
  .cp-rail{display:block;gap:0}
  .cp-n{padding:0 0 26px 26px;margin-left:5px}
  .cp-n:last-child{border-left-color:transparent;padding-bottom:0}
}

 
.cp-ch+.cp-ch{margin-top:30px}
.cp-ch h3{display:flex;align-items:center;gap:11px;margin:0 0 14px;font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:2.6px;text-transform:uppercase;color:rgba(143,199,138,.5)}
.cp-ch h3 em{font-style:normal;color:var(--green)}
.cp-ch h3::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(57,255,20,.16),transparent)}
#background .bx-body .about-text{font-size:16px;line-height:1.8;color:rgba(228,238,228,.86)}
#background .cp-ch .about-text+.about-text{margin-top:var(--s-3)}
#background .bx-body .about-text .accent{color:var(--green)}
 
#background .bx-body .bx-note{display:grid;gap:4px;margin-top:28px;padding-top:16px;border-top:1px solid rgba(57,255,20,.08);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.8px;line-height:1.6;color:rgba(143,199,138,.55)}
#background .bx-body .bx-note b{font-weight:500;font-size:9px;letter-spacing:2.4px;text-transform:uppercase;color:rgba(143,199,138,.4)}
#background .bx-body .bx-note .bxn-priv{font-size:10.5px;color:rgba(143,199,138,.38)}




.cp-skills{margin-top:34px;padding-top:22px;border-top:1px solid rgba(57,255,20,.08)}
.cp-os-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:22px}
.cp-os-head>b{font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:2.6px;text-transform:uppercase;color:rgba(143,199,138,.45)}
.cp-os-tag{font-family:var(--font-mono);font-size:9px;letter-spacing:2.2px;color:rgba(143,199,138,.4)}
.cp-os-tag i{font-style:normal;color:var(--green)}
.cp-os{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px 30px}
.cp-m{display:flex;flex-direction:column;min-width:0}
.cp-m>em{font-style:normal;font-family:var(--font-mono);font-size:10px;letter-spacing:1.6px;color:rgba(143,199,138,.38)}
.cp-m>b{margin:4px 0 10px;padding-bottom:9px;border-bottom:1px solid rgba(57,255,20,.16);font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:1.9px;color:var(--ink)}
.cp-m ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.cp-m li{font-family:var(--font-mono);font-size:12px;letter-spacing:.5px;color:rgba(201,222,201,.78)}
.cp-m-st{display:inline-flex;align-items:center;gap:6px;margin-top:13px;font-family:var(--font-mono);font-size:8.5px;letter-spacing:2px;color:rgba(143,199,138,.5)}
.cp-m-st i{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 7px rgba(57,255,20,.7);animation:cpPulse 2.8s ease-in-out infinite}
@keyframes cpPulse{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.cp-m-st i{animation:none}}
.cp-os-status{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:26px 0 0;padding-top:14px;border-top:1px solid rgba(57,255,20,.08);font-family:var(--font-mono);font-size:11px;letter-spacing:.6px;color:var(--green)}
.cp-os-status>span{color:rgba(143,199,138,.6)}
.cp-os-status u{text-decoration:none;color:var(--green)}

 
.bx-body[data-bx-lang="en"] .l-de,.bx-body[data-bx-lang="de"] .l-en{display:none}



.nav-lang::before{transition:transform .42s cubic-bezier(.3,1.45,.42,1),box-shadow .3s ease,border-color .3s ease}
.sec-l{transition:color .2s ease,transform .16s ease}
.sec-l:active{transform:scale(.88)}
.nav-lang.is-flip::before{animation:langThumb .5s ease}
@keyframes langThumb{35%{box-shadow:0 0 16px rgba(57,255,20,.65),inset 0 0 10px rgba(57,255,20,.35)}}
#lang-sweep{position:fixed;inset:0;z-index:90;pointer-events:none;display:none}
#lang-sweep.on{display:block}
#lang-sweep.on::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent 3%,rgba(57,255,20,.9),transparent 97%);box-shadow:0 0 16px rgba(57,255,20,.6),0 0 44px rgba(57,255,20,.3);animation:langSweep .6s cubic-bezier(.2,.85,.3,1) forwards}
#lang-sweep.on::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(57,255,20,.06),transparent 34%);animation:langTint .6s ease-out forwards}
@keyframes langSweep{from{transform:translateY(-4vh)}to{transform:translateY(104vh)}}
@keyframes langTint{0%{opacity:0}22%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){#lang-sweep{display:none !important}.nav-lang.is-flip::before{animation:none}}




.cp-n b{overflow-wrap:anywhere}
.cp-state{min-width:0}
.cp-state dd{overflow-wrap:anywhere}
@media (min-width:721px) and (max-width:1080px){
  .cp-rail{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
  .cp-n b{letter-spacing:1.4px}
}