/* Dino-Animation über der Map
   Original-PSD: 400 x 281 px, Ausgabegröße hier ca. 250 px Breite.
   Version 3: Beine enger unter dem Körper, Bewegung stärker nach vorne/zurück statt seitlich.
*/

.dino-runner {
  width: 100%;
  height: 190px;
  position: relative;
  overflow: hidden;
  pointer-events: none;
}

.dino-track {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 176px;
}

.dino {
  --dino-scale: 0.625;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 400px;
  height: 281px;
  transform-origin: left bottom;
  animation: dinoMove 28s linear infinite;
}

.dino-part,
.leg-img {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Starre bzw. leicht mitschwingende Dino-Teile */
.schwanz { left: 1px; top: 91px; width: 127px; height: 179px; transform-origin: 118px 48px; animation: tailSwing .72s ease-in-out infinite alternate; }
.koerper { left: 62px; top: 0; width: 337px; height: 178px; transform-origin: 145px 132px; animation: bodyBob .36s ease-in-out infinite alternate; z-index: 5; }
.kopf { left: 281px; top: 0; width: 118px; height: 87px; transform-origin: 12px 76px; animation: headBob .72s ease-in-out infinite alternate; z-index: 6; }

/* Gelenk-Rig: Die Koordinaten liegen auf Hüfte, Knie und Fußgelenk.
   Dadurch nimmt der Oberschenkel den Unterschenkel mit, und der Unterschenkel den Fuß.
*/
.leg,
.upper,
.lower,
.foot {
  position: absolute;
  width: 1px;
  height: 1px;
  transform-origin: 0 0;
}

.leg { z-index: 3; }
.leg-left { left: 174px; top: 121px; animation: legLeftStride .72s ease-in-out infinite alternate; }
.leg-right { left: 181px; top: 128px; opacity: 1; z-index: 2; animation: legRightStride .72s ease-in-out infinite alternate; }

.upper-left { animation: upperLeft .72s ease-in-out infinite alternate; }
.upper-right { animation: upperRight .72s ease-in-out infinite alternate; }

.upper-img-left { left: -27px; top: -6px; width: 47px; height: 71px; }
.upper-img-right { left: -11px; top: -4px; width: 40px; height: 39px; }

/* Knieposition relativ zur Hüfte */
.lower-left { left: 0; top: 53px; animation: lowerLeft .72s ease-in-out infinite alternate; }
.lower-right { left: 15px; top: 27px; animation: lowerRight .72s ease-in-out infinite alternate; }

.lower-img-left { left: -41px; top: -4px; width: 57px; height: 65px; }
.lower-img-right { left: -34px; top: -5px; width: 50px; height: 53px; }

/* Fußgelenk relativ zum Knie */
.foot-left { left: -6px; top: 53px; animation: footLeft .72s ease-in-out infinite alternate; }
.foot-right { left: -2px; top: 40px; animation: footRight .72s ease-in-out infinite alternate; }

.foot-img-left { left: -35px; top: -5px; width: 74px; height: 62px; }
.foot-img-right { left: -32px; top: -5px; width: 73px; height: 58px; }

@keyframes dinoMove {
  0%   { transform: translateX(-260px) scale(var(--dino-scale)) scaleX(1); }
  48%  { transform: translateX(calc(100vw - 20px)) scale(var(--dino-scale)) scaleX(1); }
  50%  { transform: translateX(calc(100vw - 20px)) scale(var(--dino-scale)) scaleX(-1); }
  98%  { transform: translateX(-260px) scale(var(--dino-scale)) scaleX(-1); }
  100% { transform: translateX(-260px) scale(var(--dino-scale)) scaleX(1); }
}

@keyframes bodyBob { from { margin-top: 0; } to { margin-top: 3px; } }
@keyframes headBob { from { transform: rotate(-1deg); } to { transform: rotate(2deg); } }
@keyframes tailSwing { from { transform: rotate(2deg); } to { transform: rotate(-2deg); } }

/* Schrittbewegung: Die kompletten Beine pendeln zusätzlich horizontal.
   Dadurch wirkt der Schritt nach vorne/zurück und nicht wie ein seitliches Spreizen. */
@keyframes legLeftStride { from { transform: translateX(-10px); } to { transform: translateX(14px); } }
@keyframes legRightStride { from { transform: translateX(14px); } to { transform: translateX(-10px); } }

@keyframes upperLeft { from { transform: rotate(10deg); } to { transform: rotate(-18deg); } }
@keyframes lowerLeft { from { transform: rotate(-14deg); } to { transform: rotate(22deg); } }
@keyframes footLeft { from { transform: translateX(2px) rotate(6deg); } to { transform: translateX(-6px) rotate(-10deg); } }

@keyframes upperRight { from { transform: rotate(-18deg); } to { transform: rotate(10deg); } }
@keyframes lowerRight { from { transform: rotate(22deg); } to { transform: rotate(-14deg); } }
@keyframes footRight { from { transform: translateX(-6px) rotate(-10deg); } to { transform: translateX(2px) rotate(6deg); } }

@media (max-width: 767px) {
  .dino-runner { height: 145px; }
  .dino { --dino-scale: 0.46; animation-duration: 14s; }
}

@media (prefers-reduced-motion: reduce) {
  .dino, .dino-part, .leg, .upper, .lower, .foot { animation: none !important; }
}

.dino-runner {
  position: relative;
  z-index: 2;
  margin-bottom: -30px;
}

.dino-runner + .ce_image {
  position: relative;
  z-index: 1;
}


.header {
  background-color: rgba(255, 255, 255, 0);
  background-image: url("/files/Fossilienwelt/Banner/Hintergrund-Navigation.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

@media only screen and (min-width: 768px) {
  .header.original .logo {
    width: 600px;
  }
}

.mainmenu {
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.9);
}

.ueberschrift-hintergrund .ce_text {
  padding: 20px;
}

.ueberschrift-hintergrund .ce_headline {
  padding: 12px;
}

.ce_accordion_v2 .toggler, .ce_accordion.style2 .toggler {
	border-radius: 20px;
	background: #000;
	border: 0px;
	color: #fff;
}