/* ===========================================================
   Das Intro — Hafen, Wochenschau, Herzschlag.

   Eine eigene kleine Welt: Die Farben hier sind bewusst fest
   verdrahtet und folgen nicht dem hellen Seitendesign. Rot
   kommt erst ganz am Ende dazu, und dann nur einmal.

   Der Ablauf steht als Tabelle in intro.js; hier stehen nur
   die Bewegungen selbst. Wer etwas verschieben will, ändert
   dort die Sekunden.
   =========================================================== */

.intro{
  position:fixed; inset:0; z-index:9999;
  background:#07090a; color:#ded7cb;
  overflow:hidden; cursor:pointer;
  font-family:"Bodoni Moda","Bodoni MT",Didot,Georgia,serif;
}
.intro *{ box-sizing:border-box }
.intro{ transition:opacity .85s ease-in }
.intro.endet{ opacity:0 }

/* ---------- Der Hafen ---------- */
.in-szene{
  position:absolute; left:50%; top:50%; width:134%; max-width:none;
  transform:translate(-50%,-46%) scale(1.02);
  opacity:0; filter:grayscale(1) contrast(1.15);
  animation:in-szene-auf 2.6s ease-out forwards,
            in-szene-fahrt 13s linear forwards;
}
@keyframes in-szene-auf{ to{ opacity:.92 } }
@keyframes in-szene-fahrt{ to{ transform:translate(-50%,-46%) scale(1.13) } }

/* Nebelbänke, die langsam durchziehen */
.in-nebel{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 24% at 20% 74%, rgba(190,200,205,.17), transparent 70%),
    radial-gradient(52% 18% at 72% 80%, rgba(190,200,205,.13), transparent 70%);
  animation:in-nebel-zug 26s linear infinite alternate;
}
@keyframes in-nebel-zug{
  from{ transform:translateX(-4%) }
  to{ transform:translateX(4%) }
}

/* ---------- Filmkorn und Flackern ---------- */
.in-korn{
  position:absolute; inset:-60%; pointer-events:none; opacity:.2;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23k)' opacity='.6'/></svg>");
  animation:in-korn-zappeln .48s steps(1) infinite;
}
@keyframes in-korn-zappeln{
  0%{transform:translate(0,0)}       20%{transform:translate(-2%,1.5%)}
  40%{transform:translate(1.5%,-1%)} 60%{transform:translate(-1%,-2%)}
  80%{transform:translate(2%,1%)}    100%{transform:translate(0,0)}
}
.in-flacker{
  position:absolute; inset:0; pointer-events:none; background:#000; opacity:.05;
  animation:in-flackern 3.1s steps(2) infinite;
}
@keyframes in-flackern{
  0%,100%{opacity:.04} 12%{opacity:.11} 26%{opacity:.03}
  48%{opacity:.09}     63%{opacity:.02} 81%{opacity:.08}
}

/* Dunkler Rand — und ab den Namen ein Herzschlag darin */
.in-puls{
  position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 210px 56px rgba(0,0,0,.82);
}
.intro.schlaegt .in-puls{ animation:in-schlag 1.1s ease-out 5 }
@keyframes in-schlag{
  0%{ box-shadow:inset 0 0 210px 56px rgba(0,0,0,.82) }
  7%{ box-shadow:inset 0 0 172px 34px rgba(0,0,0,.72) }
  15%{ box-shadow:inset 0 0 210px 56px rgba(0,0,0,.82) }
  25%{ box-shadow:inset 0 0 186px 44px rgba(0,0,0,.77) }
  36%,100%{ box-shadow:inset 0 0 210px 56px rgba(0,0,0,.82) }
}

/* ----------  Schrift  ----------
   Alles Textliche wird ueber EINE Regel ein- und ausgeblendet: Sichtbar ist,
   was die Klasse "da" traegt. intro.js setzt und nimmt sie zu den Zeiten aus
   seiner Tabelle. Uebergaenge statt Keyframes — dadurch laesst sich jedes
   Element auch wieder ausblenden, ohne dass es vorher springt. */
.in-buehne{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:6vh 7vw;
}
.in-kopf, .in-zeile, .in-willkommen, .in-name, .in-titel, .in-unterzeile, .in-gruss{
  opacity:0;
  transition:opacity .95s ease-out,
             transform .95s cubic-bezier(.2,.7,.3,1),
             color 1.6s ease-out,
             text-shadow 1.6s ease-out;
}
.in-kopf.da, .in-zeile.da, .in-willkommen.da, .in-name.da,
.in-titel.da, .in-unterzeile.da, .in-gruss.da{ opacity:1; transform:none }

.in-kopf{
  position:absolute; top:6.5vh; left:0; right:0;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:clamp(.55rem,1.5vw,.7rem); letter-spacing:.34em; text-transform:uppercase;
  color:#b6bfb9; text-shadow:0 1px 14px rgba(0,0,0,.9);
}
.in-zeile{
  position:absolute; max-width:22ch;
  font-size:clamp(1.3rem,4.4vw,2.4rem); line-height:1.32; font-style:italic;
  text-shadow:0 2px 26px rgba(0,0,0,.9);
}
.in-gruss{
  position:absolute; display:flex; flex-direction:column; align-items:center;
  gap:clamp(5px,1.3vh,13px); opacity:1;            /* die Kinder blenden einzeln */
}
.in-gruss.weg{ opacity:0 }
.in-willkommen{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:clamp(.57rem,1.6vw,.73rem); letter-spacing:.44em; text-transform:uppercase;
  color:#9aa39d; margin-bottom:clamp(3px,.9vh,9px);
}
.in-name{
  font-size:clamp(1.65rem,6vw,3.2rem); line-height:1.16; letter-spacing:.02em;
  transform:translateY(10px); color:#efe9dd;
  text-shadow:0 2px 30px rgba(0,0,0,.95);
}
.in-titel{
  position:absolute;
  font-size:clamp(1.9rem,7.4vw,4.1rem); line-height:1.1; letter-spacing:.015em;
  color:#efe9dd; transform:scale(.965);
}
.in-titel.blut{ color:#c4392a; text-shadow:0 0 46px rgba(150,26,16,.7), 0 2px 3px rgba(0,0,0,.92) }
.in-unterzeile{
  position:absolute; margin-top:clamp(120px,19vh,210px);
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:clamp(.53rem,1.45vw,.67rem); letter-spacing:.4em; text-transform:uppercase;
  color:#8d9691;
}

/* ---------- Überspringen ---------- */
.in-weiter{
  position:absolute; right:clamp(14px,3vw,30px); bottom:clamp(14px,3vh,28px);
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:#8d9691; background:transparent; border:1px solid #2c3431;
  padding:9px 16px; border-radius:100px; cursor:pointer;
}
.in-weiter:hover{ color:#e6dfd2; border-color:#5d6865 }
.in-weiter:focus-visible{ outline:2px solid #c4392a; outline-offset:3px }

/* ---------- Wer es ruhiger mag ---------- */
@media (prefers-reduced-motion:reduce){
  .intro *{ transition-duration:.3s !important }
  .in-zeile, .in-kopf{ display:none !important }
  .in-korn, .in-flacker, .in-nebel, .in-szene{ animation:none !important }
  .in-szene{ opacity:.9; transform:translate(-50%,-46%) scale(1.06) }
  .intro.schlaegt .in-puls{ animation:none !important }
}