/*  -----------------------------------------        */
/*  Übergreifend / Body                              */
/*  -----------------------------------------        */
html, body {
 background-image:url("background_basic.jpg");
 background-repeat:no-repeat; 
 background-size: cover; 
 background-position: center;    
 overflow:hidden;             
 font-size:12pt;
 color: rgba(255,255,255,0.8);
 font-family: 'Open Sans', sans-serif;
 background-color: white;
 height:100%;
 width:100%;
 margin: 0;
 padding: 0;
}

#kopfbereich {

  position:fixed;            ! Position des Kopfbereichs ist immer oben - FIX;
  top:0;                     ! Position oben;
  left:0;                    ! Position ganz links;
  border-bottom: 3px solid rgba(237,0,228,1);    ! Rahmenart und -farbe;
  background: rgba(106,90,205,1);
  background-image: url("background_header_trans.png"); /* fallback */
  background-image: url("background_header_trans.png"), linear-gradient(45deg, rgba(68, 68, 69,1) 15%, rgba(171, 171, 171,1) 90%); /* W3C */
  background-size: contain;
  background-repeat:no-repeat;
  width:100%;                ! Breite des Kopfbereichs;
  height:100px;              ! Höhe des Kopfbereichs;
  z-index:2;                 ! Kopfbereich überlagert andere Bereiche;
  text-align:center;
  vertical-align:middle;
}

#warnungsbereich {

  position:fixed;            ! Position des Kopfbereichs ist immer oben - FIX!;
  top:85px;                     ! Position oben;
  left:0;                    ! Position ganz links;
  background-color:rgba(255,255,255,1);
  width:100%;                ! Breite des Kopfbereichs;
  height:55px;              ! Höhe des Kopfbereichs;
  z-index:100;                 ! Kopfbereich überlagert andere Bereiche;
  padding:0;
  }

#navibereich {
  position:fixed;            ! Position des Navibereichs immer links! - Fix;
  top: 103px;                ! Position unterhalb des Kopfbereiches;
  left:0;                    ! Position ganz links;
  border: 0px solid #ccc;    ! Rahmenart und -farbe;
  background-image:url("background_menu-trans_neu.png");
  background-repeat:no-repeat; 
  background-size: cover;
  background-color:rgba(145,145,145,0.5);      ! Hintergrundfarbe;
  width:250px;               ! Breite des Navibereichs;
  min-height:400px;          ! Minimal-Höhe des Navibereichs;
  z-index:2;                 ! Navibereich überlagert andere Bereiche;
  padding-top:20px;
}

#subnavibereich {
  position:fixed;            ! Position des Navibereichs immer links! - Fix;
  top: 103px;                ! Position unterhalb des Kopfbereiches;
  left:250px;                    ! Position ganz links;
 /* border: 1px solid #ccc;    ! Rahmenart und -farbe;   */
  background-color:rgba(114,114,107,1);      ! Hintergrundfarbe;
  background-image: linear-gradient(45deg, rgba(68, 68, 69,1) 15%, rgba(171, 171, 171,1) 90%); /* W3C */
  width:100%;               ! Breite des Navibereichs;
  height:50px;               ! Minimal-Höhe des Navibereichs;
  height:40px;
  z-index:1;                 ! Navibereich überlagert andere Bereiche;
  border-bottom: 3px solid rgba(68, 68, 69,1);    ! Rahmenart und -farbe;
}

#headernavi {
  position:fixed;            ! Position des Navibereichs immer links! - Fix;
  top: 10px;                ! Position unterhalb des Kopfbereiches;
  right:10px;                    ! Position ganz links;
  width:40%;               ! Breite des Navibereichs;
  height:40px;               ! Minimal-Höhe des Navibereichs;
  z-index:2;                 ! Navibereich überlagert andere Bereiche;
}

#textbereich {
  position:fixed;            ! Position des Textbereichs immer in der Mitte!;
  display:block;
  left:0;                    ! Textbereich fängt ganz links an;
  right:0;                   ! Textbereich geht bis ganz rechts;
  padding-left:260px;        ! Innenabstand zum Menü;
  padding-right:10px;       ! Innenabstand zum Newsbereich;
  padding-top:20px;          ! Innenabstand nach oben;
  padding-bottom:60px;       ! Innenabstand nach unten;
  border: 0px solid #ccc;    ! Rahmenart und -farbe;
  height: 100vh;             ! Höhe des Textbereiches auf 100% eingestellt;
  overflow-y: auto;          ! Zeige Scrollbalken rechts, falls notwendig;
  background-color:rgba(68, 68, 69,0.8); ! Hintergrund ist weiß mit 50 %iger Transparenz;
}

#wrapper {
   display: block;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#md-content {
  padding-bottom:20px;       ! Innenabstand nach unten;
}

.maintextbereich {
    top:80px;                 ! Außenabstand zum Kopfbereich für Seiten ohne Sub;
}

.subtextbereich {
  top:100px;                 ! Außenabstand zum Kopfbereich;
}

#newsbereich {
  position:fixed;            ! Position des Newsbereichs immer rechts! - FIX;
  right:0px;                 ! Rechtsausrichtung;
  top: 103px;                ! Position unterhalb des Kopfbereiches;
  border: 0px solid #ccc;    ! Rahmenart und -farbe;
  background-image:url("background_mikro.png");
  background-repeat:no-repeat; 
  background-size: cover;
  background-color:rgba(145,145,145,0.5);   ! Hintergrundfarbe;
  width:200px;               ! Breite des Newsbereichs;
  min-height:400px;          ! Minimal-Höhe des Newsbereichs;
  z-index:2;                 ! Newsbereich überlagert andere Bereiche;
  padding-top:20px;
}

.autoscroll {
overflow-y: auto;
}

