/* =========================================================
   Intro-Animation — nur auf der Startseite, einmal pro Sitzung.
   Der Stromkreis schliesst sich, das Logo geht an, das Licht kommt.
   ========================================================= */

.intro-bg{position:fixed;inset:0;z-index:50;pointer-events:none;background:var(--dark)}
/* Solange das Intro läuft, fängt der Hintergrund die Klicks ab — sonst
   gingen sie durch auf die Seite dahinter, und wer ins Intro klickte, landete
   auf einer Referenz aus der Diaschau. Ein Klick überspringt stattdessen das
   Intro (intro.js). Gebunden an .intro-active, nicht an die Sichtbarkeit:
   die Klasse fällt genau dann weg, wenn das Intro die Seite freigibt — so
   kann die Sperre nie stehen bleiben, auch nicht beim Überspringen. */
body.intro-active .intro-bg{pointer-events:auto;cursor:pointer}
.intro-bg .grid{
  position:absolute;inset:-2px;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 42%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 42%,#000 0%,transparent 78%);
  opacity:.55;
}
.intro-bg .glow{
  position:absolute;left:50%;top:42%;width:min(120vw,1500px);aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 50%,rgba(1,237,150,.18) 0%,rgba(1,237,150,.05) 34%,transparent 62%);
  opacity:0;
}
.intro-bg .vign{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 120% 90% at 50% 36%,transparent 40%,rgba(0,0,0,.72) 100%);
}
.intro-flash{
  position:fixed;inset:0;z-index:96;pointer-events:none;
  background:radial-gradient(circle at 62% 46%,#fff 0%,rgba(1,237,150,.45) 22%,transparent 52%);
  opacity:0;mix-blend-mode:screen;
}

.stage{position:fixed;inset:0;z-index:90;display:grid;place-items:center;pointer-events:none}
/* Wortmarke = 87,5 % der Bildmarken-Breite. Das ist das Verhältnis aus dem
   Original-Logo (1435 zu 1614 Einheiten), nur mit mehr Luft dazwischen. */
.stage-col{display:flex;flex-direction:column;align-items:center;gap:clamp(30px,4.4vw,52px)}
.logo-stage{width:min(56vw,600px);aspect-ratio:1670/1245;position:relative}
.mark-svg{width:100%;height:100%;display:block;overflow:visible}
.word-stage{width:min(49vw,525px);opacity:0}
.word-svg{width:100%;height:auto;display:block}
.mark-lit{opacity:0;filter:drop-shadow(0 0 24px rgba(1,237,150,.42))}

.intro-skip{
  position:fixed;right:22px;bottom:22px;z-index:92;
  padding:9px 15px;border-radius:3px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  color:#8fa79c;font-family:inherit;font-size:12px;cursor:pointer;
  pointer-events:auto;transition:color .2s ease,border-color .2s ease;
}
.intro-skip:hover{color:#fff;border-color:rgba(255,255,255,.4)}

@media (max-width:680px){
  .logo-stage{width:60vw}
  .word-stage{width:52.5vw}
}