@media (width <= 767px) {
#my_popup { width: 90vw; }
}
/* Tablets */
@media (768px <= width <= 1023px) {
#my_popup { width: 70vw; }
}
/* Desktops */
@media (width >= 1024px) {
#my_popup { width: 30vw; }
}

* {
    margin: 0;
    padding: 0;
}

body
{
font-family: Open Sans, Source Sans Pro, arial, sans-serif; 
background-color: #6F90BE;
color: ;
text-align: center; 
font-size: 110%;
margin-top: 10px;
margin-right: auto; /* Abstand rechts */
margin-bottom: 10px;
margin-left: auto; /* Abstand links */
}

header {
    width: 100%;
    float: left;
    background-color: #6F90BE;
    margin-top: 10pt;
    margin-right: auto; /* Abstand rechts */
    margin-left: 10px; /* Abstand links */  
    border-bottom: 1px solid aliceblue;
    text-align: left;font-size: 120%;
    color: #ffd700;
}

#header_auf_startseite {
    text-align: center;
    color:gold;
    font-size: 120%;
    letter-spacing: 0.em;
    text-decoration:none;
    margin-top: 10px;
    margin-right: auto; /* Abstand rechts */
    margin-left: auto; /* Abstand links */
    margin-bottom: 20px;
   
}  

#my_popup{
	
	height: auto;
	Background: #b1d6f4;
    margin-top: 0.5em;
    margin-right: auto; /* Abstand rechts */
    margin-left: auto; /* Abstand links */
    margin-bottom: 1em;    
	Box-sizing: border-box; /* for inside padding */
	Padding: 1em 1em; 
    border: 5px solid #303782;
    font-size: 1em;

	/* for center */
	Position:absolute;
	top:50%;
	left:50%;
	Transform: translate(-50%,-50%);

	/* for hider */
	display:none;
   }

button {
    color: rgba(4, 38, 116, 0.93);
    padding: .3em .5em;
    border: 2px solid black;
    background-color: rgba(56, 100, 203, 0.25);
    font-size: .8em;
    text-align: center;
}

button:hover {
    background-color: rgba(255, 215, 0, 0.63);
    color:black;
}


/* damit der Text nicht gold wird, wie bei den anderen links hier */
#my_text:hover{
    text-decoration: none;
    color: black;
}

#my_link
{
    text-decoration: none;
    color: #2f2f2f;
    font-size: 1.2em;
    font-weight: 700;
    
}

#my_link:hover{
    text-decoration: none;
    color: #303782;
}


#logo {
    border: 1px solid black;
    height: 50pt;
    width: auto;
}

a:link
{
color: black;
text-decoration:;
}
a:visited
{
color:black;
text-decoration:;
}
a:focus 
{
color:#ffd700;
font-weight:;
font-feature-settings: 
font-size: em;
text-decoration: none;
}

a:hover
{
color:gold;
font-weight:;
letter-spacing: em;
font-size: em;
text-decoration:underline;
} 

a:active
{
color:gold;
font-weight:;
font-feature-settings: 
font-size:;
text-decoration:none;
}

table {
    width: 100%; 
    display: center;
    margin: 25px auto auto;
    border: px solid #0bf00b;
    border-collapse: solid;
    font-family: Open Sans, Source Sans Pro, arial, sans-serif;
    font-size:80%;
    text-align: center;
    border-spacing: .1em;
}



caption {
    color: gold;
    background-color: 0;
    text-align: center;
    font-size: 120%;
    margin-top: 20pt;
    margin-right: auto; /* Abstand rechts */
    margin-bottom: 1px;
    margin-left: auto; /* Abstand links */  
}

th, td {
  padding: .7em .5em;
  border-radius: .1em;  
}  


td {
  width: 33%;
    font-style: ;
  text-align: ;
  box-shadow: inset 1px 3px 5px -3px rgba(0,0,0,.5);
}   

td:empty{
  box-shadow: none;
}

img {
transform: rotate(deg);
border: 0px solid black;
margin-top: 0.1em;
}

.auswahlbild /* Formatierung von Bildern in Tabelle */
{
    border-width: .2em;  
    border-color: black;
    border-radius: ; /* dann wird's rund */
    width: px;
    height: ;
    object-fit: cover;
    object-position: center 
}