/* =========================================================================
   „Stresslos." — Intro der Gänsemanufaktur-Seite (Variante 4)
   Wird NUR von gaensemanufaktur.html eingebunden.
   Eingebaut 18.08.2026. Zum Abschalten: den <script>-Aufruf am Seitenende
   auskommentieren — sonst ändert sich nichts an der Seite.
   ========================================================================= */

#gm-intro{
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  background:#4a0e1a; color:#fff; overflow:hidden;
  opacity:1; transition:opacity .55s ease;
}
#gm-intro.aus{ opacity:0; pointer-events:none }
html.gm-intro-laeuft, body.gm-intro-laeuft{ overflow:hidden !important }

#gm-intro .gm-verlauf{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(60% 60% at 50% 42%, rgba(160,40,58,.55), transparent 70%),
    linear-gradient(160deg,#5c1220 0%,#43101b 55%,#2b070f 100%);
}
#gm-intro .gm-film{
  position:absolute; inset:0; z-index:1; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity 1.3s ease;
}
#gm-intro .gm-film.an{ opacity:.70 }

/* Vignette + feines Filmkorn */
#gm-intro::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 38%, rgba(0,0,0,.72) 100%);
}
#gm-intro::after{
  content:""; position:absolute; inset:-50%; z-index:3; pointer-events:none;
  opacity:.11; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  animation:gmKorn .9s steps(3) infinite;
}
@keyframes gmKorn{
  0%{transform:translate(0,0)} 33%{transform:translate(-2%,1.5%)}
  66%{transform:translate(1.5%,-1%)} 100%{transform:translate(0,0)}
}

#gm-intro .gm-buehne{
  position:relative; z-index:4; width:100%; padding:0 24px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}

#gm-intro .gm-skip{
  position:absolute; z-index:6; top:calc(var(--topbar-h,38px) + 16px); right:22px;
  background:transparent; border:1px solid rgba(255,255,255,.35); color:rgba(255,255,255,.8);
  font:600 11px/1 Arial,sans-serif; letter-spacing:.18em; text-transform:uppercase;
  padding:10px 16px; border-radius:2px; cursor:pointer; transition:.2s;
}
#gm-intro .gm-skip:hover{ border-color:#e2b96b; color:#e2b96b }

/* ---------------------------------------------------------- Wortrolle */
#gm-intro .gm-rolle{
  display:flex; align-items:center; justify-content:center; gap:.28em;
  flex-wrap:wrap;
  font-family:Georgia,'Times New Roman',serif; font-weight:400;
  font-size:clamp(24px,4.3vw,58px); line-height:1.05; letter-spacing:-.015em;
  text-shadow:0 3px 40px rgba(0,0,0,.5);
}
#gm-intro .gm-fix{ opacity:0; animation:gmFix .9s cubic-bezier(.16,1,.3,1) .15s forwards }
@keyframes gmFix{ from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none} }
#gm-intro .gm-punkt{ opacity:0; transition:opacity .5s ease .15s }
#gm-intro .gm-punkt.an{ opacity:1 }

#gm-intro .gm-fenster{
  position:relative; display:inline-block; overflow:hidden; color:#e2b96b;
  height:1.24em; width:7.3em; text-align:left;
  transition:width .6s cubic-bezier(.16,1,.3,1), height .45s cubic-bezier(.16,1,.3,1), opacity .4s ease;
}
#gm-intro .gm-fenster.zu{ width:0; opacity:0 }
#gm-intro .gm-fenster span{
  position:absolute; left:0; top:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:flex-start;
  white-space:nowrap; opacity:0; transform:translateY(105%);
}
/* Das neue Wort startet erst, wenn das alte weitgehend draußen ist —
   sonst stehen kurz zwei Wörter gleichzeitig lesbar im Bild. */
#gm-intro .gm-fenster span.rein{ animation:gmRein .46s cubic-bezier(.2,.85,.25,1) .30s forwards }
#gm-intro .gm-fenster span.raus{ animation:gmRaus .34s cubic-bezier(.6,0,.8,.3) forwards }
@keyframes gmRein{ from{opacity:0; transform:translateY(105%)} to{opacity:1; transform:translateY(0)} }
@keyframes gmRaus{ from{opacity:1; transform:translateY(0)} to{opacity:0; transform:translateY(-105%)} }

/* ------------------------------------------------ Abbinder mit Markenlogo */
#gm-intro .gm-abbinder{
  margin-top:30px; display:flex; flex-direction:column; align-items:center;
  opacity:0; transform:translateY(14px) scale(.97);
  transition:opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1);
}
#gm-intro .gm-abbinder.an{ opacity:1; transform:none }
#gm-intro .gm-linie{
  width:min(300px,52vw); height:1px; margin-bottom:26px;
  background:linear-gradient(90deg,transparent,rgba(226,185,107,.85),transparent);
}
/* logo-vektor.png ist bordeaux auf transparent und wäre auf dunklem Grund
   unsichtbar — der Filter färbt es in warmes Creme. Datei bleibt unverändert. */
#gm-intro .gm-abbinder img{
  width:min(330px,62vw); height:auto; display:block; opacity:.95;
  filter:brightness(0) invert(1) sepia(.28) saturate(1.6) hue-rotate(-8deg) brightness(1.02);
}

@media (prefers-reduced-motion:reduce){ #gm-intro{ display:none !important } }
@media (max-width:600px){
  /* 21.08.2026 — Fehlerbehebung Handy:
     .gm-fenster enthaelt ausschliesslich absolut positionierte Woerter. Diese
     tragen nichts zur Breite bei, deshalb ergab das bisherige width:auto genau
     0 Pixel; zusammen mit overflow:hidden wurde jedes Wort vollstaendig
     weggeschnitten. Auf dem Handy war nur noch "Stresslos." zu sehen, die
     Wortrolle (bestellt./geliefert./aufgeknuspert./gefeiert.) fehlte komplett.
     Loesung: eigene Zeile mit echter Breite statt width:auto. */
  #gm-intro .gm-rolle{ display:block; width:100%; font-size:clamp(27px,7.4vw,42px) }
  #gm-intro .gm-fenster{ display:block; width:100%; min-width:0; text-align:center; margin:.1em auto 0 }
  #gm-intro .gm-fenster.zu{ width:100%; height:0; opacity:0 }
  #gm-intro .gm-fenster span{ justify-content:center }
  #gm-intro .gm-abbinder{ margin-top:22px }
  #gm-intro .gm-linie{ margin-bottom:18px }
}

/* Solange das Intro läuft, bleiben Cookie-Banner und Ferien-Popup unsichtbar.
   Sie erscheinen danach ganz normal — es wird nichts unterdrückt, nur um
   5,5 Sekunden verschoben. Vor der Einwilligung läuft ohnehin kein Tracking. */
body.gm-intro-laeuft #cookie-banner,
body.gm-intro-laeuft #ferien-popup{
  opacity:0 !important; pointer-events:none !important;
  transition:opacity .5s ease;
}