#fussbereich {

 width: 100%;
 position: fixed;
 bottom: 0;
 left: 0;
 background-image:linear-gradient(45deg, rgba(68, 68, 69,1) 15%, rgba(171, 171, 171,1) 90%);
 background-color:rgba(174,166,225,1);      ! Hintergrundfarbe;
 height:40px;                 ! Höhe des Fußbereichs;
 z-index:3;                   ! Fußbereich überlagert andere Bereiche;  
 text-align:center;            ! Text wird im Fussbereich zentriert;
 padding:5px;                ! Innenabstand einheitlich bei 10px;
 transition: bottom 0.2s ease-in-out;
 border-top: 3px solid rgba(68, 68, 69,1);    ! Rahmenart und -farbe;
} 
/*  Verstecken des Fussbereichs bei Scroll-Up                       */
#fussbereich.nav-down {
    bottom: -80px;
}
/*  Sichtbarkeit des Fussbereichs bei Scroll-Down                       */
#fussbereich.nav-up {
    bottom: 0px;
}

/* Definition des Buttons, um nach oben zu gelangen */
#top-button {
 position: fixed;
 bottom: 50px;                
 left:auto;  
 right:5px;
 width: 20px;
 margin: 2px 2px 2px 2px;
 height: 20px;
 padding: 2px;
 background:url("doppelpfeil_weiss.png") no-repeat 2px 2px; 
 background-size:20px 20px; 
 background-color:rgba(3, 38, 34,1);
 cursor:pointer;
 border-radius:3px;
 border: 1px solid black;    ! Rahmenart und -farbe;
 opacity:0; ! unsichtbar wird eingestellt;
 text-align:center;
 z-index:4;
 }

/*  Hover-Effekt nur beim Desktop!                    */
@media only screen and (min-width: 820px) {
  #top-button:hover, #top-button:active {
    opacity:1;           ! Transparenz wird ausgeschaltet;
    background-color:rgba(145, 184, 179,1);
    background:url("doppelpfeil.png") no-repeat 2px 2px; 
    background-size:20px 20px;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
   }
}

/* Inhalte verstecken, content-block definieren ! important */
.content-block {
display:none;
padding-top:40px;
padding-left:10px;
padding-bottom:1000px;
}

/*  ----------------------------------------- */
/*  Schriftformatierung                       */
/*  ----------------------------------------- */

p {
font-style:normal;                                                 ! Festlegung des Schrifttyps;
font-weight:normal;                                                ! Festlegung der Fettschrift;
color:#000000;                                                     ! Festlegung des Schriftfarbe;
font-family: 'Open Sans', sans-serif;
}
.title {
font-stretch:wider;                                                ! Festlegung der Schriftweite;
font-size:120%;                                                    ! Festlegung des Schriftgröße;
font-weight:bold;                                                  ! Festlegung der Fettschrift;
}
.header-title {
font-size:100%;
font-weight:bold;
text-align:right;
margin-top:5px;
color:rgba(0,0,0,0);
padding-right:10px;       ! Innenabstand;
}

.page-title {
font-size:150%;
font-weight:bold;
color: rgba(255,255,255,0.8);
/*padding-bottom:0px;       ! Innenabstand;
margin-bottom:12px;*/
margin-top: 25px;
margin-bottom: 15px;
margin-left: 3px;
margin-right: 3px;
line-height:25px;
font-weight: bold;
color: rgba(255,255,255,0.8);
}

.footer-text {
margin:0;
padding:5px;
line-height:18px;
font-size:90%;           ! Festlegung des Schriftgröße;
font-weight:bold;        ! Festlegung der Fettschrift;
/*color: rgba(255,255,255,0.8);  ! Festlegung der Schriftfarbe (hier weiß);*/
color: rgba(105,105,105,0.8);  ! Festlegung der Schriftfarbe (hier schwarz);
text-decoration:none;		! Keinen Unterstrich unterhalb des Menütitels;
text-transform:uppercase;	! Verwende Großbuchstaben;
}

.footer-text > a:hover {

	font-weight:700;	! Festlegung der Fettschrift für Montserrat, ansonsten bold einstellen;
	font-style:oblique;	! Festlegung der Kursiv-Schrift;
	color: rgba(255,255,255,1);	! Festlegung des Schriftfarbe (weiß);
}
/*  ----------------------------------------- */
/*  Trennlinie                                */
/*  ----------------------------------------- */
hr {
  color: black; ! important;
  box-shadow: 0.5px 0.5px grey, 1px 1px grey, 1.5px 1.5px grey; ! Festlegung des Text-Shadows (Schatten);
}

/* -----------------------------------------------------------------------------*/
/*  Lauftext für die Warnung                                                    */
/* -----------------------------------------------------------------------------*/
.marquee {
  max-width: 100vw; /* iOS braucht das */
  white-space: nowrap;
  overflow: hidden;
}

.marquee span {
  display: inline-block;
  padding-left: 105%; /* die zusätzlichen 5% erzeugen einen verzögerten Start und vermeiden so ein Ruckeln auf langsamen Seiten */
  animation: marquee 10s linear infinite;
}

/* Optional: mouseover (oder Tipp auf dem Touchscreen) pausiert die Laufschrift */
.marquee span:hover {
  animation-play-state: paused 
}

/* Make it move */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.marquee {
  color: #f35626;
  font-size: 150%;
  font-weight: bolder;
  background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-fill-color: #f35626;
  -webkit-animation: hue 60s infinite linear;
}

@-webkit-keyframes hue {
    from {
      -webkit-filter: hue-rotate(0deg);
    }

    to {
      -webkit-filter: hue-rotate(360deg);
    }
}

/*  ----------------------------------------- */
/*  Bilder und Video einbinden                */
/*  ----------------------------------------- */
img {
  max-width:600px;
  height:auto;
  border-bottom: 1px inset rgba(237,0,228,1);
  border-left: 1px inset rgba(237,0,228,1);
  border-right: 2px inset rgba(255,255,255,0.6);
  border-top: 2px inset rgba(255,255,255,0.6);
  margin: 3px;
}

video {
  max-width:600px;
  height:auto;
  border-bottom: 1px inset rgba(237,0,228,1);
  border-left: 1px inset rgba(237,0,228,1);
  border-right: 2px inset rgba(255,255,255,0.6);
  border-top: 2px inset rgba(255,255,255,0.6);
  margin: 3px;
}

.logo {
  max-width:300px;
}

.header-image {
  content:url();
  max-width:350px;
  float:left;
  margin:5px;
  border-style:none;
}

