/* Gemeinsam für alle Unterseiten: Blenden, Seitentitel, Schließen-Kreuz, Einblendungen, Fußzeile */
/* Blenden */
.ov{position:fixed;inset:0;z-index:500;transform:translateY(-100%);transition:transform .4s cubic-bezier(.65,0,.35,1);pointer-events:none}
.ov1{background:#000}.ov2{background:var(--blue)}
.ov2 .pulse{display:none}.loading .ov2 .pulse{display:block}

/* Seiten */
.page{position:fixed;inset:0;z-index:1;background:#fff;opacity:0;visibility:hidden;overflow:hidden auto;-webkit-overflow-scrolling:touch}
.page.on{z-index:400;opacity:1;visibility:visible}
.wrap{width:min(1180px,100%);margin:0 auto;padding-block:calc(84px + env(safe-area-inset-top,0px)) 96px;padding-left:max(clamp(16px,5vw,60px),env(safe-area-inset-left,0px));padding-right:max(clamp(16px,5vw,60px),env(safe-area-inset-right,0px));overflow-x:clip}
.ph{position:relative;text-align:center;margin:0 0 58px;font-size:clamp(40px,6vw,60px);font-weight:500;line-height:1.2;color:var(--ink);text-wrap:balance}
.ph span{display:inline-block;transform:translateY(40px);opacity:0;transition:transform .9s var(--out) .15s,opacity .7s .15s}
.ph-logo{position:absolute;z-index:-1;left:50%;top:50%;width:124px;height:124px;margin:-62px 0 0 -62px;fill:var(--soft);transform:scale(.4) rotate(-45deg);opacity:0;transition:transform 1.1s var(--pop) .1s,opacity .5s .1s}
.vis .ph span,.ph.vis span{transform:none;opacity:1}.vis .ph-logo,.ph.vis .ph-logo{transform:none;opacity:1}
.plogo{position:absolute;z-index:5;top:calc(14px + env(safe-area-inset-top,0px));left:max(clamp(16px,2vw,30px),env(safe-area-inset-left,0px));width:36px;height:36px;display:block;color:#000;transition:transform .5s var(--pop),color .25s}
.plogo svg{display:block;width:100%;height:100%;fill:currentColor}
.plogo:hover{color:var(--blue);transform:scale(1.18) rotate(-8deg)}
.x{position:fixed;z-index:550;top:env(safe-area-inset-top,0px);left:50%;margin-left:-31px;width:61px;height:61px;background:#1b1b1b;transform:translateY(-110%);transition:transform .55s var(--out);color:#bbb}
.pageon-vis .x{transform:none}.det .x{transform:translateY(-110%)}
.x::before,.x::after{content:"";position:absolute;left:25%;top:30px;width:50%;height:1px;background:currentColor;transform:rotate(45deg);transition:transform .35s ease-in,background .3s}
.x::after{transform:rotate(-45deg)}
.x:hover{color:#fff}.x:hover::before{transform:rotate(-45deg)}.x:hover::after{transform:rotate(45deg)}
.sect{display:flex;align-items:center;justify-content:center;gap:14px;margin:clamp(56px,8vw,84px) 0 38px;font-size:16px;font-weight:500;font-style:italic;letter-spacing:3px;text-transform:uppercase;color:var(--ink);text-align:center}
.sect::before,.sect::after{content:"";width:34px;height:1px;background:var(--ink);flex:none}

/* Scroll-Einblendung */
.js .r{opacity:0;transform:translateY(34px)}
.js .r.pop{transform:scale(.82) translateY(16px)}
.js .r.in{opacity:1;transform:none;transition:opacity .7s var(--d,0s),transform .85s var(--pop) var(--d,0s)}
.js .r.soft.in{transition:opacity .9s var(--d,0s),transform .9s var(--out) var(--d,0s)}

.pf{margin-top:60px;text-align:center;font-size:13px;color:var(--mute)}
.pf a{color:inherit;text-decoration:underline;text-underline-offset:3px}.pf a:hover{color:var(--blue)}
.legal{max-width:760px;margin:0 auto;font-size:17px;overflow-wrap:break-word}.legal h2{margin:36px 0 8px;font-size:22px;font-weight:500;line-height:1.3;color:var(--ink)}.legal h2:first-child{margin-top:0}.legal p{margin:0 0 14px}.legal ul{margin:0 0 14px;padding-left:1.2em}.legal a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.hinweis{padding:18px 22px;background:var(--beige);color:var(--ink);text-align:center}

/* Text liegt immer vor dem Logo im Seitentitel */
.ph span{position:relative}

/* Sprachwahl */
.spr{display:flex;gap:2px;font-size:12px;font-weight:600;letter-spacing:.08em;line-height:1}
.spr a{padding:7px 8px;text-decoration:none;transition:color .2s,background .2s}
.spr-seite{position:absolute;z-index:5;top:calc(14px + env(safe-area-inset-top,0px));right:max(clamp(16px,2vw,30px),env(safe-area-inset-right,0px));color:var(--text)}
.spr-seite a:hover{color:var(--blue)}
.spr-seite a.an{background:var(--blue);color:#fff}
.spr-seite a.an:hover{color:#fff}