body  {
  //font-size:calc(14px + (32 - 14) * ((100vw - 320px) / (1600 - 320)));
  font-family: Times, serif
  //background-size:cover;
  
  padding: 10px;
  background: #104E8B;
}


h1, h2, h3 {
  //font-family: Times, serif;
  font-family: Helvetica, sans-serif;
}
.breaking-news-container {
  overflow: hidden;
  position: relative;
  height: 50px; /* Höhe des Breaking News-Elements */
  background-color: #ff0000; /* Hintergrundfarbe ändern */
}

.breaking-news {
  white-space: nowrap;
}

.news-text {
  display: inline-block;
  padding: 0 20px; /* Füge Abstand um den Text herum hinzu */
  font-weight: bold;
  color: #fff; /* Textfarbe ändern */
  animation: scrollText 10s linear infinite; /* Animation für den fließenden Text */
}

@keyframes scrollText {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  padding: 0;
  margin: 0;
  list-style: none;
  
}

.TextSpalte {
  background: lightgrey;
  padding: 15px;
  width: 100%;
  height: 50vh;
  margin-top: 10px;
  overflow:scroll;
  
}
.FotoBereich {
  text-align:center;
  background: #000040;
  padding: 15px;
  width: 80%;
  height: auto;
  
  margin-top: 10px;
  margin-bottom:10px;
}

div.BildHeadline {
  /*border:3px solid darkgrey;*/
  display: flex;
  justify-content:space-evenly;
  /*margin:2px;*/
  padding:10px;
  font-size:120%;
  color:white; 
}

.NewsBox {
 margin:5px;
/*border-radius: 15px; */
 padding:5px;
 /*width:100%; */
 height:100px;
 border: grey solid 2px;
 overflow:scroll;
 /*float:left; */
}
.SmallText {
  font-size:70%;
}
.dashbord {
 margin:5px;
 border: grey solid 2px;
 /*padding:10 px; */
 /*width:device-width;*/
 height:110px;
 border-radius: 15px;
 /*box-sizing: border-box;*/
 display:flex;
 background-color:#000040;
 
 
}

.dashbord:hover {
  height:auto;
  overflow:visible;
}