video.responsive-video {
  max-width: 600px;
  height: auto;
}

iframe {
  width:100%;
  max-width:700px;
  max-height:500px;
}

/* Bild bei Videos einblenden */
.img-music-videos {
  display:block;
}

/*  Definition der Icons für den header-navi                      */
.icon-suche {
  content:url(icon_suche.png);
  max-width:17px;
  height:auto;
  border-style:none;
}
.icon-news {
  content:url(icon_news.png);
  max-width:17px;
  height:auto;
  border-style:none;
}
.icon-termine {
  content:url(icon_termine.png);
  max-width:17px;
  height:auto;
  border-style:none;
}
.icon-socialmedia {
  max-width:22px;
  height:auto;
  border-style:none;
}

/* --------------------  */
/* Bildergalerie         */
/* --------------------  */

.gallery {
  --size: 15em; /* control the size */
  --size: 20em; /* control the size */  
  --gap: 1em;  /* control the gap */
  --zoom: 1.5;   /* control the scale factor */
  
  display: grid;
  gap: var(--gap);
  width: calc(3.5*var(--size) + 2*var(--gap));
  aspect-ratio: 1;
  grid-template-columns: repeat(3,auto);
}
.gallery figure {
  margin: 0;
  padding: 0;
  position: relative;
}

.gallery figcaption {
	position: absolute;
  bottom: 0;
	left: 0;
	text-align: center;
	width: 100%;
  opacity: 0;
	color: white;
	background: rgba(0, 0, 0, 0.5);	
  font-size:90%;
  font-weight:bold;
}

.gallery figure:hover figcaption,
.gallery figure:focus figcaption {
  opacity: 1;
}

.gallery > figure img {
  width: 0;
  height: 0;
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
  cursor: pointer;
  filter: grayscale(80%);
  transition: .35s linear;
}

.gallery figure:hover img,
.gallery figure:focus img{
  filter: grayscale(0);
  width:  calc(var(--size)*var(--zoom));
  height: calc(var(--size)*var(--zoom));
}

/*  -----------------------------------------        */
/*  Menüformatierung                                 */
/*  -----------------------------------------        */

/*  Linkformatierung für das Menü übergreifend       */

.naviformat a, button {
  text-transform:uppercase;	! Verwende Großbuchstaben;
	font-size:95%;            	! Festlegung des Schriftgröße;
	font-weight:700;		      ! Festlegung der Normalschrift für Montserrat, ansonsten normal einstellen;
  color: rgba(255,255,255,1);	! Festlegung des Schriftfarbe (weiß);
	display: block;			! Art der Anzeige als Blockelement;
	transition: all 0.3s ease-out 0s; ! Definition des Übergangs von Normal zu Hover;
	text-decoration:none;		! Keinen Unterstrich unterhalb des Menütitels;
  line-height: 20px;		! Höhe der Zeile wird festgelegt;
  padding: 5px 5px;		! Innenabstand nach rechts: Ist nur bei einem horizontalen Menü notwendig;
  min-width:25px;
}

/*  Formatierung des Hauptmenüs (mainnav)                  */

.mainnav {
	text-align:right;          ! Textausrichtung rechtbündig;
	list-style-type: none;     ! es werden keine Aufzählungszeichen dargestellt;
	margin: 20px 5px;          ! Abstände nach oben/unten und rechts/links;
  padding:0px;               ! SEHR wichtig für die Größe der Links!!!!!;
}

.mainnav > li {
	float:none;	! Menüpunkte werden untereinander angezeigt, Bei float left werden diese nebeneinander dargestellt;
}				

.mainnav > li > a {
	padding-right:5px;		! Innenabstand nach rechts;
}

.mainnav > li > a.active {
	font-weight:700;		! Festlegung der Fettschrift für Montserrat, ansonsten bold einstellen;
	text-shadow: 0.5px 0.5px rgba(255,255,255,1), 1px 1px rgba(255,255,255,1); ! Festlegung des Text-Shadows (Schatten);
  text-shadow: 0.5px 0.5px rgba(255,255,255,1), 1px 1px rgba(0,0,0,1); ! Festlegung des Text-Shadows (Schatten);
  color: rgba(237,0,228,1);	! Festlegung des Schriftfarbe (rostrot);
  letter-spacing: 0.05em;
  font-size:100%;
}

.mainnav > li > a:hover {

  color: rgba(3, 38, 34,1);	! Festlegung des Schriftfarbe (blau);
	font-weight:700;	! Festlegung der Fettschrift für Montserrat, ansonsten bold einstellen;
	font-style:italic;	! Festlegung der Kursiv-Schrift;
	text-shadow: 0.5px 0.5px rgba(255,255,255,1), 1px 1px rgba(255,255,255,1); ! Festlegung des Text-Shadows (Schatten);
  background-color: #ddd;
}

/*  Dummy-Menüpunkt zur Steuerung des Klickverhaltens auf dem Smartphone   */
.navi_dummy {
  display:none;
  height: 20px;
}

/*  -----------------------------------------        */
/*  Menüformatierung - Sub                          */
/*  -----------------------------------------        */

.subnav {
  /* overflow: hidden; */
  background-color:rgba(218,220,0,1);      ! Hintergrundfarbe;
  margin: 0;
  z-index: 3;
}

.subnav a {
  float: left;
 	text-align: center;
  padding: 10px 6px;		! Innenabstand nach rechts: Ist nur bei einem horizontalen Menü notwendig;
  }

.dropdown {
  float: left;
  /* overflow: hidden; */
}

.dropdown .dropbtn {
 
  border: none;
  outline: none;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
  padding: 10px 6px;		! Innenabstand nach rechts: Ist nur bei einem horizontalen Menü notwendig;
  padding-right: 0px;
}

.subnav a:hover, .dropdown:hover .dropbtn {
  background-color: #ddd;
  color: rgba(3, 38, 34,1);	! Festlegung des Schriftfarbe (dunkelgrün);
}

