/* Panozauber */

/* Farben */
:root
{
  --hintergrund: #CFCA96;
  --vordergrund: black;
  --linkunbesucht: #0000EE;
  --linkbesucht: #551A8B;
}

body
{
    color: var(--vordergrund); 
    background-color: var(--hintergrund); 
    width: 98%; 
    text-align: center;
    font-size: 40px;
}

/* trennlinie */
hr
{
    background: var(--vordergrund);
    height: 2px; 
    border: none;
}

/* Link Farben*/
a:link
{
    color: var(--linkunbesucht);
}

a:visited
{
    color: var(--linkbesucht);
}

/* kleinerer Linktext */
#linktext
{ 
    font-size: 20px;
    word-wrap: break-word;
}    

/* Rahmen fuer map */
#top, #bottom, #left, #right 
{
    background: var(--hintergrund);
    position: fixed;
    z-index: 4;
}
#left, #right
{
    top: 0; bottom: 0;
    width: 2.5vh;
}
#left { left: 0; }
#right { right: 0; }
    
#top, #bottom 
{
	left: 0; right: 0;
	height: 2.5vh;
}
#top { top: 0; }
#bottom { bottom: 0; }

/* pulsierende Kreise */
#kreis 
{
  background-color:black;
  border: 1px solid white;
  animation-name: pulsekreis;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  z-index: 3;
}

#kreis:hover
{
    cursor:pointer;
}

@keyframes pulsekreis
{
  0%   {opacity: 0.1;}
  50%  {opacity: 0.5;}
  100% {opacity: 0.1;}
}

/* pulsierende Kreise Karte */
.kreiskarte 
{
  background-color:black;
  border: 1px solid white;
  animation-name: pulsekreis;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  z-index: 3;
}

.kreiskarte:hover
{
    cursor:pointer;
}

/* Grundriss */
#bild
{
    object-fit: contain;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}


/* OSM Karte */
#map
{
    object-fit: contain;
    margin: auto;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}


/* Logo */
#logo
{
    position: fixed;
    top: 1vh;
    left: 1vh;
    height: 10vh;
    z-index: 2;
}

/* Pfeil */
#zurueckpfeil
{
    position: fixed;
    top: 12vh;
    left: 1vh;
    height: 5vh;
    z-index: 2;
}

/* Pfeil Grundriss*/
#zurueckpfeilgrundriss 
{
    position: fixed;
    top: 13vh;
    left: 3vh;
    height: 5vh;
    z-index: 2;
}

/* Pfeil Karte*/
#zurueckpfeilmap 
{
    position: fixed;
    top: 100px;
    left: 3vh;
    height: 5vh;
    z-index: 2;
}

/* 360 Logo Animation */
#logoanimation
{
    position: fixed;
    top: 2vh;
    right: 2vh;
    height: 10vh;
    z-index: 2;
}

/* Weltkugel */
#weltkugel
{
    position: fixed;
    bottom: 1vh;
    right: 1vh;
    height: 7vh;
    z-index: 2;
}

/* Infolink */
#infolink
{
    position: fixed;
    bottom: 1vh;
    left: 1vh;
    height: 7vh;
    z-index: 2;
}

/* Bild zurueck */
#bildzurueck
{
    position: fixed;
    top: 46.5vh;
    left: 1vh;
    height: 7vh;
    z-index: 2;
}

/* Bild vor */
#bildvor
{
    position: fixed;
    top: 46.5vh;
    right: 1vh;
    height: 7vh;
    z-index: 2;
}

/* Infolink im Rahmen*/
#infolinkrahmen
{
    position: fixed;
    bottom: 3vh;
    left: 3vh;
    height: 7vh;
    z-index: 2;
}

/* Logo Grundriss*/
#logogrundriss
{
    position: fixed;
    top: 3vh;
    left: 2vh;
    height: 10vh;
    z-index: 2;
}

/* Logo Karte */
#logokarte
{
    position: fixed;
    top: 4vh;
    right: 4vh;
    height: 10vh;
    z-index: 2;
}

/* Logo Startseite */
#startlogo
{
    object-fit: contain;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 60%;
    height: 60%;
    z-index: 1;
}

/* Fullscreen Link*/
#fullscreen
{
    position: fixed;
    bottom: 1vh;
    right: 1vh;
    height: 7vh;
    z-index: 2;
}

/* Fullscreen Link Grundriss*/
#fullscreengrundriss
{
    position: fixed;
    bottom: 3vh;
    right: 3vh;
    height: 7vh;
    z-index: 2;
}

/* 360 Panorama loading */

#bildlaed
{
    position: absolute;
    top: 5vh;
    width: 98vw;
    text-align: center;
    font-size: 8vh;
    font-family: Arial, Helvetica, sans-serif;
    z-index: -1;
}

#bildlaedbeschreibung
{
    position: absolute;
    top: 60vh;
    width: 98vw;
    text-align: center;
    font-size: 8vh;
    font-family: Arial, Helvetica, sans-serif;
    z-index: -1;
}

/* Spinner */

.spinner {
    position: absolute;
    top: 45vh;
    left: 48.5vw;
    width: 3vh;
    height: 3vh;
    z-index: -1;
}

.spinner div {
   position: absolute;
   width: 50%;
   height: 150%;
   background: var(--vordergrund);
   transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
   animation: spinner-fzua35 1.2s calc(var(--delay) * 1.2s) infinite ease;
}

.spinner div:nth-child(1) {
   --delay: 0.12;
   --rotation: 36;
   --translation: 150;
}

.spinner div:nth-child(2) {
   --delay: 0.24;
   --rotation: 72;
   --translation: 150;
}

.spinner div:nth-child(3) {
   --delay: 0.36;
   --rotation: 108;
   --translation: 150;
}

.spinner div:nth-child(4) {
   --delay: 0.48;
   --rotation: 144;
   --translation: 150;
}

.spinner div:nth-child(5) {
   --delay: 0.6;
   --rotation: 180;
   --translation: 150;
}

.spinner div:nth-child(6) {
   --delay: 0.72;
   --rotation: 216;
   --translation: 150;
}

.spinner div:nth-child(7) {
   --delay: 0.84;
   --rotation: 252;
   --translation: 150;
}

.spinner div:nth-child(8) {
   --delay: 0.96;
   --rotation: 288;
   --translation: 150;
}

.spinner div:nth-child(9) {
   --delay: 1.08;
   --rotation: 324;
   --translation: 150;
}

.spinner div:nth-child(10) {
   --delay: 1.2;
   --rotation: 360;
   --translation: 150;
}

@keyframes spinner-fzua35 {
   0%, 10%, 20%, 30%, 50%, 60%, 70%, 80%, 90%, 100% {
      transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
   }

   50% {
      transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1.5%));
   }
}