/* Startseite: Bild, großes Logo, Namensbalken, Menü, Kacheln unten links */
/* Bühne */
#home{position:fixed;inset:0;overflow:hidden;background:var(--indigo)}
.bg{position:absolute;top:0;left:-7vw;width:131vw;height:100%;max-width:none;object-fit:cover;object-position:54% 30%;opacity:0;transform:scale(2) translateX(-35%);will-change:transform}
.s1 .bg{opacity:1;transform:none;transition:opacity .4s,transform 1.8s var(--out)}
.s2 .bg{opacity:1;transform:translateX(-7%);transition:transform 1s var(--out)}
.s3 .bg{opacity:1;transform:translateX(-12%);transition:transform 8s linear}
.gl{position:absolute;top:50%;left:61vw;height:108vh;width:108vh;fill:#fff;transform:translate(70vw,-50%);pointer-events:none}
.s2 .gl{transform:translate(0,-50%);transition:transform .8s var(--out)}
.s3 .gl{transform:translate(-2.5%,-50%);transition:transform 6s linear}

.heading{--tile:clamp(62px,10vmin,90px);position:absolute;z-index:6;left:50%;top:50%;display:flex;height:var(--tile);transform:translate(-50%,120vh);font-size:clamp(23px,5vmin,45px);font-weight:500;line-height:1;white-space:nowrap}
.s1 .heading{transform:translate(-50%,-50%);transition:transform .6s var(--out) 1.1s}
.s2 .heading{transform:translate(calc(-50% + 14vw),-50%);transition:transform .8s var(--out)}
.s3 .heading{transform:translate(calc(-50% - 18vw),-50%);transition:transform .8s var(--out)}
.h-side{background:#fff;color:#000;overflow:hidden;width:var(--w);display:flex;align-items:center;transition:width .8s var(--out)}
.h-side span{padding:0 .55em;transition:transform .8s var(--out)}
.h-l{--w:clamp(120px,10em,230px);justify-content:flex-end}.h-r{--w:clamp(170px,8.4em,280px)}
.s2 .h-side,.s3 .h-side{width:0}
.s2 .h-l span,.s3 .h-l span{transform:translateX(100%)}.s2 .h-r span,.s3 .h-r span{transform:translateX(-100%)}
.h-logo{width:var(--tile);height:var(--tile);background:#fff;display:grid;place-items:center;flex:none}
.h-logo svg{width:62%;height:62%;fill:#000}
.h-name{position:absolute;left:var(--tile);top:0;height:100%;background:#000;color:#fff;display:flex;align-items:center;padding:0 .75em;transform:scaleX(0);transform-origin:0 50%}
.h-name b{font-weight:500;opacity:0;transform:translateX(-14px)}
.s3 .h-name{transform:none;transition:transform .8s var(--out)}
.s3 .h-name b{opacity:1;transform:none;transition:opacity 1s,transform 1s var(--out)}
.h-job,.h-mq{position:absolute;left:0;right:0;opacity:0;color:#fff}
.s3 .h-job,.s3 .h-mq{opacity:1;transition:opacity 1s linear}
.h-job{bottom:calc(100% + 8px);text-align:right;font-size:clamp(9px,calc(9px + .14vw),12px);font-weight:700;letter-spacing:.2em;text-transform:uppercase;white-space:normal;line-height:1.3}
.h-mq{top:calc(100% + 8px);overflow:hidden;font-size:calc(12px + .14vw);font-weight:400;height:25px;line-height:25px}
.h-mq span{display:inline-block;padding-left:100%;animation:mq 42s linear infinite}
.h-mq:hover span{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-100%)}}

/* Menü */
.menu{position:absolute;z-index:7;left:0;top:50%;transform:translateY(-50%);user-select:none}
.menu a{display:flex;margin:1.8vh 0;overflow:hidden;line-height:1;width:max-content}
.mi{position:relative;display:inline-block;overflow:hidden;padding:0 8px 0 32px;font:400 calc(.8rem + 4.6vmin)/1.08 var(--anton);text-transform:uppercase;color:#fff;transform:translateY(102%);transition:transform .9s var(--out) var(--md,0s)}
.s1 .mi,.s2 .mi,.s3 .mi{transform:none}
.mi::before,.mi::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--blue);pointer-events:none;transform:translateX(calc(-100% - 1px));transition:transform .5s var(--out)}
.mi::after{top:calc(50% - 2px);height:.1em}
.menu a:hover .mi::before,.menu a:focus-visible .mi::before{transform:translateX(calc(100% + 1px))}
.menu a:hover .mi::after,.menu a:focus-visible .mi::after{transform:none}

/* Eckelemente */
.tools{position:absolute;z-index:8;top:calc(32px + env(safe-area-inset-top,0px));left:max(32px,env(safe-area-inset-left,0px));display:flex;align-items:center;gap:10px;color:#fff;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:0}
.fs{mix-blend-mode:difference;position:absolute;z-index:8;top:calc(24px + env(safe-area-inset-top,0px));right:max(24px,env(safe-area-inset-right,0px));color:#fff;font-size:20px;opacity:0;line-height:1}
.s3 .tools,.s3 .fs{opacity:.75;transition:opacity 1s}
.fs:hover,.tools:hover{opacity:1!important}
.eq{display:flex;align-items:flex-end;gap:2px;height:12px}
.eq i{width:2px;height:2px;background:currentColor;transition:height .2s}
.snd-on .eq i{animation:eq .9s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-delay:.2s!important}.eq i:nth-child(3){animation-delay:.45s!important}.eq i:nth-child(4){animation-delay:.1s!important}
@keyframes eq{to{height:12px}}
.social{position:absolute;z-index:8;left:0;bottom:0;display:flex;background:#000;padding-left:env(safe-area-inset-left,0px);padding-bottom:env(safe-area-inset-bottom,0px);transform:translateY(calc(100% + 40px))}
.s3 .social{transform:none;transition:transform 1.6s var(--out)}
.social a{width:clamp(66px,8.2vmin,84px);height:clamp(66px,8.2vmin,84px);display:grid;place-items:center;color:#fff;font-size:clamp(26px,3.5vmin,34px);overflow:hidden;transition:background .25s}
.social a .i{transition:transform .45s var(--pop)}
.social a:hover{background:var(--blue)}.social a:hover .i{transform:scale(1.28) rotate(-8deg)}
.social a.w{color:var(--wa)}.social a.w:hover{background:var(--wa);color:#fff}
.foot{position:absolute;z-index:9;left:calc(3 * clamp(66px,8.2vmin,84px) + 16px);bottom:calc(8px + env(safe-area-inset-bottom,0px));color:rgba(255,255,255,.38);font-size:calc(10px + .2vw);opacity:0;transform:translateX(30px)}
.s2 .foot,.s3 .foot{opacity:1;transform:none;transition:all 1s var(--out)}

/* WhatsApp-Knopf */
#wa{position:fixed;z-index:480;right:max(22px,env(safe-area-inset-right,0px));bottom:calc(48px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;height:76px;color:#fff;transform:scale(0);opacity:0;transition:transform .7s var(--pop) .1s,opacity .2s .1s}
.s3 #wa{transform:none;opacity:1;transition-delay:2s}
#wa .ic{position:relative;display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--wa);font-size:44px;box-shadow:0 12px 28px rgba(0,0,0,.28);transition:transform .45s var(--pop)}
#wa .ic::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--wa);z-index:-1;animation:ring2 2.2s ease-out infinite}
@keyframes ring2{to{transform:scale(1.75);opacity:0}}
#wa .tx{position:absolute;right:62px;padding:9px 30px 9px 18px;background:#111;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;clip-path:inset(0 0 0 100%);transition:clip-path .4s var(--out);z-index:-1}
#wa:hover .ic{transform:scale(1.14) rotate(-10deg)}#wa:hover .tx{clip-path:inset(0)}

.foot a{color:inherit}.foot a:hover{color:#fff}
@media (max-width:1000px){
 .heading{top:14.5%;--tile:clamp(58px,9vmin,76px)}
 .s1 .heading{transform:translate(-50%,-50%)}
 .s2 .heading,.s3 .heading{transform:translate(calc(-50vw + 16px),-50%)}
 .s2 .heading{transition-duration:.8s}
 .h-l{--w:clamp(92px,28vw,170px)}.h-r{--w:clamp(118px,36vw,230px)}
 .menu{top:52%}.mi{padding-left:16px;font-size:clamp(38px,8.6vmin,62px)}
 .tools{top:auto;bottom:calc(92px + env(safe-area-inset-bottom,0px));left:16px}
 .gl{left:52vw;top:60%;height:96vmin;width:96vmin}
 .bg{object-position:60% 30%;left:0;width:118vw}
 .foot{display:none}
 #wa{bottom:calc(84px + env(safe-area-inset-bottom,0px));height:66px;right:max(16px,env(safe-area-inset-right,0px))}#wa .ic{width:66px;height:66px;font-size:38px}#wa .tx{display:none}
 #wa.pg{bottom:calc(20px + env(safe-area-inset-bottom,0px))}
}

/* Maus-Effekt: Die Balken des Logos folgen der Maus unterschiedlich stark. Stärke in assets/js/maus.js */
.gl polygon{translate:calc(var(--mx,0) * var(--t,0) * 1px) calc(var(--my,0) * var(--t,0) * 1px);will-change:translate}
.gl polygon:nth-child(1){--t:70}.gl polygon:nth-child(2){--t:130}.gl polygon:nth-child(3){--t:210}
.gl{rotate:calc(var(--mx,0) * 1.6deg)}
.bg{translate:calc(var(--mx,0) * -14px) calc(var(--my,0) * -8px)}
.heading{translate:calc(var(--mx,0) * 7px) calc(var(--my,0) * 5px)}