.dropdown-content > a.active_sub, .subnav > a.active_sub, .active_sub {
	font-weight:700;		! Festlegung der Fettschrift für Montserrat, ansonsten bold einstellen;
  text-shadow: 0.5px 0.5px rgba(255,255,255,1), 1px 1px rgba(255,255,255,1); ! Festlegung des Text-Shadows (Schatten);
  text-shadow: 0.5px 0.5px rgba(255,255,255,1), 1px 1px rgba(0,0,0,1); ! Festlegung des Text-Shadows (Schatten);
  color: rgba(237,0,228,1);	! Festlegung des Schriftfarbe;
  background-color: rgba(145, 184, 179,0);
  letter-spacing: 0.05em;
  font-size:100%;
}

.dropdown-content > a.active_sub {
  background-color: rgba(145, 184, 179,0.7) ;
}

.dropdown-content {
  display: none;
  position: relative;
  background-color: rgba(255,255,255,0.9);
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 4;
 }

.dropdown-content a {
  float: none;
  color: rgb(0,0,0);
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}
/* Anzeige des Submenüs bei Klick */
.dropdown:hover .dropdown-content {
  display: block;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* Anzeige des Submenüs bei Klick */
.dropdown:active .dropdown-content {
  display: block;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* Anzeige des Submenüs bei Klick */
.dropbtn:hover .dropdown-content {
  display: block;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.dropbtn:active .dropdown-content {
  display: block;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.phone-screen {
  display:none;
}
.full-screen {
  display:inline;
}

/* Beschriftung des Submenüs verstecken */
.subnav_text {
 display:none; 
}

/*  -----------------------------------------        */
/*  Formatierung des Headernav (headernav)           */
/*  -----------------------------------------        */
.headernav {
  text-align:right;          ! Textausrichtung rechtbündig;
  margin: 0px;
  z-index: 3;
  list-style-type: none;     ! es werden keine Aufzählungszeichen dargestellt;
  padding:0px;
}

.headernav > li {
	float:right;	! Menüpunkte werden untereinander angezeigt, Bei float:left, werden diese nebeneinander dargestellt;
}	

.headernav > li > a {
 	padding: 10px 10px;		! Innenabstand nach rechts: Ist nur bei einem horizontalen Menü notwendig;
  }
.headernav > li > a.active {
	font-weight:700;		! Festlegung der Fettschrift für Montserrat, ansonsten bold einstellen;
	text-shadow: 0.5px 0.5px rgba(255,255,255,1), 1px 1px rgba(255,255,255,1); ! Festlegung des Text-Shadows (Schatten);
  color: rgba(3, 38, 34,1);	! Festlegung des Schriftfarbe (dunkelgrün);
  letter-spacing: 0.05em;
  font-size:90%;
}

.headernav > li > a:hover {

	color: rgba(3, 38, 34,1);	! Festlegung des Schriftfarbe (blau);
  font-weight:700;	! Festlegung der Fettschrift für Montserrat, ansonsten bold einstellen;
	font-style:italic;	! Festlegung der Kursiv-Schrift;
	text-shadow: 1px 1px white, 2px 2px white, 3px 3px white; ! Festlegung des Text-Shadows (Schatten);
  background-color: #ddd;
}
/*  ----------------------------------------- */
/*  Paralax-Formatierung             */
/*  ----------------------------------------- */
.parallax {
  /* The image used */
  background-image: url("");

  /* Set a specific height */
  height: 100%;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*  -----------------------------------------        */
/*  Für Teaser (Blickfang)             	             */
/*  -----------------------------------------        */
.teaser {
  font-weight:bold;				! setze Schriftart und -gewicht;
	padding: 2px 2px;				! Innenabstand für den Teaser;
	margin: 0 1px 2px 1px;			! Außenabstand nach unten zum nächsten Teaser;
	border-bottom: 1px solid #ccc;		! unten gibt es eine Begrenzungslinie;
}
.teaser_date {
	font-size:90%;                           		 ! etwas kleiner als die Standardschrift;
  margin-top:4px;
  margin-bottom:2px;
}
.teaser_title {
	line-height:105%;
  font-weight:bold;
  font-size:95%;
  margin-top:6px;
  margin-bottom:6px;
  line-height:19px;
}
.teaser_text {
   line-height: 105%;                          		 ! Anpassung der Zeilenhöhe;
   font-size:95%;
   margin-top:6px;
   margin-bottom:6px;
   line-height:20px;
}
a.teaser_link {
   padding-top: 6px;
   color: rgba(0,0,0,1);
}

.teaser_border {
  color: #333;
  border: 2px solid rgba(3, 38, 34,1);
  box-shadow: 1px 1px white, 2px 2px white, 3px 3px white; ! Festlegung des Text-Shadows (Schatten);
  margin-top:5px;
  margin-bottom:3px;
}

/*  ---------------------------   */
/*  Ausrichtung von Objekten      */
/*  ---------------------------   */

.left {
 float:left;
}

.right {
 float:right;
}

/* ---------------------------------------------------------------------------------------- */
/* Kontakt-Formular                                                                         */
/* ---------------------------------------------------------------------------------------- */

/* Als Standard wird alles zentriert, sieht besser aus */
#contact-formular {
        text-align:center;
}
/* Definition der Felder des Kontaktformular */
#contact-formular input[type="text"], #contact-formular textarea, #contact-formular input[type="email"] {
        color: #999999;
        padding-left: 3%;
        padding-right: 3%;
        padding-top: 15px;
        padding-bottom: 15px;
        width:100%;
        height:20px;
        background:#f5f5f5;
        border-radius:3px;
        margin-bottom:20px;
        border:0;
        box-shadow: 0 0px 3px rgba(0, 0, 0, 0.22) inset;
        transition: all 0.2s linear;
 }

#contact-formular input[type="checkbox"] {
        margin-bottom:10px;
        vertical-align:middle;
}

#contact-formular textarea  {
        height: 150px;
        vertical-align:top;
}

#contact-formular input[type=text]:focus, #contact-formular input[type="textarea"]:focus, #contact-formular input[type=email]:focus {
        background-color: #e1e1e1;
}

