/* orange #FF6600 */
/* gruen #CFCA96 */
/* achtung rot #CF6464 */

body
{
    color: black; 
    background-color: #CFCA96; 
    width: 98%; 
    text-align: center; 
    font-size: 40px;
}

/* Hintergrund rot bei Loeschanfrage */
#achtung
{
    background-color: #CF6464;
}

/* trennlinie */
hr
{
    background: black;
    height: 2px; 
    border: none;
}

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

/* Rahmen fuer map */
#top, #bottom, #left, #right 
{
    background: #CFCA96;
    position: fixed;
    z-index: 4;
}
#left, #right
{
    top: 0; bottom: 0;
	width: 15px;
}
#left { left: 0; }
#right { right: 0; }
	
#top, #bottom 
{
	left: 0; right: 0;
	height: 15px;
}
#top { top: 0; }
#bottom { bottom: 0; }

/* pulsierende Kreise */
#kreis 
{
  background-color:black;
  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;}
}

/* Norden Linie */
#norden
{
    background: #FF0000;
    position: fixed;
    top: 0; bottom: 0;
    z-index: 2;
}

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

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

/* Button */
.button 
{
  background-color: white;
  color: black;
  border: 2px solid #555555;
  border-radius:10px;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  z-index: 5;
}

.button:hover
{
  background-color: #555555;
  color: white;
}