/* CSS Matthias Rabe */
body {
font-family: 'apertura', sans-serif;
color: #000000;  
font-size: 1rem;
background-color: #3B464E;
}

body a{
color: #f28f0e;  
text-decoration: none;  
}
body a:hover{
color: #cbcbcb;  
}

/* ------------- Lade Sript und Spinner --------------- */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3b464e;
    transition: opacity 0.75s, visibility 0.75s;
  }
  
  .loader--hidden {
    opacity: 0;
    visibility: hidden;
  }
  
  .loader::after {
    content: "";
    width: 75px;
    height: 75px;
    border: 15px solid #fff;
    border-top-color: #c43836;
    border-radius: 50%;
    animation: loading 0.75s ease infinite;
  }
  
  @keyframes loading {
    from {
      transform: rotate(0turn);
    }
    to {
      transform: rotate(1turn);
    }
  }

/* ------------- Lade Sript und Spinner ENDE---------- */
strong {
font-weight: 900;
}

.handy-screen {
 margin-top: 80px;   
 background-color: #3B464E; 
}

.logo {
position: absolute; 
display: block;
top: 0px;
max-width: 70%;  
margin-top: -60px;
margin-bottom: 30px;
}

.stoerer-rabe { 
position: absolute; 
display: block;
top: 16em; 
left: 3em;
right: auto; 
max-width: 46%;    
animation: scale-3 3s ease 0s infinite normal none;   
}
@keyframes scale-3 {
  0% {
	transform: scale(0.5);
  }

  100% {
	transform: scale(1);
  }
}

@media (min-width: 576px){ 
.logo {
margin: 0px;    
top: 2em; 
left: 3.0em;  
max-width: 30%;  
}  
.stoerer-rabe { 
top: 7em; 
left: 4.0em;  
max-width: 16%;     
}  
}


@media (min-width: 768px) { 
.logo {
top: 2em; 
left: 3.0em;   
}  
.stoerer-rabe { 
top: 7em; 
left: 4.0em;  
max-width: 16%;     
}  
}


@media (min-width: 992px) { 
.logo {
top: 2em; 
left: 3.0em;   
}  
.stoerer-rabe { 
top: 7em; 
left: 4.0em; 
max-width: 16%;      
}  
}

@media (min-width: 1200px) { 
.logo {
top: 3em; 
left: 3.5em;   
}  
.stoerer-rabe { 
top: 10em; 
left: 4.5em; 
max-width: 16%;      
}  
}

@media (min-width: 1400px) { 
.logo {
top: 4em; 
left: 3.5em;   
}  
.stoerer-rabe { 
top: 13em; 
left: 4.5em;  
max-width: 16%;     
}  
}

h1,h2,h3,h4,h5 {
color: #bebebe; 
}

h1 {
font-size: 1.4rem;
}
.button {
color: #fff; 
background-color: #f28f0e;
padding: 6px 12px;
border-radius: 4px;
border: none;    
}
.button:hover {
color: #fff; 
background-color: #575756; 
padding: 6px 12px;
border: none;    
}

.footer {  
background-color: #3B464E;
}

.footer p,li,td,span {
color: #ffffff;
font-size: 1.2rem;
font-weight: normal;
}

.footer a {
color: #ffffff;  
text-decoration: none; 
font-size: 1.2rem;
}

.footer a:hover {
color: #bdbdbd; 
}

.modal-header .btn-close{
background-color: #bdbdbd;
}
.modal-body, .modal-header,.modal-footer {
background-color: #3B464E;    
}

.modal-body p,ul,a{
color: #fff;  
}

#datenschutz p,li,td {
color: #ffffff; 
font-size: 1.20rem;
font-weight: normal;
}