/* Logo-Intro 2.0: original approved geometry; proportionally shortened timings, locally scoped; no logo filters or crops. */
:root{--ans-intro-ready:2}
.ans-logo-intro{--intro-blue:#2b78c5;--intro-green:#3a9b59;box-sizing:border-box;outline:none;font:16px/normal system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
html:is(.ans-intro-pending,.ans-intro-active){overflow:var(--ans-intro-overflow,visible)}
html:is(.ans-intro-pending,.ans-intro-active) body>:not(#ansLogoIntro){visibility:var(--ans-intro-gate,visible)}
html.ans-intro-pending{animation:ans2-unlock 1200ms step-end forwards}
html.ans-intro-pending #ansLogoIntro{animation:ans2-pending-clear 1200ms step-end forwards}
html.ans-intro-active{animation:ans2-unlock 4332ms step-end forwards}
.ans-logo-intro{position:fixed;inset:0;z-index:2147483000;overflow:hidden;display:none;place-items:center;isolation:isolate;
  background:radial-gradient(ellipse 84% 82% at 49% 46%,#ffffff 3%,#f4f9fd 54%,#e3eef8 100%)}
.ans-logo-intro[hidden]{display:none!important}
.ans-logo-intro > .intro-glow,.ans-logo-intro > .intro-ring,.ans-logo-intro > .intro-flight{grid-area:1/1}
.ans-logo-intro::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 24% 29%,#2b78c50a,transparent 45%),radial-gradient(ellipse at 73% 75%,#3a9b590e,transparent 47%)}
.ans-logo-intro::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.26;
  background-image:linear-gradient(90deg,#2b78c514 1px,transparent 1px),linear-gradient(#2b78c514 1px,transparent 1px);
  background-size:72px 72px;mask-image:radial-gradient(ellipse at center,#000 7%,transparent 76%)}
.intro-ring{position:absolute;width:min(78vw,690px);aspect-ratio:1;border-radius:50%;pointer-events:none;opacity:0;
  border:1px solid #2b78c518;will-change:opacity,transform}
.intro-ring::before,.intro-ring::after{content:"";position:absolute;inset:15%;border:1px solid #3a9b5914;border-radius:50%}
.intro-ring::after{inset:29%;border-color:#2b78c51b}
.intro-ring-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--intro-green);left:17%;top:14%;box-shadow:0 0 15px #3a9b5940}
.intro-glow{position:absolute;width:min(96vw,800px);aspect-ratio:1;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff8 2%,#2b78c50b 30%,#3a9b5905 48%,transparent 68%)}
/* Gleiche Geometrie wie das transparente Original-Gesamtlogo: darin liegt das A bei 19,1 % Bildmitte. */
.intro-flight{position:relative;width:min(83vw,820px);aspect-ratio:2048/741;will-change:transform,opacity;transform:translateZ(0)}
.intro-symbol-frame{position:absolute;left:19.09%;top:50.07%;width:34.67%;height:85.02%;
  transform:translate3d(39.1%,-50%,0);will-change:transform,opacity;backface-visibility:hidden}
.intro-symbol-img{display:block;width:100%;height:100%;object-fit:contain;opacity:0;
  transform:translateZ(0) scale(.87);transform-origin:center;will-change:transform,opacity;backface-visibility:hidden}
.intro-full-logo{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;
  opacity:0;transform:translateZ(0) scale(.98);transform-origin:center;will-change:transform,opacity;backface-visibility:hidden}
.intro-tagline{position:absolute;left:0;right:0;top:calc(50% + min(15.7vw,158px));text-align:center;
  color:#50718a;letter-spacing:.19em;font-size:clamp(.68rem,.9vw,.84rem);font-weight:700;text-transform:uppercase;opacity:0;
  will-change:opacity,transform;pointer-events:none}
.intro-accent{position:absolute;width:min(25vw,204px);height:2px;left:50%;top:calc(50% + min(12.5vw,123px));border-radius:20px;
  transform:translateX(-50%) scaleX(.2);opacity:0;background:linear-gradient(90deg,transparent,var(--intro-blue),var(--intro-green),transparent);
  pointer-events:none;will-change:transform,opacity}
/* Nur opacity/transform sind animiert: keine flächigen blur()-Filter, Masken-Crops oder Layout-Animationen. */
.ans-logo-intro.intro-playing .intro-ring{animation:ans2-surround 0.961s 0.044s cubic-bezier(.2,.78,.2,1) both}
.ans-logo-intro.intro-playing .intro-glow{animation:ans2-glow-in 0.961s 0.044s ease-out both}
.ans-logo-intro.intro-playing .intro-symbol-img{animation:ans2-symbol-reveal 0.873s 0.175s cubic-bezier(.19,1,.3,1) both}
.ans-logo-intro.intro-playing .intro-symbol-frame{animation:ans2-symbol-to-left 0.725s 1.441s cubic-bezier(.23,.78,.29,1) both,ans2-symbol-hide 0.454s 2.079s ease-in-out forwards}
.ans-logo-intro.intro-playing .intro-full-logo{animation:ans2-full-reveal 0.655s 2.044s cubic-bezier(.21,.77,.25,1) both}
.ans-logo-intro.intro-playing .intro-tagline{animation:ans2-tag-on 0.542s 2.489s ease-out both,ans2-tag-off 0.314s 3.537s ease-in forwards}
.ans-logo-intro.intro-playing .intro-accent{animation:ans2-accent-on 0.576s 2.376s ease-out both,ans2-accent-off 0.314s 3.537s ease-in forwards}
.ans-logo-intro.intro-playing .intro-flight{animation:ans2-logo-flight 1.083s 3.581s cubic-bezier(.43,.04,.75,.73) both}
.ans-logo-intro.intro-playing{animation:ans2-intro-clear 0.568s 4.332s ease-in-out forwards}
@keyframes ans2-surround{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes ans2-glow-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes ans2-symbol-reveal{0%{opacity:0;transform:translateZ(0) scale(.87)}100%{opacity:1;transform:translateZ(0) scale(1)}}
@keyframes ans2-symbol-to-left{from{transform:translate3d(39.1%,-50%,0)}to{transform:translate3d(-50%,-50%,0)}}
@keyframes ans2-symbol-hide{from{opacity:1}to{opacity:0}}
@keyframes ans2-full-reveal{from{opacity:0;transform:translateZ(0) scale(.98)}to{opacity:1;transform:translateZ(0) scale(1)}}
@keyframes ans2-tag-on{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes ans2-tag-off{from{opacity:1}to{opacity:0}}
@keyframes ans2-accent-on{from{opacity:0;transform:translateX(-50%) scaleX(.2)}to{opacity:1;transform:translateX(-50%) scaleX(1)}}
@keyframes ans2-accent-off{from{opacity:1}to{opacity:0}}
@keyframes ans2-logo-flight{0%{transform:translateZ(0) scale(1);opacity:1}55%{transform:translateZ(0) scale(1.37);opacity:1}100%{transform:translateZ(0) scale(2.35);opacity:0}}
@keyframes ans2-intro-clear{0%,9%{opacity:1;pointer-events:auto}100%{opacity:0;visibility:hidden;pointer-events:none}}

/* Dark Edition shares every approved animation, timing and original logo contour. */
html[data-bs-theme=dark] .ans-logo-intro{background:radial-gradient(ellipse 84% 82% at 49% 46%,#223248 0%,#14243a 54%,#0f172a 100%)}
html[data-bs-theme=dark] .ans-logo-intro::before{background:radial-gradient(ellipse at 24% 29%,#2b78c51c,transparent 45%),radial-gradient(ellipse at 73% 75%,#3a9b5910,transparent 47%)}
html[data-bs-theme=dark] .ans-logo-intro::after{opacity:.18}
html[data-bs-theme=dark] .intro-ring{border-color:#2b78c535}
html[data-bs-theme=dark] .intro-ring::before{border-color:#3a9b592a}
html[data-bs-theme=dark] .intro-ring::after{border-color:#2b78c52e}
html[data-bs-theme=dark] .intro-glow{background:radial-gradient(circle,#2b78c51a 2%,#2b78c50d 30%,#3a9b5908 48%,transparent 68%)}
html[data-bs-theme=dark] .intro-tagline{color:#c8d6e8}
@keyframes ans2-unlock{0%{--ans-intro-gate:hidden;--ans-intro-overflow:hidden}100%{--ans-intro-gate:visible;--ans-intro-overflow:visible}}
@keyframes ans2-pending-clear{0%{visibility:visible;pointer-events:auto}100%{visibility:hidden;pointer-events:none}}
@media(max-width:700px){.intro-flight{width:94vw}.intro-ring{width:min(100vw,500px)}.intro-glow{width:100vw}.intro-tagline{top:calc(50% + min(25vw,110px));font-size:.65rem;letter-spacing:.11em}.intro-accent{top:calc(50% + min(20vw,82px))}}
/* Short landscape/zoomed viewports preserve the original aspect ratio without clipping the hold phase. */
@media(max-height:440px){.intro-flight{width:min(83vw,820px,110svh)}.intro-ring{width:min(78vw,94svh)}.intro-glow{width:100svh}.intro-tagline{top:calc(50% + 29svh);font-size:.65rem}.intro-accent{top:calc(50% + 24svh)}}
@media(prefers-reduced-motion:reduce){html:is(.ans-intro-pending,.ans-intro-active){animation:none;overflow:visible}html:is(.ans-intro-pending,.ans-intro-active) body>:not(#ansLogoIntro){visibility:visible!important}.ans-logo-intro{display:none!important}.ans-logo-intro,.ans-logo-intro *{animation:none!important}}
html:is(.ans-intro-pending,.ans-intro-active) #ansLogoIntro:not([hidden]){display:grid}
