/* beyond bubbles – Logo-Intro (Farbkreise) */
#bb-overlay{position:fixed;inset:0;z-index:999999;background:var(--bb-intro-bg,#fff);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:1}
#bb-overlay[hidden]{display:none}
#bbi-logo{width:min(64vw,620px);transform-origin:50% 50%}
#bbi-logo svg{display:block;width:100%;height:auto;overflow:visible}
@media (max-width:782px){#bbi-logo{width:min(92vw,620px)}}
/* bis das Skript alles vorbereitet hat, bleibt das Logo unsichtbar (kein Aufblitzen des fertigen Logos) */
#bb-overlay:not(.bbi-ready) #bbi-logo{visibility:hidden}

/* Kreise und Sprechblasen: poppen auf */
#bbi-logo .bbi-d{opacity:0;scale:.15;transform-box:fill-box;transform-origin:50% 50%}
#bb-overlay.bbi-play .bbi-d{animation:bbi-pop .85s cubic-bezier(.34,1.56,.64,1) var(--d,0s) forwards}
@keyframes bbi-pop{0%{opacity:0;scale:.15}35%{opacity:1}100%{opacity:1;scale:1}}

/* Buchstaben, Ringe, y: steigen ein (individuelle Eigenschaft translate, damit das transform-Attribut der Buchstaben erhalten bleibt) */
#bbi-logo .bbi-g{opacity:0;translate:0 70px}
#bb-overlay.bbi-play .bbi-g{animation:bbi-rise .75s cubic-bezier(.2,.8,.25,1) var(--d,0s) forwards}
@keyframes bbi-rise{0%{opacity:0;translate:0 70px}100%{opacity:1;translate:0 0}}

/* Abgang: Logo wandert (wenn möglich) ins Header-Logo, Overlay blendet aus */
#bb-overlay.bbi-out{opacity:0;pointer-events:none;transition:opacity 1s ease .15s}
#bb-overlay.bbi-out #bbi-logo{transform:translate(var(--fx,0px),var(--fy,0px)) scale(var(--fs,1.05));transition:transform 1s cubic-bezier(.4,0,.2,1)}
#bb-overlay.bbi-skip{opacity:0;pointer-events:none;transition:opacity .4s ease}

#bb-skip{position:absolute;right:1.25rem;bottom:1.25rem;padding:.5em 1em;border:0;border-radius:999px;background:transparent;color:#666;font:inherit;font-size:.9rem;cursor:pointer;opacity:0;animation:bbi-in .8s ease 1.2s forwards}
#bb-skip:hover,#bb-skip:focus-visible{color:#000;background:rgba(0,0,0,.06)}
@keyframes bbi-in{to{opacity:1}}

/* Intro erneut spielen: kleine Blase mit Play-Zeichen oben links */
#bb-replay{position:absolute;top:12px;left:58px;z-index:99998;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#ee6c2b;cursor:pointer;transition:scale .2s ease}
#bb-replay::after{content:"";position:absolute;left:50%;top:50%;margin:-6px 0 0 -3px;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #000}
#bb-replay:hover,#bb-replay:focus-visible{scale:1.1}
#bb-replay:focus-visible{outline:2px solid #000;outline-offset:2px}
#bb-overlay:not([hidden]) ~ #bb-replay,html.has-modal-open #bb-replay{display:none}
.admin-bar #bb-replay{top:44px}
@media (max-width:782px){.admin-bar #bb-replay{top:58px}}

@media (prefers-reduced-motion:reduce){#bb-overlay{display:none}}