/* Button im Kontaktformular formatieren */
#contact-formular input[type="submit"] {
        color:#22222;
        background-color:rgba(171, 171, 171,1);
        text-transform:uppercase;
        padding:10px 15px;
        letter-spacing:0;
        line-height:14px;
        cursor:pointer;
        border-radius:3px;
        transition:all 0.3s ease 0s;
        text-align:center;
        font-weight:bold;
}
/*  Definition der Tabelle für das Formular */
.form-table {
padding-right: 10px; 
margin-left: auto; 
margin-right: auto; 
border="0";
cellspacing="1";
cellpadding="2";
width:50%;
background-color:rgba(0,0,0,0);
}

.form-table td {
  background-color: none;
  border: 0;
}

/* Definition der Labels im Formular */
.form-label {
        vertical-align:top;
        padding-right:10px;
        width:20%;
        font-weight:bold;
}

.form-field {
        vertical-align:top;
        width:30%;
}

.form-label-kontakt {
        vertical-align:top;
        padding-right:10px;
        width:50%;
        font-weight:bold;
}

.form-field-kontakt {
        vertical-align:top;
        text-align:left;
        width:50%;
}

.form-submit {
padding-top:25px;
text-align:center;
}
/* Definition der Select-Auswahlfelder, nur notwendig, wenn Auswahlfelder erstellt werden sollen*/
.form-select {
        display: inline-block;
        overflow: hidden;
        vertical-align:top;
        width:100%;
        box-shadow: 0 0px 3px rgba(0, 0, 0, 0.22) inset;
        transition: all 0.2s linear;
        background:#f5f5f5;
        margin-bottom:20px;
}
/* -----------------------------------------------------------------------------*/
/* Formatierung der Listen für News, Kollegium, Suche, Termine, BG, Kurse, Koop */
/* -----------------------------------------------------------------------------*/

#news {
  padding-left:10px;        ! Innenabstand zum Menü;
  padding-right:10px;       ! Innenabstand zum Newsbereich;
  padding-top:10px;          ! Innenabstand nach oben;
  padding-bottom:10px;       ! Innenabstand nach unten;
}

.post {
  font-size-adjust:none;
  background-color: rgba(68, 68, 69,0.9);
  display: inline-block;
  width: 95%;
  font-weight:bold;
  line-height:25px;
  padding: 5px;
  margin-top: 10px;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom:12px;
  border-radius: 3px;
  color:rgba(255,255,255,0.6);
  border: 1px solid rgba(237,0,228,1);    ! Rahmenart und -farbe;
}

.code-badge {
  border-radius: 0px !important;
  padding: 0px !important;
  background: yellow !important;
  color: white !important;
  font-size: 15px !important;
  padding-left: 10px !important;
  text-transform: uppercase;
  padding-top: 3px !important;
}

pre {
 font-family: 'Open Sans', sans-serif;
 font-style:normal;                                                 ! Festlegung des Schrifttyps;
 font-weight:normal;                                                ! Festlegung der Fettschrift;
 color:#000000;
 white-space: pre-line;
}

/* ---------------------------------------------*/
/* -----Formatierung der Links----------------- */
/* ---------------------------------------------*/

/* -----Standard-Link----------------- */
p > a {
   padding-top: 4px;
   color: rgba(255,255,255,0.8);
   font-weight:bold;
   transition: all 0.3s ease-out 0s; ! Definition des Übergangs von Normal zu Hover;
	 text-decoration:none;		! Keinen Unterstrich unterhalb des Menütitels;
   text-shadow: 1px 1px 1px grey; ! Festlegung des Text-Shadows (Schatten);
}

a[href^="mailto:"] {
   color: rgba(255,255,255,0.8);
   font-weight:bold;
   transition: all 0.3s ease-out 0s; ! Definition des Übergangs von Normal zu Hover;
	 text-decoration:none;		! Keinen Unterstrich unterhalb des Menütitels;
   text-shadow: 1px 1px 1px grey; ! Festlegung des Text-Shadows (Schatten); 
}

a.link {
   padding-top: 4px;
   color: rgba(255,255,255,0.8);
   font-weight:bold;
   transition: all 0.3s ease-out 0s; ! Definition des Übergangs von Normal zu Hover;
	 text-decoration:none;		! Keinen Unterstrich unterhalb des Menütitels;
   text-shadow: 1px 1px 1px grey; ! Festlegung des Text-Shadows (Schatten);
}



a.link_white {
   padding-top: 4px;
   color: rgba(255, 255, 255,0.8);
   font-weight:bold;
   transition: all 0.3s ease-out 0s; ! Definition des Übergangs von Normal zu Hover;
	 text-decoration:none;		! Keinen Unterstrich unterhalb des Menütitels;
   text-shadow: 1px 1px 1px grey; ! Festlegung des Text-Shadows (Schatten);
}

a.link_black {
   padding-top: 4px;
   color: rgba(0,0,0,0.8);
   font-weight:bold;
   transition: all 0.3s ease-out 0s; ! Definition des Übergangs von Normal zu Hover;
	 text-decoration:none;		! Keinen Unterstrich unterhalb des Menütitels;
   text-shadow: 1px 1px 1px grey; ! Festlegung des Text-Shadows (Schatten);
}

a.link_grey {
   padding-top: 4px;
   color: rgba(176,176,176,1);
   font-weight:bold;
   transition: all 0.3s ease-out 0s; ! Definition des Übergangs von Normal zu Hover;
	 text-decoration:none;		! Keinen Unterstrich unterhalb des Menütitels;
   text-shadow: 1px 1px 1px grey; ! Festlegung des Text-Shadows (Schatten);
}

