/* Intro: Logo, Strahlen, Eule blinzelt, Logo gleitet in die Kopfzeile */
#intro{display:none}
.intro #intro{display:grid;place-items:center;position:fixed;inset:0;z-index:100;background:var(--ivory);cursor:pointer;animation:inSafety 0s 4.6s forwards}
.intro .head .brand .em{opacity:0}
.in-logo{display:flex;flex-direction:column;align-items:center;gap:18px;color:var(--charcoal);transform:translateY(-4%)}
.in-em{width:min(46vw,250px);height:auto;overflow:visible}
.in-em path{fill:currentColor}
.in-wm{width:min(52vw,280px);height:auto;color:var(--gold-deep);opacity:0;transform:translateY(8px);animation:inUp .9s var(--ease) 1.05s forwards}
.in-wm path{fill:currentColor}
.in-tag{margin:0;font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--brown);opacity:0;animation:inUp .9s var(--ease) 1.35s forwards}
.in-em .e-base{opacity:0;transform-box:fill-box;transform-origin:50% 60%;transform:scale(.94);animation:inBase 1.1s var(--ease) .15s forwards}
.in-em .e-dash{opacity:0;transform-box:fill-box;transform-origin:50% 50%;transform:scale(.8);animation:inDash 1s var(--ease) .65s forwards}
.in-em .e-eye{opacity:0;animation:inEyeShow .01s 1.05s forwards,blink .34s ease-in-out 1.45s 1,blink .3s ease-in-out 1.95s 1}
.in-skip{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));background:none;border:0;font:500 .66rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--brown);opacity:0;animation:inUp .6s 1s forwards;cursor:pointer;padding:12px}
@keyframes inBase{to{opacity:1;transform:scale(1)}}
@keyframes inDash{to{opacity:1;transform:scale(1)}}
@keyframes inEyeShow{to{opacity:1}}
@keyframes blink{0%,100%{transform:scaleY(1)}45%,55%{transform:scaleY(.08)}}
@keyframes inUp{to{opacity:1;transform:none}}
@keyframes inSafety{to{opacity:0;visibility:hidden;pointer-events:none}}
/* Ende: weich ausblenden, Emblem fliegt per JS in die Kopfzeile */
.intro.intro-out #intro{background:transparent;transition:background .7s var(--ease)}
.intro.intro-out .in-wm,.intro.intro-out .in-tag,.intro.intro-out .in-skip{opacity:0!important;transition:opacity .35s;animation:none}
.intro.intro-done #intro{display:none}
.intro .hero .hero-tx>*{opacity:0;transform:translateY(14px)}
.intro .hero .hero-photo{opacity:0;transform:scale(.985)}
.intro.intro-out .hero .hero-tx>*,.intro.intro-done .hero .hero-tx>*{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.intro.intro-out .hero .hero-tx>*:nth-child(2){transition-delay:.08s}.intro.intro-out .hero .hero-tx>*:nth-child(3){transition-delay:.16s}.intro.intro-out .hero .hero-tx>*:nth-child(4){transition-delay:.24s}.intro.intro-out .hero .hero-tx>*:nth-child(5){transition-delay:.3s}
.intro.intro-out .hero .hero-photo,.intro.intro-done .hero .hero-photo{opacity:1;transform:none;transition:opacity 1.1s var(--ease) .1s,transform 1.4s var(--ease) .1s}
/* Kurzfassung bei reduzierter Bewegung */
.intro-short .in-em .e-base,.intro-short .in-em .e-dash,.intro-short .in-em .e-eye,.intro-short .in-wm,.intro-short .in-tag{animation:none;opacity:1;transform:none}
@keyframes inShow{to{opacity:1;transform:none}}
.intro .hero .hero-tx>*,.intro .hero .hero-photo,.intro .head .brand .em{animation:inShow 0s 4.6s forwards}
.intro.intro-out .hero .hero-tx>*,.intro.intro-out .hero .hero-photo,.intro.intro-done .head .brand .em{animation:none}
.intro.intro-done .head .brand .em{opacity:1}