/* LHA Intro-Effekte – Vorschau 08.10.2026 (aktiv nur mit ?fx=1..5, Standardseite unverändert) */
.intro[class*="fx-"] { overflow: hidden; }
.intro[class*="fx-"]::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: inherit; background-size: cover; background-position: center;
  will-change: transform, filter, opacity;
}
.intro[class*="fx-"] > * { position: relative; z-index: 2; }
.intro[class*="fx-"] > .intro_chevron { position: absolute; }

/* 1 – Ken Burns: ganz langsamer Zoom ins Fenster */
.intro.fx-1::before { animation: lfx-kb 24s ease-in-out infinite alternate; transform-origin: 50% 35%; }
@keyframes lfx-kb { from { transform: scale(1); } to { transform: scale(1.14); } }
.intro.fx-1 .intro_logo { animation: lfx-fade 1.6s ease-out .3s both; }

/* 2 – Scharfstellen: Bild kommt unscharf und hell, wird scharf, dann erscheint das Logo */
.intro.fx-2::before { animation: lfx-focus 2.8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes lfx-focus { from { filter: blur(18px) brightness(1.35); transform: scale(1.08); } to { filter: none; transform: scale(1); } }
.intro.fx-2 .intro_logo { animation: lfx-rise 1.4s ease-out 2.2s both; }

/* 3 – Parallax: beim Scrollen bleibt das Bild zurück, Logo verblasst (JS) */
.intro.fx-3 .intro_logo { animation: lfx-fade 1.2s ease-out both; }

/* 4 – Lichteinfall: warmer Lichtstreifen wandert langsam durchs Fenster */
.intro.fx-4::after {
  content: ""; position: absolute; inset: -20%; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,240,205,.0) 40%, rgba(255,240,205,.38) 50%, rgba(255,240,205,0) 60%, transparent 65%);
  mix-blend-mode: soft-light; animation: lfx-light 9s ease-in-out infinite;
}
@keyframes lfx-light { 0% { transform: translateX(-60%); } 60%,100% { transform: translateX(60%); } }
.intro.fx-4::before { animation: lfx-warm 9s ease-in-out infinite; }
@keyframes lfx-warm { 0%,100% { filter: brightness(1); } 35% { filter: brightness(1.08) saturate(1.06); } }
.intro.fx-4 .intro_logo { animation: lfx-fade 1.6s ease-out .3s both; }

/* 5 – Fenster öffnet sich: Bild öffnet sich von der Mitte, Logo setzt sich in die Oberlichte */
.intro.fx-5::before { animation: lfx-zoomout 2.6s cubic-bezier(.7,0,.2,1) .2s both; }
@keyframes lfx-zoomout { from { transform: scale(1.08); } to { transform: scale(1); } }
.intro.fx-5::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(#fff,#fff) left / 50% 100% no-repeat, linear-gradient(#fff,#fff) right / 50% 100% no-repeat;
  animation: lfx-open 2.2s cubic-bezier(.7,0,.2,1) .2s both; }
@keyframes lfx-open { to { background-size: 0% 100%, 0% 100%; } }
.intro.fx-5 .intro_logo { animation: lfx-drop 1.3s cubic-bezier(.2,.8,.2,1) 1.9s both; }

.intro[class*="fx-"] .intro_chevron { animation: lfx-fade 1s ease-out 2.5s both; }

@keyframes lfx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lfx-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes lfx-drop { from { opacity: 0; transform: translateY(-28px) scale(1.04); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .intro[class*="fx-"]::before, .intro[class*="fx-"]::after, .intro[class*="fx-"] * { animation: none !important; }
}

/* Umschalter für die Vorschau */
.lfx-switch { position: fixed; left: 16px; bottom: 16px; z-index: 99999; display: flex; gap: 4px; align-items: center;
  font: 600 13px/1 Raleway, sans-serif; background: rgba(255,255,255,.92); padding: 6px 8px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.lfx-switch span { color: #566E86; margin-right: 4px; letter-spacing: 1px; }
.lfx-switch a { display: inline-block; min-width: 28px; padding: 7px 6px; text-align: center; color: #37393F; text-decoration: none; border-radius: 3px; }
.lfx-switch a.on { background: #566E86; color: #fff; }
.intro.fx-3::before { transform: translateY(var(--lfx-y, 0px)) scale(1.02); }
.intro.fx-3 .intro_logo_div { opacity: var(--lfx-o, 1); }

/* 6 – Kombi 2 + 4: erst Scharfstellen, dann Lichteinfall in Schleife */
.intro.fx-6::before { animation: lfx-focus 2.8s cubic-bezier(.2,.7,.2,1) both, lfx-warm 9s ease-in-out 2.8s infinite; }
.intro.fx-6::after {
  content: ""; position: absolute; inset: -20%; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,240,205,0) 40%, rgba(255,240,205,.38) 50%, rgba(255,240,205,0) 60%, transparent 65%);
  mix-blend-mode: soft-light; transform: translateX(-60%);
  animation: lfx-light 9s ease-in-out 2.4s infinite;
}
.intro.fx-6 .intro_logo { animation: lfx-rise 1.4s ease-out 2.2s both; }