a.link:hover {
   font-style:italic;
}
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Responsive Media Querries - Text- und Absatzformatierung bei unterschiedlichen Bildschirmgrößen, es werden nur die Werte angepasst, die auch geändert werden   */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* -----kleiner Full-HD----------------------------------------------------------------------------------- */
 @media only screen and (max-width: 1600px) {

html, body {
 font-size:12pt;
}
  
   
img {
  max-width:400px;
  height:auto;
}
   
video {
  max-width:400px;
  height:auto;
}
/* Bildergalerie anpassen*/
.gallery {
  --size: 13em; /* control the size */
  --gap: 1em;  /* control the gap */
  --zoom: 1.5;   /* control the scale factor */
  
  display: grid;
  gap: var(--gap);
  width: calc(3*var(--size) + 2*var(--gap));
  aspect-ratio: 1;
  grid-template-columns: repeat(3,auto);
}

}
/* -----kleiner HD----------------------------------------------------------------------------------- */
 @media only screen and (max-width: 1000px) {

/* Anpassung der Höhe des Kopfbereichs */
#kopfbereich {
  height:80px;              ! Höhe des Kopfbereichs;
}

   /* Anpassung Navibereichs */
#navibereich {
  top: 80px;                 ! Position unterhalb des Kopfbereiches;
  width:170px;               ! Breite des Navibereichs;
  min-height:150px;          ! Minimal-Höhe des Navibereichs; 
}
   
#subnavibereich {
  top: 80px;                 ! Position unterhalb des Kopfbereiches;
  height:40px;               ! Minimal-Höhe des Navibereichs; 
  height:35px;
  left:171px;                ! Position ganz links;
 }

/* Anpassung des Headernav */
#headernavi {
  top: 10px;                ! Position unterhalb des Kopfbereiches;
  width:60%;               ! Breite des Navibereichs;
  height:20px;               ! Minimal-Höhe des Navibereichs;
  z-index:2;                 ! Navibereich überlagert andere Bereiche;
}   
   
/* Anpassung Textbereichs */
#textbereich {
  padding-left:180px;        ! Innenabstand zum Menü;
  padding-right:10px;       ! Innenabstand zum Newsbereich;
  padding-top:10px;          ! Innenabstand nach oben;
  padding-bottom:60px;       ! Innenabstand nach unten;
} 
   
#md-content {
  padding-bottom:60px;       ! Innenabstand nach unten;
}
/* Anpassung Newsbereichs */
#newsbereich {
  top: 83px;                ! Position unterhalb des Kopfbereiches;
  width:170px;               ! Breite des Newsbereichs;
  min-height:150px;          ! Minimal-Höhe des Newsbereichs;
 }
/* Anpassung Fussbereichs */
#fussbereich {
 height:40px;                 ! Höhe des Fußbereichs;
 padding:5px;                ! Innenabstand einheitlich bei 5px;
} 

/* Inhalte verstecken */
.content-block {
display:none;
padding-left:5px;
padding-bottom:1000px;
}   
   
.footer-text {
padding:2px;
line-height:17px;
font-size:85%;           ! Festlegung des Schriftgröße;
font-weight:normal;        ! Festlegung der Fettschrift;
}
   
.teaser {
 	padding: 2px 2px;				! Innenabstand für den Teaser;
	margin: 0 1px 2px 1px;			! Außenabstand nach unten zum nächsten Teaser;
}
.teaser_date {
	font-size:90%;                           		 ! etwas kleiner als die Standardschrift;
}
.teaser_title {
	font-size:90%;                           		! etwas größer als die Standardschrift;
	line-height:105%;
}
.teaser_text {
   line-height: 110%;                          		 ! Anpassung der Zeilenhöhe;
}
a.teaser_link {
   padding-top: 2px;
}
 /* Anpassung Abstände des Navibereichs */
.naviformat a, button {
  line-height: 15px;		! Höhe der Zeile wird festgelegt;
  font-size:90%;            	! Festlegung des Schriftgröße;
  min-width:30px;
}   
  
 /* Anpassung des aktiven Menüpunkts */
.mainnav > li > a.active {
  font-size:95%;
}   
  /* Anpassung des aktiven Menüpunkts für Sub-Menü*/ 
.dropdown-content > a.active_sub, .subnav > a.active_sub, .active_sub {
   font-size:95%;
}
/* Anpassung der Menüabstände für Sub-Menü*/ 
.subnav a {
  padding: 10px 3px;		! Innenabstand nach rechts: Ist nur bei einem horizontalen Menü notwendig;
  }
   
  
.maintextbereich { 
    top:80px;                  ! Außenabstand zum Kopfbereich;
   } 

.subtextbereich {
  top:120px;                  ! Außenabstand zum Kopfbereich;
  top:80px;
}

/*Logogröße anpassen */
 .header-image {
  width:250px;
}
   
/* Bildergalerie anpassen*/
.gallery {
  --size: 13em; /* control the size */
  --gap: 1em;  /* control the gap */
  --zoom: 1.5;   /* control the scale factor */
  
  display: grid;
  gap: var(--gap);
  width: calc(3*var(--size) + 2*var(--gap));
  aspect-ratio: 1;
  grid-template-columns: repeat(3,auto);
}
   
   
/*Headertitle Schriftgröße anpassen */
.header-title {
font-size:100%;
}

/*  Anpassung der Tabelle des Kontaktformulars */
.form-table {
width:90%;
}
}

/* -----Tabletes----------------------------------------------------------------------------------- */
 @media only screen and (max-width: 820px) {

/* Bestimmung von unterschiedlichen Schriftgrößen in Abhängigkeit von der Bildschirmgröße. */
html, body {
        font-size:13px;
}
/* Anpassung der Bereiche für sehr kleine Monitore */
#kopfbereich {
  height:60px;              ! Höhe des Kopfbereichs;
}
/* Lauftext verstecken */
#warnungsbereich {
  display: none;
}

/* Anpassung Navibereichs: Aus dem Navibereich wird ein Klickbotton */
#navibereich {
 top: 5px;                
 left:auto;  
 right:5px;
 width: 36px;
 margin: 2px 2px 2px 2px;
 height: 36px;
 min-height: 35px;
 padding: 2px;
 background:url("responsive-menu1.png") no-repeat 2px 2px; 
 background-size:35px 35px; 
 background-color:rgba(3, 38, 34,1);
 cursor:pointer;
 border-radius:3px;
 border: 1px solid black;    ! Rahmenart und -farbe;
 opacity:1; ! leichte Transparenz wird eingestellt;
 text-align:right;
 touch-action: manipulation; ! Stellt sicher, dass keine Action ausgeführt wird, wenn das Menü angeklickt wird. IMPORTANT;
 z-index:4;
 }
   
   
