.pw-switch {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1rem;
}

.pw-switch input {
    display: none;
}

.pw-switch label {
    position: relative;
    width: 54px;
    height: 30px;
    background: #dc3545;          /* Rot */
    border-radius: 30px;
    cursor: pointer;
    transition: .25s;
    box-shadow: inset 0 0 4px rgba(0,0,0,.25);
}

.pw-switch label::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 50%;
    transition: .25s;
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
}

.pw-switch input:checked + label {
    background: #198754;          /* Bootstrap-Grün */
}

.pw-switch input:checked + label::after {
    transform: translateX(24px);
}

.pw-switch span {
    user-select: none;
    cursor: pointer;
}

.btn-primary

 {  --btn-disabled-bg: #adb5bd;}
   
.kwsbackground {background-image:linear-gradient(180deg, #0061a1 21%, #0070ba 100%)}

.bg-kws {background-color: #0070ba;}
.text-kws {color: #0070ba;}

:root {
    --cassiopeia-color-primary: #fff;
    --brand-text-color: #0070ba;
     --info: #996600;
     --body-bg: #fff;
    --cassiopeia-color-link: #0070ba;
    --cassiopeia-color-hover: #0070ba;
    --template-text-dark: #000 !important;
    --template-text-light: #ffffff;
    --template-text-footer: #000;
    --template-link-color: #0070ba;
     --link-color: #0070ba;
      --link-hover-color: #0070ba;
    --template-first-color:#0070ba!important;
      --secondary-color:  #0070ba;
    --template-special-color: #0070ba!important;
    --template-footer-color: #0070ba;
    --template-footer-divider-color:#008fed;
    --template-border-color: #0070ba;
    --body-color: #000!important;
    --body-font-size: 1.1rem;
    --menu-label-color: #0070ba;
    --menu-background-color: #333;
    --menu-background-hover-color: #0070ba;
    --menu-text-color: #fff!important;
    --menu-divider-color: #555;
  --tertiary-bg: #0070ba !important;
  --menu-text-color: #000;
    --menu-label-size: calc(28px + (60 - 28) * ((100vw - 320px) / (2800 - 320)));
  --list-group-bg: #fff !important;

     scroll-behavior: smooth;

  --c1: #f0f8ff;
	--c2: #0070ba;
     
}

.sitebg {background-color: #0070ba;}

 .card {    --card-bg: #fff;
            --card-cap-bg: #fff;
            --card-border-color: #fff;
            --card-border-radius: 0px;
            --card-border-width: 0px;}


.fullwidth {
  position: relative;
  margin: 0 -16px;}

.height-200 {height: 200px;
             overflow: hidden;}

.height-400 {height: 400px;
             overflow: hidden;}

.height-500 {height: 600px;
             overflow: hidden;}

.max-height-500 {
            height: auto;
            max-height: 500px;
             overflow: hidden;}
  

body { font-family: Arial, Helvetica, sans-serif; overflow-x: hidden; background: 
		repeating-linear-gradient(45deg, #fff0 0 1px, aliceblue 0 3px, #fff0 0 4px),
		repeating-linear-gradient(-45deg, #fff 0 1px, aliceblue 0 3px, #fff0 0 4px); }

.list-group-item {background-color: #fff;}

.item-image img { 
  
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.item-content {

  /* padding-top: 3rem; */
  text-align:center ; 
}

.readmore {padding-top: 30px;}


.table {
    --table-color-type: initial; 
    --table-bg-type: none; 
    --table-color-state: initial; 
    --table-bg-state: initial; 
    --table-color: #000; 
    --table-bg: none; 
    --table-border-color: #0070ba; 
    --table-accent-bg: transparent; 
    --table-striped-color: var(--emphasis-color); 
    --table-striped-bg: none; 
    --table-active-color: var(--emphasis-color); 
    --table-active-bg: rgba(var(--emphasis-color-rgb),.1);
    --table-hover-color: #fff!important; 
    --table-hover-bg: var(--template-special-color);
     vertical-align: top; 
     border-color: var(--table-border-color);
     width: 100%; 
     margin-bottom: 1rem;}

thead, tbody, tfoot, tr, td, th {
    border-color: var(--table-border-color);
    border-style: solid;
    border-width: 1px;
}
.table {
    border-collapse: collapse;
    border: 1px solid #ffffff; /* Für IE <= 7; Farbe entspricht Hintergrundfarbe */
    border-style: hidden;
}

.table td {width: 9%;}

.table tbody tr:first-of-type {
    --table-bg: none;
    --table-color: #fff!important;}

.table tbody tr:first-of-type td {
    border-color: #fff!important;
    border-style: solid;
    border-width: 1px;
}

.table thead tr:first-of-type a {color: none;}

th:hover a {color: var(--table-hover-color);}

h1, .h1 {
    font-size: calc(1.1rem + 1.5vw);
}

h3, .h3 {font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem); color: var(--brand-text-color);}

.no-grid {
  
    margin-left: -1rem;
    margin-right: -1rem;}

.wrap {position: responsive; z-index: 0;}

.z-index-1: {position: absolute; z-index: 1;}

.text-justify {text-align: justify;}

.breadcrumb-item.active {
    color: #9E9E9E;}

@media(max-width:850px) {
  .wave-container::before {    
    height: 84px
  }  
}

body {
  scrollbar-width: thin;
  scrollbar-color: #000 #ddd;
  
}

body::-webkit-scrollbar {
  width: 15px;
  height: 10px;
}

body::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom right, #996600 0%, #cc9900 100%);
  
}

body::-webkit-scrollbar-track {
  background-color: #000;
  border: 1px solid #cc9900;
}

body::-webkit-scrollbar-button {
  background-color: #996600;
   border: 1px solid #cc9900;
}

.form-check-input[type=checkbox] {border-color: var(--template-first-color); border-radius: 0;}

.form-check-input:checked {
    background-color: var(--body-bg);
    border-color: var(--body-bg);}


.input-group-text {
  color: #000!important;
  border: 0;}

.btn-primary,
.btn-secondary{
    background-color: var(--template-first-color);
    border: 0;
    color: #000;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--link-hover-color)!important;
    border-color: var(--link-hover-color)!important;}

.btn-secondary:focus, .btn-secondary:hover, .btn-secondary:active {
  
    background-color:  var(--secondary-color)!important;
    border-color: var(--body-color)!important;
    color: #000!important;
}

.btn-secondary:active {
  transform: scale(.80);}


.site-grid {margin-left: 1rem; margin-right: 1rem;}


.bottom {align-self: flex-end;}
.center {align-self: center;}

.shape-divider-bottom-a  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.shape-divider-bottom-a svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 66px;
}

.shape-divider-bottom-a .shape-fill {
    fill: #FFFFFF;
}

.headerimg {height: 400px; width: 100%;}


.bottom-a { padding-top: 5rem; }
 
.bottomimage {position: relative; margin: 0 -15px;}

.bottomimage img {height: auto; width: 100%;}


/* Container-Anpassung für Joomla 6 / Bootstrap 5 Breadcrumbs */
.breadcrumb {
    margin-bottom: 0;
    padding: 0.75rem 1rem;
    background-color: transparent; /* Nutzt den dunklen Hintergrund des übergeordneten DIVs */
    font-family: inherit;
    color: #a0aec0;
}

/* Einzelne Breadcrumb-Elemente */
.breadcrumb-item {
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    color: #a0aec0; /* Ein helles, edles Graublau für inaktive Elemente */
}

/* Links (vorherige Seiten) - Höhere Spezifität erzwingen */
div.breadcrumb-item a,
.breadcrumb-item a {
    color: #38bdf8 !important; /* Erzwingt das leuchtende Hellblau */
    text-decoration: none !important; /* Verhindert ungewollte Unterstreichungen im Normalzustand */
    transition: color 0.2s ease-in-out;
}

/* Hover-Effekt für Links - Überschreibt globale Template-Regeln */
div.breadcrumb-item a:hover,
.breadcrumb-item a:hover,
.breadcrumb .breadcrumb-item a:hover {
    color: #7dd3fc !important; /* Hellere Wunschfarbe beim Hovern */
    text-decoration: underline !important; /* Unterstreichung erzwungen */
    text-decoration-color: #7dd3fc !important; /* Stellt sicher, dass auch die Linie die Wunschfarbe hat */
}

/* Das aktuelle (letzte) Element */
.breadcrumb-item.active {
    color: #ffffff; /* Reines Weiß für die aktuelle Seite */
    font-weight: 500;
}

/* Trennzeichen via Font Awesome 6 Free */
.breadcrumb-item + .breadcrumb-item::before {
    float: none; /* Bootstrap 5 Standard-Float zurücksetzen */
    font-family: "Font Awesome 6 Free";
    font-weight: 900; /* Wichtig, damit das Icon korrekt geladen wird */
    content: "\f105"; /* Unicode für fa-angle-right */
    color: #64748b; /* Dezentes Schiefergrau für das Trennzeichen */
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    font-size: 0.85rem;
}

.bottom-b .grid-child {padding: 2.5rem 0.5em;}

body.wrapper-fluid .site-grid {grid-gap: 0 0;}

main {padding: 0em;}

@media (min-width: 768px) {
  
  main {padding: 1.5em;}

}




a {var(--body-color); text-decoration:none!important;}

.back-to-top-link {background-color: var(--template-first-color); }

.back-to-top-link:focus, .back-to-top-link:hover, .back-to-top-link:active{
    background-color: var(--cassiopeia-color-hover);
    border-color: #000;
    color: #000!important;
}

.item-page img {
  
  padding: 10px;
  width: 100%;
  max-width: 500px;
  height:auto;
  
   }

.originalwidth {width: auto!important;}

.imgmittel {width: auto!important; height: 150px!important;}

.imggross {width: auto!important; height: 350px!important;}

/*
.item-page img:hover {
  
  transform: scale(1,5);
}

@keyframes zoomfullsize {
      0%   {max-width:500px}
      100% {max-width:100%}
      }
*/

.container-header { 
  
  color:var(--template-text-dark);
  font-weight: var(--cassiopeia-font-weight-headings,700);
  background-color:var(--cassiopeia-color-primary);
  background-image: none; 
} 

.container-header::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 50px 0 50px;
  border-color: var(--cassiopeia-color-primary) transparent transparent transparent;
  left: 76%;
  transform: translateX(-50%) translateY(100%);}

.btn-close {
  
  color:var(--template-text-dark);
  
}


.header .btn {
    font-size: 2rem;
    color:var(--template-text-dark);
    float:left;
}



.brand-logo img {
    height: 100%;
    max-height: 225px;
    padding-right: 5px;
    vertical-align: top;
    float: left;
    margin-left:-15px;
    transform: scale(1);
    transition: .3s ease;
  
}

.brand-logo img:hover {transform: scale(0.75);}

.brand-logo {line-height: 3rem;
             text-shadow: -1px -1px 1px hsl(224.8, 28.5%, 48.8%), 
                           1px 1px 1px hsl(0,0%,0%);}

.brand-logo span {
    float: left;
    
   
}

.container-header .navbar-brand a {
 
  text-decoration: none;
  color:var(--brand-text-color);
}

.container-header .site-title {

   font-size: 1.25rem;
   
}

.container-header .navbar-brand {
    color:var(--template-text-dark);
    -webkit-margin-end: auto;
    display: inline-block;
    font-size: 2rem;
    margin-inline-end: auto;
    position: relative;
}

/* Erreicht Smartphones und Tablets im Hochformat (max-width: 767.98px) */
@media (max-width: 767.98px) {
    .container-header .navbar-brand {
        font-size: 1.5rem !important; /* Passt die Schriftgröße an (Standard ist oft 1.25rem - 1.5rem) */
        max-width: 90%;               /* Verhindert, dass das Logo mehr als 60% der Breite einnimmt */
        white-space: nowrap;          /* Verhindert einen unschönen Zeilenumbruch */
        overflow: hidden;             /* Schneidet Text ab, falls er dennoch zu lang ist */
        text-overflow: ellipsis;      /* Fügt "..." an, falls der Text abgeschnitten wird */
    }
}

/* Optional: Für größere Tablets im Hochformat (bis zu 991.98px), falls es dort auch eng wird */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container-header .navbar-brand {
        font-size: 1.4rem !important;
    }
}

.container-header .site-description {
   
  color:var(--template-text-dark);
   font-size: 1.25rem;
   line-height: 0.1rem;
   
}

/* .item-page p, .blog-featured p {text-align: justify}


.item-page p::first-letter, .blog-featured p::first-letter {
  color:var(--template-text-dark);
  font-weight: bold;
 
} */


.category-desc {margin-bottom: 1.5rem;}

.footer {


  position:relative;
  margin-top: -1em;
  padding: 1.5em;
  background-image:none;
  background: radial-gradient(circle at center, #0070ba 0%, #00395f 38%, #001522 100%);
  color: #fff;
  
  color: var(--template-text-footer);
  border-top: 3px solid var(--template-footer-divider-color);
  font-weight: bold;
 
}

.footer a:hover { color: var(--template-text-footer);}


figcaption {
  
   margin: 0 1.5em 1.5em;
}

thead tr:first-of-type {
  background-color: var(--template-first-color)!important;
  color: #fff!important;
}


/* Blockquote main style */
/* ==================================================
   Blockquote
================================================== */

blockquote {

    position: relative;

    margin: 2rem 0;

    padding: 1.5rem 2rem;

    background:
        linear-gradient(
            90deg,
            rgba(0,112,186,.08),
            rgba(0,112,186,.03)
        );

    border-left: 4px solid #0070ba;

    border-radius: 0 .5rem .5rem 0;

    box-shadow:
        inset 0 0 0 1px rgba(0,112,186,.08);

    color: #495057;

    font-style: italic;

    line-height: 1.8;
}


/* Dekoratives Anführungszeichen */

blockquote::before {

    content: "\f10d";

    font-family: "Font Awesome 6 Free";
    font-weight: 900;

    position: absolute;

    top: 1rem;
    right: 1.25rem;

    font-size: 2rem;

    color: rgba(0,112,186,.15);

    pointer-events: none;
}


/* Optionales Footer-Element */

blockquote footer {

    margin-top: 1.25rem;

    padding-top: .75rem;

    border-top: 1px solid rgba(0,112,186,.15);

    font-style: normal;

    font-size: .9rem;

    color: #0070ba;
}


/* Optionales cite-Element */

blockquote cite {

    font-style: normal;

    font-weight: 600;

    color: #005a94;
}


/* Gedankenstrich vor der Quelle */

blockquote footer::before {

    content: "— ";

    color: rgba(0,112,186,.7);
}
.back-to-top-link {
  
  position: fixed;
  border-radius: 0;}

/* carousell */

.container-component>*+*, .container-component>:first-child, .container-sidebar-left>*+*, .container-sidebar-left>:first-child, .container-sidebar-right>*+*, .container-sidebar-right>:first-child {margin-top: 0;}

.carousel-caption {
  
  position: absolute;
  bottom: 0;
  left: 1%;
  right: auto;
  font-size: 4em;
  text-shadow: 2px 2px 5px white;
  color:var(--template-text-dark);
  background-color:var(--body-color);
}
  
  .carousel-item {
        position: relative;
    }

   .carousel-item a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-decoration: none; /* No underlines on the link */
        z-index: 10; /* Places the link above everything else in the div */
        background-color: #FFF; /* Fix to make div clickable in IE */
        opacity: 0; /* Fix to make div clickable in IE */
        filter: alpha(opacity=1); /* Fix to make div clickable in IE */
    }
  


/* Zähler */

.counter {
    
    padding: 20px 0;
    border-radius: 5px;
}

.count-title {
    font-size: 40px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
}

.count-text {
    font-size: 13px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
}

.fa-2x {
    margin: 0 auto;
    float: none;
    display: table;
   
}

.fa-xlg {font-size: 5rem;}




/* MOD Bootstrap Galery */

.bootstrap5lightboxgalleryimages-container > div {
	width: 200px;
	min-width: 200px;
	max-width: 200px;
	height: auto;
	margin: 10px;
}
.bootstrap5lightboxgalleryimages-container {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}

  /* Reveal on scroll  */

.container-sidebar-right {overflow: hidden;}

.reveal {
  position: relative;
  opacity: 0;
}
.reveal.active {
  opacity: 1;
}

.active.fade-bottom {
  animation-name: fade-bottom;
  animation-duration: 1s;
  animation-timing-function: ease-in;
}
.active.fade-left {
  animation-name: fade-left;
  animation-duration: 1s;
  animation-timing-function: ease-in;
}
.active.fade-right {
  animation-name: fade-right;
  animation-duration: 1s;
  animation-timing-function: ease-in;
}

.active.fade-background {
  animation-name: fade-background;
  animation-duration: 1s;
  animation-timing-function: ease-in;
}
.reveal.active.d2s {animation-duration: 1750ms;!important animation-timing-function: ease;}



@keyframes fade-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}


@keyframes fade-background {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.floating {
    
	transform: translatey(0px);
	animation: floating 6s ease-in-out infinite;}

@keyframes floating {
	0% {
		
		transform: translatey(0px);
	}
	50% {
		
		transform: translatey(-20px);
	}
	100% {
		
		transform: translatey(0px);
	}
}

   /* Intro */


#fly-in {
  position: relative;
  height: 100px;
  width: 100%;
  font-size: 2em;
   font-weight: 700;
  margin: 1em auto;
  text-transform: uppercase;
  text-align: center;
}

#fly-in span {
  display: block;
  font-size: .4em;
  opacity: .8;
}

#fly-in div {
  position:absolute;
  opacity: 0;
  animation: switch 32s linear infinite;
}

@media (min-width: 768px) {
  
  #fly-in {
  height: 200px;
  font-size: 4em;
 
}
  
  #fly-in span {
  
  font-size: .4em;
  
}
}

#fly-in div:nth-child(2) { animation-delay: 4s}
#fly-in div:nth-child(3) { animation-delay: 8s}
#fly-in div:nth-child(4) { animation-delay: 12s}
#fly-in div:nth-child(5) { animation-delay: 16s}
#fly-in div:nth-child(6) { animation-delay: 20s}
#fly-in div:nth-child(7) { animation-delay: 24s}
#fly-in div:nth-child(8) { animation-delay: 28s}

@keyframes switch {
    0% { opacity: 0;filter: blur(10px); transform:scale(8)}
    3% { opacity: 1;filter: blur(0); transform:scale(1)}
    10% { opacity: 1;filter: blur(0); transform:scale(.9)}
    13% { opacity: 0;filter: blur(5px); transform:scale(.1)}
    80% { opacity: 0}
    100% { opacity: 0}
}


.copyright {
    font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
    font-weight: bold;
}

.copyright a, .copyright a::hover, .copyright a::active, .copyright a:visitid {text-decoration: none; color: #000;}

.footer a:not(.btn):hover, .footer a:not(.btn):focus, .footer .btn-link:hover, .footer .btn-link:focus {text-decoration: underline; color: #000}

/* spezielle Ändrungen für diese Seite */

.container-sidebar-right .sidebar-right:first-child {margin-top: 55px;}

#whoisbtn {color: #000!important; font-size: 1rem;}

#mod_joomisp_whois_domainname.form-text {font-size: 1.4rem; margin-top: .1rem;}

.container-topbar { position:relative; color: #000; background-color: #EC6B1E;}

.container-topbar::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 100px 0 100px;
  border-color: #EC6B1E transparent transparent transparent;
  left: 76%;
  transform: translateX(-50%) translateY(100%);}


.page-header {
                padding-bottom: 15px;
                text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
                 0px -5px 35px rgba(255,255,255,0.3);
  }

.page-header h2 a,
.page-header h1 { color: var(--brand-text-color); }

.card {
  margin: 1rem;
  border-radius:0px;
  padding: 9px;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}



.copyright {
  
  font-family: Arial,Helvetica Neue,Helvetica,sans-serif; 
  font-size: calc(14px + (48 - 14) * ((100vw - 300px) / (1600 - 300)));
  font-weight: bold;
  color: #a0a0a0;
}

.copyright span:nth-child(even) {color: #003366;}

.copyright:hover {color: #ccc !important;}

.container-banner {
    margin: 0 0 .25rem;}

input[type=text] {
  width: 100%;
  background-color:transparent;
}

.footer {margin-top: 15px;}

.cover {object-fit: cover; object-position: bottom left;}

code {
    display: block;
    padding: 2px 4px;
    color: #d14;
    background-color: #f7f7f9;
    border: 1px solid #e1e1e8;
    white-space: pre-wrap;
    word-break: break-word;
    }

/* Spamfilter */


/* EXPURGATE Animation 

.exp-scene {
    position: relative;
    width: 100%;
    max-height: 500px;
    height: min(500px, 100vw * .45);
    overflow: hidden;

    background:
        radial-gradient(circle at center, #123b7a 0%, #071630 45%, #030b1d 100%);
    font-family: Arial, sans-serif;
}


.exp-scene::before {
    content:"";
    position:absolute;
    inset:0;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(0,229,255,.08),
        transparent
      );

    animation: exp-backgroundMove 8s linear infinite;
}


@keyframes exp-backgroundMove {

    from {
        transform:translateX(-100%);
    }

    to {
        transform:translateX(100%);
    }

}

*/

.exp-packet {

    position:absolute;
     left:-50px;
    width:22px;
    height:22px;

    clip-path:polygon(
        25% 0,
        75% 0,
        100% 50%,
        75% 100%,
        25% 100%,
        0 50%
    );

}


.exp-clean {

    background:#00eaff;

    box-shadow:
      0 0 10px #00eaff,
      0 0 25px #00eaff;

    animation:
      exp-travel 7s linear infinite;

}



.exp-spam {

    background:#00eaff;

    box-shadow:
      0 0 10px #00eaff,
      0 0 25px #00eaff;

    animation:
      exp-expurgate 10s linear infinite;

}



/* Positionen */

.exp-packet:nth-child(1){top:5%;animation-delay:0s;}
.exp-packet:nth-child(2){top:20%;animation-delay:1s;}
.exp-packet:nth-child(3){top:27%;animation-delay:2s;}
.exp-packet:nth-child(4){top:40%;animation-delay:3s;}
.exp-packet:nth-child(5){top:57%;animation-delay:4s;}
.exp-packet:nth-child(6){top:71%;animation-delay:4.5s;}
.exp-packet:nth-child(7){top:83%;animation-delay:6s;}
.exp-packet:nth-child(8){top:90%;animation-delay:7s;}



@keyframes exp-travel {

0% {
    left:-50px;
}

45% {
    left:43%;
}

100% {
    left:105%;
}

}



@keyframes exp-expurgate {

0% {
    
    left:-50px;

    background:#00eaff;

    box-shadow:
      0 0 10px #00eaff,
      0 0 25px #00eaff;

}


42% {

    left:43%;

    background:#00eaff;

}



48% {

    left:43%;

    background:#ff3030;

    box-shadow:
      0 0 10px red,
      0 0 30px red;

    transform:scale(1.4);

}



55% {

    left:43%;

    background:#ff3030;

    box-shadow:
      0 0 15px red,
      0 0 40px red;

    transform:scale(1);

}



99% {

    left:-50px;

    background:#ff3030;

    box-shadow:
      0 0 15px red,
      0 0 40px red;

}



100% {

    left:-50px;

    background:#00eaff;

    box-shadow:
      0 0 10px #00eaff,
      0 0 25px #00eaff;

}

}



/* EXPURGATE Scanner */

.exp-portal {

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:22%;
    max-width: 320px;
    height:90%;

    min-width:160px;

    border:2px solid #00eaff;


    background:
    linear-gradient(
      rgba(0,229,255,.15),
      rgba(0,0,0,.3)
    );


    box-shadow:

      0 0 20px #00eaff,

      inset 0 0 30px #00eaff;


    overflow:hidden;

}




.exp-portal::before {

    content:"";

    position:absolute;

    width:100%;
    height:30px;


    background:

      linear-gradient(
      transparent,
      rgba(255,255,255,.8),
      transparent);


    animation:
      exp-scan 1s infinite linear;

}



@keyframes exp-scan {

from {
    top:-40px;
}

to {
    top:100%;
}

}




.exp-portal::after {

    content:"⬡";

    position:absolute;

    inset:0;


    display:flex;

    justify-content:center;

    align-items:center;


    font-size:min(180px,30vw);

    color:rgba(0,229,255,.08);


    animation:
      exp-rotate 8s linear infinite;

}




@keyframes exp-rotate {

to {
    transform:rotate(360deg);
}

}





.exp-title {

    position:absolute;

    top:30%;

    width:100%;

    text-align:center;


    color:white;

    letter-spacing:6px;

    font-weight:bold;


    text-shadow:
      0 0 10px cyan;

}



.exp-status {

    position:absolute;

    bottom:30px;

    width:100%;

    text-align:center;


    color:#00eaff;

    font-size:12px;

    letter-spacing:3px;

}



.exp-scene::after {

    content:"";

    position:absolute;

    top:50%;

    left:0;

    width:100%;

    height:1px;


    background:

      linear-gradient(
      90deg,
      transparent,
      cyan,
      transparent);


    opacity:.4;

}

/* HEADER */ 

/* ==================================================
   Animated Top Page Header
   Bootstrap compatible
   Brand color: #0070ba
================================================== */


.top-page-header {

    --primary: #0070ba;
    --accent: #00bfff;
    --dark: #001522;


    position: relative;

    min-height: 405px;

    overflow: hidden;


    background:

        radial-gradient(
            circle at center,
            var(--primary) 0%,
            #00395f 38%,
            var(--dark) 100%
        );


    color: #fff;
}



/* ==================================================
   Animated background grid
================================================== */


.top-page-header__grid {

    position: absolute;

    inset: 0;


    background-image:

        linear-gradient(
            rgba(0,191,255,.14) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(0,191,255,.14) 1px,
            transparent 1px
        );


    background-size: 35px 35px;


    opacity: .65;


    animation:

        top-page-header-grid-float

        10s ease-in-out infinite;

}



@keyframes top-page-header-grid-float {


    0%,
    100% {

        transform: translateY(0);

    }


    50% {

        transform: translateY(35px);

    }

}



/* ==================================================
   Static orbit circles
================================================== */


.top-page-header__orbit {

    position: absolute;


    left: 50%;

    top: 50%;


    border-radius: 50%;


    transform:

        translate(-50%, -50%);


    pointer-events: none;


    border:

        1px solid rgba(0,191,255,.45);

}



.top-page-header__orbit--1 {

    width: 220px;

    height: 220px;

}



.top-page-header__orbit--2 {

    width: 310px;

    height: 310px;


    border-color:

        rgba(255,255,255,.18);

}



/* ==================================================
   Orbit light point carrier
================================================== */


.top-page-header__orbit span {

    position: absolute;


    inset: 0;


    border-radius: 50%;


    animation:

        top-page-header-orbit-run

        7s linear infinite;

}



.top-page-header__orbit--2 span {

    animation-duration: 12s;

    animation-direction: reverse;

}



/* Light point */


.top-page-header__orbit span::before {


    content: "";


    position: absolute;


    top: -5px;

    left: 50%;


    width: 10px;

    height: 10px;


    transform:

        translateX(-50%);



    border-radius: 50%;


    background:

        var(--accent);



    box-shadow:


        0 0 10px var(--accent),

        0 0 25px var(--accent);

}



@keyframes top-page-header-orbit-run {


    from {

        transform:

            rotate(0deg);

    }


    to {

        transform:

            rotate(360deg);

    }

}



/* ==================================================
   Central icon node
================================================== */


.top-page-header__icon {


    width: 95px;

    height: 95px;


    display: flex;


    align-items: center;

    justify-content: center;



    border-radius: 50%;



    background:


        radial-gradient(

            circle,

            rgba(0,112,186,.95),

            rgba(0,21,34,.95)

        );



    border:


        2px solid var(--accent);



    box-shadow:


        0 0 20px var(--accent),


        inset 0 0 30px var(--primary);



    animation:


        top-page-header-icon-pulse

        3.5s ease-in-out infinite;

}



.top-page-header__icon i {


    font-size: 3.4rem;


    color: #fff;



    text-shadow:


        0 0 10px #fff,


        0 0 25px var(--accent);

}



@keyframes top-page-header-icon-pulse {


    0%,
    100% {transform: scale(1);}
    50% {transform: scale(1.08);}
}



/* ==================================================
   Content
================================================== */


.top-page-header__content {

    position: relative;

    z-index: 2;

}



.top-page-header h1 {


    letter-spacing: .08em;


    text-shadow:


        0 0 8px var(--accent),


        0 0 20px rgba(0,191,255,.5);

}



.top-page-header p {


    color: #b9eaff;


    font-size: .9rem;


    letter-spacing: .15em;


    text-transform: uppercase;

}



/* ==================================================
   Scan line
================================================== */


.top-page-header::after {


    content: "";


    position: absolute;


    left: 0;

    right: 0;


    height: 2px;


    top: -10%;



    background:


        linear-gradient(

            90deg,

            transparent,

            rgba(0,191,255,.7),

            transparent

        );



    animation:


        top-page-header-scan

        6s linear infinite;

}



@keyframes top-page-header-scan {


    from {

        top: -10%;

    }


    to {

        top: 110%;

    }

}



/* ==================================================
   Reduced motion
================================================== */


@media (prefers-reduced-motion: reduce) {


    .top-page-header__grid,

    .top-page-header__orbit span,

    .top-page-header__icon,

    .top-page-header::after {

        animation: none;

    }

}
/* ==================================================
   Divider am Header-Ende
================================================== */


.top-page-header__divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 3;
    pointer-events: none;

    /* Dein funktionierendes Muster bleibt unangetastet */
    background-color: #ffffff;
    background-image: 
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 1px, aliceblue 0px, aliceblue 3px, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 4px),
        repeating-linear-gradient(-45deg, rgb(255, 255, 255) 0px, rgb(255, 255, 255) 1px, aliceblue 0px, aliceblue 3px, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 4px);

  --divider-shape: 
    

     /* Tiefenbogen

    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C300,120 900,120 1200,0 L1200,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E"); */

    /* flacher Peak (V)
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L600,80 L1200,0 L1200,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L600,80 L1200,0 L1200,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E"); */

  /* tiefer Peak (V) 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L600,120 L1200,0 L1200,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E"); */

  /* asymetrischer Peak (V)
     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L800,120 L1200,0 L1200,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E"); */


    /* Double Slope \

  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1200,60 L1200,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E"); */
    
    
     /* S-Kurve 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C150,0 350,120 600,60 C850,0 1050,120 1200,0 L1200,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E"); */

    /* mulde 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L400,0 C500,80 700,80 800,0 L1200,0 L1200,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E"); */


    /* schräg, von links unten nach rechts oben -rotate erforderlich!
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,120 L1200,0 Z' fill='%23000'/%3E%3C/svg%3E"); */

    /* Dach -rotate erforderlich
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L600,120 L1200,0 Z' fill='%23000'/%3E%3C/svg%3E"); */


    /* herausgerissenes Blatt 

  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L50,15 L100,5 L150,20 L200,8 L250,25 L300,10 L350,22 L400,5 L450,18 L500,12 L550,25 L600,8 L650,20 L700,5 L750,15 L800,8 L850,22 L900,10 L950,25 L1000,5 L1050,18 L1100,12 L1150,20 L1200,5 L1200,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E"); */

    /* Skyline 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L50,0 L50,40 L90,40 L90,10 L130,10 L130,0 L200,0 L200,60 L240,60 L240,20 L300,20 L300,0 L400,0 L400,80 L450,80 L450,30 L520,30 L520,0 L650,0 L650,50 L700,50 L700,15 L760,15 L760,0 L850,0 L850,70 L910,70 L910,25 L980,25 L980,0 L1200,0 L1200,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E"); */


    /* hohe Skyline 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L40,0 L40,80 L80,80 L80,20 L120,20 L120,100 L160,100 L160,0 L240,0 L240,110 L280,110 L280,40 L340,40 L340,0 L440,0 L440,90 L500,90 L500,50 L560,50 L560,0 L680,0 L680,100 L730,100 L730,30 L790,30 L790,0 L880,0 L880,115 L940,115 L940,45 L1000,45 L1000,0 L1200,0 L1200,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E"); */

    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L150,0 L180,40 L250,40 L280,0 L450,0 L480,50 L520,50 L550,20 L620,20 L650,70 L720,70 L750,0 L900,0 L930,40 L1000,40 L1030,0 L1200,0 L1200,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E");


  /* HIER DREHEN WIR DIE MASKE UM 180 GRAD (Kopf über) */
    -webkit-mask-box-image-outset: 0;
  /*  transform: rotate(180deg); */

    -webkit-mask-image: var(--divider-shape);
    mask-image: var(--divider-shape);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}