@font-face{font-family:"Inter";src:url(assets/fonts/inter.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  /* Eine Seite über eine Person, gebaut wie eine Produktseite. Dunkle Bühnen für den Auftakt, Telepski, Security und den Schluss, helle Flächen zum Lesen.
     Was wirkt, sind Schrift, echte Bilder und Kacheln. Glas nur für Schwebendes (Navigation, Schalter, Überlagerungen). */
  --bg:#fff;--bg-2:#f5f5f7;--tile:#f5f5f7;--here:#fff;
  --label:#1d1d1f;--label-2:#6e6e73;--label-3:#737378;--label-h:#86868b;--label-4:#aeaeb2;
  --sep:rgba(0,0,0,.13);--fill:rgba(120,120,128,.12);--fill-2:rgba(120,120,128,.07);--off:#d2d2d7;
  --blue:#0071e3;--blue-h:#0077ed;--blue-t:#0066cc;--green:#34c759;--red:#ff3b30;--gold:#d6b36c;
  --g-bg:rgba(255,255,255,.72);
  --g-sh:inset 0 0 0 .5px rgba(255,255,255,.5),0 0 0 .5px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.05),0 12px 28px -14px rgba(0,0,0,.26);
  --m-bg:rgba(255,255,255,.86);
  --thumb:#fff;--thumb-sh:0 0 0 .5px rgba(0,0,0,.06),0 2px 8px -2px rgba(0,0,0,.16);
  --av:linear-gradient(180deg,#f1f2f6,#d6d9e4);
  /* Auf Apple-Geräten die Systemschrift San Francisco. Inter liegt nur als Ersatz für andere Geräte bei. */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter",system-ui,"Helvetica Neue",Arial,sans-serif;
  --gut:16px;
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --win:0 0 0 .5px rgba(0,0,0,.2),0 2px 5px rgba(0,0,0,.05),0 30px 60px -28px rgba(0,0,0,.34);
  color-scheme:light;
}
/* Dunkle Bühne: dieselben Namen, andere Werte. Gilt auch für die Navigation, solange sie über einer dunklen Fläche schwebt. */
.dk,.sec--dark,.is-ondark .nav,.is-ondark .menu,.is-ondark-b .tabbar,.is-ondark-b .np{
  --bg:#000;--bg-2:#161617;--tile:#161617;--here:#000;
  --label:#f5f5f7;--label-2:#a1a1a6;--label-3:#86868b;--label-h:#86868b;--label-4:#6e6e73;
  --sep:rgba(255,255,255,.16);--fill:rgba(255,255,255,.13);--fill-2:rgba(255,255,255,.08);--off:#3a3a3c;
  --blue-t:#2997ff;--green:#30d158;--red:#ff453a;
  --g-bg:rgba(46,46,49,.62);
  --g-sh:inset 0 0 0 .5px rgba(255,255,255,.17),0 12px 28px -14px rgba(0,0,0,.7);
  --m-bg:rgba(38,38,41,.88);
  --thumb:rgba(255,255,255,.17);--thumb-sh:none;
  --av:linear-gradient(180deg,#3a3b43,#18181b);
  color:var(--label);
}
.dk,.sec--dark{color-scheme:dark}
@media (min-width:760px){:root{--gut:24px}}
@media (min-width:1100px){:root{--gut:32px}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:#000}
html,body{overflow-x:clip}
body{margin:0;background:#000;color:var(--label);font-family:var(--font);font-size:17px;line-height:1.47;font-weight:400;letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,canvas,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a,button,summary,label{-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4,p,ul,ol,dl,dd,dt,figure{margin:0}
h1,h2,h3,h4{overflow-wrap:break-word}
ul,ol{padding:0;list-style:none}
kbd{font-family:inherit}
:focus-visible{outline:3px solid color-mix(in srgb,var(--blue) 70%,transparent);outline-offset:2px;border-radius:8px}
::selection{background:color-mix(in srgb,var(--blue) 30%,transparent)}
.skip{position:fixed;left:12px;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:100;background:#fff;color:#1d1d1f;padding:10px 16px;border-radius:999px;transform:translateY(-300%)}
.skip:focus{transform:none}
.wrap{width:100%;max-width:1328px;margin-inline:auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.ico{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.c-red{color:var(--red)}.c-blue{color:#007aff}.c-green{color:var(--green)}
kbd{display:inline-grid;place-items:center;min-width:21px;height:21px;padding:0 5px;border-radius:6px;background:#fff;color:var(--label-2);font-size:11.5px;line-height:1;box-shadow:0 0 0 .5px rgba(0,0,0,.16),0 1px 0 rgba(0,0,0,.14)}

/* ---------- Glas (nur für Schwebendes) ---------- */
.glass{background:var(--g-bg);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:var(--g-sh)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root{--g-bg:rgba(255,255,255,.95)}.dk,.sec--dark,.is-ondark .nav,.is-ondark .menu,.is-ondark-b .tabbar,.is-ondark-b .np{--g-bg:rgba(40,40,43,.96)}}

/* ---------- Knöpfe und Verweise ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 24px;border-radius:999px;font-size:17px;font-weight:500;letter-spacing:-.015em;white-space:nowrap;
  transition:transform .3s var(--ease),background .2s}
.btn .ico{width:16px;height:16px}
.btn:active{transform:scale(.97)}
.btn--fill{color:#fff;background:var(--blue)}
.btn--fill:hover{background:var(--blue-h)}
.btn--gray{color:var(--label);background:var(--fill)}
.btn--gray:hover{background:rgba(120,120,128,.2)}
.btn--sm{height:38px;padding:0 16px;font-size:14.5px;gap:7px}
.btn--sm .ico{width:14px;height:14px}
.link{display:inline;color:var(--blue-t);text-align:left;line-height:1.3}
.link .ico{display:inline-block;vertical-align:-.03em;margin-left:.3em;width:.68em;height:.68em;stroke-width:2.7;transition:transform .3s var(--ease)}
@media (hover:hover){
  .link:hover{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:.06em}
  .link:hover .ico{transform:translateX(2px)}
}
.logo{display:grid;place-items:center;overflow:hidden;flex:none;border-radius:10px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.12)}
.logo img{width:78%;height:62%;object-fit:contain}
.logo--sq{border-radius:23%}
.logo--sq img{width:76%;height:76%}
.logo--wide img{width:88%;height:44%}
.logo--txt{font-size:13px;font-weight:600;letter-spacing:0;color:#6e6e73;background:#fff}
.circle{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--fill);color:var(--label-2);transition:background .2s,transform .3s var(--ease)}
.circle .ico{width:15px;height:15px;stroke-width:2.4}
.circle:hover{background:rgba(120,120,128,.24)}
.circle:active{transform:scale(.92)}
.ico--flip{transform:scaleX(-1)}
/* Das Original-Badge von TryHackMe */
.thm{display:block;transition:transform .45s var(--ease)}
.thm img{width:100%;height:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.22))}
@media (hover:hover){.thm:hover{transform:translateY(-2px)}}
.thm:active{transform:scale(.98)}
/* Rahmen für Bildschirmaufnahmen */
.shot{border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--win)}

/* ---------- Navigation: getrennte Glas-Kapseln. Über dunklen Flächen wird das Glas dunkel. ---------- */
.nav{position:fixed;left:0;right:0;top:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;pointer-events:none;color:var(--label);
  padding:calc(env(safe-area-inset-top,0px) + 10px) max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.nav>*{pointer-events:auto}
.brand{grid-column:1;justify-self:start;display:flex;align-items:center;gap:10px;height:52px;padding:4px 18px 4px 4px;border-radius:999px;font-weight:600;font-size:15.5px;letter-spacing:-.02em;white-space:nowrap;
  transition:opacity .45s,transform .7s var(--ease),visibility .45s,background-color .5s,color .5s,box-shadow .5s}
.brand__av{display:block;width:44px;height:44px;flex:none;border-radius:50%;overflow:hidden;background:var(--av);box-shadow:0 0 0 .5px rgba(0,0,0,.12)}
.brand__av img{width:100%;height:100%;object-fit:cover}
.dock .brand__av img{opacity:0}
.js .nav:not(.is-scrolled) .brand{opacity:0;visibility:hidden;transform:translateY(-8px) scale(.84)}
.nav__links{grid-column:2;display:none;position:relative;align-items:center;height:52px;padding:6px;border-radius:999px;transition:opacity .4s,visibility .4s,background-color .5s,box-shadow .5s}
/* Steht das Porträt oben in der Mitte, bleibt der Kopf frei: Die Leiste zeigt sich erst beim Weiterlesen */
html.js:not(.is-split) .nav:not(.is-scrolled) .nav__links{opacity:0;visibility:hidden}
.nav .nav__cta,.nav__find{transition:transform .3s var(--ease),background-color .5s,color .5s,box-shadow .5s,opacity .4s,visibility .4s}
@media (max-width:959px){html.js:not(.is-split) .nav:not(.is-scrolled) .nav__cta,html.js:not(.is-split) .nav:not(.is-scrolled) .nav__find{opacity:0;visibility:hidden}}
.nav__links a{position:relative;z-index:1;display:inline-flex;align-items:center;height:40px;padding:0 14px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--label-2);transition:color .25s}
.nav__links a:hover,.nav__links a.is-on{color:var(--label)}
.nav__thumb{position:absolute;left:0;top:6px;height:40px;width:var(--w,0px);transform:translateX(var(--x,0px));border-radius:999px;opacity:0;
  background:var(--thumb);box-shadow:var(--thumb-sh);transition:transform .5s var(--ease),width .5s var(--ease),opacity .3s,background-color .5s}
.nav__thumb.is-set{opacity:1}
.nav__end{grid-column:3;justify-self:end;display:flex;align-items:center;gap:8px}
.nav .nav__cta{display:none;height:52px;padding:0 24px;font-size:15.5px}
.nav__find{display:inline-flex;align-items:center;justify-content:center;height:52px;width:52px;border-radius:999px;color:var(--label)}
.nav__find .ico{width:19px;height:19px;stroke-width:2.1}
.nav__find:active{transform:scale(.94)}
.nav__menu{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 20px 0 16px;border-radius:999px;font-size:15.5px;font-weight:600;color:var(--label);transition:transform .35s var(--ease),background-color .5s,color .5s,box-shadow .5s}
.nav__menu .ico{width:19px;height:19px;stroke-width:2.1;transition:transform .4s var(--ease)}
.nav__menu:active{transform:scale(.95)}
.nav__menu[aria-expanded="true"] .ico{transform:rotate(90deg)}
.menu{position:fixed;z-index:49;right:max(16px,env(safe-area-inset-right,0px));top:calc(env(safe-area-inset-top,0px) + 70px);width:min(320px,calc(100% - 32px));padding:8px;border-radius:28px;color:var(--label);
  background:var(--m-bg);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  transform-origin:100% 0;opacity:0;visibility:hidden;transform:scale(.9) translateY(-12px);transition:opacity .22s,transform .45s var(--ease),visibility .22s}
.menu.is-open{opacity:1;visibility:visible;transform:none}
.menu__l{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 14px 0 16px;border-radius:20px;font-size:18px;font-weight:600;letter-spacing:-.02em;position:relative}
.menu__l .ico{width:14px;height:14px;color:var(--label-3);stroke-width:2.4}
.menu__l:active,.menu__l:hover{background:var(--fill-2)}
.menu button.menu__l{width:100%;text-align:left}
.menu__l .ico--search{width:17px;height:17px;stroke-width:2.2}
.menu__l+.menu__l::before{content:"";position:absolute;left:16px;right:14px;top:0;height:.5px;background:var(--sep)}
html:not(.js) .nav{grid-template-columns:1fr auto auto}
@media (max-width:479px){.nav__find{display:none}.nav__menu{width:52px;padding:0;justify-content:center}.nav__menu span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
@media (min-width:600px){.nav .nav__cta{display:inline-flex}}
@media (min-width:1100px){.nav{padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}}
@media (min-width:1240px){
  .nav__links{display:flex}.nav__menu,.menu{display:none}
  /* Passt die ganze Leiste nicht neben seinen Kopf, bleibt es beim Menü */
  html.is-tight .nav__links{display:none}
  html.is-tight .nav__menu{display:inline-flex}
  html.is-tight .menu{display:block}
}
/* Am Telefon: eine Leiste unten wie in einer App. Sie erscheint nach dem Auftakt, der Daumen erreicht sie ohne Umgreifen. */
.tabbar{position:fixed;z-index:48;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);display:none;align-items:center;max-width:calc(100% - 20px);height:56px;padding:5px;border-radius:999px;color:var(--label);
  transform:translate(-50%,calc(100% + 48px));transition:transform .7s var(--ease),background-color .5s,box-shadow .5s}
.is-tabs .tabbar{transform:translate(-50%,0)}
.tabbar a{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 clamp(9px,3.5vw,16px);border-radius:999px;font-size:clamp(12.5px,3.55vw,14.5px);font-weight:600;letter-spacing:-.015em;color:var(--label-2);white-space:nowrap;transition:color .3s}
.tabbar a.is-on{color:var(--label)}
.tabbar__thumb{position:absolute;left:0;top:5px;height:46px;width:var(--w,0px);transform:translateX(var(--x,0px));border-radius:999px;opacity:0;background:var(--thumb);box-shadow:var(--thumb-sh);
  transition:transform .5s var(--ease),width .5s var(--ease),opacity .3s,background-color .5s}
.tabbar__thumb.is-set{opacity:1}
@media (max-width:759px){.js .tabbar{display:flex}}

/* ---------- Erster Akt: dunkle Bühne. Er steht gross im Bild, die Schlagzeile sitzt auf dem Anzug. ---------- */
:root{--sw:100vw;--iw:132vw}                                   /* Telefon: Das Bild ist breiter als das Fenster, die Bühne zeigt seine Mitte */
@supports (height:100svh){:root{--iw:clamp(100vw,calc((100svh - 45.3vw - 66px)/.81),132vw)}}   /* nur so gross, dass die Schlagzeile noch ins erste Fenster passt */
@media (min-width:600px){:root{--sw:min(100vw,68vh,620px);--iw:var(--sw)}}
.act1{position:relative;background:#000}
.pin{position:relative;z-index:2;width:var(--sw);height:calc(var(--iw)*.95);margin:0 auto;pointer-events:none}
.pin>*{pointer-events:auto}
.stage{position:absolute;inset:0;isolation:isolate;overflow:hidden;pointer-events:none}
/* Ein Rest Licht hinter ihm, damit sich das Haar vom Schwarz löst */
.stage::before{content:"";position:absolute;z-index:-2;inset:0;background:radial-gradient(46% 42% at var(--gx,50%) 34%,rgba(118,130,166,.3) 0%,rgba(62,70,96,.13) 56%,rgba(0,0,0,0) 100%);transition:opacity .5s}
/* Raster des Arbeitsraums, sichtbar im Mesh-Modus */
.stage::after{content:"";position:absolute;z-index:-1;inset:0;opacity:0;transition:opacity .6s;
  background-image:linear-gradient(rgba(41,151,255,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(41,151,255,.24) 1px,transparent 1px);background-size:40px 40px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(closest-side,#000 0%,transparent 96%);mask-image:radial-gradient(closest-side,#000 0%,transparent 96%)}
.is-mesh .stage::after{opacity:.6}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
/* Standbild, falls kein WebGL läuft: derselbe Ausschnitt wie das lebendige Porträt */
.stage img{position:absolute;left:calc((var(--sw) - var(--iw))/2);top:calc(var(--iw)*-.05);width:var(--iw);height:var(--iw);max-width:none}
.js .stage img{opacity:0}
.js .stage[data-fallback] img{opacity:1}
/* Sobald das Skript läuft, steht das Porträt fest im Fenster und zieht sich beim Weiterlesen in die Navigation zurück */
.dock .stage{position:fixed;z-index:1;inset:auto;top:0;left:50%;width:var(--sw);height:calc(var(--iw)*.95);margin-left:calc(var(--sw)/-2);will-change:transform,clip-path}
.dock.is-near .stage{z-index:51}
.dock.is-docked .stage::before{opacity:0}
/* Schalter und Status am Porträt */
.hud{position:absolute;z-index:5;left:16px;top:44%;display:grid;gap:8px;justify-items:start;text-align:left;opacity:calc(1 - var(--dp,0)*4)}
.hud__pill{position:relative;display:flex;align-items:center;height:44px;min-width:114px;padding:0 16px 0 12px;border-radius:999px;font-size:14.5px;font-weight:600;transition:background-color .35s,min-width .5s var(--ease)}
.hud:not([data-s="idle"]) .hud__pill{min-width:172px}
.hud__state,.hud__sw{display:flex;align-items:center;gap:9px;white-space:nowrap;transition:opacity .35s,transform .5s var(--ease)}
.hud__state{position:absolute;left:14px;font-size:13px;font-weight:500;color:var(--label-2);font-variant-numeric:tabular-nums;pointer-events:none}
.hud[data-s="idle"] .hud__state,.hud:not([data-s="idle"]) .hud__sw{opacity:0;transform:translateY(6px);pointer-events:none}
.hud__ico{width:14px;height:14px;border-radius:50%;border:2px solid color-mix(in srgb,var(--blue-t) 28%,transparent);border-top-color:var(--blue-t);animation:spin .7s linear infinite;flex:none}
.hud[data-s="done"] .hud__ico{border:0;animation:none;background:var(--label) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.8 10.4l2.8 2.8 5.6-6.2' fill='none' stroke='%231d1d1f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.hud[data-s="done"] .hud__state{color:var(--label)}
@keyframes spin{to{transform:rotate(360deg)}}
.hud__sw{cursor:pointer}
.hud__sw input{position:absolute;opacity:0;width:1px;height:1px}
.hud__m{display:none;width:25px;height:25px}
.sw{position:relative;width:38px;height:23px;border-radius:999px;background:rgba(120,120,128,.44);transition:background .3s;flex:none}
.sw::after{content:"";position:absolute;left:2px;top:2px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.06),0 2px 5px rgba(0,0,0,.25);transition:transform .35s var(--spring)}
.hud__sw input:checked+.sw{background:var(--green)}
.hud__sw input:checked+.sw::after{transform:translateX(15px)}
.hud__sw input:focus-visible+.sw,.hud__sw input:focus-visible~.hud__m{outline:3px solid color-mix(in srgb,var(--blue) 70%,transparent);outline-offset:3px;border-radius:999px}
.hud__info{display:grid;gap:3px;width:min(256px,calc(100vw - 32px));padding:12px 15px 13px;border-radius:18px;font-size:12.5px;line-height:1.38;color:var(--label-2);text-align:left;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.96);transform-origin:20px 0;transition:opacity .3s,transform .45s var(--ease),visibility .3s}
.hud__info b{font-size:13.5px;color:var(--label);font-weight:600}
.hud__tel{margin-top:5px;font-size:11.5px;color:var(--blue-t);font-variant-numeric:tabular-nums;white-space:nowrap}
.is-mesh .hud__info{opacity:1;visibility:visible;transform:none}
.is-away .hud{visibility:hidden;pointer-events:none}
/* Am Telefon ist der Schalter ein runder Knopf oben links, als Gegenstück zum Menü */
@media (max-width:599px){
  .hud{left:max(16px,env(safe-area-inset-left,0px));top:calc(env(safe-area-inset-top,0px) + 10px)}
  .hud__pill,.hud:not([data-s="idle"]) .hud__pill{width:52px;min-width:0;height:52px;padding:0;justify-content:center}
  .hud__state{inset:0;left:0;justify-content:center}
  .hud__state>span,.hud__l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .hud__sw{width:100%;height:100%;justify-content:center}
  .sw{display:none}.hud__m{display:block}
  .is-mesh .hud__pill{background:var(--blue);box-shadow:none}
  .hud__info{display:none}
}
/* Die Spalte: Auftakt und «Über mich» */
.col{position:relative;z-index:2;min-width:0;container-type:inline-size}
.hero{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;margin-top:calc(var(--iw)*-.14);
  padding:0 max(var(--gut),env(safe-area-inset-right,0px)) 0 max(var(--gut),env(safe-area-inset-left,0px))}
/* Der Anzug läuft unter der Schlagzeile ins Schwarz aus */
.hero::before{content:"";position:absolute;z-index:-1;left:50%;width:100vw;margin-left:-50vw;top:calc(var(--iw)*-.2);height:calc(var(--iw)*.34 + 2px);pointer-events:none;
  background:linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 24%,rgba(0,0,0,.72) 50%,rgba(0,0,0,.93) 72%,#000 100%)}
.eyebrow{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:17px;line-height:1.35;color:var(--label-2)}
.eyebrow b{font-weight:600;color:var(--label)}
h1{margin-top:10px;font-weight:700;font-size:clamp(44px,15.4vw,76px);line-height:.98;letter-spacing:-.045em}
h1 .l{display:block}
h1 .l>span{display:block;white-space:nowrap}
.hero__sub{margin-top:.62em;font-weight:600;font-size:clamp(22px,6.3vw,31px);line-height:1.12;letter-spacing:-.03em;color:var(--label-h);text-wrap:balance}
.hero__cta{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;width:100%}
.hero__cta .btn{height:54px;padding:0 26px 0 22px;font-size:17px;font-weight:600}
.hero__cta .btn .ico{width:17px;height:17px}
.hero__cta .link{font-size:17px}
/* Drei Beweise unter dem Knopf */
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin-top:34px;border-top:.5px solid var(--sep)}
.proof li{padding:16px 10px 0 0;min-width:0}
.proof li+li{padding-left:14px;border-left:.5px solid var(--sep)}
.proof b{display:block;font-size:clamp(27px,8vw,42px);font-weight:700;letter-spacing:-.045em;line-height:1.04;white-space:nowrap}
.proof li>span{display:block;margin-top:5px;font-size:13px;line-height:1.3;color:var(--label-2);text-wrap:pretty}
.about{padding:clamp(88px,13vh,150px) max(var(--gut),env(safe-area-inset-right,0px)) clamp(104px,16vh,180px) max(var(--gut),env(safe-area-inset-left,0px))}
/* Über mich: ein Absatz, der beim Scrollen Wort für Wort lesbar wird. Darunter der Weg zur Geschichte zum Anhören. */
.about__more{margin-top:clamp(26px,3.6vh,44px)}
.link--play{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:clamp(17px,1.45vw,21px);font-weight:500}
.link--play .ico{flex:none;width:15px;height:15px;margin:0}
.say{font-weight:600;font-size:clamp(27px,7.4vw,38px);line-height:1.17;letter-spacing:-.033em;text-wrap:pretty}
.js .say .w{opacity:calc(.22 + .78*clamp(0,calc((var(--p,1)*(var(--n) + 4) - var(--i))/4),1))}
@media (max-width:599px){
  .eyebrow span{display:none}
  .hero__cta .btn{flex:1 1 100%}
  .hero__cta .link{padding:6px 0}
}
@media (min-width:600px){
  .hero,.about{max-width:720px;margin-inline:auto}
  .hero{align-items:center;text-align:center}
  .eyebrow,.hero__cta{justify-content:center}
  h1{font-size:clamp(64px,10.5vw,92px)}
  .proof{text-align:center}
  .proof li{padding-right:14px}
}
/* Nebeneinander, sobald das Fenster breit genug dafür ist: Das Porträt steht rechts, ist so hoch wie das Fenster und läuft unten aus dem Bild.
   Es bleibt stehen, die Spalte links erzählt. Dieselbe Bedingung steht in app.js. */
@media (min-width:960px) and (min-aspect-ratio:8/5),(min-width:1200px) and (min-aspect-ratio:3/2){
  :root{--S:max(540px,100vh);--cw:max(700px,var(--S)*.74);
    /* Freier Rand rechts neben ihm: wächst mit dem Platz, bis die Textspalte ihre volle Breite hat */
    --mr:clamp(var(--S)*.07,100vw - var(--gut) - var(--cw) - 24px - var(--S)*.931,var(--S)*.2);
    --pw:calc(var(--S)*.931 + var(--mr));
    --fr:max(0px,100vw - var(--pw) - var(--gut) - var(--cw) - 24px)}
  .act1{display:grid;grid-template-columns:minmax(0,1fr) var(--pw)}
  .pin{grid-column:2;grid-row:1;position:sticky;top:0;width:100%;height:100vh;margin:0;align-self:start}
  .stage,.dock .stage{inset:auto;left:auto;right:0;top:0;width:var(--pw);height:var(--S);margin:0}
  .stage{--gx:56%}
  .stage img{left:0;top:calc(var(--S)*-.0606);width:calc(var(--S)*1.2121);height:calc(var(--S)*1.2121)}
  .hud{left:auto;right:max(var(--gut),calc(var(--S)*.03));top:69%;justify-items:end}
  .hud__info{transform-origin:calc(100% - 20px) 0}
  .col{grid-column:1;grid-row:1;--h:min(var(--S),168cqw);padding-left:calc(max(var(--gut),env(safe-area-inset-left,0px)) + var(--fr)*.6);padding-right:24px}
  .hero,.about{max-width:var(--cw);margin-inline:0;padding-inline:0}
  .hero{min-height:100vh;justify-content:center;align-items:flex-start;text-align:left;margin-top:0;padding:86px 0 40px}
  .hero::before{display:none}
  .eyebrow{justify-content:flex-start;font-size:clamp(14px,calc(var(--h)*.019),20px)}
  h1{font-size:min(calc(var(--h)*.1),160px);margin-top:calc(var(--h)*.02);line-height:.99}
  .hero__sub{font-size:clamp(20px,calc(var(--h)*.036),54px);margin-top:calc(var(--h)*.026)}
  .hero__cta{margin-top:calc(var(--h)*.042);justify-content:flex-start}
  .hero__cta .btn{height:clamp(50px,calc(var(--h)*.062),64px);padding:0 clamp(24px,calc(var(--h)*.032),36px) 0 clamp(20px,calc(var(--h)*.027),30px);font-size:clamp(16.5px,calc(var(--h)*.02),21px)}
  .hero__cta .link{font-size:clamp(16.5px,calc(var(--h)*.02),21px)}
  .proof{max-width:calc(var(--h)*.82);margin-top:calc(var(--h)*.062);text-align:left}
  .proof li{padding-top:calc(var(--h)*.02)}
  .proof b{font-size:clamp(28px,calc(var(--h)*.048),58px)}
  .proof li>span{font-size:clamp(13px,calc(var(--h)*.0162),17px)}
  .about{padding-top:14vh;padding-bottom:28vh}
  .say{font-size:clamp(25px,calc(var(--h)*.044),54px)}
  /* Navigation: Verweise links, er selbst rechts. Solange er gross im Bild steht, rücken Suche und Kontakt nach links, damit der Kopf frei bleibt. */
  .nav{display:flex}
  .nav__links{order:1}
  .nav__end{order:2}
  .brand{order:3;margin-left:auto;padding:4px;gap:0}
  .brand__n{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  html:not(.js) .brand{display:none}
  .js .nav__end{margin-left:auto;transition:transform .9s var(--ease)}
  .js .brand{margin-left:0}
  .js .nav:not(.is-scrolled) .nav__end{transform:translateX(calc(var(--shift,0px)*-1))}
}

/* ---------- Abschnitte: hell, grau oder dunkel ---------- */
.sec{padding-block:clamp(88px,10vw,150px);position:relative;z-index:2;background:var(--bg)}
.sec--alt{background:var(--bg-2);--tile:#fff;--here:#f5f5f7}
.sec__head{display:grid;gap:18px;margin-bottom:clamp(36px,4.6vw,64px)}
.h2{font-weight:700;font-size:clamp(38px,5.6vw,80px);line-height:1.03;letter-spacing:-.04em;text-wrap:balance;max-width:15em}
.h2--long{font-size:clamp(33px,4.5vw,64px);line-height:1.05;letter-spacing:-.038em;max-width:17em}
.h2--xl{font-size:clamp(46px,8.8vw,136px);line-height:.98;letter-spacing:-.047em;max-width:11.5em}
.h2 em{font-style:normal;color:var(--label-h)}
/* Überschriften werden beim Scrollen Wort für Wort lesbar. --p setzt das Skript (ohne Skript: 1), --n ist die Zahl der Wörter. */
.js .fill .w{opacity:calc(.2 + .8*clamp(0,calc((var(--p,1)*(var(--n) + 3) - var(--i))/3),1))}
.cnt{font-variant-numeric:tabular-nums}
.h2 em .c-red{color:var(--red)}
.lead{font-size:clamp(17px,1.5vw,21px);line-height:1.42;letter-spacing:-.018em;color:var(--label-2);max-width:35em;text-wrap:pretty}
.lead b{color:var(--label);font-weight:600}
@media (min-width:1040px){
  .sec__head--split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;column-gap:56px}
}
.sub{font-size:clamp(22px,2.3vw,28px);font-weight:700;letter-spacing:-.03em;margin:clamp(48px,6vw,88px) 0 18px}
.sub--xl{font-size:clamp(30px,4.2vw,58px);line-height:1.05;letter-spacing:-.04em;margin:clamp(76px,9vw,136px) 0 clamp(24px,3vw,44px);text-wrap:balance}
.kick{margin-bottom:14px;font-size:15px;line-height:1.35;color:var(--label-2)}

/* ---------- Blätter: Ein Abschnitt bleibt unten stehen, bis der nächste ihn überdeckt. So greifen die Abschnitte ineinander, statt hart zu wechseln. ---------- */
.stk>.sec,.fin>.sec{--rs:clamp(26px,4.2vw,56px);border-radius:var(--rs) var(--rs) 0 0;box-shadow:0 -1px 0 rgba(255,255,255,.1),0 -34px 80px -30px rgba(0,0,0,.6)}
/* Das überdeckte Blatt tritt zurück */
.stk>.sec::after{content:"";position:absolute;z-index:8;left:0;right:0;bottom:0;height:100vh;height:100lvh;max-height:100%;border-radius:inherit;background:#000;opacity:calc(var(--cv,0)*.5);pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  /* Der Rahmen ist um eine Fensterhöhe länger als sein Abschnitt. In diesem Stück bleibt der Abschnitt stehen, während der nächste Rahmen (um dieselbe Höhe hochgezogen) darüberfährt. */
  .js .stk::after{content:"";display:block;height:100vh;height:100lvh}
  .js .stk+.stk,.js .stk+.fin{margin-top:-100vh;margin-top:-100lvh}
  /* --sh ist die Höhe des Abschnitts, --pin ein Stück Fensterhöhe (beides setzt das Skript). Der Abschnitt bleibt nicht schon stehen, wenn sein Ende unten am Fensterrand
     auftaucht: Er läuft noch um --pin weiter hoch. So steht sein letzter Inhalt gut lesbar im Bild (am Telefon über den Leisten), bevor das nächste Blatt darüberzieht.
     Ohne --sh bleibt alles, wie es ohne Skript wäre. */
  .js .stk>.sec{position:sticky;top:min(0px,calc(100vh - var(--pin,0px) - var(--sh)));top:min(0px,calc(100dvh - var(--pin,0px) - var(--sh)))}
}

/* ---------- Highlights: grosse Karten zum Durchblättern ---------- */
.hl{container-type:inline-size;padding-bottom:clamp(56px,6vw,96px);overflow:hidden}
.hl__track{--cw:min(1264px,calc(100cqw - 2*var(--gut) - 28px));--gap:clamp(10px,1.4vw,20px);position:relative;display:flex;gap:var(--gap);
  margin:calc(clamp(30px,4vw,56px) - 22px) 0 -22px;padding-block:22px;      /* oben und unten Luft, damit gekippte Karten nicht beschnitten werden */
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline-offset:-3px}
.hl__track::-webkit-scrollbar{display:none}
.hl__track::before,.hl__track::after{content:"";flex:none;width:calc((100cqw - var(--cw))/2 - var(--gap))}     /* Rand, damit auch die erste und die letzte Karte in der Mitte stehen können */
/* Die Karte selbst bleibt stehen: An ihr rastet das Wischen ein. Was sich bewegt, ist ihr Inhalt. */
.hl__card{flex:none;width:var(--cw);height:clamp(430px,calc(100vh - 250px),680px);scroll-snap-align:center;perspective:1500px;--pad:clamp(24px,3.2vw,48px)}
.hl__in{position:relative;isolation:isolate;height:100%;border-radius:28px;overflow:hidden;background:var(--bg-2);color:#1d1d1f}
/* Beim Wischen: --d ist der Abstand der Karte zur Mitte (in Kartenbreiten), --a sein Betrag. Die Karte dreht sich weg und tritt zurück, ihr Bild zieht nach. */
.js .hl__in{transform:rotateX(calc(var(--vy,0)*-7deg)) rotateY(calc(var(--d,0)*-11deg)) scale(calc(1 - var(--a,0)*.07));will-change:transform}
.js .hl__img{scale:1.06}
.js .hl__in::before{content:"";position:absolute;z-index:6;inset:0;background:#000;opacity:calc(var(--a,0)*.32);pointer-events:none}
.js .hl__img,.js .hl__foot,.js .hl__logos,.js .hl__tp{translate:calc(var(--d,0)*-9%) calc(var(--vy,0)*-3%)}
.js .hl__cap{translate:calc(var(--d,0)*5%) 0}
.hl__cap{position:absolute;z-index:3;left:0;top:0;max-width:min(100%,22em);padding:var(--pad);font-size:clamp(21px,2.3vw,30px);font-weight:600;line-height:1.14;letter-spacing:-.026em;text-wrap:balance}
.hl__cap b{font-weight:600}
.hl__cap span{opacity:.6}
.hl__img{position:absolute;z-index:0;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
/* 1 (solange ein Projekt gezeigt wird) die Illustration aus der App, der Himmel läuft in die Karte aus */
.hl__card--app .hl__in{background:#2e3343;color:#f5f5f7}
.hl__card--app .hl__img{inset:auto -10% 0 -10%;width:120%;height:76%;object-position:68% 100%;-webkit-mask-image:linear-gradient(transparent,#000 24%);mask-image:linear-gradient(transparent,#000 24%)}
/* 1 (solange kein Projekt gezeigt wird) Telepski: der Schriftzug und die drei Bereiche */
.hl__card--telepski .hl__in{background:#0c0c0e radial-gradient(120% 72% at 50% 0%,rgba(214,179,108,.22),rgba(214,179,108,0) 70%);color:#f5f5f7}
.hl__tp{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:var(--pad);display:grid;gap:clamp(14px,2vw,28px);justify-items:start}
.hl__tp img{height:clamp(15px,1.9cqw,26px);width:auto;max-width:100%}
.hl__words{display:grid}
.hl__words i{font-style:normal;font-size:clamp(46px,min(9.6cqw,11.5vh),138px);font-weight:700;line-height:.95;letter-spacing:-.05em}
.hl__words i:nth-child(2){opacity:.55}
.hl__words i:nth-child(3){opacity:.3}
/* 2 Security: das Porträt, halb Foto, halb Gitter */
.hl__card--mesh .hl__in{background:#000;color:#f5f5f7}
.hl__card--mesh .hl__img{inset:0 2% 0 auto;width:auto;height:100%;object-fit:contain;object-position:100% 100%}
/* 3 TryHackMe: die Zahl gross, darunter das Original-Badge */
.hl__foot{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:var(--pad);display:flex;align-items:flex-end;justify-content:space-between;gap:18px 40px}
.hl__big{display:block;font-size:clamp(108px,20cqw,292px);font-weight:700;line-height:.74;letter-spacing:-.065em;margin-left:-.04em;padding-bottom:.21em;white-space:nowrap}
.hl__badge{flex:0 1 420px;min-width:0;width:420px;height:auto;margin-bottom:.4%;filter:drop-shadow(0 14px 18px rgba(0,0,0,.2))}
/* 4 Arbeitsweise: das Foto, die Zeile steht unten auf dem Jackett */
.hl__card--photo .hl__in{color:#fff;background:#1b2a33}
.hl__card--photo .hl__img{inset:0 -10%;width:120%;object-position:44% 20%}
.hl__card--photo .hl__in::after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 46%,rgba(4,12,18,.78) 100%);pointer-events:none}
.hl__card--photo .hl__cap{top:auto;bottom:0}
/* 5 Archiv: die Logos der Projekte */
.hl__logos{position:absolute;z-index:1;left:0;right:0;top:38%;bottom:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1vw,14px);align-content:start;padding:0 var(--pad);
  -webkit-mask-image:linear-gradient(#000 58%,transparent 100%);mask-image:linear-gradient(#000 58%,transparent 100%)}
.hl__logos .logo{width:auto;height:clamp(54px,7cqw,96px);border-radius:clamp(12px,1.3cqw,18px);box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 10px 20px -14px rgba(0,0,0,.3)}
.hl__logos .logo img{width:70%;height:52%}
.hl__logos .logo--wide{grid-column:span 2}
.hl__logos .logo--wide img{width:84%;height:36%}
@media (max-width:759px){
  .hl__card{height:clamp(420px,122vw,560px)}
  .hl__card--app .hl__img{height:66%;object-position:70% 100%}
  .hl__card--photo .hl__img{object-position:47% 20%}
  .hl__card--mesh .hl__img{inset:auto 0 0 0;width:100%;height:74%;object-position:50% 100%}
  .hl__logos{grid-template-columns:repeat(3,minmax(0,1fr));top:38%}
  .hl__foot{flex-direction:column;align-items:flex-start}
  .hl__big{font-size:clamp(104px,31cqw,150px)}
  .hl__badge{flex:none;width:100%;margin:0}
}
/* Punkte: klein und leise. Der laufende Punkt füllt sich, bis die nächste Karte kommt. */
.hl__nav{display:flex;justify-content:center;margin-top:clamp(8px,1.2vw,16px)}
.dotnav{display:flex;align-items:center}
.dotnav button{position:relative;width:24px;height:44px;transition:width .5s var(--ease)}
.dotnav button::before,.dotnav button::after{content:"";position:absolute;left:9px;right:9px;top:19px;height:6px;border-radius:999px}
.dotnav button::before{background:var(--label-4);transition:background .3s}
.dotnav button.is-on{width:46px}
.dotnav button.is-on::before{background:var(--off)}
.dotnav button.is-on::after{background:var(--label);transform-origin:0 50%}
.hl.is-auto .dotnav button.is-on::after{animation:fill0 var(--dur,5.4s) linear forwards}
.hl.is-auto.is-hold .dotnav button.is-on::after,.hl.is-auto.is-covered .dotnav button.is-on::after{animation-play-state:paused}
@keyframes fill0{from{transform:scaleX(0)}}
html:not(.js) .hl__nav{display:none}

/* ---------- Karten, die einfliegen: aus der Tiefe, gestaffelt, mit einer Lichtkante (Schritte, Werkzeuge, die drei Bereiche bei Telepski) ---------- */
.fly>li{perspective:1100px;min-width:0}
.card{position:relative;height:100%}
.fx{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.fx::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px var(--blue-t);opacity:0}                     /* Rahmen, der beim Aufsetzen kurz aufleuchtet */
.fx::after{content:"";position:absolute;top:0;bottom:0;left:0;width:44%;opacity:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--blue-t) 13%,transparent) 62%,color-mix(in srgb,var(--blue-t) 62%,transparent) 99%,transparent)}   /* Lichtkante, die einmal über die Karte läuft */
@keyframes flyin{
  0%{opacity:0;translate:36% 76px -560px;rotate:y -34deg;scale:.9;filter:blur(8px)}
  50%{opacity:1;filter:blur(0)}
  100%{opacity:1;translate:0 0 0;rotate:y 0deg;scale:1;filter:blur(0)}
}
@keyframes cardfill{from{background-size:0% 100%}}
@keyframes cardwipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fxring{0%{opacity:0}12%,62%{opacity:.95}100%{opacity:0}}
@keyframes fxscan{0%{opacity:0;translate:-100% 0}10%{opacity:1}88%{opacity:1}100%{opacity:0;translate:128% 0}}
@keyframes fxnum{0%{opacity:0;color:var(--blue-t)}18%{opacity:1}55%{color:var(--blue-t)}100%{color:var(--label-4)}}
.fly>li>.card{background-image:linear-gradient(var(--tile),var(--tile));background-color:transparent;background-repeat:no-repeat;background-size:100% 100%}
.card>:not(.fx){position:relative;z-index:1}
@media (prefers-reduced-motion:no-preference){
  /* Ablauf je Karte: Sie fliegt als blauer Umriss ein, setzt auf, dann füllt eine Lichtkante von links Fläche und Inhalt aus. --i staffelt die Karten. */
  .js .fly:not(.is-in) .card{opacity:0}
  .js .fly.is-in .card{animation:flyin .95s cubic-bezier(.16,1,.3,1) backwards,cardfill .72s cubic-bezier(.5,0,.2,1) backwards;animation-delay:calc(var(--i,0)*95ms),calc(var(--i,0)*95ms + .46s)}
  .js .fly.is-in .card>:not(.fx){animation:cardwipe .72s cubic-bezier(.5,0,.2,1) backwards;animation-delay:calc(var(--i,0)*95ms + .46s)}
  .js .fly.is-in .fx::before{animation:fxring 1.5s ease-out both;animation-delay:calc(var(--i,0)*95ms)}
  .js .fly.is-in .fx::after{animation:fxscan .72s cubic-bezier(.5,0,.2,1) both;animation-delay:calc(var(--i,0)*95ms + .46s)}
  .js .steps.fly.is-in .card::before{animation:fxnum 1.7s ease-out both;animation-delay:calc(var(--i,0)*95ms + .5s)}
  /* Untereinander (Telefon): Jede Karte fliegt beim Scrollen von der Seite ein, abwechselnd von links und rechts. --q setzt das Skript (0 draussen, 1 am Platz), --d ist die Seite.
     Im Flug ist sie ein blauer Umriss. Setzt sie auf («is-land»), füllt die Lichtkante Fläche und Inhalt von der Seite her, von der sie kam. */
  .js .fly.is-scrub>li{--d:-1;--e:calc(1 - var(--q,0))}
  .js .fly.is-scrub>li:nth-child(even){--d:1}
  .js .fly.is-scrub>li>.card{opacity:calc(var(--q,0)*5);animation:none;will-change:transform;
    transform:translate3d(calc(var(--d)*var(--e)*108%),calc(var(--e)*26px),calc(var(--e)*-260px)) rotateY(calc(var(--d)*var(--e)*-44deg)) rotateZ(calc(var(--d)*var(--e)*4deg))}
  .js .fly.is-scrub>li:nth-child(even)>.card{background-position:100% 0}
  .js .fly.is-scrub>li:not(.is-land)>.card{background-size:0% 100%}
  .js .fly.is-scrub>li:not(.is-land)>.card>:not(.fx){animation:none;clip-path:inset(0 100% 0 0)}
  .js .fly.is-scrub>li:not(.is-land) .fx::before{animation:none;opacity:.95}
  .js .fly.is-scrub>li:not(.is-land) .fx::after{animation:none}
  .js .steps.fly.is-scrub>li:not(.is-land) .card::before{animation:none;color:var(--blue-t)}
  .js .fly.is-scrub>li.is-land>.card{animation:cardfill .68s cubic-bezier(.5,0,.2,1) backwards}
  .js .fly.is-scrub>li.is-land>.card>:not(.fx){animation:cardwipe .68s cubic-bezier(.5,0,.2,1) backwards}
  .js .fly.is-scrub>li.is-land:nth-child(even)>.card>:not(.fx){animation-name:cardwipe-r}
  .js .fly.is-scrub>li.is-land .fx::before{animation:fxout 1.1s ease-out both}
  .js .fly.is-scrub>li.is-land .fx::after{animation:fxscan .68s cubic-bezier(.5,0,.2,1) both}
  .js .fly.is-scrub>li.is-land:nth-child(even) .fx::after{left:auto;right:0;scale:-1 1;animation-name:fxscan-r}
  .js .steps.fly.is-scrub>li.is-land .card::before{animation:fxnum-l 1.5s ease-out both}
}
@keyframes cardwipe-r{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes fxscan-r{0%{opacity:0;translate:100% 0}10%{opacity:1}88%{opacity:1}100%{opacity:0;translate:-128% 0}}
@keyframes fxout{0%,45%{opacity:.95}100%{opacity:0}}
@keyframes fxnum-l{0%,45%{color:var(--blue-t)}100%{color:var(--label-4)}}
/* Im Raster: Die Spalten laufen beim Scrollen leicht gegeneinander (--vy setzt das Skript: 1 unten im Fenster, 0 in der Mitte, -1 oben) */
@media (min-width:700px) and (prefers-reduced-motion:no-preference){
  .js [data-par]>*{--dp:0px;transform:translate3d(0,calc(var(--vy,0)*var(--dp)),0)}
  .js [data-par]>:nth-child(2n){--dp:30px}
}
@media (min-width:1100px) and (prefers-reduced-motion:no-preference){
  .js .steps>:nth-child(n),.js .kv>:nth-child(n),.js .areas>:nth-child(n){--dp:0px}
  .js .steps>:nth-child(3n+2),.js .kv>:nth-child(3n+2),.js .areas>:nth-child(3n+2){--dp:28px}
  .js .steps>:nth-child(3n),.js .kv>:nth-child(3n),.js .areas>:nth-child(3n){--dp:56px}
}
.js #hl[data-par]>*{transform:none}
/* Mit dem Zeiger: Die Karte neigt sich ihm zu, ein Lichtfleck folgt (--mx/--my in Pixeln, --tx/--ty von -.5 bis .5) */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .card::after,.cred::after,.quote::after,.mail::after{content:"";position:absolute;z-index:0;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
    background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),var(--glint,rgba(255,255,255,.9)),transparent 62%)}
  .card:hover::after,.cred:hover::after,.quote:hover::after,.mail:hover::after{opacity:1}
  .js .fly:not(.is-scrub) .card{transition:transform .25s ease-out}
  .js .fly:not(.is-scrub) .card:hover{transform:rotateX(calc(var(--ty,0)*-7deg)) rotateY(calc(var(--tx,0)*8deg)) translateZ(10px)}
}
.dk,.sec--dark{--glint:rgba(255,255,255,.075)}

/* ---------- Telepski: die dunkle Bühne ---------- */
.tpk--lead{padding-bottom:0}           /* folgt direkt ein Projekt, gehören beide zusammen */
.tpk__logo{display:inline-flex;align-items:center;gap:10px;max-width:100%;margin-bottom:clamp(28px,3.2vw,48px);color:var(--label-3)}
.tpk__logo img{height:clamp(18px,1.9vw,27px);width:auto;min-width:0;max-width:calc(100% - 24px);object-fit:contain;object-position:0 50%}
.tpk__logo .ico{width:14px;height:14px;stroke-width:2.2;transition:transform .35s var(--ease),color .2s}
.tpk__logo:hover .ico{color:var(--blue-t);transform:translate(2px,-2px)}
.tpk__text{display:grid;gap:20px;margin-top:clamp(28px,3.6vw,56px)}
.tpk__close{font-size:clamp(23px,2.4vw,32px);font-weight:600;letter-spacing:-.03em;line-height:1.12}
.tpk__soon{font-size:15px;color:var(--label-2)}
@media (min-width:1040px){.tpk__text{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;column-gap:56px}.tpk__close{text-align:right}}
/* Was ich dort mache: drei Karten */
.areas{display:grid;gap:12px;margin-top:clamp(44px,5.4vw,84px)}
.area{display:flex;flex-direction:column;min-height:clamp(190px,18vw,270px);padding:clamp(24px,2.5vw,36px);border-radius:28px;background:var(--tile)}
.areas>li{display:grid}
.area small{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--gold)}
.area h3{margin-top:auto;padding-top:28px;font-size:clamp(23px,2.2vw,30px);font-weight:600;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
.area p{margin-top:8px;color:var(--label-2);line-height:1.42;text-wrap:pretty}
@media (min-width:820px){.areas{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}

/* ---------- Ein Telepski-Projekt: der Film gross, darunter laufen die Schritte mit. Danach Kacheln mit Ausschnitten aus der App. ---------- */
/* Der Abschnitt ist so breit, dass Film und Schritte zusammen in ein Fenster passen */
.film{--fw:max(560px,calc((100vh - 250px)*16/9))}
.film>.wrap{max-width:min(1328px,calc(var(--fw) + 2*var(--gut)));container-type:inline-size}
@container (max-width:1039px){.film .sec__head--split{grid-template-columns:minmax(0,1fr);align-items:start}}
.film__v{position:relative;border-radius:16px;overflow:hidden;background:#111114;box-shadow:0 0 0 1px rgba(255,255,255,.11),0 50px 90px -50px rgba(214,179,108,.22)}
.film__v video,.film__v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film__v:not([style]){aspect-ratio:16/9}
.chaps{position:relative;display:grid;column-gap:16px;margin-top:22px}
.chap{display:grid;gap:3px;align-content:start;width:100%;padding:0 0 18px;text-align:left;color:var(--label-2);transition:opacity .35s}
.chap i{position:relative;display:block;height:2px;margin-bottom:11px;border-radius:2px;background:var(--sep);overflow:hidden}
.chap i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--gold);transform:scaleX(var(--f,0));transform-origin:0 50%}
.chap b{font-size:16px;font-weight:600;letter-spacing:-.022em;line-height:1.25;color:var(--label)}
.chap b em{font-style:normal;font-weight:600;color:var(--label-3);margin-right:.5em;font-variant-numeric:tabular-nums}
.chap span{font-size:14.5px;line-height:1.4;text-wrap:pretty}
.film.is-playing.has-chap .chap:not(.is-on){opacity:.5}
@media (hover:hover){.film.is-playing.has-chap button.chap:hover{opacity:1}}
.film__meta{margin-top:10px;font-size:15px;line-height:1.45;color:var(--label-3);max-width:60em}
.chaps--n3{--n:3}.chaps--n4{--n:4}.chaps--n5{--n:5}.chaps--n6{--n:6}.chaps--n7{--n:7}.chaps--n8{--n:4}
@media (min-width:640px){.film__v{border-radius:22px}}
@media (min-width:1100px){.film__v{border-radius:26px}}
/* Am Telefon liegen die Schritte als Karten nebeneinander und laufen mit dem Film mit */
@container (max-width:559px){
  .chaps{display:flex;gap:10px;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .chaps::-webkit-scrollbar{display:none}
  .chaps li{flex:none;width:min(66cqw,250px);scroll-snap-align:start}
  .chap{height:100%;padding:16px 16px 18px;border-radius:20px;background:var(--tile)}
  .film__meta{margin-top:14px}
}
@container (min-width:560px){
  .chaps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .chaps--n6,.chaps--n3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container (min-width:1000px){.chaps{grid-template-columns:repeat(var(--n,7),minmax(0,1fr))}}
/* Kacheln: Satz oben, darunter ein echter Ausschnitt aus der App */
.bento{display:grid;gap:12px}
.tile{--pad:clamp(24px,2.7vw,40px);position:relative;display:flex;flex-direction:column;min-width:0;border-radius:28px;background:var(--tile);overflow:hidden}
.tile__t{padding:var(--pad) var(--pad) 0}
.tile__t h4{font-size:clamp(23px,2.4vw,32px);font-weight:600;letter-spacing:-.032em;line-height:1.08;text-wrap:balance}
.tile__t p{margin-top:8px;font-size:clamp(16px,1.35vw,19px);line-height:1.4;color:var(--label-2);max-width:25em;text-wrap:pretty}
.tile__m{flex:1;display:flex;align-items:flex-start;min-height:0;margin-top:clamp(22px,2.4vw,34px);padding-left:var(--pad);overflow:hidden}
.tile__m img{flex:none;width:100%;max-width:none;height:auto;border-radius:14px 0 0 0;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.tile--x .tile__m img{width:150%}
.tile--b .tile__m{align-items:flex-end;padding-right:var(--pad)}
.tile--b .tile__m img{border-radius:14px 14px 0 0}
@media (min-width:900px){
  .bento{grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
  .tile{height:clamp(480px,44cqw,640px)}
  .tile--wide{grid-column:span 7}
  .tile--tall{grid-column:span 5}
}
@media (max-width:899px){.tile--x .tile__m img{width:190%}}

/* ---------- Arbeitsweise ---------- */
.photo__f{overflow:hidden;border-radius:22px;background:var(--bg-2)}
.photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:44% 0;transform:scale(var(--z,1));transform-origin:46% 34%;will-change:transform}
.photo figcaption{margin-top:12px;font-size:15px;line-height:1.35;color:var(--label-2)}
/* Sechs Schritte als Karten: am Telefon zum Wischen, sonst als Raster */
/* Am Telefon stehen die Karten untereinander und fliegen beim Scrollen von links und rechts ein (siehe «.is-scrub»). Ab 700 px ein Raster. */
.steps,.kv{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.steps{counter-reset:s;margin-top:clamp(44px,5.4vw,80px)}
.steps>li{counter-increment:s}
.steps .card{display:flex;flex-direction:column;padding:24px 24px 26px;border-radius:28px;background:var(--tile)}
.steps .card::before{content:counter(s);position:relative;z-index:1;display:block;margin-bottom:auto;padding-bottom:82px;font-size:44px;font-weight:700;line-height:1;letter-spacing:-.04em;color:var(--label-4);font-variant-numeric:tabular-nums}
.steps h3{font-size:clamp(22px,2vw,26px);font-weight:600;letter-spacing:-.03em;line-height:1.14;text-wrap:balance}
.steps p{margin-top:8px;color:var(--label-2);line-height:1.43;text-wrap:pretty}
.kv{gap:10px}
.kv .card{padding:20px 22px 22px;border-radius:22px;background:var(--tile)}
.kv h4{font-size:14.5px;font-weight:600;color:var(--label-3)}
.kv p{margin-top:6px;font-size:18px;font-weight:600;letter-spacing:-.022em;line-height:1.3;text-wrap:pretty}
/* ---------- Oben rechts in jeder Schritt-Karte lebt eine kleine Szene: Fragen, Spezifikation, Tickets, Agenten, Prüfungen, der Test durch einen Menschen ---------- */
.vg{position:absolute;z-index:1;top:24px;right:24px;width:min(60%,224px);height:104px;display:flex;flex-direction:column;justify-content:center;gap:7px;pointer-events:none;
  --chip:#fff;--chip-sh:0 0 0 .5px rgba(0,0,0,.05),0 8px 16px -10px rgba(0,0,0,.22);--bar:#dcdce1;--ink:#1d1d1f}
.card>.vg{position:absolute}
.vg i,.vg b{display:block;font-style:normal}
/* 1 Fragen und Antworten */
.vg--ask i{position:relative;height:26px;border-radius:13px;background:var(--chip);box-shadow:var(--chip-sh)}
.vg--ask i::before{content:"";position:absolute;left:12px;right:28px;top:9.5px;height:7px;border-radius:4px;background:var(--bar)}
.vg--ask .q{width:70%;border-bottom-left-radius:4px}
.vg--ask .q::after{content:"?";position:absolute;right:11px;top:4px;font-size:13px;font-weight:700;line-height:18px;color:var(--blue)}
.vg--ask .a{width:48%;align-self:flex-end;background:var(--blue);box-shadow:none;border-bottom-right-radius:4px}
.vg--ask .a::before{right:12px;background:rgba(255,255,255,.6)}
.vg--ask .q2{width:44%}
/* 2 Die Spezifikation: ein Blatt, auf dem das Ziel Punkt für Punkt entsteht */
.vg--spec{justify-content:flex-start;padding:13px 14px;border-radius:12px;background:var(--chip);box-shadow:var(--chip-sh)}
.vg--spec{gap:10px}
.vg--spec .t{width:42%;height:8px;border-radius:4px;background:var(--ink)}
.vg--spec .r{position:relative;height:8px;margin-left:19px;width:calc(var(--w) - 19px);border-radius:4px;background:linear-gradient(var(--bar),var(--bar)) no-repeat 0 0/100% 100%}
.vg--spec .r::before{content:"";position:absolute;left:-19px;top:-1.5px;width:11px;height:11px;border-radius:3.5px;box-shadow:inset 0 0 0 1.5px var(--bar)}
/* 3 Ein grosser Block wird zu vier Tickets */
.vg--cut{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px}
.vg--cut i{position:relative;border-radius:10px;background:var(--chip);box-shadow:var(--chip-sh)}
.vg--cut i::before{content:"";position:absolute;left:11px;top:12px;width:18px;height:6px;border-radius:3px;background:var(--blue)}
.vg--cut i:nth-child(2)::before{background:var(--green)}.vg--cut i:nth-child(3)::before{background:#ff9f0a}.vg--cut i:nth-child(4)::before{background:#bf5af2}
.vg--cut i::after{content:"";position:absolute;left:11px;right:16px;top:26px;height:6px;border-radius:3px;background:var(--bar)}
/* 4 Drei Agenten arbeiten gleichzeitig */
.vg--run{gap:13px;padding-inline:2px}
.vg--run i{position:relative;height:10px;border-radius:5px;background:var(--bar);overflow:hidden}
.vg--run i::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--blue);transform-origin:0 50%;transform:scaleX(var(--w,1))}
.vg--run i:first-child::before{background:var(--green)}
/* 5 Tests, Typen, Build: eins nach dem anderen wird grün */
.vg--check{gap:6px;align-items:flex-end}
.vg--check i{position:relative;display:flex;align-items:center;width:118px;height:29px;padding-left:34px;border-radius:15px;background:var(--chip);box-shadow:var(--chip-sh);font-size:13px;font-weight:600;letter-spacing:-.012em;line-height:1;color:var(--ink)}
.vg--check i::before,.vg--check i::after{content:"";position:absolute;left:10px;top:7.5px;width:14px;height:14px;border-radius:50%}
.vg--check i::before{background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.6 11.4l3 3 5.8-6.6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.vg--check i::after{border:2px solid color-mix(in srgb,var(--blue) 24%,transparent);border-top-color:var(--blue);opacity:0}
/* 6 Ein Mensch testet: ein Feld ausfüllen, den Knopf drücken, es stimmt */
.vg--try{justify-content:flex-start;gap:9px;padding:14px;border-radius:12px;background:var(--chip);box-shadow:var(--chip-sh);overflow:hidden}
.vg--try .f{position:relative;flex:none;height:26px;border-radius:8px;box-shadow:inset 0 0 0 1.5px var(--bar)}
.vg--try .f::before{content:"";position:absolute;left:10px;top:9.5px;width:52%;height:7px;border-radius:4px;background:var(--ink);transform-origin:0 50%}
.vg--try .b{position:relative;flex:none;align-self:flex-start;width:46%;height:26px;border-radius:13px;background:var(--blue)}
.vg--try .b::before{content:"";position:absolute;left:30%;right:30%;top:9.5px;height:7px;border-radius:4px;background:rgba(255,255,255,.78)}
.vg--try b{position:absolute;z-index:1;left:calc(14px + 23% - 22px);top:57px;width:24px;height:24px;border-radius:50%;background:rgba(60,60,67,.26);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75),0 2px 7px rgba(0,0,0,.2)}   /* der Finger */
.vg--try::after{content:"";position:absolute;right:10px;bottom:10px;width:18px;height:18px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.6 11.4l3 3 5.8-6.6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;box-shadow:0 0 0 3px var(--chip)}
/* Die Bewegung. Eine Szene spielt, sobald ihre Karte «.vgo» trägt (setzt das Skript): beim Einflug, beim Wischen nach vorn, mit dem Zeiger. */
@keyframes vgpop{from{opacity:0;scale:.7;translate:0 6px}}
@keyframes vggrow{from{background-size:0% 100%}}
@keyframes vgsx{from{transform:scaleX(0)}}
@keyframes vgin{from{opacity:0}}
@keyframes vgspin{0%{opacity:1;rotate:0deg}92%{opacity:1}100%{opacity:0;rotate:720deg}}
@keyframes vgcut{from{translate:var(--x) var(--y);border-radius:0;box-shadow:none}}
@keyframes vgtap{0%{opacity:0;translate:96px 34px}16%{opacity:1}58%{translate:0 0;scale:1}70%{scale:.74}84%,100%{translate:0 0;scale:1}}
@keyframes vgpress{0%,100%{scale:1}45%{scale:.93}}
@keyframes vgdot{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .js li:not(.vgo)>.card>.vg{opacity:0}
  .js .vgo .vg--ask i{animation:vgpop .5s var(--spring) backwards}
  .js .vgo .vg--ask .a{animation-delay:.55s}.js .vgo .vg--ask .q2{animation-delay:1.1s}
  .js .vgo .vg--ask .q2::before{animation:vgdot .8s ease-in-out 1.3s 3}
  .js .vgo .vg--spec{animation:vgpop .5s var(--spring) backwards}
  .js .vgo .vg--spec .t{transform-origin:0 50%;animation:vgsx .4s var(--ease) .35s backwards}
  .js .vgo .vg--spec .r{animation:vggrow .5s var(--ease) backwards}
  .js .vgo .vg--spec .r:nth-child(2){animation-delay:.7s}.js .vgo .vg--spec .r:nth-child(3){animation-delay:1.05s}.js .vgo .vg--spec .r:nth-child(4){animation-delay:1.4s}
  .js .vgo .vg--spec .r::before{animation:vgin .3s ease backwards;animation-delay:inherit}
  .js .vgo .vg--cut i{animation:vgcut .7s var(--ease) .5s backwards}
  .js .vgo .vg--cut i:nth-child(1){--x:4px;--y:4px}.js .vgo .vg--cut i:nth-child(2){--x:-4px;--y:4px}.js .vgo .vg--cut i:nth-child(3){--x:4px;--y:-4px}.js .vgo .vg--cut i:nth-child(4){--x:-4px;--y:-4px}
  .js .vgo .vg--cut i::before{animation:vgin .4s ease 1s backwards}
  .js .vgo .vg--cut{animation:vgin .35s ease backwards}
  .js .vgo .vg--run i{animation:vgin .3s ease backwards}
  .js .vgo .vg--run i::before{animation:vgsx var(--t,1.6s) cubic-bezier(.3,.1,.3,1) .2s backwards}
  .js .vgo .vg--check i{animation:vgpop .45s var(--spring) backwards}
  .js .vgo .vg--check i:nth-child(2){animation-delay:.12s}.js .vgo .vg--check i:nth-child(3){animation-delay:.24s}
  .js .vgo .vg--check i::before{animation:vgpop .45s var(--spring) backwards;animation-delay:var(--d)}
  .js .vgo .vg--check i::after{animation:vgspin var(--d) linear both}
  .js .vgo .vg--check i:nth-child(1){--d:.75s}.js .vgo .vg--check i:nth-child(2){--d:1.35s}.js .vgo .vg--check i:nth-child(3){--d:1.95s}
  .js .vgo .vg--try{animation:vgpop .5s var(--spring) backwards}
  .js .vgo .vg--try .f::before{animation:vgsx .5s var(--ease) .5s backwards}
  .js .vgo .vg--try b{animation:vgtap 1.25s cubic-bezier(.3,0,.2,1) 1s backwards}
  .js .vgo .vg--try .b{animation:vgpress .32s ease-out 1.78s}
  .js .vgo .vg--try::after{animation:vgpop .5s var(--spring) 2.2s backwards}
}

/* Ein Satz aus dem Arbeitszeugnis */
.quote{position:relative;margin-top:clamp(12px,1.4vw,16px);padding:clamp(26px,4.4vw,64px);border-radius:28px;background:var(--tile)}
.quote>*{position:relative;z-index:1}
.quote blockquote{margin:0}
.quote blockquote p{max-width:21em;font-size:clamp(25px,3.4vw,48px);font-weight:600;letter-spacing:-.035em;line-height:1.1;text-wrap:balance}
.quote figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:clamp(22px,2.8vw,40px);font-size:15px;line-height:1.35;color:var(--label-2)}
.quote figcaption .logo{width:92px;height:32px;border-radius:9px}
.quote figcaption .link{font-size:17px}
.credit{margin-top:22px;font-size:15px;line-height:1.45;color:var(--label-2)}
@media (min-width:700px){
  .photo__f{border-radius:28px}
  .photo img{aspect-ratio:2/1;object-position:50% 12%}
  .steps,.kv{grid-template-columns:1fr 1fr;gap:16px}
  .steps .card{min-height:clamp(290px,23vw,330px);padding:clamp(24px,2.4vw,34px)}
  .steps .card::before{padding-bottom:36px}
  .vg{top:clamp(24px,2.4vw,34px);right:clamp(24px,2.4vw,34px)}
  .quote figcaption .link{margin-left:auto}
}
@media (min-width:1100px){.steps,.kv{grid-template-columns:repeat(3,1fr)}}

/* ---------- Security ---------- */
.sgrid{display:grid;gap:30px}
/* Das Bild bleibt stehen, während die acht Punkte daran vorbeilaufen: Mit jedem wird aus dem Gitter ein Stück mehr Foto */
.scanwrap{position:sticky;top:0;z-index:3;margin-top:-36px;padding:calc(env(safe-area-inset-top,0px) + 72px) 0 16px;background:linear-gradient(var(--here) calc(100% - 16px),transparent)}
.scan{position:relative;width:100%;aspect-ratio:4/3;max-height:38vh;border-radius:28px;background:var(--tile);overflow:hidden}
.scan canvas,.scan img{position:absolute;inset:0;width:100%;height:100%}
.scan img{object-fit:cover;object-position:50% 0}
.scan canvas{opacity:0;transition:opacity .5s}
.scan[data-live] canvas{opacity:1}
.scan[data-live] img{opacity:0}
.scan__cap{position:absolute;left:14px;bottom:14px;display:none;flex-direction:column;align-items:flex-start;gap:3px;max-width:calc(100% - 28px);padding:9px 14px 10px 12px;border-radius:17px;font-size:13px;line-height:1.3;color:var(--label-2);font-variant-numeric:tabular-nums}
.scan__cap b{color:var(--label);font-weight:600}
.scan[data-live] .scan__cap{display:flex}
.scan__n{display:flex;align-items:center;gap:7px}
.scan__ok{width:14px;height:14px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--label-4);transition:box-shadow .3s,background-color .3s}
.scan__cap.is-done .scan__ok{box-shadow:none;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.6 11.4l3 3 5.8-6.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;animation:okpop .55s var(--spring)}
@keyframes okpop{from{transform:scale(.4)}}
/* Die Prüfzeile: ein Beispiel dafür, wie der Punkt in der Praxis aussieht */
.scan__log{display:block;max-width:100%;min-height:1.35em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.35;letter-spacing:0;color:var(--blue-t)}
.scan__log::after{content:"";display:inline-block;width:.5em;height:1.05em;margin-left:2px;vertical-align:-.18em;background:currentColor;animation:caret 1s steps(2,jump-none) infinite}
@keyframes caret{50%{opacity:0}}
.prin{border-bottom:.5px solid var(--sep)}
.prin li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:2px 14px;padding:16px 0 17px;border-top:.5px solid var(--sep);transition:opacity .45s}
.prin li>*{grid-column:2}
.prin__c{grid-column:1!important;grid-row:1;align-self:start;width:22px;height:22px;margin-top:2px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--label-4);transition:background-color .4s,box-shadow .4s,transform .5s var(--spring)}
.prin li.is-on .prin__c,.prin:not(.is-live) .prin__c{box-shadow:none;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.6 11.4l3 3 5.8-6.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.prin.is-live li.is-on .prin__c{transform:scale(1.001)}
.prin b{font-size:clamp(20px,5.4vw,23px);font-weight:600;letter-spacing:-.026em;line-height:1.2}
.prin small{font-size:13.5px;line-height:1.3;color:var(--label-3)}
.js .prin.is-live li:not(.is-on){opacity:.36}
/* Wo ich das gelernt habe: zwei Kacheln, die Zahl gross */
.creds{display:grid;gap:12px}
.cred{position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(26px,3vw,44px);border-radius:28px;background:var(--tile)}
.cred>*{position:relative;z-index:1}
.cred__big b{display:block;color:var(--label);font-size:clamp(76px,10.5vw,148px);font-weight:700;line-height:.9;letter-spacing:-.06em;margin-left:-.03em}
.cred__big>span{display:block;margin-top:10px;font-size:clamp(19px,1.9vw,25px);font-weight:600;letter-spacing:-.026em;line-height:1.2;color:var(--label-h)}
.cred__top{display:flex;align-items:center;min-height:64px;margin-top:clamp(18px,2.6vw,36px)}
.cred__thm{width:min(100%,380px)}
.cred__top .logo{width:140px;height:50px;border-radius:13px}
.cred__top .logo img{width:80%;height:66%}
.cred>p{color:var(--label-2);line-height:1.45;max-width:33em;text-wrap:pretty}
.cred .cred__l{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:auto;padding-top:6px}
@media (min-width:760px){.creds{grid-template-columns:1fr 1fr;gap:16px}}
@media (min-width:1000px){
  .sgrid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
  .scanwrap{top:96px;margin:0;padding:0;background:none}
  .scan{aspect-ratio:1;max-height:calc(100vh - 130px);border-radius:32px}
  .prin li{padding:20px 0 21px;grid-template-columns:26px minmax(0,1fr);column-gap:18px}
  .prin__c{width:24px;height:24px}
  .prin b{font-size:26px}
  .prin small{font-size:14.5px}
  .scan__cap{left:18px;bottom:18px;padding:11px 16px 12px 14px;font-size:14px}
  .scan__log{font-size:13px}
}

/* ---------- Der Weg ---------- */
.way{display:grid;gap:34px}
.way__side .sec__head{margin-bottom:0}
.yr{display:none}
.git{--lane:17px;--x0:9px;--dot:24px}
.git__c{position:relative;display:grid;grid-template-columns:calc(var(--x0) + 2*var(--lane) + 20px) minmax(0,1fr)}
.git__g{position:relative}
.git__ln,.git__dot,.git__cv{transition:color .6s}
.git__ln{position:absolute;top:0;bottom:0;left:calc(var(--x0) + var(--l)*var(--lane));width:2.5px;margin-left:-1.25px;background:currentColor}
.git__ln--start{top:var(--dot)}
.git__ln--end{bottom:auto;height:var(--dot)}
.git__ln--fork{top:calc(var(--dot) + 38px)}
.git__cv{position:absolute;left:var(--x0);width:calc(var(--l)*var(--lane));top:var(--dot);height:40px;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.5}
.git__cv path{vector-effect:non-scaling-stroke}
.git__ln--join{bottom:38px}
.git__cv--join{top:auto;bottom:0}
.git__dot{position:absolute;top:var(--dot);left:calc(var(--x0) + var(--l)*var(--lane));width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px var(--here);transition:color .6s,transform .5s var(--spring)}
.js .git__c:not(.is-past) .git__ln,.js .git__c:not(.is-past) .git__cv,.js .git__c:not(.is-past) .git__dot{color:var(--off)}
.js .git__c.is-now .git__dot{transform:scale(1.35)}
.git__b{padding:8px 0 44px;min-width:0}
.git__y{font-size:15px;font-weight:600;line-height:1.3;color:var(--label-3);font-variant-numeric:tabular-nums}
.git__b h3{margin-top:2px;font-size:clamp(24px,2.2vw,28px);font-weight:700;letter-spacing:-.032em;line-height:1.14}
.git__b>h3+p{margin-top:6px;color:var(--label-2);line-height:1.44;max-width:34em;text-wrap:pretty}
.git__logos{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.git__logos .logo{height:30px;width:86px;border-radius:8px}
.git__logos .logo img{width:80%;height:60%}
.git__logos .logo--wide{width:190px}
.git__logos .logo--wide img{width:88%;height:44%}
.git__m{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:12px}
.git__c:last-child .git__b{padding-bottom:0}
@media (min-width:760px){.git{--lane:26px;--x0:13px}}
@media (min-width:1040px){
  .way{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px}
  .way__side{position:sticky;top:110px;align-self:start;container-type:inline-size}
  .git__b{padding-bottom:64px}
  /* Die Jahreszahl läuft beim Lesen mit */
  .yr{display:flex;margin-top:34px;font-weight:700;font-size:min(41cqw,250px);line-height:.84;letter-spacing:-.065em;color:#d8d8dc;font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none}
  .yr>span{flex:none}
  .yr__c{display:block;height:.84em;overflow:hidden}
  .yr__roll{display:flex;flex-direction:column;transition:transform .8s var(--ease);transform:translateY(calc(var(--k,0)*-.84em))}
  .yr__roll span{display:block;height:.84em}
}

/* ---------- Die Geschichte zum Anhören: Der Text läuft Wort für Wort mit. Das Porträt beginnt als Gitter und ist fertig, wenn die Geschichte zu Ende erzählt ist. ---------- */
/* Am Telefon: Titel, Bild mit der Leiste, darunter der Text. Am Computer: links Titel und Text, rechts das Bild. */
.tale{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "vis" "ly";gap:clamp(20px,2.4vw,32px)}
.tale .sec__head{grid-area:head;margin-bottom:0}
.tale .h2 em{display:block}
/* Der Text: Die laufende Zeile steht hell im oberen Drittel, ihre Wörter werden hell, sobald sie fallen. Eine Zeile antippen springt dorthin. */
.ly{grid-area:ly;position:relative;height:clamp(196px,30vh,340px);overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 11%,#000 58%,transparent);mask-image:linear-gradient(transparent,#000 11%,#000 58%,transparent)}
.ly ol{display:grid;gap:clamp(9px,1.2vw,15px);transition:transform .65s var(--ease);will-change:transform}
.ly__l{font-size:clamp(23px,3vw,40px);font-weight:600;letter-spacing:-.033em;line-height:1.13;color:var(--label);opacity:.24;transition:opacity .45s;text-wrap:balance;cursor:pointer}
.ly__l span{transition:color .28s}
.ly__l.is-cur{opacity:1}
.ly__l.is-cur span{color:var(--label-4)}
.ly__l.is-cur span.on{color:var(--label)}
.ly__l--h{padding-top:clamp(8px,1vw,14px);font-size:clamp(12.5px,1.15vw,15px);font-weight:600;letter-spacing:.07em;line-height:1.3;text-transform:uppercase;color:var(--blue-t)}
.ly__l--h.is-cur span{color:color-mix(in srgb,var(--blue-t) 42%,transparent)}
.ly__l--h.is-cur span.on{color:var(--blue-t)}
.ly.is-idle .ly__l:nth-child(-n+2){opacity:1}
.ly.is-idle .ly__l span{color:inherit}
/* Das Bild mit der Leiste: Start und Pause, die Wellenform zum Spulen, die Zeit */
.tale__vis{grid-area:vis;position:relative;width:100%;aspect-ratio:6/5;max-height:min(44vh,420px);border-radius:28px;overflow:hidden;background:#000;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.12)}
.tale__vis>img,.tale__vis>canvas{position:absolute;inset:0;width:100%;height:100%}
.tale__vis>img{object-fit:cover;object-position:50% 6%}
.tale__vis>canvas{opacity:0;transition:opacity .5s}
.tale__vis[data-live]>canvas{opacity:1}
.tale__vis[data-live]>img{opacity:0}
.tale__bar{position:absolute;z-index:2;left:10px;right:10px;bottom:10px;display:flex;align-items:center;gap:12px;height:60px;padding:0 18px 0 7px;border-radius:999px;color:var(--label)}
.tale__play{flex:none;display:inline-flex;align-items:center;justify-content:center;height:46px;min-width:46px;padding:0 20px 0 15px;border-radius:999px;color:#fff;background:var(--blue);font-size:16px;font-weight:600;letter-spacing:-.015em;transition:padding .45s var(--ease),transform .2s,background .2s}
.tale__play:active{transform:scale(.95)}
.tale__ic{position:relative;flex:none;width:18px;height:18px}
.tale__ic .ico{position:absolute;inset:0;width:18px;height:18px;transition:opacity .2s,transform .35s var(--spring)}
.tale__ic .ico:last-child{opacity:0;transform:scale(.5)}
.is-playing .tale__ic .ico:first-child{opacity:0;transform:scale(.5)}
.is-playing .tale__ic .ico:last-child{opacity:1;transform:none}
.tale__lbl{margin-left:8px;max-width:170px;overflow:hidden;white-space:nowrap;transition:max-width .45s var(--ease),margin .45s var(--ease),opacity .25s}
.is-started .tale__play{padding:0 14px}                            /* läuft die Aufnahme einmal, bleibt nur das Zeichen */
.is-started .tale__lbl{max-width:0;margin-left:0;opacity:0}
.wave{position:relative;flex:1;min-width:0;height:44px;border-radius:8px;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}
.wave__r{position:absolute;inset:7px 0;display:flex;align-items:center;gap:2px;color:var(--label-4)}
.wave__r i{flex:1;min-width:1px;height:calc(var(--h)*100%);border-radius:2px;background:currentColor}
.wave__r--on{color:var(--label);clip-path:inset(-2px calc(100% - var(--p,0)*100%) -2px 0)}
.tale__time{flex:none;display:flex;gap:4px;font-size:13px;line-height:1;font-variant-numeric:tabular-nums;color:var(--label-3)}
.tale__time b{font-weight:600;color:var(--label)}
.tale__time i{font-style:normal}
.tale__time i::before{content:"/ "}
.tale:not(.is-started) .tale__time b,.tale:not(.is-started) .tale__time i::before{display:none}   /* vor dem Start steht nur die Länge da */
.js #taleaudio{display:none}
html:not(.js) .tale__bar{display:none}
html:not(.js) .ly{height:auto;max-height:60vh;overflow:auto;-webkit-mask-image:none;mask-image:none}
html:not(.js) .ly__l{opacity:1}
#taleaudio{width:100%}
@media (max-width:699px){.wave__r i:not(:nth-child(3n+1)){display:none}}          /* am Telefon ein Drittel der Balken */
@media (min-width:1000px){
  .tale{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"head vis" "ly vis";column-gap:clamp(40px,5vw,80px);align-items:start}
  .tale__vis{max-height:none;aspect-ratio:10/11;align-self:center}
  .ly{height:clamp(260px,34vh,360px)}
}
/* Die kleine Leiste: läuft die Geschichte und man ist woanders auf der Seite, bleibt sie erreichbar */
.np{position:fixed;z-index:47;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 20px);display:flex;align-items:center;height:52px;padding:0 5px 0 4px;border-radius:999px;color:var(--label);
  transform:translateY(calc(100% + 110px));opacity:0;visibility:hidden;transition:transform .55s var(--ease),opacity .3s,visibility 0s .55s}
.np.is-on{transform:none;opacity:1;visibility:visible;transition:transform .55s var(--ease),opacity .3s}
.np__go{display:flex;align-items:center;gap:10px;height:44px;padding:0 12px 0 14px;border-radius:999px;font-size:14.5px;font-weight:600;letter-spacing:-.015em}
.np__n{font-weight:500;color:var(--label-2);font-variant-numeric:tabular-nums}
.np__eq{display:flex;align-items:center;gap:2.5px;width:20px;height:18px}
.np__eq i{flex:none;width:3px;height:calc(18% + var(--lv,0)*var(--k,70%));border-radius:2px;background:var(--blue-t);transition:height .1s linear}
.np__eq i:nth-child(1){--k:44%}.np__eq i:nth-child(2){--k:82%}.np__eq i:nth-child(3){--k:60%}.np__eq i:nth-child(4){--k:34%}
.np__x{position:relative;flex:none;width:42px;height:42px;border-radius:50%;color:#fff;background:var(--blue)}
.np__x .ico{position:absolute;inset:12px;width:18px;height:18px;transition:opacity .2s}
.np__x .ico:last-child{opacity:0}
.np:not(.is-playing) .np__x .ico:first-child{opacity:0}
.np:not(.is-playing) .np__x .ico:last-child{opacity:1}
@media (max-width:759px){.np{right:auto;left:50%;margin-left:-98px;width:196px;justify-content:space-between}.is-tabs .np{bottom:calc(env(safe-area-inset-bottom,0px) + 78px)}}

/* ---------- Archiv: alles Frühere, eingeklappt ---------- */
.acc{border-top:.5px solid var(--sep)}
.acc__i{display:block;border-bottom:.5px solid var(--sep);scroll-margin-top:84px}
.acc__i>summary,.acc__a{display:flex;align-items:center;gap:16px;min-height:72px;padding:20px 2px 21px;cursor:pointer;list-style:none;font-size:clamp(21px,2.3vw,30px);font-weight:600;letter-spacing:-.03em;line-height:1.15;-webkit-tap-highlight-color:transparent}
.acc__i>summary::-webkit-details-marker{display:none}
.acc__t{flex:1;min-width:0}
.acc__n{font-size:15px;font-weight:400;letter-spacing:0;color:var(--label-2);font-variant-numeric:tabular-nums}
.acc__i>summary>.ico,.acc__a>.ico{width:19px;height:19px;color:var(--label-2);stroke-width:1.8;transition:transform .45s var(--ease),color .2s}
.acc__a>.ico{width:16px;height:16px;stroke-width:2.1}
.acc__i[open]>summary>.ico{transform:rotate(45deg)}
button.acc__a{width:100%;text-align:left;border-bottom:.5px solid var(--sep)}
@media (hover:hover){.acc__i>summary:hover>.ico,.acc__a:hover>.ico{color:var(--label)}.acc__a:hover>.ico{transform:translateX(3px)}}
.acc__b{padding:4px 0 38px}
.js .acc__i[open]>.acc__b{animation:rise .5s var(--ease)}
.seg{position:relative;display:inline-flex;padding:4px;margin-bottom:16px;border-radius:999px;background:var(--fill);max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--label-2);white-space:nowrap;transition:color .25s}
.seg button span{font-size:12.5px;font-weight:400;color:var(--label-3);font-variant-numeric:tabular-nums}
.seg button[aria-pressed="true"]{color:var(--label);font-weight:600}
.seg__thumb{position:absolute;left:0;top:4px;height:40px;width:var(--w,0px);transform:translateX(var(--x,4px));border-radius:999px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.05),0 3px 8px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.06);transition:transform .45s var(--ease),width .45s var(--ease)}
.idx{border-radius:22px;background:var(--tile,#fff);padding:6px}
.idx li{position:relative}
.idx li:not([hidden])~li:not([hidden])::before{content:"";position:absolute;left:66px;right:14px;top:0;height:.5px;background:var(--sep)}
.prow{display:grid;grid-template-columns:44px minmax(0,1fr) 14px;gap:1px 14px;align-items:center;width:100%;padding:10px 12px 10px 9px;border-radius:17px;text-align:left;transition:background .2s}
.prow .logo{width:44px;height:44px;grid-row:1/3}
.prow__t{grid-column:2;font-weight:600;font-size:17px;letter-spacing:-.02em;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow__k{grid-column:2;font-size:14px;line-height:1.25;color:var(--label-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow__f{display:none}
.prow>.ico{grid-column:3;grid-row:1/3;width:13px;height:13px;color:var(--label-4);stroke-width:2.4;transition:transform .35s var(--ease),color .2s}
.prow:active{background:var(--fill-2)}
.js .idx li.is-in{animation:rise .5s var(--ease) backwards;animation-delay:calc(var(--d,0)*28ms)}
@media (min-width:900px){
  .prow{grid-template-columns:44px minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.15fr) 14px;gap:18px;padding:11px 16px 11px 10px}
  .prow .logo{grid-row:auto}
  .prow__t,.prow__k{grid-column:auto}
  .prow__k{font-size:15px}
  .prow__f{display:block;font-size:14.5px;color:var(--label-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .prow__f b{color:var(--label);font-weight:600;letter-spacing:-.02em}
  .prow>.ico{grid-column:auto;grid-row:auto}
  .idx li:not([hidden])~li:not([hidden])::before{left:72px;right:16px}
}
@media (hover:hover){.prow:hover{background:var(--fill-2)}.prow:hover>.ico{color:var(--blue-t);transform:translateX(3px)}}
.certs{display:grid;gap:14px;align-items:start}
.cgroup{padding:8px;border-radius:22px;background:var(--tile);overflow:hidden;scroll-margin-top:92px}
@keyframes target{0%,55%{box-shadow:0 0 0 2px var(--blue)}100%{box-shadow:0 0 0 2px transparent}}
.cgroup.is-target{animation:target 1.9s ease-out .3s backwards}
.cgroup header{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:12px 12px 14px}
.cgroup header .logo{width:78px;height:30px;border-radius:8px}
.cgroup header .logo img{width:80%;height:62%}
.cgroup h3{font-size:18px;font-weight:600;letter-spacing:-.025em;margin-right:auto}
.cgroup header>span{font-size:14px;color:var(--label-2)}
.cl{display:grid}
.cl a{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) auto 14px;gap:10px;align-items:center;min-height:46px;padding:8px 12px;border-radius:12px;font-size:15.5px;line-height:1.3;transition:background .2s}
.cl a::before{content:"";position:absolute;left:12px;right:12px;top:0;height:.5px;background:var(--sep)}
.cl a i{font-style:normal;font-size:13px;color:var(--label-3);font-variant-numeric:tabular-nums}
.cl a em{font-style:normal;font-size:13px;color:var(--label-3);white-space:nowrap}
.cl a .ico{width:13px;height:13px;color:var(--label-4);stroke-width:2.3;transition:transform .35s var(--ease),color .2s}
@media (hover:hover){.cl a:hover{background:var(--fill-2)}.cl a:hover .ico{color:var(--blue-t);transform:translate(2px,-2px)}}
.cl--thm a{grid-template-columns:minmax(0,1fr) auto 14px}
@media (max-width:420px){.cl a em{display:none}.cl a{grid-template-columns:42px minmax(0,1fr) 14px}.cl--thm a{grid-template-columns:minmax(0,1fr) 14px}}
@media (min-width:760px){.cl--2{grid-template-columns:1fr 1fr;column-gap:8px}}
@media (min-width:1100px){.certs{grid-template-columns:minmax(0,7.6fr) minmax(0,4.4fr)}}
.books{display:grid;gap:10px}
.book{display:grid;grid-template-columns:104px minmax(0,1fr) 14px;gap:16px;align-items:center;padding:16px 20px 16px 16px;border-radius:22px;background:var(--tile)}
.book .logo{width:104px;height:54px;border-radius:12px}
.book .logo img{width:84%;height:70%}
.book__b{display:grid;gap:2px}
.book b{font-weight:600;font-size:18px;letter-spacing:-.025em}
.book b small{font-size:13px;font-weight:400;letter-spacing:0;color:var(--label-3);margin-left:8px;font-variant-numeric:tabular-nums}
.book__b>span{font-size:14.5px;line-height:1.4;color:var(--label-2)}
.book>.ico{width:14px;height:14px;color:var(--label-4);stroke-width:2.3;transition:color .2s,transform .35s var(--ease)}
@media (hover:hover){.book:hover>.ico{color:var(--blue-t);transform:translate(2px,-2px)}}
@media (max-width:479px){.book{grid-template-columns:72px minmax(0,1fr) 14px;gap:12px}.book .logo{width:72px;height:44px}}
@media (min-width:900px){.books{grid-template-columns:1fr 1fr}}

/* Häufige Fragen: dieselben Zeilen zum Aufklappen */
.faq{display:grid;gap:8px}
.faq .sec__head{margin-bottom:clamp(20px,3vw,36px)}
.faq .h2{font-size:clamp(36px,4.3vw,60px)}
.faq .acc__i>summary{font-size:clamp(20px,2vw,26px)}
.faq__a{padding:0 0 30px}
.faq__a p{max-width:38em;font-size:clamp(17px,1.5vw,20px);line-height:1.45;color:var(--label-2);text-wrap:pretty}
@media (min-width:1040px){.faq{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}.faq .sec__head{position:sticky;top:110px;margin:0}}

/* ---------- Kontakt ---------- */
.contact{display:grid;gap:40px}
.contact__l{display:grid;gap:18px;align-content:start}
/* Am Ende sieht er einen noch einmal an */
.me{position:relative;width:clamp(104px,9.6vw,140px);aspect-ratio:1;margin-bottom:8px;border-radius:50%;overflow:hidden;background:var(--av);box-shadow:0 0 0 .5px rgba(255,255,255,.16),0 0 0 6px rgba(255,255,255,.05)}
.me img,.me canvas{position:absolute;inset:0;width:100%;height:100%}
.me img{object-fit:cover}
.me canvas{opacity:0;transition:opacity .5s}
.me[data-live] canvas{opacity:1}
.me[data-live] img{opacity:0}
.contact__r{display:grid;align-content:center}
.mail{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px;padding:clamp(20px,2.2vw,28px);border-radius:28px;background:var(--tile)}
.mail>*{position:relative;z-index:1}
.mail__b{display:grid;gap:1px;min-width:0}
.mail__b small{font-size:13.5px;color:var(--label-2)}
.mail__a{font-weight:600;font-size:clamp(22px,2.3vw,30px);letter-spacing:-.028em;line-height:1.2;user-select:all;-webkit-user-select:all;overflow-wrap:anywhere}
#copy{flex:1 1 100%;height:54px;font-weight:600}
#copy.is-done{background:var(--green);color:#000}
.lk{border-bottom:.5px solid var(--sep)}
.lk li{border-top:.5px solid var(--sep)}
.lk a,.lk__s{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr) 14px;gap:14px;align-items:baseline;min-height:54px;padding:16px 2px 17px;line-height:1.3}
.lk b{font-weight:600;letter-spacing:-.02em}
.lk span>span,.lk a>span{color:var(--label-2);overflow-wrap:anywhere}
.lk .ico{align-self:center;width:13px;height:13px;color:var(--label-4);stroke-width:2.3;transition:transform .35s var(--ease),color .2s}
@media (hover:hover){.lk a:hover .ico{color:var(--blue-t);transform:translate(2px,-2px)}.lk a:hover>span{color:var(--label)}}
@media (min-width:1040px){.contact{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}}
/* Der Schluss: Verweise, dann der Name gross. Er läuft unten ins Schwarz aus. */
.fin>.sec{padding-bottom:clamp(48px,6vw,96px)}
.foot{position:relative;z-index:2;background:#000;color:var(--label-3);padding-bottom:env(safe-area-inset-bottom,0px);overflow:hidden}
.foot__in{display:grid;gap:6px;padding-top:10px;border-top:.5px solid var(--sep)}
.foot__nav{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
.foot__nav a{display:flex;align-items:center;min-height:46px;font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--label);transition:color .2s}
.foot__meta{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:13.5px}
.foot__top{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--label-2);transition:color .2s}
.foot__top .ico{width:14px;height:14px;stroke-width:2.2;transition:transform .35s var(--ease)}
.foot__mark{display:block;width:100%;height:auto;margin-top:clamp(4px,1.2vw,18px)}
.foot__mark text{font-family:var(--font);font-size:204px;font-weight:700}
/* Der Name am Schluss wird geschrieben wie die Schlagzeile am Anfang: erst der blaue Umriss, dann füllt er sich mit dem Scrollen (--f setzt das Skript) */
.foot__ol{display:none;stroke:var(--blue-t);stroke-width:1;vector-effect:non-scaling-stroke}
@media (prefers-reduced-motion:no-preference){
  .js .foot__ol{display:inline;opacity:calc((1 - var(--f,1))*.75)}
  .js .foot__cr{transform:scaleX(var(--f,1));transform-origin:0 0}     /* die Füllung wächst von links: ein Ausschnitt, der breiter wird */
}
@media (hover:hover){.foot__nav a:hover,.foot__top:hover{color:var(--label)}.foot__top:hover .ico{transform:translateY(-3px)}}
@media (min-width:760px){
  .foot__in{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;padding-top:14px}
  .foot__nav{display:flex;flex-wrap:wrap;gap:0 28px}
  .foot__nav a{font-size:15px;font-weight:500;color:var(--label-2)}
  .foot__meta{gap:28px}
}

/* ---------- Ein Projekt im Detail ---------- */
.sheet{position:fixed;inset:0;z-index:80;display:none}
.sheet.is-open{display:block}
.sheet__bg{position:absolute;inset:0;background:rgba(0,0,0,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .4s}
.sheet__p{position:absolute;left:0;right:0;bottom:0;max-height:calc(100% - env(safe-area-inset-top,0px) - 14px);display:flex;flex-direction:column;background:#fff;border-radius:30px 30px 0 0;overflow:hidden;
  transform:translateY(104%);transition:transform .6s var(--ease);box-shadow:0 -20px 60px -20px rgba(0,0,0,.4)}
.sheet.is-in .sheet__bg{opacity:1}
.sheet.is-in .sheet__p{transform:none}
.sheet__bar{position:relative;flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;height:58px;padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(20px,env(safe-area-inset-left,0px));box-shadow:0 .5px 0 var(--sep)}
.sheet.is-in .sheet__bg{opacity:calc(1 - var(--pull,0))}
/* Der Griff: am Telefon zieht man das Blatt daran (oder am Inhalt, sobald er ganz oben steht) nach unten weg. Antippen schliesst auch. */
.sheet__grab{position:absolute;z-index:2;left:50%;top:0;width:96px;height:26px;margin-left:-48px;padding:0;background:none;touch-action:none}
.sheet__grab::before{content:"";position:absolute;left:50%;top:7px;width:38px;height:5px;margin-left:-19px;border-radius:999px;background:rgba(60,60,67,.3);transition:background .2s}
.sheet__bar{touch-action:none}
.sheet__p:focus{outline:none}
/* Wer zum ersten Mal ein Blatt öffnet, sieht es kurz nicken: Der Griff wippt, das Blatt gibt nach. So merkt man, dass es sich wegziehen lässt. */
@keyframes sheetnod{0%,100%{transform:none}26%{transform:translateY(13px)}52%{transform:none}70%{transform:translateY(5px)}}
@keyframes grabnod{0%,100%{transform:none;background:rgba(60,60,67,.3)}26%{transform:translateY(4px) scaleX(1.22);background:rgba(60,60,67,.62)}52%{transform:none;background:rgba(60,60,67,.5)}70%{transform:translateY(2px) scaleX(1.1);background:rgba(60,60,67,.56)}}
@media (max-width:759.98px){
  .sheet .circle[data-close]{display:none}
  .sheet.is-solo .sheet__nav{display:none}
  @media (prefers-reduced-motion:no-preference){
    .sheet.is-hint .sheet__p{animation:sheetnod 1s cubic-bezier(.3,0,.3,1) both}
    .sheet.is-hint .sheet__grab::before{animation:grabnod 1s cubic-bezier(.3,0,.3,1) both}
  }
}
.sheet__t{flex:1;min-width:0;font-size:13.5px;font-weight:500;color:var(--label-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Von Projekt zu Projekt blättern, ohne die Ansicht zu schliessen */
.sheet__nav{display:flex;align-items:center;gap:8px;flex:none}
.sheet__n{margin-right:4px;font-size:13px;color:var(--label-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.sheet__c{transition:opacity .16s ease;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:26px max(20px,env(safe-area-inset-right,0px)) calc(48px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}
.sheet__c.is-swap{opacity:0}
.sheet article{display:grid;gap:30px;min-width:0}
.sh__head{display:grid;gap:12px}
.sh__head .logo{width:132px;height:52px;border-radius:14px}
.sh__head .logo--sq{width:64px;height:64px;border-radius:23%}
.sh__head .logo img{width:80%;height:64%}
.sh__head .logo--sq img{width:74%;height:74%}
.sh__head .logo--txt{font-size:19px}
.sh__meta{font-size:14.5px;line-height:1.35;color:var(--label-2);margin-top:6px}
.sh__head h2{font-weight:700;font-size:clamp(32px,5vw,52px);line-height:1.03;letter-spacing:-.04em}
.sh__head .lead{font-size:clamp(17px,2vw,20px)}
.sh__facts{display:flex;flex-wrap:wrap;gap:16px 44px;padding:18px 0 19px;border-block:.5px solid var(--sep)}
.sh__facts div{display:grid;gap:1px}
.sh__facts b{font-weight:700;font-size:28px;letter-spacing:-.04em;line-height:1.12}
.sh__facts span{font-size:13.5px;color:var(--label-2);line-height:1.25}
.sh h3{font-size:22px;font-weight:700;letter-spacing:-.03em;margin-bottom:10px;line-height:1.15}
.sh>p{color:var(--label-2);max-width:40em;text-wrap:pretty}
.sh__plain,.sh__list{border-bottom:.5px solid var(--sep)}
.sh__plain li{padding:11px 0 12px;border-top:.5px solid var(--sep);line-height:1.4}
.sh__list li{display:grid;gap:2px;padding:12px 0 13px;border-top:.5px solid var(--sep)}
.sh__list b{font-weight:600;letter-spacing:-.02em}
.sh__list span{font-size:15.5px;line-height:1.42;color:var(--label-2)}
.sh__list--n li{grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:baseline}
.sh__list--n li>i{font-style:normal;font-size:15px;font-weight:600;color:var(--label-3);font-variant-numeric:tabular-nums}
.sh__list--n li>div{display:grid;gap:2px}
.sh__list--path span{color:var(--label);font-size:16.5px}
.sh__note{font-size:15px;line-height:1.45;color:var(--label-2);max-width:40em}
.sh__tech{font-size:15.5px;line-height:1.45;color:var(--label-2)}
.sh__tech b{font-weight:600;color:var(--label);margin-right:.3em}
.sh__links{display:flex;flex-wrap:wrap;gap:8px 26px}
.sh__clients{display:grid;border-radius:20px;background:var(--bg-2);padding:6px}
.sh__clients button{display:grid;grid-template-columns:40px minmax(0,1fr) 14px;gap:12px;align-items:center;padding:8px 10px 8px 8px;border-radius:14px;text-align:left;width:100%;transition:background .2s}
.sh__clients button:hover{background:var(--fill-2)}
.sh__clients .logo{width:40px;height:40px}
.sh__clients b{font-weight:600;font-size:16px;letter-spacing:-.02em}
.sh__clients small{display:block;font-size:13px;color:var(--label-2)}
.sh__clients .ico{width:13px;height:13px;color:var(--label-4);stroke-width:2.3}
@media (min-width:760px){
  .sheet__p{left:50%;right:auto;bottom:auto;top:50%;width:min(880px,calc(100% - 48px));max-height:min(880px,calc(100% - 64px));border-radius:26px;transform:translate(-50%,-46%) scale(.96);opacity:0;transition:transform .55s var(--ease),opacity .3s;box-shadow:0 0 0 .5px rgba(0,0,0,.2),0 50px 100px -30px rgba(0,0,0,.5)}
  .sheet.is-in .sheet__p{transform:translate(-50%,-50%);opacity:1}
  .sheet__grab{display:none}
  .sheet__bar{padding:0 16px 0 30px}
  .sheet__c{padding:34px 44px 56px}
  .sh__clients{grid-template-columns:1fr 1fr;column-gap:6px}
}
.sheet.is-solo [data-step],.sheet.is-solo .sheet__n{display:none}
/* Ein Dokument in der Detailansicht: die Seiten als Papier auf einer grauen Ablage */
.doc{display:grid;gap:clamp(10px,2vw,18px);padding:clamp(10px,2.2vw,22px);border-radius:22px;background:var(--bg-2)}
.doc__p{border-radius:5px;overflow:hidden;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 16px 34px -20px rgba(0,0,0,.32)}
.doc__p img{width:100%;height:auto}
.js .doc__p{cursor:zoom-in}
.doc__p.is-zoom{overflow:auto;cursor:zoom-out;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.doc__p.is-zoom img{width:220%;max-width:none}
@media (min-width:760px){.doc__p.is-zoom img{width:160%}}
body.is-locked{overflow:hidden}
/* Bildfolgen in der Detailansicht */
.storybox{display:grid;gap:16px;min-width:0}
.story__view{position:relative;background:#f3f5f8;overflow:hidden}
.story__view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0;transition:opacity .7s ease}
.story__view img.is-on{opacity:1}
.story__view video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:2}
.story__cap{display:flex;align-items:center;justify-content:space-between;gap:14px 16px;flex-wrap:wrap;padding:0 2px}
.story__txt{min-height:2.9em;font-size:14.5px;line-height:1.4;color:var(--label-2);flex:1;min-width:200px}
.story__txt b{display:block;color:var(--label);font-weight:600;font-size:16px;letter-spacing:-.018em}
.story__ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pager{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:999px;background:var(--fill)}
.pager button{position:relative;width:7px;height:7px;border-radius:999px;background:rgba(60,60,67,.3);transition:width .45s var(--ease),background .3s;overflow:hidden}
.pager button::before{content:"";position:absolute;inset:-12px -4px}
.pager button.is-done{background:rgba(60,60,67,.55)}
.pager button.is-on{width:28px;background:rgba(60,60,67,.2)}
.pager button::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--label);transform:scaleX(0);transform-origin:0 50%}
.pager button.is-on::after{animation:fill var(--dur,4.2s) linear forwards}
.story.is-paused .pager button.is-on::after{animation-play-state:paused}
.story.is-video .pager{visibility:hidden}
@keyframes fill{to{transform:scaleX(1)}}
.storybox--phone{justify-items:center}
.storybox--phone .story__cap{justify-content:center;flex-direction:column;gap:10px}
.storybox--phone .story__txt{min-height:0;text-align:center;flex:none;min-width:0}
.storybox--phone .story__ctl{justify-content:center}
.iphone{position:relative;width:min(100%,270px);padding:9px;border-radius:50px;background:linear-gradient(145deg,#3a3a3e,#111113 42%,#2a2a2d);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),inset 0 0 0 3px #0b0b0c,0 0 0 .5px rgba(0,0,0,.6),0 36px 64px -30px rgba(0,0,0,.55)}
.iphone__screen{aspect-ratio:520/999;border-radius:41px;background:#fff}
.iphone__island{position:absolute;z-index:4;left:50%;top:10px;width:31%;height:23px;margin-left:-15.5%;border-radius:999px;background:#000}
.vbox{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:grid;place-items:center;padding:calc(64px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.vbox video{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:14px;background:#000}
.vbox__x{position:absolute;right:max(16px,env(safe-area-inset-right,0px));top:calc(14px + env(safe-area-inset-top,0px));background:rgba(255,255,255,.9);color:#000}

/* ---------- Suche ---------- */
.spot{position:fixed;inset:0;z-index:95;display:grid;justify-items:center;align-content:start;padding:calc(env(safe-area-inset-top,0px) + min(13vh,120px)) 14px 0}
.spot__bg{position:absolute;inset:0;background:rgba(0,0,0,.2);animation:fade .25s ease}
.spot__p{position:relative;width:min(640px,100%);border-radius:22px;overflow:hidden;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);
  box-shadow:0 0 0 .5px rgba(0,0,0,.2),0 40px 80px -24px rgba(0,0,0,.45);animation:spot .4s var(--ease)}
@keyframes spot{from{opacity:0;transform:translateY(-10px) scale(.97)}}
.spot__in{display:flex;align-items:center;gap:12px;height:58px;padding:0 16px 0 18px;box-shadow:0 .5px 0 var(--sep)}
.spot__in .ico{width:21px;height:21px;color:var(--label-3);stroke-width:2.1}
.spot__in input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font-size:20px;letter-spacing:-.02em}
.spot__in input::placeholder{color:var(--label-4)}
.spot__list{max-height:min(50vh,404px);overflow-y:auto;overscroll-behavior:contain;padding:6px}
.spot__list li{display:grid;grid-template-columns:30px minmax(46%,1fr) minmax(0,auto);gap:12px;align-items:center;height:46px;padding:0 12px 0 8px;border-radius:11px;cursor:default}
.spot__list li .logo,.spot__list li .spot__g{width:30px;height:30px;border-radius:8px}
.spot__g{display:grid;place-items:center;color:var(--label-3);font-size:14px;font-weight:500}
.spot__list b{font-weight:600;font-size:15.5px;letter-spacing:-.018em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spot__list small{font-size:13px;color:var(--label-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.spot__list li[aria-selected="true"]{background:var(--blue);color:#fff}
.spot__list li[aria-selected="true"] small,.spot__list li[aria-selected="true"] .spot__g{color:rgba(255,255,255,.82)}
.spot__list .spot__none{display:block;height:auto;padding:22px 12px;text-align:center;color:var(--label-2);font-size:14.5px}
.spot__foot{display:flex;align-items:center;gap:16px;height:38px;padding:0 16px;font-size:12.5px;color:var(--label-2);box-shadow:0 -.5px 0 var(--sep)}
.spot__foot span{display:inline-flex;align-items:center;gap:5px}
.spot__n{margin-left:auto;font-variant-numeric:tabular-nums}
@media (max-width:599px){.spot__foot span:not(.spot__n){display:none}.spot__in input{font-size:17px}}

/* ---------- Seite für nicht gefundene Adressen ---------- */
.nf{background:var(--bg-2)}
.nf__in{min-height:100vh;display:grid;align-content:center;justify-items:start;gap:22px;max-width:900px;margin-inline:auto;padding:40px max(var(--gut),env(safe-area-inset-right,0px)) 40px max(var(--gut),env(safe-area-inset-left,0px))}
.nf__n{font-size:15px;font-weight:600;color:var(--label-3);font-variant-numeric:tabular-nums}

/* ---------- Finger statt Zeiger: Tippflächen mindestens 44 px ---------- */
@media (pointer:coarse){
  .circle{width:44px;height:44px}
  .circle .ico{width:17px;height:17px}
  .hero__cta .link,.git__m .link,.cred__l .link,.sh__links .link,.credit .link{display:inline-block;padding-block:9px}
  .git__m,.cred .cred__l{gap:0 26px}
  .seg button{height:44px}
  .seg__thumb{height:44px}
}

/* ---------- Bewegung: wenig, ruhig ---------- */
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.94)}}
.js .rv.is-run{animation:rise .9s var(--ease) backwards;animation-delay:calc(var(--d,0)*80ms)}
@keyframes h1fill{to{background-size:100% 100%;-webkit-text-stroke-color:transparent}}
@keyframes h1scan{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
@supports ((-webkit-background-clip:text) or (background-clip:text)){@media (prefers-reduced-motion:no-preference){
  .js h1{position:relative}
  .js h1 .l>span{color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--blue-t) 82%,transparent);
    background:linear-gradient(var(--label),var(--label)) no-repeat 0 0/0% 100%;-webkit-background-clip:text;background-clip:text;animation:fade .7s ease backwards}
  .js.is-build h1 .l>span{animation:fade .7s ease backwards,h1fill 1.05s cubic-bezier(.55,0,.25,1) 1.05s forwards}
  .js h1::after{content:"";position:absolute;top:-1%;bottom:-1%;left:0;width:2px;margin-left:-1px;border-radius:2px;background:#bfe0ff;box-shadow:0 0 20px 4px rgba(41,151,255,.8);opacity:0;pointer-events:none}
  .js.is-build h1::after{animation:h1scan 1.05s cubic-bezier(.55,0,.25,1) 1.05s both}
}}
.js .eyebrow,.js .hero__sub,.js .hero__cta,.js .proof{animation:rise .9s var(--ease) backwards}
.js .eyebrow{animation-delay:.05s}.js .hero__sub{animation-delay:.55s}.js .hero__cta{animation-delay:.68s}.js .proof{animation-delay:.82s}
.js .nav__links,.js .nav__end{animation:fade .9s ease .1s backwards}
.js .hud:not([hidden]){animation:pop .6s var(--ease) backwards}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .pager button.is-on::after{transform:scaleX(1)}
}