#subnavibereich {
 top: 62px;                
 left:auto;
 right:5px;
 width: 36px;
 margin: 2px 2px 2px 2px;
 height: 36px;
 min-height: 35px;
 padding: 2px;
 background:url("responsive-menu1.png") no-repeat 2px 2px; 
 background-size:35px 35px; 
 background-color:rgba(114,114,107,1);
 cursor:pointer;
 border-radius:3px;
 border: 1px solid black;    ! Rahmenart und -farbe;
 opacity:1; ! leichte Transparenz wird eingestellt;
 touch-action: manipulation; ! Stellt sicher, dass keine Action ausgeführt wird, wenn das Menü angeklickt wird. IMPORTANT;
 z-index:3;
 }
/* Anpassung Navibereich: Schriftgröße unf Breite */
 .naviformat a, button {
 	font-size:90%;            	! Festlegung des Schriftgröße;
  min-width:45px;
}

/*  Dummy-Menüpunkt zur Steuerung des Klickverhaltens auf dem Smartphone   */
.navi_dummy {
  display:block;
  height: 10px;		! Höhe der Zeile wird festgelegt;
}
/* Anpassung Navibereichs: Die Menüpunkte werden optisch angepasst und versteckt */
.mainnav {
	 background-color:white;
   min-width: 130px;
   text-align:left;
   display:none; ! Das Menü selbst wird versteckt. Nur beim Klick auf den Button wird das Menü angezeigt;
   left:60%;
   float:right;
   padding:0;
   border: 1px solid black;    ! Rahmenart und -farbe;
   margin-top:30px; ! Das Menü selbst wird etwas nach unten verschoben, damit der erstel Klick nicht auslöst;
 }
.mainnav > li > a {
	line-height: 20px;		    ! Höhe der Zeile wird festgelegt;
	padding:2px;		          ! Innenabstand einheitlich definiert;
  color:rgba(3, 38, 34,1);
  font-size:95%;            	! Festlegung des Schriftgröße;
}   
.mainnav > li > a.active {
  color: rgba(237,0,228,1);	! Festlegung des Schriftfarbe (rostrot);
  text-shadow: 1px 0px 1px rgba(3, 38, 34,1) !IMPORTANT;
  font-size:100%;
  letter-spacing: 0.1em;
}

.subnav {
   background-color:white;
   min-width: 150px;
   display:none;      ! Das Menü selbst wird versteckt. Nur beim Klick auf den Button wird das Menü angezeigt; 
   padding:0;
   right:15%;
   position:absolute;
   float:none;	! Menüpunkte werden untereinander angezeigt;
   border: 1px solid black;    ! Rahmenart und -farbe;
   margin-top:35px; ! Das Menü selbst wird etwas nach unten verschoben, damit der erstel Klick nicht auslöst;
 }
   
.subnav a {
  padding: 7px 10px;		! Innenabstand nach rechts: Ist nur bei einem horizontalen Menü notwendig;
  font-size:95%;
  font-weight:bold;
  color:rgba(3, 38, 34,1);
  text-align:left;
  min-width:110px;     ! Längere Links für Zeilenumbruch bei Floating;
  min-width:85%;
  }

.subnav > li > a {
	line-height: 20px;		    ! Höhe der Zeile wird festgelegt;
  font-size:95%;
}   

.dropdown .dropbtn {
 
  margin: 0; /* Important for vertical align on mobile phones */
  padding: 7px 10px;		! Innenabstand nach rechts: Ist nur bei einem horizontalen Menü notwendig;
  font-size:85%;
  color:rgba(3, 38, 34,1); 
}   
/* Activer Sub-Menüpunkt für Mobil wird definiert */
.dropdown-content > a.active_sub, .subnav > a.active_sub, .active_sub {
	color: rgba(237,0,228,1);	! Festlegung des Schriftfarbe (rostrot);
  background-color: rgba(237,0,228,0.7);
  background-color: transparent;
  text-shadow: 1px 0px 1px rgba(3, 38, 34,1);
  font-size:100%;
  letter-spacing: 0.1em;
}

.active_sub {
  color: rgba(237,0,228,1);	! Festlegung des Schriftfarbe (rostrot);
  letter-spacing: 0.1em !IMPORTANT;
  font-size:100% !IMPORTANT;
  text-shadow: 1px 0px 1px rgba(3, 38, 34,1) !IMPORTANT;
}   
   
/* Das Menü wird bei Klick sichtbar gemacht */
#navibereich:hover .mainnav, #subnavibereich:hover .subnav, #navibereich:active .mainnav, #subnavibereich:active .subnav, .dropbtn:checked .dropdown-content {
     opacity:1;           ! Transparenz wird ausgeschaltet;
     display:block;       ! Bei Hover wird das Menü angezeigt;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
 }
 
   
 /* Beschriftung des Subnav-Menüauswahl wird definiert */ 
.subnav_text {
  text-transform:uppercase;	! Verwende Großbuchstaben;
	font-size:110%;           ! Festlegung des Schriftgröße;
	font-weight:bolder;		    ! Festlegung der Normalschrift für Montserrat, ansonsten normal einstellen;
	color: rgba(255,255,255,0.8);
	text-decoration:none;		! Keinen Unterstrich unterhalb des Menütitels;
  line-height: 10px;		! Höhe der Zeile wird festgelegt;
  display:block;
  padding-left:5px;
  padding-bottom:5px;
}
   
.subnav_text_div {
  min-width: 80px;
  text-align:right;
  right:50px;
  position:fixed;
  top:70px;  
  z-index:3;
  display:block;
  height:32px;
  border-bottom: 2px groove rgba(3, 38, 34,1);    ! Rahmenart und -farbe;
  border-left: 2px groove rgba(3, 38, 34,1);    ! Rahmenart und -farbe;
  background-color:rgba(114,114,107,0.6);
}   
   
   
/* Anpassung des Headernav */
#headernavi {
  position:fixed;            ! Position des Navibereichs immer links! - Fix;
  top: 35px;                ! Position unterhalb des Kopfbereiches;
  left:10px;                 ! Position ganz links;
  width:90%;               ! Breite des Navibereichs;
  height:20px;               ! Minimal-Höhe des Navibereichs;
  z-index:2;                 ! Navibereich überlagert andere Bereiche;
  right:auto;
}

