/* NOAP · Bühne: Wallpaper, Visuals, Kontaktknopf · Stand 26.10.2026 d */

/* ===== Vorschlag 26.10.2026: Wallpaper, Visuals unter dem Formular ===== */
:root{--t0:5300ms}                       /* Ende des Auftritts: hier beginnt das Wallpaper */
html.wand body{background:transparent}
.wpv{position:fixed; inset:0; z-index:-2; overflow:hidden; background:#fff; pointer-events:none}
.wpv .ebene{position:absolute; left:0; top:0; width:1920px; height:1080px; transform-origin:0 0}
.wpv img{position:absolute; max-width:none; display:block}
.wpv .basis{left:0; top:0; width:1920px; height:1080px; opacity:0}
.wpv .ecke{position:absolute; left:0; top:0; width:1920px; height:1080px; opacity:0;
  background:radial-gradient(ellipse 1250px 780px at 0 0, rgba(16,6,30,.78) 0%, rgba(16,6,30,.6) 30%, rgba(16,6,30,.26) 65%, rgba(16,6,30,0) 100%)}
.wpv .wm{position:absolute; left:0; top:0; width:1920px; height:1080px; overflow:hidden; opacity:0}
.wpv .wm img{left:-240px; top:-136px; width:2400px; height:1350px; transform-origin:72.75% 63.4%}
.wpv .ma{opacity:.85} .wpv .mb{opacity:.15}
.wpv .kreuz{left:0; top:0; width:1920px; height:1080px; opacity:0}
.wpv .sonne, .wpv .flare{opacity:0}
.wpv .flare{clip-path:inset(0 28.5% 0 71.5%)}
html.wand .wpv .basis, html.wand .wpv .ecke{animation:wp-auf 2.6s cubic-bezier(.4,0,.3,1) both}
html.wand .wpv .s1{animation:s1 3.4s ease-in-out 3s both}
html.wand .wpv .s2{animation:s2 3.4s ease-in-out 3s both}
html.wand .wpv .s3{animation:s3 3.4s ease-in-out 3s both}
html.wand .wpv .flare{animation:fl-auf 1s cubic-bezier(.25,.1,.2,1) 6.4s both}
html.wand .wpv .wm{animation:wp-auf 3s ease-in-out 7.2s both, wm-atem 15.7s ease-in-out 10.2s infinite alternate}
html.wand .wpv .ma{animation:ma-blend 9.8s ease-in-out 7.2s infinite alternate both, ma-wabern 13.4s ease-in-out 7.2s infinite alternate both}
html.wand .wpv .mb{animation:mb-blend 9.8s ease-in-out 7.2s infinite alternate both, mb-wabern 13.4s ease-in-out 7.2s infinite alternate both}
html.wand .wpv .kreuz{animation:kr-atem 9.8s ease-in-out 7.2s infinite alternate both}
@keyframes wp-auf{from{opacity:0} to{opacity:1}}
@keyframes wm-atem{from{opacity:1} to{opacity:.7}}
@keyframes ma-blend{from{opacity:.85} to{opacity:.15}}
@keyframes ma-wabern{from{transform:scale(1.015,.985)} to{transform:scale(.985,1.02)}}
@keyframes mb-blend{from{opacity:.15} to{opacity:.85}}
@keyframes mb-wabern{from{transform:scale(.985,1.02)} to{transform:scale(1.02,.985)}}
@keyframes kr-atem{from{opacity:.05} to{opacity:.5}}
@keyframes s1{0%{opacity:0} 30%{opacity:1} 60%{opacity:0} 100%{opacity:0}}
@keyframes s2{0%,25%{opacity:0} 60%{opacity:1} 100%{opacity:0}}
@keyframes s3{0%,55%{opacity:0} 100%{opacity:1}}
@keyframes fl-auf{0%{opacity:0; clip-path:inset(0 28.5% 0 71.5%)} 100%{opacity:1; clip-path:inset(0 0 0 0)}}

/* Lockup: die weisse Fassung liegt deckungsgleich über der farbigen und blendet auf */
.kopf picture.weiss img{opacity:0; animation:none}   /* steht gleich an der Ruhelage; der Auftritt gehört der farbigen Fassung */
html.wand .kopf picture.weiss img{animation:wp-auf 2.6s cubic-bezier(.45,0,.25,1) both}
html.wand.weisslogo .kopf picture:not(.weiss) img{animation:wp-ab 1ms linear 2.65s both}   /* erst weg, wenn das weisse ganz deckt: sonst wird das Signet beim Überblenden blass */
@keyframes wp-ab{from{opacity:1} to{opacity:0}}
html.wand.weisslogo body.sofort .kopf picture:not(.weiss) img{opacity:0}

/* Schrift und Linien auf dem Wallpaper weiss */
.sprachen, .sprachen li, footer p{transition:color 2.6s cubic-bezier(.45,0,.25,1), border-color 2.6s}
.sprachen{transition:border-color 2.6s}
html.wand .sprachen li{color:#fff; text-shadow:2px 3px 12px rgba(20,8,36,.35)}
html.wand .sprachen{border-top-color:rgba(255,255,255,.9)}
html.wand footer{border-top-color:rgba(255,255,255,.9)}
html.wand footer p{color:#fff}
html.wand .zugang img{filter:brightness(0) invert(1); transition:filter 2.6s}

/* Formular als leicht durchscheinendes Blatt über den Visuals */
#kontakt{position:relative; margin-inline:calc(-1*min(4*var(--takt), var(--rand))); padding:calc(4*var(--takt)) min(4*var(--takt), var(--rand));
  background:rgba(255,255,255,0); transition:background 2.6s cubic-bezier(.45,0,.25,1), opacity .6s ease, transform .6s cubic-bezier(.33,0,.2,1), visibility 0s}
html.wand #kontakt{background:rgba(255,255,255,var(--deck,.8)); border-top-color:transparent}
html.wand #kontakt input, html.wand #kontakt textarea{background:rgba(242,239,246,.72)}
html.wand #kontakt input:focus, html.wand #kontakt textarea:focus{background:#fff}
#kontakt.zu{display:none}
/* Formular zu = Seite kürzer. Die Seite beschneidet den <body> (overflow:clip), damit die grosse Marke im Auftritt keinen
   Querbalken erzeugt. Mit dem kurzen Body schnitt diese Kante die Marke unten ab (Fehler 26.10.2026). Darum nur noch
   seitlich beschneiden, nach unten nicht. */
@supports (overflow:clip){ body{overflow-x:clip; overflow-y:visible} }
   /* Formular geht erst mit dem Knopf auf (Yves 26.10.2026) */

/* Knopf zum Weg- und Herklicken */
.fzu{position:absolute; top:calc(2*var(--takt)); right:calc(2*var(--takt)); width:40px; height:40px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:#fff; box-shadow:0 0 0 1px rgba(97,56,140,.28), 0 4px 12px rgba(97,56,140,.12); opacity:0; transition:background .2s, transform .3s cubic-bezier(.33,0,.2,1), opacity .6s}
html.wand .fzu{opacity:1}
#kontakt h2{padding-right:48px}
.fzu::before, .fzu::after{content:""; position:absolute; left:50%; top:50%; width:15px; height:2px; margin:-1px 0 0 -7.5px; background:#61388C; border-radius:1px}
.fzu::before{transform:rotate(45deg)} .fzu::after{transform:rotate(-45deg)}
.fzu:hover{background:#61388C; transform:rotate(90deg)} .fzu:hover::before, .fzu:hover::after{background:#fff}
.fauf{height:48px; padding:0 22px 0 18px; border:0; border-radius:24px; cursor:pointer; flex:none;
  display:flex; align-items:center; gap:10px; background:#61388C; color:#fff; font:600 15px/1 "Inter Display","Inter",Arial,sans-serif;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .6s .3s, transform .8s .3s cubic-bezier(.33,0,.2,1), background .2s}
/* Platz unter der Mitteilung: zu (0) bis das Wallpaper steht; hebt den Rasterabstand davor auf und setzt einen engeren (3 Takte) */
.fauf-platz{display:grid; grid-template-rows:0fr; margin-top:calc(-6*var(--takt)); transition:grid-template-rows 1.2s cubic-bezier(.45,0,.25,1)}
.fauf-platz.da{grid-template-rows:1fr}
.fauf-platz .innen{min-height:0; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start}
.fauf-platz .innen::before{content:""; display:block; height:calc(3*var(--takt)); flex:none}
.fauf svg{width:20px; height:20px}
/* fünf Sprachen übereinander im selben Feld: der Knopf hat die Breite der längsten Fassung und springt nicht */
.fauf .txt{display:grid; justify-items:start} .fauf .txt>span{grid-area:1/1; white-space:nowrap; opacity:0} .fauf .txt>span:first-child{opacity:1}
.fauf.da{opacity:1; transform:none; pointer-events:auto}
.fauf:hover{background:#4e2b73}


/* Visuals randabfallend über die ganze Seite (Yves 26.10.2026) */
.vbuehne{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.vbuehne .vis{position:absolute; inset:0; overflow:hidden; visibility:hidden; will-change:transform}
.vbuehne .vis.zeigt{visibility:visible}
.vbuehne .ebene{position:absolute; left:0; top:0; height:2160px; transform-origin:0 0}
.vbuehne .ebene > img.grund{position:absolute; left:0; top:0; width:100%; height:100%; max-width:none; display:block}
.vbuehne img{position:absolute; max-width:none; margin:0; border:0}
/* Schleier oben, damit Lockup und Sätze auf jedem Bild lesbar bleiben */
.vbuehne .schleier{position:absolute; inset:0; z-index:5; opacity:0; transition:opacity 2.6s ease;
  background:linear-gradient(to bottom, rgba(18,7,34,.8) 0%, rgba(18,7,34,.66) 38%, rgba(18,7,34,.32) 54%, rgba(18,7,34,0) 68%),
             linear-gradient(to top, rgba(18,7,34,.45) 0%, rgba(18,7,34,0) 22%)}
.vbuehne.an .schleier{opacity:1}
/* Überlagerungen aus den Decks, in Koordinaten des Querbilds */
.vbuehne img.marker{mix-blend-mode:multiply}
.vbuehne .holo{position:absolute; mix-blend-mode:color; opacity:0}
.vbuehne .holo .holo-e{position:absolute}
.vbuehne .holo img{left:0; top:0; width:100%; height:100%; will-change:transform}
.vbuehne .herz{position:absolute; opacity:0}
.vbuehne .herz img{left:0; top:0; width:100%; height:100%; will-change:transform}
.vbuehne .badge{position:absolute; opacity:0}
.vbuehne .badge img{left:0; top:0; width:100%; height:100%; opacity:0; transition:opacity 140ms ease-in-out 60ms}
.vbuehne .pinglanz{mix-blend-mode:screen; opacity:0}
.vbuehne img.auge{opacity:0}
.vbuehne .portalrahmen{position:absolute; left:0; top:0; opacity:0}
.vbuehne .portalwp{position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden}
.vbuehne .portalwp .ebene2{position:absolute; left:0; top:0; width:1920px; height:1080px; transform-origin:0 0; overflow:hidden}
.vbuehne .portalwp .basis, .vbuehne .portalwp .kreuz{left:0; top:0; width:1920px; height:1080px}
.vbuehne .portalwp .kreuz{opacity:.05}
.vbuehne .portalwp .wm{position:absolute; left:0; top:0; width:1920px; height:1080px; overflow:hidden}
.vbuehne .portalwp .wm img{left:-240px; top:-136px; width:2400px; height:1350px; transform-origin:72.75% 63.4%}
.vbuehne .portalwp .ma{opacity:.85; transform:scale(1.015,.985)}
.vbuehne .portalwp .mb{opacity:.15; transform:scale(.985,1.02)}
.vbuehne .portalwp .sonne, .vbuehne .portalwp .flare{opacity:0}
.vbuehne .portalwp .flare{clip-path:inset(0 28.5% 0 71.5%)}
.vbuehne .portalwp.lauf .s1{animation:s1 3.4s ease-in-out 1s both}
.vbuehne .portalwp.lauf .s2{animation:s2 3.4s ease-in-out 1s both}
.vbuehne .portalwp.lauf .s3{animation:s3 3.4s ease-in-out 1s both}
.vbuehne .portalwp.lauf .flare{animation:fl-auf 1s cubic-bezier(.25,.1,.2,1) 4.4s both}
.vbuehne .portalwp.lauf .wm{animation:wm-atem 7.9s ease-in-out infinite alternate}
.vbuehne .portalwp.lauf .ma{animation:ma-blend 4.9s ease-in-out infinite alternate both, ma-wab-hero 6.7s ease-in-out infinite alternate both}
.vbuehne .portalwp.lauf .mb{animation:mb-blend 4.9s ease-in-out infinite alternate both, mb-wab-hero 6.7s ease-in-out infinite alternate both}
.vbuehne .portalwp.lauf .kreuz{animation:kr-hero 4.9s ease-in-out infinite alternate both}
@keyframes ma-wab-hero{from{transform:scale(1.015,.985)} to{transform:scale(.965,1.04)}}
@keyframes mb-wab-hero{from{transform:scale(.985,1.02)} to{transform:scale(1.04,.965)}}
@keyframes kr-hero{from{opacity:.05} to{opacity:.8}}
/* Fusszeile auf den Bildern */
html.wand footer p{text-shadow:2px 3px 12px rgba(20,8,36,.5)}
@media (prefers-reduced-motion:reduce){ .vbuehne .portalwp *{animation:none !important} }

/* Pin als eigene Ebene (verankerung) */
.vbuehne .pinlage{position:absolute; z-index:6; visibility:hidden; will-change:transform}
.vbuehne .pinlage.zeigt{visibility:visible}
.vbuehne .pinlage img{left:0; top:0; width:100%; height:100%}