/* cmsms stylesheet: dev-css modified: Samstag, 26. September 2026 13:05:15 */
@import url("/fonts/font.css");
*{margin:0;padding:0;}
html, body{font-family:'Fira Sans';font-feature-settings:"liga" 0; color:#5f39a0;font-size:100%;width:100%;height:100%;text-align: center; position: relative;}
.skiplink{position:absolute;top:-9999px;left:-9999px;width:12px;height:12px;font-size:0;line-height:0;}
.skiplink a{color:#3b3c3c;border:1px dotted #3b3c3c;font-size:80%;}
a {text-decoration: none; color: #ee4ef0;}
/* Hauptnavigation: overflow auf visible, aber mit festem clearfix, damit die Höhe bleibt */
.topnav { 
  min-height: 2em; 
  overflow: visible; 
  padding-top: 0.5em; 
  position: relative; 
}
/* Clearfix für die Floats der Listenpunkte */
.topnav::after {
  content: "";
  display: table;
  clear: both;
}

.topnav ul, #rechts ul { 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
}

/* WICHTIG: position: relative für das LI, damit absolute Untermenüs sich daran ausrichten */
.topnav li { 
  float: left; 
  border-left: 1px solid #5f39a0; 
  margin-left: -1px; 
  position: relative; 
}

.topnav a { 
  color: #5f39a0; 
  display: block; 
  padding: 0.5em; 
  text-decoration: none; 
}
.topnav a.currentpage, .topnav a.activeparent, #rechts a.currentpage { 
  background: #5f39a0; 
  color: #fff; 
}

/* Sichtbarer Tastatur-Fokus */
.topnav a:focus { 
  outline: 2px solid #5f39a0; 
  background: #e6dbf7; 
  color: #5f39a0; 
}

/* Untermenü (Dropdown) komplett überarbeitet */
.topnav li ul {
  position: absolute;
  top: 100%; /* Positioniert das Dropdown exakt unter der Hauptleiste */
  left: -9999px; /* Weit aus dem Bildschirm schieben statt -999em */
  width: 200px; /* Feste Breite verhindert das Zerschießen des Layouts */
  z-index: 10000;
  background: rgba(255, 255, 255, 0.98); 
  text-align: left !important;
  line-height: 105%;
  font-size: 95%;
  padding: 0;
  margin: 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  border: 1px solid #5f39a0;
}

/* Untermenü-Punkte untereinander statt nebeneinander */
.topnav li ul li { 
  float: none; 
  border-left: none; 
  border-bottom: 1px solid #e6dbf7; 
  margin: 0;
}
.topnav li ul li:last-child {
  border-bottom: none;
}

.topnav li ul li a {
  padding: 0.6em 1em;
}
.topnav li ul li a:hover, 
.topnav li ul li a:focus { 
  background: #5f39a0; 
  color: #fff; 
}

/* Einblenden bei Hover UND bei Tastatur-Fokus */
.topnav li:hover > ul,
.topnav li:focus-within > ul {
  left: 0; /* Holt das Menü exakt an die linke Kante des Haupt-LI */
}

/* Verhindert, dass tiefere Ebenen (3. Ebene) sofort mit aufklappen */
.topnav li:hover ul ul, 
.topnav li:focus-within ul ul {
  left: -9999px;
}
.topnav li ul li:hover > ul,
.topnav li ul li:focus-within > ul {
  left: 100%; /* Öffnet die 3. Ebene rechts daneben */
  top: 0;
}


.slide {
width : 100%;
height : 100%;
margin : 0 auto;
position : relative;
overflow : hidden;
top : 0;
left : 0;
pointer-events : none !important ;
background: #403577;
}
.slide ul {
position : relative;
margin : 0 auto;

}
.slide ul li {
width : 100%;
list-style : none;
position : absolute;
z-index : 1;
height : auto;
display: block;
top : 0;
left : 0;
right : 0;
}
.title  {
position : absolute;
top : 20%;
left : 10%;
display : inline !important ;
color : #fff;
z-index : 7;
font-size: 200%;
text-align: left;
width: 75%;
}
.title span {
font-weight : normal;
line-height : 100%;
box-decoration-break : clone;
}
.title h1 {
font-size: 100%;
top: 0 !important;
left: 0 !important;
}

#rechts ul {margin-bottom: 1em; width: 100%;}
#rechts li {float: none; margin: 0.5em 0 1em; border-top: 1px solid #5f39a0; padding-left: 2em;width: 100%;padding: 0.4em;}
#rechts a {color: #5f39a0; display: inline-block; }
#rechts li ul li {border: none; margin: 0 !important}
.center {width: 80%; position: relative; margin: 0 auto; text-align: left;}
header {width: 100%; background: #fff; display: inline-block;}
#logo {float: left; width: 14em; }
#logo img {width: 100%; height: auto;}
#fon {text-align: center; font-weight: bold; float: right; margin-top: 1.5em; font-size: 120%; color:#5f39a0; background: #fff;}
#fon a {color: #5f39a0 !important;}
#image {
position: relative;
width: 100%;
height: 18em;
}
#image img {width: 100%; height: auto;}
#image h1 {color: #fff; position: absolute; top: 2em; left: 10%;}

#wrapper {width: 100%; color: #fff; }
#wrapper a {color: #fff;}

#content {width: 65%; font-size: 120%; line-height: 120%; float: left;}
#content ul {margin: 1em 0 1em 2em;}
#content li {margin-bottom: 0.5em;}
#content img {width: 100%; height: auto;}
.wt {background: #fff; padding: 2em; }
#rechts {width: 30%; margin-left: 2.5em; float: left; font-size: 90%; line-height: 120%;}

h1, h2 {line-height: 130%; margin: 0.5em 0 0.5em 0; text-align: left !important;}
h2 {font-size: 110%; margin: 1.5em 0 0.5em; }
h3 {margin: 0.5em 0 0.5em 0;}
video {width: 100% !important; height: auto;}

.item {width: 100%; border: 3px solid #5f39a0; padding: 2em; margin-bottom: 1em; position: relative;}
.rotate {border-top: 3px solid #5f39a0; border-left: 3px solid #5f39a0; width: 2em; height: 2em; position: absolute; bottom: -1.2em; right: 3em;background: #fff;
-moz-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
-o-transform: rotate(50deg);
-ms-transform: rotate(50deg);
transform: rotate(45deg);
}
.lila {
top: -1.1em;
right: 7em;
border: none;
width: 2.2em;
height: 2.2em;
background:#5f39a0;
 }
footer {text-align: center; font-size: 90%; background:#5f39a0; width: 100%; position: relative; color: #fff; padding: 3em 0 3em;}
.spend {float: left; width: 25%; margin-right: 4em;white-space: nowrap;}
#copy {width: 100%; background: #fff; color:#372e67; padding: 1em; margin-top: 3em;}
footer a {color: #fff; font-size: 120%;}
#copy a {
color: #5f39a0;
}
footer li {
margin-bottom: 0.5em;
}
.topnav .toggle-icon, .menu-toggle-btn {
  display: none;
}
@media screen and (max-width: 60em) {
 .topnav a {display: none;}
a {text-decoration: none; color: #b910bc;}
header {text-align: center; padding-bottom: 0.5em; }
#logo {float: none; text-align: center;}
#fon {float: left;}

.topnav {
  position: fixed !important; 
top: 0;
left: 0;
width: 100%;
overflow: visible;
}

/* Visuelles Verstecken des Texts ohne "Punkte" */
.topnav .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Der Button-Container */
.topnav .menu-toggle-btn {
  display: block;           
  align-items: center !important;
  justify-content: center;
  position: absolute;    
  top: 1.5em !important;              
  right: 1em !important;          
  background: transparent !important; 
  border: none !important;            
  padding: 0;
  width: 44px;             
  height: 44px !important;
margin: 0 !important;
  cursor: pointer;
  z-index: 1005;      
}



.topnav #menuToggle[aria-expanded="true"] {
  position: fixed;         
  top: 25px;               
  right: 15px;             
}


.topnav .menu-toggle-btn:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}


.topnav .menu-toggle-btn img {
  width: 34px;
  height: 34px;
  display: block;
}



/* Standardzustand (Geschlossen): Hamburger zeigen, Close verstecken */
.topnav .icon-hamburger { display: block !important;}
.topnav .icon-close { display: none !important; }

/* Geöffneter Zustand: Hamburger verstecken, Close zeigen */
.topnav #menuToggle[aria-expanded="true"] .icon-hamburger { 
  display: none !important; 
}
.topnav #menuToggle[aria-expanded="true"] .icon-close { 
  display: block !important; 
}

/* Das geöffnete mobile Menü-Panel */
.topnav.responsive {
  position: fixed;
text-align: center !important;
  background: rgba(0,0,0,0.95);
  left: 0;
  top: 0;                 
  transition: 0.5s;
  width: 100%;
  height: 100vh;          
  padding: 2em 2em 2em 2em; 
  z-index: 100;     
margin-bottom: 3em;
 overflow-y:scroll;
    overflow-x:hidden;    
padding-bottom: 5em; 
font-size: 100%;
}
  .topnav.responsive a {
    display: block;
    text-align: left;
color: #fff;
border: none !important;
margin-bottom: 1em;
font-weight: bold;
  }
.topnav li  {float:none;  border-left: none; margin-left: 0; }
.topnav a::after {
transform: none;
height: 0;
}
.topnav a:hover::after {
transform: none;
}
.topnav.responsive li ul {
position : relative;
float: none;
margin-bottom: 2em;
overflow : visible;
background: none;
left : 0;
z-index : 10000;
text-align: center !important;
line-height: 105%;
font-size: 95%;
padding: 0;
}
.topnav.responsive li ul li {
float: none !important;
}
.topnav.responsive li ul li a {
font-weight: normal;
}
.topnav.responsive li ul li ul {
margin-bottom: 2em;
}
#content, #rechts {float:none; width: 100%; margin: 0 !important; font-size: 100%;}
.title {font-size: 120%;}
#rechts {width: 85%;}
#rechts ul {display: none;}
.item {width: 90%; display: block; }
.spend {float: none; margin-bottom: 0.5em;}
}