.headernav {
  text-align:left;          ! Textausrichtung rechtbündig;
  margin:0px;
}

.headernav > li {
	float:left;	! Menüpunkte werden untereinander angezeigt, Bei float:left werden diese nebeneinander dargestellt;
}	
.headernav > li > a {
 padding: 0px 5px 0px 5px;
 font-size:85%;
}
.headernav > li > a:hover {
	text-shadow: 1px 1px white, 1px 1px white, 1px 1px white; ! Festlegung des Text-Shadows (Schatten);
}
.headernav > li > a.active {
	text-shadow: 0.5px 0.5px rgba(255,255,255,0.6), 1px 1px rgba(255,255,255,0.7), 1.5px 1.5px rgba(255,255,255,0.8); ! Festlegung des Text-Shadows (Schatten);
  text-shadow: 0.5px 0.5px rgba(255,255,255,0.6), 1px 1px rgba(255,255,255,0.7), 1.5px 1.5px rgba(255,255,255,0.8); ! Festlegung des Text-Shadows (Schatten);
  text-shadow: 0.5px 0.5px rgba(145, 184, 179,1), 1px 1px rgba(145, 184, 179,1), 1.5px 1.5px rgba(0,0,0,1); ! Festlegung des Text-Shadows (Schatten);
  color:rgba(145, 184, 179,1);
  color:rgba(255, 255, 255,1);
  font-size:90%;
}
/* Anpassung Textbereich: Der Textbereich erstreckt sich nun über die ganze Breite. */   
#textbereich {

  padding-left:10px;        ! Innenabstand zum Menü;
  padding-right:10px;       ! Innenabstand zum Newsbereich;
  padding-top:10px;          ! Innenabstand nach oben;
  padding-bottom:60px;       ! Innenabstand nach unten;
}

#md-content {
  padding-bottom:60px;       ! Innenabstand nach unten;
}

/* Die Abstände des main- und subtextbereichts zum Header. Anpassung an das Submenü IMPORTANT */ 
.maintextbereich { 
    top:60px;                  ! Außenabstand zum Kopfbereich;
   } 

.subtextbereich {
  top:60px;                  ! Außenabstand zum Kopfbereich;
}

/* Anpassung Newsbereich: Dieser wird versteckt */
#newsbereich {
   visibility:hidden;        ! Newsbereich wird auf dem Smartphone versteckt;
  }
/* Anpassung Fußbereich */
#fussbereich {
 height:45px;                 ! Höhe des Fußbereichs;
 padding:2px;                ! Innenabstand einheitlich bei 2px;
}  
   
/* Definition des Buttons, um nach oben zu gelangen */
#top-button {
 bottom: 50px; 
}
  
.footer-text {
padding:1px;
line-height:15px;
font-size:80%;           ! Festlegung des Schriftgröße;
font-weight:bold;        ! Festlegung der Fettschrift;
}

/*  Bilder anpassen                           */
img {
  max-width:350px;
}
/*  Video anpassen                           */
video.responsive-video {
  max-width: 300px;
  height: auto;
}
video {
  max-width:350px;
  height: auto;
  
}

/*Logogröße anpassen */
 .header-image {
  max-width:140px;
}
   
.logo {
  max-width:150px;
}

   /*  Definition der Icons für den header-navi                      */
.icon-suche {
  max-width:15px;
  height:auto;
}
.icon-news {
  max-width:15px;
  height:auto;
}
.icon-termine {
  max-width:15px;
  height:auto;
}
.icon-socialmedia {
  max-width:20px;
  height:auto;
}
   
/* Bildergalerie anpassen*/
.gallery {
  --size: 12em; /* control the size */
  --gap: 1em;  /* control the gap */
  --zoom: 1.5;   /* control the scale factor */
  
  display: grid;
  gap: var(--gap);
  width: calc(3*var(--size) + 2*var(--gap));
  aspect-ratio: 1;
  grid-template-columns: repeat(3,auto);
}

/*Headertitle Schriftgröße anpassen */
.header-title {
font-size:130%;
padding-right:40px; 
display:none;
}
/*  Anpassung der Tabelle des Kontaktformulars */
.form-table {
width:98%;
}
.phone-screen {
  display:inline;
}
.full-screen {
  display:none;
} 

/* ---------------------------------------------------------------*/
/* Formatierung der Listen für News, Kollegium, Suche und Termine */
/* --------------------------------------------------------------*/

.post {
  line-height:18px;
  font-size:110%;
}  

}

/* ---------Smartphones------------------------------------------------------------------------------- */
 @media only screen and (max-width: 479px) {

/* Bestimmung von unterschiedlichen Schriftgrößen in Abhängigkeit von der Bildschirmgröße. */
html, body {
        font-size:12px;
}
   
/*Logogröße anpassen */
 .header-image {
  max-width:130px;
}

#kopfbereich {
/*Hintergrundbild anpassen */
background-image: url("background_header_trans.png"); /* fallback */
background-image: url("background_header_trans.png"), linear-gradient(45deg, rgba(68, 68, 69,1) 15%, rgba(171, 171, 171,1) 90%); /* W3C */
}   
   

/* Inhalte vollständig anzeigen */
.content-block {
display:none;
padding-left:5px;
padding-bottom:1200px;
}
   
img {
  max-width:290px;
  height:auto;
}
video {
  max-width:290px;
  height:auto;
}

/* Bild bei Videos ausblenden */
.img-music-videos {
  display:none;
}

/* Bildergalerie anpassen        */
.gallery {
  --size: 10em; /* control the size */
  --gap: 1em;  /* control the gap */
  --zoom: 1.3;   /* control the scale factor */
  
  display: grid;
  gap: var(--gap);
  width: calc(2.5*var(--size) + 1*var(--gap));
  height: calc(5*var(--size));
  aspect-ratio: 1;
  grid-template-columns: repeat(2,auto);
}   
   
}