/* ===== overlay-fix.css ===== */

/* Bezugsrahmen für absolut positionierte Overlays */
#logo .image-wrapper {
  position: relative;
  display: inline-block;
}

/* Hauptbild: Referenzebene */
#logo .main-image {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  transform: none;            /* Basis ohne Transform */
  transform-origin: center;
}

/* Krume (zwischen den Logos) – Größe/Position behältst du in deinem CSS,
   hier nur die Ebene definieren */
#logo .overlay-image {
  position: absolute;
  z-index: 2;                 /* liegt über main, unter overlay-logo */
}

/* Overlay-Logo: deckungsgleich über dem Hauptlogo */
#logo .overlay-image-logo {
  position: absolute;
  inset: 0;                   /* top/right/bottom/left = 0 → füllt Wrapper */
  width: 100%;
  height: 100%;
  object-fit: contain;        /* keine Verzerrung, folgt der Main-Box */
  z-index: 3;
  pointer-events: none;       /* Klicks gehen durchs Overlay */
  transform: none;            /* keine Basisverschiebung */
  transform-origin: center;
  transition: none;           /* verhindert ungewolltes Animieren */
}

/* Optional: identische „Zitter“-Animation für main & overlay-logo,
   damit beide synchron bleiben (falls du .trembling setzt) */
@keyframes overlayFix_tremble {
  0%   { transform: translate(0,0) rotate(0deg); }
  25%  { transform: translate(0.3%, -0.3%) rotate(-0.4deg); }
  50%  { transform: translate(-0.3%, 0.3%) rotate(0.4deg); }
  75%  { transform: translate(0.2%, -0.2%) rotate(-0.3deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}
#logo .main-image.trembling,
#logo .overlay-image-logo.trembling {
  animation: overlayFix_tremble 0.35s ease-in-out 1;
  will-change: transform;
}