/* Glitch 
  // Coole Access Styles: https://freefrontend.com/css-glitch-effects/
  <h1 class="signal" data-text="...under construction">...under construction</h1>
*/
.signal {
  position: relative;
  font-size: 32px;
  letter-spacing: 0.03em;
  color: #e8e8e8; }
.signal::after { /* DUPLIKAT */
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #e8e8e8;
  opacity: 0.7;
  pointer-events: none;
  animation: drift 3s infinite; }
@keyframes drift { /* GLITCH IMPULSE */
  0%, 85% {
    transform: translate(0, 0);
    filter: none;
    clip-path: inset(0 0 0 0);
  }
  88% {
    clip-path: inset(20% 0 50% 0);
    transform: translateX(-6px);
    filter: blur(1.2px);
  }
  90% {
    clip-path: inset(50% 0 20% 0);
    transform: translateX(8px);
  }
  92% {
    clip-path: inset(10% 0 70% 0);
    transform: translateX(-4px);
    filter: blur(0);
  }
  100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
  } }
/* Image Zoom 
  <div id="zoomerMyModal" class="modal"> 
    <span class="close" onclick="document.getElementById('zoomerMyModal').style.display='none'">&times;</span>
    <img class="modal-content" id="zoomerImg01">
    <div id="zoomerCaption"></div>
  </div>
  // at bottom
  <script>
    bildzoomer() {
      var modal = document.getElementById('zoomerMyModal');
      var img = $('.myImg');
      var modalImg = $("#zoomerImg01");
      var captionText = document.getElementById("zoomerCaption");
      $('.myImg').click(function(){
        modal.style.display = "block";
        var newSrc = this.src;
        modalImg.attr('src', newSrc);
        captionText.innerHTML = this.alt;
      });
      var span = document.getElementsByClassName("close")[0];
      span.onclick = function() { modal.style.display = "none"; }
      //console.log("Hier");
    }
    document.addEventListener('DOMContentLoaded', function() {
      bildzoomer();
    });
  </script>
*/
.myImg {
  border-radius: 		5px;
  cursor: 					pointer;
  margin-top:				5px;
  transition: 			0.3s; }
.myImg:hover {
  opacity: 					0.7;
  z-index:          2;  }
.modal {
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.9); 
  display: 					none; 
  height: 					100%; 
  left: 						0;
  overflow: 				auto; 
  padding-top: 			100px; 
  position: 				fixed; 
  top: 							0;
  width: 						100%; 
  z-index: 					2; }
.modal-content {
  display: 					block;
  margin: 					auto;
  max-width: 				1000px;
  width: 						80%; }
#zoomerCaption {
  color: 						#ccc;
  display: 					block;
  height: 					150px;
  margin: 					auto;
  max-width: 				700px;
  padding: 					var(--padding) 0;
  text-align: 			center;
  width: 						80%; }
.modal-content, #zoomerCaption {
  animation-name: 						zoom;
  animation-duration: 				0.6s;
  -webkit-animation-duration: 0.6s;
  -webkit-animation-name: 		zoom; }
@-webkit-keyframes zoom {
  from {-webkit-transform:    scale(0)}
  to {-webkit-transform:			scale(1)} }
@keyframes zoom {
  from {transform:            scale(0)}
  to {transform:							scale(1)} }
.close {
  color: 					            #f1f1f1;
  font-size: 			            40px;
  font-weight: 		            bold;
  position: 			            absolute;
  right: 					            35px;
  top: 						            15px;
  transition: 		            0.3s; }
.close:hover,
.close:focus {
  color: 						#bbb;
  cursor: 					pointer;
  text-decoration:  none; }
/* blinking arrow 
  <div class="cv_mehrDetails" onclick="">
    <div class="arrow_001" id=""></div>
    Mehr Details 
  </div>
*/
.arrow_001{
  width: 0;
  height: 0;
  display:inline-block;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(0, 0, 0, 1);
  animation: arrow_001_Fade 1s infinite; }
@keyframes arrow_001_Fade {
  0% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0; transform: translateY(0px); }
  100% { opacity: 1; transform: translateY(0); } }
/* Animierter Loading Spinner */
.spinner {
  border: 6px solid rgba(255, 255, 255, 0.2);
  border-top: 6px solid #00d4ff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin .5s linear infinite;
  margin-left: 15px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(90deg); }
  50% { transform: rotate(180deg); }
  75% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}
/* Short Overview for ServerInfo */
.tbl_001{ border-collapse: collapse; min-width:413px; white-space: nowrap; }
.tbl_001 tr:nth-child(1){ background-color: black; color:white; }
.tbl_001 td, .tbl_002 td{ text-align: center; }
.tbl_001 tr:nth-child(even){ background-color: #2196f3; color:white; }
.tbl_001_corr{ text-align: left !important; font-weight: bold; }
.tbl_001_red{ color:red; }
.tbl_001_green{ color:green; }
/* --- */
/* --- */
/* --- */


.berufe_details_div{
  align-items: right;
  cursor:pointer;
  width: 116px;
}
.berufe_details_div:hover{
  background-color: green;
}



.btn_urls {
  align-items: center;
  background-image: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);
  border: 0;
  border-radius: 8px;
  box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
  box-sizing: border-box;
  color: #ffffff;
  display: inline-flex;
  font-size: 18px;
  justify-content: center;
  line-height: 1em;

  padding: 3px;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s; }
.btn_urls:active,
.btn_urls:hover {
  outline: 0; }
.btn_urls span {
  background-color: rgb(5, 6, 45);
  padding: 16px 24px;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  transition: 300ms;}
.btn_urls:hover span {
  background: none; }
.btn_urls:active {
  transform: scale(0.9);}
@media print {
  
}