/* Die neue Bühne gehört zum vorhandenen Scroller, nicht zu dessen vier .page- Bereichen. Eine Fensterhöhe Überlappung verbindet sie mit dem echten Profil. */ .mk-hero[hidden],.mk-canvas[hidden],.mk-fallback[hidden]{display:none} /* Hoehe = Scrollweg. 2.45 war zu hastig, der Zerfall war nach einem kurzen Wisch vorbei. 4.2 Bildschirmhoehen dehnen dieselbe Bewegung deutlich - das ist der Zeitlupen-Regler, und er kostet nichts: der Fortschritt wird aus dem Weg gerechnet, nicht aus der Zeit. Die letzte Bildschirmhoehe davon gehoert dem Uebergang ins Dauerfeld. */ .mk-hero{--mk-height:100svh;position:relative;height:calc(var(--mk-height) * 4.2); z-index:12;pointer-events:none} .mk-stage{position:sticky;top:0;height:var(--mk-height);width:100%;overflow:hidden; isolation:isolate;contain:paint} /* Dieselbe warme Farbwelt wie die restliche Seite: Bordeaux und Glutrot. Die Tiefe kommt aus dem Nebel. */ .mk-curtain{position:absolute;inset:0;z-index:0;background: radial-gradient(ellipse 70% 55% at 62% 62%,rgba(122,12,22,.34),transparent 62%), radial-gradient(ellipse 62% 50% at 28% 30%,rgba(70,12,14,.27),transparent 60%), radial-gradient(ellipse 90% 70% at 50% 46%,rgba(60,10,14,.20),transparent 70%), linear-gradient(168deg,#0b0606 0%,#090404 55%,#100606 100%)} .mk-curtain::after{content:"";position:absolute;inset:0;background: radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.48) 100%)} /* Sterne und texturierter Nebel liegen raeumlich hinter den MK-Punkten. Beim Scrollen bleibt ein leiser kosmischer Hintergrund an den Karten. */ /* ---- Dauerfeld: die Buehne wird zur festen Hintergrundebene ---- Umgeschaltet wird per Klasse, sobald der Zerfall durch ist. Zwei Dinge muessen zusammen passieren, sonst liegt das Feld VOR dem Inhalt: 1. sticky -> fixed, damit es beim Weiterscrollen stehen bleibt 2. z-index des Hero von 12 auf 3 - dieselbe Ebene wie die alten Effekt-Leinwaende, also HINTER dem Scroller (z-index 10) contain:paint muss dabei weg: es macht die Buehne sonst zum Bezugsrahmen und die Leinwand bliebe an ihr kleben statt am Fenster. Kein Sprung beim Umschalten: an dieser Stelle steht die klebende Buehne bereits genau am oberen Fensterrand. */ body.mk-feld .mk-hero{z-index:3} body.mk-feld .mk-stage{position:fixed;inset:0;height:100%;contain:none;isolation:auto} body.mk-feld .mk-footer{display:none} .mk-canvas,.mk-fallback{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:1} /* v133: Sternschnuppen - eigene kleine Leinwand direkt ueber dem MK, faengt keine Klicks ab. */ .mk-schnuppen{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:1;pointer-events:none} /* Intro-Knoepfe (v42): Skip und Sound im selben Glasstil wie der Rest von echo-kosmos. Bewusst ohne backdrop-filter - darunter zeichnet die WebGL-Buehne jedes Bild neu, eine Unschaerfe kostete am Telefon Zeit. */ .mk-skip,.mk-sound{position:absolute;z-index:3;top:max(18px,3.5%,calc(env(safe-area-inset-top,0px) + 12px)); display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px;border-radius:999px; border:1px solid rgba(255,236,228,.16); background:linear-gradient(180deg,rgba(32,18,21,.86),rgba(9,6,7,.86)); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 26px rgba(0,0,0,.38); color:#ece3df;font:700 11px/1 'Rajdhani',system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase; white-space:nowrap;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent; transition:background .25s,border-color .25s,color .25s,box-shadow .25s,transform .15s,opacity .3s; animation:mk-knopf-ein .6s ease backwards} @keyframes mk-knopf-ein{from{opacity:0;transform:translateY(-6px)}} .mk-skip{left:max(20px,3.5%);padding-right:13px;overflow:hidden} .mk-sound{right:max(20px,3.5%);padding-left:13px} .mk-skip:active,.mk-sound:active{transform:scale(.97)} .mk-skip:focus-visible,.mk-sound:focus-visible{outline:2px solid #eedaca;outline-offset:4px} @media(hover:hover){ .mk-skip:hover,.mk-sound:hover{border-color:rgba(var(--glow-rgb),.62);color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 10px 26px rgba(0,0,0,.38),0 0 22px rgba(var(--glow-rgb),.24)} .mk-skip:hover .mk-skip-icon{transform:translateX(2px)} } /* Skip: Symbol in Themenfarbe, darunter die Linie, die mit dem Vorspann waechst. */ .mk-skip-icon{width:14px;height:14px;flex:0 0 14px;fill:rgb(var(--glow-rgb));transition:transform .2s} .mk-skip-lauf{position:absolute;left:16px;right:16px;bottom:6px;height:2px;border-radius:2px; background:rgba(255,255,255,.1);overflow:hidden;pointer-events:none} .mk-skip-lauf::after{content:"";position:absolute;inset:0;border-radius:inherit;transform-origin:left center; transform:scaleX(var(--mk-fortschritt,0));background:rgba(var(--glow-rgb),.95);box-shadow:0 0 8px rgba(var(--glow-rgb),.8)} .mk-skip[hidden]{display:none} /* Sound v73: eigenes MK-Audiomodul statt einer einfachen grauen Kapsel. Zwei ruhige Glasflaechen, eine feine Metallkante und ein separater Audiokern geben dem Schalter Tiefe. Die WebGL-Buehne darunter bleibt ohne Flaechenunschaerfe auch am Laptop und Telefon leicht. */ .mk-sound{--mk-audio-rgb:var(--glow-rgb);height:52px;min-width:174px; padding:5px 14px 5px 6px;gap:11px;overflow:hidden;isolation:isolate; border:1px solid transparent; background: linear-gradient(155deg,rgba(27,24,27,.96),rgba(6,6,8,.97)) padding-box, linear-gradient(135deg,rgba(255,255,255,.28),rgba(var(--mk-audio-rgb),.58) 42%,rgba(255,255,255,.08) 74%) border-box; box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(255,255,255,.025), 0 12px 34px rgba(0,0,0,.48),0 0 0 1px rgba(0,0,0,.42); font-size:11px;letter-spacing:.17em} .mk-sound::before{content:"";position:absolute;z-index:0;top:0;bottom:0;left:-50%;width:42%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.09),transparent); transform:translateX(0) skewX(-16deg);pointer-events:none;opacity:0} .mk-sound::after{content:"";position:absolute;z-index:0;left:52px;right:15px;bottom:5px;height:1px; border-radius:1px;background:linear-gradient(90deg,rgba(var(--mk-audio-rgb),.9),transparent); transform:scaleX(.25);transform-origin:left;opacity:.18;transition:transform .35s ease,opacity .35s ease} .mk-sound>*{position:relative;z-index:1} .mk-sound-icon{position:relative;width:40px;height:40px;flex:0 0 40px;border-radius:50%; color:#a9a2a0;border:1px solid rgba(255,255,255,.11); background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.12),transparent 35%), linear-gradient(145deg,rgba(255,255,255,.055),rgba(0,0,0,.30)); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -8px 16px rgba(0,0,0,.20), 0 5px 13px rgba(0,0,0,.32);transition:color .25s,border-color .25s,box-shadow .25s} .mk-sound-icon::after{content:"";position:absolute;inset:3px;border-radius:inherit; border:1px solid rgba(var(--mk-audio-rgb),.12);pointer-events:none} .mk-sound-icon svg{position:absolute;left:7px;top:11px;width:18px;height:18px;overflow:visible} .mk-sound-box{fill:currentColor} .mk-sound-aus{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;transition:opacity .2s} .mk-eq{position:absolute;left:21px;bottom:10px;height:17px;display:flex;align-items:flex-end;gap:2px;opacity:0;transition:opacity .2s} .mk-eq i{display:block;width:2px;height:100%;border-radius:1px;background:currentColor;transform-origin:bottom;transform:scaleY(.35)} .mk-eq i:nth-child(2){transform:scaleY(.8)} .mk-eq i:nth-child(3){transform:scaleY(.55)} .mk-sound-copy{display:grid;gap:3px;min-width:82px;text-align:left;line-height:1} .mk-sound-kicker{color:rgba(226,217,214,.50);font:600 8px/1 'Rajdhani',system-ui,sans-serif; letter-spacing:.25em;text-transform:uppercase;transition:color .25s} .mk-sound-text{font:700 11px/1 'Rajdhani',system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase} .mk-sound-status{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:#77706f; box-shadow:0 0 0 3px rgba(255,255,255,.035);transition:background .25s,box-shadow .25s,transform .25s} .mk-sound[aria-pressed="true"]{color:#fff8f4; background: linear-gradient(155deg,rgba(var(--mk-audio-rgb),.16),rgba(8,7,9,.97) 68%) padding-box, linear-gradient(135deg,rgba(255,255,255,.42),rgba(var(--mk-audio-rgb),.88) 40%,rgba(255,255,255,.10) 76%) border-box; box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(var(--mk-audio-rgb),.10), 0 13px 38px rgba(0,0,0,.50),0 0 22px rgba(var(--mk-audio-rgb),.10)} .mk-sound[aria-pressed="true"]::after{transform:scaleX(1);opacity:.72} .mk-sound[aria-pressed="true"] .mk-sound-icon{color:rgb(var(--mk-audio-rgb)); border-color:rgba(var(--mk-audio-rgb),.48);box-shadow:inset 0 1px 0 rgba(255,255,255,.11), inset 0 -8px 16px rgba(0,0,0,.22),0 0 18px rgba(var(--mk-audio-rgb),.22)} .mk-sound[aria-pressed="true"] .mk-sound-kicker{color:rgba(var(--mk-audio-rgb),.72)} .mk-sound[aria-pressed="true"] .mk-sound-status{background:rgb(var(--mk-audio-rgb)); box-shadow:0 0 0 3px rgba(var(--mk-audio-rgb),.10),0 0 12px rgba(var(--mk-audio-rgb),.75)} .mk-sound[aria-pressed="true"] .mk-sound-aus{opacity:0} .mk-sound[aria-pressed="true"] .mk-eq{opacity:1} .mk-sound[aria-pressed="false"]{color:#c4bab6} .mk-sound[aria-pressed="false"] .mk-sound-kicker{color:rgba(196,186,182,.38)} .mk-sound[data-audio-state="waiting"][aria-pressed="true"] .mk-eq{animation:mk-eq-atmen 2.4s ease-in-out infinite} .mk-sound[data-audio-state="playing"] .mk-eq i{animation:mk-eq .82s ease-in-out infinite} .mk-sound[data-audio-state="playing"] .mk-eq i:nth-child(2){animation-duration:1.06s;animation-delay:-.4s} .mk-sound[data-audio-state="playing"] .mk-eq i:nth-child(3){animation-duration:.7s;animation-delay:-.2s} .mk-sound[data-audio-state="playing"] .mk-sound-status{animation:mk-audio-led 1.35s ease-in-out infinite} @keyframes mk-eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}} @keyframes mk-eq-atmen{0%,100%{opacity:.55}50%{opacity:1}} @keyframes mk-audio-led{0%,100%{transform:scale(.82);opacity:.65}50%{transform:scale(1.14);opacity:1}} @keyframes mk-audio-scan{0%{transform:translateX(0) skewX(-16deg);opacity:0}18%{opacity:.7}55%,100%{transform:translateX(430%) skewX(-16deg);opacity:0}} .mk-sound[data-audio-state="blocked"]{color:#fff; background: linear-gradient(155deg,rgba(var(--mk-audio-rgb),.28),rgba(8,7,9,.97) 70%) padding-box, linear-gradient(135deg,rgba(255,255,255,.50),rgba(var(--mk-audio-rgb),.95),rgba(255,255,255,.12)) border-box; animation:mk-puls 1.8s ease-out infinite} .mk-sound[data-audio-state="blocked"] .mk-sound-icon{color:#fff} @keyframes mk-puls{0%{box-shadow:0 0 0 0 rgba(var(--glow-rgb),.55)}70%,100%{box-shadow:0 0 0 12px rgba(var(--glow-rgb),0)}} @media(hover:hover) and (prefers-reduced-motion:no-preference){ .mk-sound[data-audio-state="playing"]::before{animation:mk-audio-scan 3.8s ease-in-out infinite} } .mk-sound[hidden],body.mk-feld .mk-sound{display:none} body:not(.mk-covering) .mk-sound{visibility:hidden;pointer-events:none} @media(max-width:700px){ .mk-skip,.mk-sound{height:42px;top:max(14px,calc(env(safe-area-inset-top,0px) + 10px));letter-spacing:.14em} .mk-skip{left:14px} .mk-sound{right:14px;height:48px;min-width:158px;padding:4px 12px 4px 5px;gap:9px} .mk-sound-icon{width:38px;height:38px;flex-basis:38px} .mk-sound-icon svg{left:7px;top:10px} .mk-eq{left:20px;bottom:9px} } @media(max-width:340px){ .mk-skip,.mk-sound{gap:8px;padding:0 11px;font-size:10px;letter-spacing:.1em} .mk-sound{min-width:126px;height:44px;padding:3px 10px 3px 4px} .mk-sound-icon{width:36px;height:36px;flex-basis:36px} .mk-sound-kicker,.mk-sound-status{display:none} .mk-sound-copy{min-width:68px} } .mk-footer{position:absolute;z-index:2;left:max(28px,5vw);right:max(28px,5vw);bottom:8%; display:flex;justify-content:center;align-items:end;color:#9e949e; transition:opacity .9s ease; font:600 10px/1.7 'Rajdhani',system-ui,sans-serif;letter-spacing:.21em;text-transform:uppercase} .mk-explore{pointer-events:auto;display:flex;align-items:center;flex-direction:column;gap:16px; padding:12px 22px;color:#eee9ee;text-decoration:none;letter-spacing:.22em;font-size:11px; border-radius:4px;transition:color .2s} .mk-explore:hover{color:var(--acc-pale)} .mk-explore:focus-visible{outline:1px solid #f0e7ec;outline-offset:6px} .mk-explore svg{width:16px;height:28px;stroke:currentColor;fill:none;stroke-width:1} /* ---- Der Rueckfallwert MUSS 1 sein ---- Hier stand var(--mk-reveal, 0). Gesetzt wird die Angabe aber nur von der Zeichenschleife des Heros. Laeuft die nicht - Seite in einem Hintergrund- Tab geoeffnet, WebGL-Kontext verloren, Messung ergibt null - blieb es beim Rueckfall 0, und die GANZE Seite war unsichtbar. Genau das ist passiert. Jetzt gilt: sichtbar, solange niemand etwas anderes sagt. Der Hero setzt die Null selbst, sobald er nachweislich laeuft (siehe uebernehmen() in mk-hero.js). Faellt er aus, sieht man die Seite - nicht nichts. */ /* v72: --mk-reveal und --mk-chrome sind nicht vererbt. Sie werden beim Scrollen in jedem Bild neu gesetzt - vererbt musste der Browser dafuer jedes Mal alle Elemente darunter neu berechnen (Profilseite 6,8 ms je Bild). Gelesen werden sie nur dort, wo sie gesetzt werden. Der Ausgangswert 1 behaelt die Regel oben: sichtbar, solange niemand etwas anderes sagt. */ @property --mk-reveal{syntax:'';inherits:false;initial-value:1} @property --mk-chrome{syntax:'';inherits:false;initial-value:0} .mk-enabled #profile{margin-top:calc(var(--mk-height,100svh) * -1);opacity:var(--mk-reveal,1)} .mk-hero[data-static="true"]{height:var(--mk-height)} .mk-hero[data-static="true"] .mk-stage{position:relative} .mk-hero[data-static="true"] + #profile{margin-top:0;opacity:1} /* Das alte Scrollschild und die Vordergrundeffekte würden sonst mitten auf dem Monogramm liegen. Nach dem Übergang erscheinen sie unverändert wieder. */ .mk-enabled #scrollHint{display:none} /* v66: die Mausspur bleibt auch ueber dem Monogramm sichtbar (Marcelo). */ .mk-covering #glow{visibility:hidden} .mk-covering .counter,.mk-covering .time-weather,.mk-covering .brand{opacity:0;visibility:hidden;pointer-events:none} /* ---- Der Regler oben gehoert nicht ueber das Monogramm ---- Marcelos Ansage: Navigation und Zurueck-Knopf tauchen erst ab Profile auf. !important ist hier noetig, weil body.show .nav die Sichtbarkeit selbst setzt und spaeter in der Datei steht. Die .nav bringt ihren eigenen Uebergang (opacity .5s) mit - sie blendet also weich ein, sobald die Klasse faellt, und springt nicht. */ .mk-covering .nav,.mk-covering .back-btn{ opacity:0!important;visibility:hidden!important;pointer-events:none!important} /* ---- Heim-Knopf zurueck zum MK ---- Steht links im Regler, gleiche Form wie der Design-Knopf rechts. Nur sinnvoll, wenn es die Buehne ueberhaupt gibt: am Telefon wird der Hero gar nicht gebaut, dort waere 0 einfach der Seitenanfang. */ body:not(.mk-enabled) .navhome{display:none} /* .nav davor, weil die Grundregeln fuer .themebtn im