.dashbord:active {
  height:200px;
  overflow:scroll;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.dashbord > div {
 border: #000040 solid 3px;
 padding: 5px;
 margin:4px;
 width: 100%;
 box-sizing: border-box;
 border-radius: 15px;
 overflow:hidden;
 background-color:white;
}
.dashbord > div:hover {
 height:auto;
 overflow:visible;
 display:block;
}
.dashbord > div:active {
 height:auto;
 
 overflow:visible;
 display:block;
}

td { 
border:black solid 0px;
font-size:80%;
margin-left: 10px;
padding: 5px;
}
tr { 
outline: thin solid;

}
table tr td.bez {
	color:grey;
}
table { margin-left:auto;
		margin-right:auto;
        
}

div.InstName { font-size:150%;
}
div.head { font-size:60px; margin-left:20px;
}

li {
    margin-bottom: 5px; /* Ändere den Abstand nach unten */
}
ul {
    padding-bottom: 5px; /* Ändere den Abstand nach unten */
}

.navbar {
  display: flex; /* Flexbox verwenden */
  justify-content: left; /* Elemente gleichmäßig verteilen */
  align-items: center;
  padding-left: 0px; /* Linker Abstand */
  padding-right: 40px; /* Rechter Abstand */
  margin-bottom:10px; 
  overflow: hidden;
  background-color: white;
  border: solid #eb3455;
  border-style: solid none solid none;
}

.navbar a {
  float: left;
  font-size: 100%;
  color:  #104E8B;
  text-align: center;
  padding: 4px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 100%;  
  border: none;
  outline: none;
  color: #104E8B;
  padding: 4px 20px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color:#eb3455;
}
.navbar a:active, .dropdown:active .dropbtn {
  background-color:#eb3455;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 20px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: #000040;
  padding: 6px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}
.sub-dropdown {
  position: relative;
  display: block;
}

.sub-dropbtn {
  display: block;
  font-size: 100%;
  min-width: 160px;
  border: none;
  outline: none;
  color: #104E8B;
  padding: 5px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  text-align: left;
}

.sub-dropdown-content {
  margin-left: 50%;
  width: fit-content;
  display: none;
  position: absolute;
  background-color: white;
  min-width: 240px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.sub-dropdown-content a {
  
  color: grey;
  padding: 5px 10px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.sub-dropbtn:hover {
  background-color: #ddd;
}

.sub-dropdown-content a:hover {
  background-color: #ddd;
}

.sub-dropdown:hover .sub-dropdown-content {
  display: block;
}

/* Für positive und negative Zahlen => wird per js zugeteilt */
.red-num {
    color: red;
  }
@keyframes blink {
            0% { opacity: 1; }
            50% { opacity: 0; }
            100% { opacity: 1; }
        }

        .blinkend {
            color: red;
            animation: blink 2s infinite;
        }

  .green-num {
  color: green;}
* {
  box-sizing: border-box;
}



/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
  //max-height: 900px;   /* Höhe im geschlossenen Zustand */
  //overflow-y: auto;    /* Verhindert dass Inhalt rausläuft */
  //border: 1px solid #ccc;
  
   
  
}

/* Right column */
.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 10px;
  font-size: 80%;
}

.rightcolumn h2 {
    font-size: 100%; /* oder 0.8em */
}
/* Fake image */
.fakeimg {
  background-color: #aaa;
  
  
  padding: 20px;
}

.menu {
  background-color: #aaa;
  width: 100%;
  padding: 5px;
  margin-top: 0px;
}
.menu a {
        text-decoration: none;
    }

.menu:hover {
  background-color: red;
}
.ainherit {
    text-decoration: none;
    color: inherit; /* Damit die Standardfarbe des Textes beibehalten wird */
  }
.googlemaps {
  background-color: #aaa;
  width: auto;
  height: 600px;
  padding: 20px;
}
.logo {
    width: 60%; /* Festlegen der Breite des Bildes */
    height: auto; /* Automatisches Anpassen der Höhe, um das Seitenverhältnis beizubehalten */
    display: block; /* Verhindert, dass das Bild zusätzlichen Raum unterhalb hat */
    margin: 10px; /* Zentriert das Bild horizontal */
	float: left;
  }
.container {
    /*display: flex;  Verwendet Flexbox für die Anordnung der Elemente */
    align-items: center;
	padding: 10px;}
	
.text-container h1,h2,h3 {
	text-align: center;
	padding-right: 5%;
	padding-left: 5%;
}
.text-container img {
	display: block;        /* Macht das Bild zu einem Block-Element */
    margin: 0 auto; 
	width: 80%;
	height: auto;
}
.text-container h3 {
	padding-right: 5%;
	padding-left: 5%;
}
.text-container p {
	margin-top: 5px; 
	text-align: justify; 
	padding-right: 5%;
	padding-left: 5%;
}
.text-container figcaption {
	padding-top: 1%;
	color: gray; 
	font-size:80%;
	//font-style: italic; 
	text-align: center;
}
.content {
    margin-left: 20px; /* Abstand zwischen dem Bild und dem nachfolgenden Element */
    margin-right: 20px; /* Abstand vom rechten Rand */
  }
  
/* Add a card effect for articles */
.card {
   background-color: white;
   padding: 10px;
   margin-top: 10px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
}
.card a {
 /*text-decoration: none;*/
 color: inherit; /* Damit die Standardfarbe des Textes beibehalten wird */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */
.footer {
  color: #104E8B;
  padding: 20px;
  text-align: center;
  background: white;
  margin-top: 20px;
}
/* Footer */
.footer:hover {
  color:red;
 
  
}
.webcam {
	max-width: 90%; /* Das Bild wird nie breiter als sein Container sein */
    height: auto; /* Das Bild passt seine Höhe automatisch an, um das Seitenverhältnis beizubehalten */
    display: block; /* Verhindert, dass das Bild zusätzlichen Raum unterhalb hat */
    margin: 0 auto; /* Zentriert das Bild horizontal */
    
	
}
.WAContainer {
  display: block;
  text-decoration: none;
  color: inherit;
  background-color: white;
}
.WAContainer:hover {
  display: block;
  text-decoration: none;
  color: inherit;
  background-color: grey;
}

.whatsapp-icon {
  vertical-align: middle; /* Ausrichtung des Bildes vertikal zentrieren */
}

.whatsapp-text {
  vertical-align: middle; /* Ausrichtung des Textes vertikal zentrieren */
}

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.fullscreen:hover img {
  max-width: 90%;
  max-height: 90%;
}

* {box-sizing: border-box;}

.flex-container {display: flex;flex-direction: row;font-size: 12px;}
.flex-25 {background-color: white;font-size:8vw;padding: 3px;flex: 25%;border:none;margin: 0 auto;}
.flex-33 {background-color: white;font-size:8vw;padding: 4px;flex: 33%;border:solid;}
.flex-50 {background-color: #f1f1f1;font-size:8vw;padding: 4px;flex: 50%;border:solid;}
.flex-75 {background-color: white;font-size:8vw;padding: 0px;flex: 75%;border:none;}
.flex-100 {background-color: #f1f1f1;font-size:8vw;padding: 4px;flex: 100%;border:solid;}
*@media (max-width: 300px) {.flex-container {flex-direction: column;}} 

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
#cookieBanner {
            display: none;
			font-size: 120%;
            background-color: white; /* Dunkle Hintergrundfarbe */
            color: #eb3455; /*rot */
            padding: 15px;
            position: fixed;
            bottom: 0;
			
            width: 75%;
            text-align: center;
            z-index: 9999; /* Hohe Z-Index, um sicherzustellen, dass der Banner über allem anderen liegt */
        }

#cookieBanner a {
            color: blue; /* Gelbe Linkfarbe */
            text-decoration: underline;
}  
.svnoblue {color:  #104E8B;}
.new-badge {
            background-color: red;
            color: white;
            font-size: 0.6em;
            padding: 2px 5px;
            border-radius: 3px;
            margin-left: 5px;
            position: relative;
            top: -10px;
			left: -10px;
        }