/* Stiftung ex oriente – Effekt im Startbild (14.10.2026)
   1. "Tusche": die Tuschelandschaft erscheint beim Öffnen unscharf und breitet sich aus wie Tusche auf Papier
   2. danach ein sehr langsamer Schwenk über die Landschaft
   3. unter "Die Stiftung ex oriente" zeichnet sich ein roter Pinselstrich (Logofarbe #BD3833)
   Das Bild bleibt hell (Text darüber muss lesbar sein). Bei "Bewegung reduzieren" alles still. */

#c1.frame-has-backgroundimage .frame-backgroundimage {
  opacity: .17;
  transform-origin: 50% 60%;
  animation:
    sx-tusche 3s ease-out both,
    sx-schwenk 50s ease-in-out 3s infinite alternate;
  will-change: transform, filter;
}
@keyframes sx-tusche {
  0%   { opacity: 0;   filter: blur(14px) sepia(.4); transform: scale(1.12); }
  60%  { opacity: .17; }
  100% { opacity: .17; filter: blur(0) sepia(0);     transform: scale(1.08); }
}
@keyframes sx-schwenk {
  from { transform: scale(1.08) translate3d(2.5%, 0, 0); }
  to   { transform: scale(1.08) translate3d(-2.5%, -1%, 0); }
}

/* Pinselstrich unter der Überschrift (die Überschrift hat danach noch eine Leerzeile, daher absolut positioniert) */
#c1.frame-has-backgroundimage h1 { position: relative; }
#c1.frame-has-backgroundimage h1::after {
  content: "";
  position: absolute;
  left: -.15em;
  top: 1.22em;
  width: 11.2em;
  max-width: 100%;
  height: .42em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15 C 50 7 130 6 210 9 S 350 11 397 6 L 396 12 C 340 17 250 16 170 17 S 50 21 5 19 Z' fill='%23BD3833'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  opacity: .9;
  clip-path: inset(0 100% 0 0);
  animation: sx-pinsel 1.4s cubic-bezier(.6, .05, .3, 1) 1.2s forwards;
}
@keyframes sx-pinsel { to { clip-path: inset(0 0 0 0); } }

/* Überschrift und Text blenden sanft ein */
#c1.frame-has-backgroundimage h1 { animation: sx-einblenden 1.2s ease-out .4s both; }
#c1.frame-has-backgroundimage .frame-container p { animation: sx-einblenden 1.2s ease-out .9s both; }
@keyframes sx-einblenden { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #c1.frame-has-backgroundimage .frame-backgroundimage,
  #c1.frame-has-backgroundimage h1,
  #c1.frame-has-backgroundimage .frame-container p { animation: none; }
  #c1.frame-has-backgroundimage h1::after { animation: none; clip-path: none; }
}