/* Hintergrund und Standartschrift */
html {height:100%; width:100%;}
body {
  background-color:#fafafa;
	height:100%; width:100%;
	margin:0; padding:0;
	/*font-family: 'Open Sans', 'Arial', 'Helvetica', sans-serif; font-size: 100%; text-align:left;*/
	font-family: 'Arimo', 'Helvetica', sans-serif; font-size: 100%; text-align:left;
	background-repeat: no-repeat;
}
/* body {font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));}*/
body {font-size: calc(12px + 4 * ((100vw - 320px) / (1600 - 320))); color:#000000;}

/* Farben:
 * Hintergrund Kopf: #414141
 * Hintergrund Trailer: #e3e3e3
 * Links: #9b111e
 * rot im Logo: #e63323
*/

/*######################################################################################*/
/* Variablen */
:root {
/*	grau */
  --farbeheadhintergrund: #414141;
  --farbeheadschrift: #ffffff;
  --farbehintergrundhell: #e3e3e3;
  --farbelinien: #414141;
  --farbeliniendunkel: #000000;
  --farbelink: #9b111e;
  --farbelinkstart: #9b111e;
  --farbelinktrailer: #9b111e;
  --farbelinkaktuelles: #9b111e;
  --farbelinkhover: #e63323;
/*###############################*/
  --headerhoehe: 13vh;
  --trailerhoehe: 13.5vh;
  --startseitebild: 30vh;
  --menuschaltflaeche: 8vw;
  --headerschrift: 2vw;
  --aktualisiert: 11vh;
}

/* Hochformat bis 319 */
@media only screen and (max-width: 319px) and (orientation: portrait) {
  :root {
    --headerhoehe: 12vh;
    --trailerhoehe: 10vh;
    --menuschaltflaeche: 10vw;
    --headerschrift: calc(10px + 2 * ((100vw - 320px) / (1600 - 320)));
    --aktualisiert: 10vh;
  }
}

/* Hochformat bis 380 */
@media only screen and (min-width: 320px) and (max-width: 380px) and (orientation: portrait) {
  :root {
    --headerhoehe: 12vh;
    --trailerhoehe: 10vh;
    --menuschaltflaeche: 10vw;
    --headerschrift: calc(13px + 2 * ((100vw - 320px) / (1600 - 320)));
    --aktualisiert: 10vh;
  }
}
/* Hochformat bis 420 */
@media only screen and (min-width: 381px) and (max-width: 420px) and (orientation: portrait) {
  :root {
    --headerhoehe: 12vh;
    --trailerhoehe: 10vh;
    --menuschaltflaeche: 10vw;
    --headerschrift: calc(16px + 2 * ((100vw - 380px) / (1600 - 380)));
    --aktualisiert: 10vh;
  }
}
/* Hochformat bis 650 */
@media only screen and (min-width: 421px) and (max-width: 650px) and (orientation: portrait) {
  :root {
    --headerhoehe: 10vh;
    --trailerhoehe: 10vh;
    --menuschaltflaeche: 5vw;
    --headerschrift: calc(18px + 2 * ((100vw - 420px) / (1600 - 320)));
    --aktualisiert: 8vh;
  }
}
/* Hochformat bis 899 */
@media only screen and (min-width: 651px) and (max-width: 899px) and (orientation: portrait) {
  :root {
    --headerhoehe: 8vh;
    --trailerhoehe: 8vh;
    --menuschaltflaeche: 5vw;
    --headerschrift: calc(23px + 2 * ((100vw - 420px) / (1600 - 320)));
    --aktualisiert: 7vh;
  }
}
/*---------------------------------------------------------------------*/
/* Querformat bis 399 */
@media only screen and (max-width: 399px) and (orientation: landscape) {
  :root {
    --headerhoehe: 14vh;
    --trailerhoehe: 10vh;
    --menuschaltflaeche: 10vw;
    --headerschrift: calc(11px + 2 * ((100vw - 320px) / (1600 - 320)));
    --aktualisiert: 11vh;
  }
  br.mobile {display:none;}
}
/* Querformat bis 650 */
@media only screen and (min-width: 400px) and (max-width: 650px) and (orientation: landscape) {
  :root {
    --headerhoehe: 15vh;
    --trailerhoehe: 10vh;
    --menuschaltflaeche: 10vh;
    --headerschrift: calc(15px + 4 * ((100vw - 380px) / (1600 - 380)));
    --aktualisiert: 12vh;
  }
  br.mobile {display:none;}
}
/* Querformat bis 799 */
@media only screen and (min-width: 651px) and (max-width: 799px) and (orientation: landscape) {
  :root {
    --headerhoehe: 14vh;
    --trailerhoehe: 10vh;
    --menuschaltflaeche: 10vh;
    --headerschrift: calc(18px + 6 * ((100vw - 380px) / (1600 - 380)));
    --aktualisiert: 11vh;
  }
}
/* Querformat bis 899 */
@media only screen and (min-width: 800px) and (max-width: 899px) and (orientation: landscape) {
  :root {
    --headerhoehe: 14vh;
    --trailerhoehe: 10vh;
    --menuschaltflaeche: 8vh;
    --headerschrift: calc(20px + 6 * ((100vw - 380px) / (1600 - 380)));
    --aktualisiert: 11vh;
  }
}

/*######################################################################################*/
/* Allgemeines */
a:link, a:visited, a:active {color:var(--farbelink); text-decoration: none; font-size:1em;}
a:hover {color:var(--farbelinkhover); text-decoration: none; font-size:1em;}
a.DefLink:link, a.DefLink:visited, a.DefLink:active, a.DefLink:hover {font-size:1em;}
a.NameTarget:link, a.NameTarget:visited, a.NameTarget:active, a.NameTarget:hover {font-size:1em;}

br.pc {display:none;}
br.tablet {display:none;}
br.mobile {display:inherit;}
@media only screen and (min-width: 651px) {br.tablet {display:inherit;} br.mobile {display:none;}}
@media only screen and (min-width: 900px) {br.pc {display:inherit;}}
hr {width:100%;}
hr.hr80 {width:80%;}
hr.hr60 {width:60%;}
hr.hr50 {width:50%;}
hr.Seitentrenner {width:80vw; border: 8px solid var(--farbelinien); border-radius: 15px;}
@media only screen and (min-width: 900px) {hr.Seitentrenner {margin-left:0; width:70vw;} hr.SeitentrennerCenter {margin:auto;}}
hr.Trenner1 {width:80vw; border: 4px solid var(--farbelinien); border-radius: 15px;}
@media only screen and (min-width: 900px) {hr.Trenner1 {margin-left:0; width:70vw;} hr.TrennerCenter {margin:auto;}}
hr.Trenner2 {width:70vw; border: 4px solid var(--farbelinien); border-radius: 15px;}
@media only screen and (min-width: 900px) {hr.Trenner2 {margin-left:0; width:60vw;} hr.TrennerCenter {margin:auto;}}

ul {list-style-type:square;}
ol {list-style-type:decimal; list-style-type:decimal-leading-zero;}

img {border-width:0; border-style:none; max-width:90vw;}
img.rahmend {border-width:2px; border-style:solid; border-color:var(--farbelinien);}

/* Seitenueberschrift */
h1.Titel {color:#000000; font-size:1.4em; text-decoration:underline; text-align:center; margin-bottom:2vh; padding-top:3vh;}
@media only screen and (min-width: 900px) {h1.Titel {padding-top:3.5vh;}}
h1.TitelNav {color:#000000; font-size:1.4em; text-decoration:underline; text-align:center; margin-bottom:2vh; padding-top:1vh;}
@media only screen and (min-width: 900px) {h1.TitelNav {text-align:left; padding-left:10vw; padding-top:3.5vh;}}
h2.TitelNav {color:#000000; font-size:1.2em; text-decoration:underline; text-align:center; margin-bottom:2vh; padding-top:3vh;}
@media only screen and (min-width: 900px) {h2.TitelNav {text-align:left; padding-left:2vw; padding-top:3.5vh;}}
h3.TitelNav {color:#000000; font-size:1.1em; text-decoration:underline; text-align:left; padding-left:2vw; margin-bottom:1vh; padding-top:2vh;}
@media only screen and (min-width: 900px) {h3.TitelNav {text-align:left;}}

/*######################################################################################*/
/* Seite allgemein */
#Master {position:absolute; width:100%; font-size: 1em;}
#Seite {position:fixed; left:0; top:var(--headerhoehe); width:100%; height:calc(100vh - var(--headerhoehe) - var(--trailerhoehe)); overflow:auto; text-align:center; z-index:0;}
#SeiteNav {position:fixed; left:0; top:var(--headerhoehe); width:100%; height:calc(100vh - var(--headerhoehe) - var(--trailerhoehe)); overflow:auto; text-align:center; z-index:0;}
@media only screen and (min-width: 900px) {#SeiteNav {padding-left:22vw; width:78vw; text-align:left;}}
#StartSeite {position:fixed; left:0; top:calc(var(--headerhoehe) + var(--startseitebild)); width:100%; height:calc(100vh - var(--headerhoehe) - var(--trailerhoehe) - var(--startseitebild)); overflow:auto; text-align:center; z-index:0;}
@media only screen and (min-width: 900px) {#StartSeite {left:25vw; width:75vw; text-align:left;}}
@media only screen and (max-width: 650px) and (orientation: portrait) {#MobileSpace {height:10vh;}}
@media only screen and (min-width: 651px) {#MobileSpace {display:none;}}

/* Header */
#Header {position:absolute; top:0; left:0; height:var(--headerhoehe); width:100%; z-index:2; background-color:var(--farbeheadhintergrund);}
div.HeaderSchriftLinks {color:var(--farbeheadschrift); font-family: 'Arimo', 'Helvetica', sans-serif; font-size:var(--headerschrift); text-align:left; padding-left:calc(var(--headerhoehe) + 10px); float:left; padding-top:calc(var(--headerhoehe) / 10); z-index:2;}
@media only screen and (min-width: 900px) {div.HeaderSchriftLinks {text-align:center; padding-left:0; padding-top:calc(var(--headerhoehe) / 3); width:45vw;}}
div.HeaderSchriftRechts {color:var(--farbeheadschrift); font-family: 'Arimo', sans-serif; font-size:var(--headerschrift); text-align:left; float:left; padding-left:calc(var(--headerhoehe) + 10px); padding-top:0.5vh; z-index:2;}
@media only screen and (min-width: 900px) {div.HeaderSchriftRechts {text-align:center; width:50vw; float:right; padding-left:0; padding-top:calc(var(--headerhoehe) / 3);}}
#Logo {position:absolute; top:0; left:0; width:var(--headerhoehe); height:var(--headerhoehe); text-align:center; z-index:3;}
@media only screen and (min-width: 900px) {#Logo {width:20vw; left:40vw;}}
img.Logo {height:var(--headerhoehe);}
div.Counter {display:none;}
@media only screen and (min-width: 900px) {div.Counter {color:var(--farbeheadschrift); display:inherit; position:absolute; top:var(--aktualisiert); left:5px; font-size:0.8em; letter-spacing: 0.12em; z-index:3;}}
div.Aktualisiert {color:var(--farbeheadschrift); display:inherit; position:absolute; top:var(--aktualisiert); right:10px; font-size:0.8em; z-index:3;}

/* Trailer */
#Trailer {position:fixed; bottom:0; left:0; height:var(--trailerhoehe); width:100%; z-index:3; background-color:var(--farbehintergrundhell); transition: top 0.3s;}
div.TrailerLinks {color:#000000; font-size:3.5vw; float:left; width:48vw; padding-top:1vh; padding-left:1.8vw; line-height:calc(var(--trailerhoehe) + 2vh);}
@media only screen and (min-width: 651px) {div.TrailerLinks {font-size:2vw; width:30vw;}}
@media only screen and (min-width: 900px) {div.TrailerLinks {font-size:1.3vw;}}
div.TrailerMitte {position:fixed; bottom:0; right:0; height:calc(var(--trailerhoehe) - 1vh); width:50vw; text-align:center; color:#000000; font-size:3.5vw; z-index:2; line-height:calc(var(--trailerhoehe) + 2vh);}
@media only screen and (min-width: 651px) {div.TrailerMitte {width:25vw; font-size:2vw;}}
@media only screen and (min-width: 900px) {div.TrailerMitte {left:30vw; right:unset; width:40vw; font-size:1.3vw;}}
div.TrailerRechts {display:none;}
@media only screen and (min-width: 900px) {div.TrailerRechts {display:inherit; color:#000000; float:right; width:12vw; padding-right:1.8vw; line-height:calc(var(--trailerhoehe) / 5);}}
@media only screen and (min-width: 900px) {ul.TrailerMenu {margin-top:1vh;}}
/*ul.TrailerMenuScroll {margin-top:0.3vh; display:none;}*/
img.Sponsor {height:calc(var(--trailerhoehe) - 4vh);}
@media only screen and (min-width: 900px) {img.Sponsor {height:calc(var(--trailerhoehe) - 7vh);}}
img.socialmedia {height:calc(var(--trailerhoehe) - 4vh);}
@media only screen and (min-width: 900px) {img.socialmedia {height:calc(var(--trailerhoehe) - 7vh);}}
a.TrailerLink:link, a.TrailerLink:visited, a.TrailerLink:active, a.TrailerLink:hover {font-size:0.7em;}
@media only screen and (min-width: 651px) {a.TrailerLink:link, a.TrailerLink:visited, a.TrailerLink:active, a.TrailerLink:hover {font-size:0.8em;}}
@media only screen and (min-width: 900px) {a.TrailerLink:link, a.TrailerLink:visited, a.TrailerLink:active, a.TrailerLink:hover {font-size:0.9em;}}
a.TrailerMenu:link, a.TrailerMenu:visited, a.TrailerMenu:active {color:var(--farbelinktrailer); text-decoration: none; font-size:1em;}
a.TrailerMenu:hover {color:var(--farbelinkhover); text-decoration: none; font-size:1em;}

/*######################################################################################*/
/* Navigation */
#Menueschaltflaeche {position:absolute; top:0; right:0; width:var(--menuschaltflaeche); z-index:5;}
@media only screen and (min-width: 900px) {#Menueschaltflaeche {display:none;}}
button.Menueschaltflaeche {padding-top:2px; width:var(--menuschaltflaeche); background-image:none; background-color:transparent; border:none; padding:0;}
img.Menueschaltflaeche {width:var(--menuschaltflaeche);}
@media only screen and (min-width: 900px) {img.Menueschaltflaeche {display:none;}}

#Navigation-Container {background-color:var(--farbeheadhintergrund); position:fixed; width:200px; height:100%; top:0; right: 0; -webkit-transform: translate(200px,0); transform: translate(200px,0); z-index:5;}
#Navigation-Container.open {-webkit-transform: translate(0,0); transform: translate(0,0);}
#Navigation-Container {-webkit-transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out;}
@media only screen and (min-width: 900px) {#Navigation-Container {all:unset; position:absolute; top:var(--headerhoehe); width:95%; z-index:5; text-align:center;}}
@media only screen and (max-width: 650px) and (orientation: portrait) {#Navigation-Container {top:0;}}
#Navigation-Container a:link, a:visited, a:active, a:hover {font-size:1em;}
#Navigation-Container ul {list-style-type: none; margin: 0; padding: 0; position:-webkit-sticky; position:sticky; overflow:hidden;}
@media only screen and (min-width: 900px) {#Navigation-Container ul {display:inline-block;}}
#Navigation-Container li {background-color:var(--farbehintergrundhell);}
@media only screen and (min-width: 651px) {#Navigation-Container li {text-align:center;}}
@media only screen and (min-width: 900px) {#Navigation-Container li {float:left; border-bottom:solid; border-left:solid; border-right:solid; border-radius:0px 0px 20px 20px;}}
#Navigation-Container li.spacer {background-color:rgba(255, 255, 255, 0); display: block; padding: 8px 1vw;}
@media only screen and (min-width: 651px) {#Navigation-Container li.spacer {padding: 2vh 1vw;}}
@media only screen and (min-width: 900px) {#Navigation-Container li.spacer {float: left; padding: 13px 1.3vw; border:none;}}
#Navigation-Container li.spacerLeft {background-color:rgba(255, 255, 255, 0); display: block; padding: 10px 1vw;}
@media only screen and (min-width: 651px) {#Navigation-Container li.spacerLeft {padding: 2vh 1vw;}}
@media only screen and (min-width: 900px) {#Navigation-Container li.spacerLeft {float: left; padding: 13px 1vw; border:none;}}
#Navigation-Container li a {display: block; text-align: center; padding: 6px 1vw 3px; text-decoration: none;}
#Navigation-Container li a:hover:not(.active) {background-color: #ddd;}
@media only screen and (min-width: 900px) {#Navigation-Container li a:hover:not(.active) {border-radius:0px 0px 20px 20px;}}
#Navigation-Container li a.active {color: var(--farbeheadschrift); background-color: var(--farbeheadhintergrund); border:solid; border-color:var(--farbeliniendunkel);}
@media only screen and (min-width: 900px) {#Navigation-Container li a.active {border:none; border-radius:0px 0px 15px 15px;}}
@media only screen and (min-width: 900px) {#Navigation-Container li.navebeneMobil {display:none;}}

@media only screen and (max-width: 900px) {header.Kopfbereich {display: -ms-flexbox; display: -webkit-flex; display: flex; width: 100%; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; top: 0; left: 0;}}
@media only screen and (max-width: 900px) {header.Kopfbereich.open {-webkit-transform: translate(-200px,0); transform: translate(-200px,0);}}
@media only screen and (max-width: 900px) {.Kopfbereich {-webkit-transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out;}}

/* Navigation Seite mit Hover */
#Navigation-Container-Seite {position:fixed; left:0; top:var(--headerhoehe); width:80vw; padding-left:0; z-index:1;}
@media only screen and (max-width: 650px) and (orientation: portrait) {#Navigation-Container-Seite {top:var(--headerhoehe);}}
@media only screen and (min-width: 900px) {#Navigation-Container-Seite {top:20vh; width:16vw; height:63vh; padding-left:2vw; padding-right:2vw; border-right:solid; border-color:var(--farbelinien); border-width:8px; background-image:url(../images/notenschluessel.png); background-repeat:no-repeat; background-size:100%;}}
#Navigation-Container-Seite ul {list-style-type: none; margin: 0; padding: 0; padding-left:1vw; position:-webkit-sticky; position:sticky; overflow:hidden;}
@media only screen and (max-width: 899px) {ul.NavigationSeite {display:none; position:absolute; z-index:1;}}
@media only screen and (max-width: 899px) {#Navigation-Container-Seite li {background-color:var(--farbehintergrundhell);}}
@media only screen and (max-width: 899px) {#Navigation-Container-Seite li.spacer {padding:5px; background-color:var(--farbehintergrundhell);}}
@media only screen and (min-width: 900px) {#Navigation-Container-Seite li.spacer {padding:5px;}}
@media only screen and (max-width: 899px) {#Navigation-Container-Seite li.spacerTop {padding-top:10px;}}
@media only screen and (max-width: 899px) {#Navigation-Container-Seite li a {padding: 6px 1vw 3px; text-decoration: none;}}
@media only screen and (max-width: 899px) {h2.HeadNav {display:none;}}
@media only screen and (min-width: 900px) {h2.HeadNav {color:#000000; font-size:1.3em; text-decoration:none; text-align:left; padding-top:5vh;}}
button.HeadNav {border:none;}
@media only screen and (min-width: 900px) {button.HeadNav {display:none;}}
img.ButtonSeitenNav {width:var(--menuschaltflaeche);}
@media only screen and (min-width: 900px) {img.ButtonSeitenNav {display:none;}}
#Navigation-Container-Seite:hover ul.NavigationSeite {display: block;}
#Navigation-Container-Seite:hover button.HeadNav {background-color: var(--farbeheadhintergrund);}
a.SeiteNav:link, a.SeiteNav:visited, a.SeiteNav:active, a.SeiteNav:hover {font-size:1em;}
a.SeiteNavU:link, a.SeiteNavU:visited, a.SeiteNavU:active, a.SeiteNavU:hover {font-size:0.8em;}

/*######################################################################################*/
/* Startseite */
div.StartseiteBild {position:fixed; left:0; top:var(--headerhoehe); height:var(--startseitebild); width:100%; background-color:var(--farbeheadhintergrund); z-index:1; white-space:nowrap; overflow:hidden;}
/*img.StartseiteBild {width:100%; height:30vh; object-fit:cover;}	ein Bild*/
img.StartseiteBild {height:var(--startseitebild);}

div.StartseiteWillkommen {font-size:1.8em; padding-top:3vh;}
@media only screen and (min-width: 900px) {div.StartseiteWillkommen {padding-top:10vh; padding-left:10vw; padding-right:10vw; text-align:left;}}
/*@media only screen and (min-width: 900px) {div.StartseiteWillkommen {padding-top:10vh; padding-left:10vw; padding-right:10vw; text-align:left;}}*/
div.StartseiteAbteilung {font-size:1.2em; padding-top:1vh;}
@media only screen and (min-width: 900px) {div.StartseiteAbteilung {padding-top:0.6vh; padding-left:13vw; padding-right:10vw; text-align:left;}}
div.StartseiteText {font-size:1.0em; text-align:left; padding-top:1vh; padding-left:8vw; padding-right:10px;}
@media only screen and (min-width: 651px) {div.StartseiteText {padding-top:1vh; padding-left:8vw; padding-right:8vw;}}
@media only screen and (min-width: 900px) {div.StartseiteText {padding-top:0.6vh; padding-left:7vw; padding-right:20vh; width:50vw; text-align:left;}}
@media only screen and (max-width: 899px) {img.StartseiteNoten {display:none;}}
@media only screen and (min-width: 900px) {img.StartseiteNoten {height:7vh; padding-top:5px;}}
a.Startseite:link, a.Startseite:visited, a.Startseite:active, a.Startseite:hover {font-size:1em;}

div.StartseiteTermine {text-align:left; color:var(--farbeliniendunkel); padding-left:8vw; padding-top:2vh;}
@media only screen and (min-width: 900px) {div.StartseiteTermine {display:inherit; position:fixed; left:2.4vw; top:50vh; width:25vw; background-color:var(--farbehintergrundhell); color:var(--farbeliniendunkel); padding-left:10px; font-size:0.9em; z-index:3; border:solid; border-radius:15px; border-color:var(--farbelinien);}}
div.StartseiteTerminPunkt {display:none;}
@media only screen and (min-width: 900px) {div.StartseiteTerminPunkt {width:0; height:0; border:5px solid transparent; border-bottom-color:var(--farbeliniendunkel); position:relative; top:-5px; display:inline-block;}}
@media only screen and (min-width: 900px) {div.StartseiteTerminPunkt:after {content:''; position:absolute; left:-5px; top:5px; width:0; height:0; border:5px solid transparent; border-top-color:var(--farbeliniendunkel);}}
div.StartseiteTermineUeberschrift{font-size:1.2em; font-weight:bold; text-decoration:underline;}

hr.SeitentrennerStart {width:80vw; margin-top:2vh; border: 8px solid var(--farbelinien); border-radius: 15px;}
@media only screen and (min-width: 900px) {hr.SeitentrennerStart {width:70vw; margin-left:0; margin-top:10vh;}}

div.StartseiteAktuelles {display:none;}
@media only screen and (min-width: 900px) {div.StartseiteAktuelles {display:inherit; left:2.4vw; margin-top:2vh; width:25vw; background-color:var(--farbehintergrundhell); padding-left:10px; z-index:3; border:solid; border-radius:15px; border-color:var(--farbelinien);}}
ul.StartseiteAktuelles {list-style-type: square; margin:0; padding:0; padding-left:10px; color:var(--farbeliniendunkel)}
a.StartseiteAktuelles:link, a.StartseiteAktuelles:visited, a.StartseiteAktuelles:active {color:var(--farbelinkaktuelles); text-decoration: none; font-size:1em;}
a.StartseiteAktuelles:hover {color:var(--farbelinkhover);}

div.SonderflaecheBild {position:absolute; top:10vh; left:50%; transform:translate(-50%); max-width:90vw; max-height:80vh; z-index:1000;}
@media only screen and (min-width: 900px) {div.SonderflaecheBild {top:var(--headerhoehe); max-width:40vw; max-height:70vh;}}
img.Sonderflaeche {max-height:70vh; width:auto; border-style:solid; border-color:var(--farbeliniendunkel); border-width:5px; display:block; margin:5px; margin-left:auto; margin-right:auto;}
div.SonderflaecheText {position:absolute; top:20vh; left:50%; transform:translate(-50%); width:90vw; height:50vh; max-height:70vh; background-color:var(--farbeheadhintergrund); color:var(--farbeheadschrift); text-align:center; font-size:2em; border-style:solid; border-color:var(--farbeliniendunkel); border-width:5px; z-index:999;}
@media only screen and (min-width: 900px) {div.SonderflaecheText {top:var(--headerhoehe); max-width:40vw;}}
a.Sonderflaeche:link, a.Sonderflaeche:visited, a.Sonderflaeche:active {color:var(--farbelink); background-color: var(--farbeheadhintergrund); text-decoration: none; font-size:1em;}
a.Sonderflaeche:hover {color:#ff0000; background-color: var(--farbeheadhintergrund); text-decoration: none; font-size:1em;}
h1.Sonderflaeche {color:var(--farbeheadschrift); font-size:1.4em; text-decoration:underline; margin-bottom:2vh; padding-top:1vh;}
button.SonderflaecheClose{float:right; height:25px; width:25px; border-radius:50%; border-style:solid;}

/*######################################################################################*/
/*Kontakt*/
div.Kontakt {padding-left:50px; padding-right:50px; margin:auto; text-align:center; padding-top:20px;}
div.Kontakt1 {display:inline-block;}
@media only screen and (min-width: 900px) {div.Kontakt1 {padding-right:100px;}}
div.Kontakt2 {display:inline-block;}
img.Kontakt {border-width:5px; border-style:solid; border-color:var(--farbelinien); width:28vw; border-radius:15%;}
@media only screen and (min-width: 651px) {img.Kontakt {width:20vw;}}
@media only screen and (min-width: 900px) {img.Kontakt {width:10vw;}}

/*Buchen*/
div.Buchen {text-align:left; padding-left:10px; padding-right:15px; padding-top:10px; padding-bottom:5px;}
@media only screen and (min-width: 900px) {div.Buchen {padding-left:20vw; padding-right:20vw;}}
div.BuchenTitel {font-size:1.2em; font-weight:bold; padding-top:10px;}
div.BuchenAnzahl {font-size:1em; font-style:italic;}
ul.Buchen {list-style-type: square; margin:0; padding-left:20px;}
img.Buchen {border-width:1px; border-style:solid; border-color:var(--farbelinien); border-radius:20px;}
@media only screen and (min-width: 651px) {div.BuchenText {float:left; width:60%;}}

/*Impressum*/
div.Impressum {padding-left:15px; padding-right:15px; margin:auto;}
img.Impressum {height:10vh;}
div.Datenschutz {width:80%; text-align:left; padding-left:15px; padding-right:15px; font-size:0.8em; margin:auto;}
@media only screen and (min-width: 900px) {div.Datenschutz {max-width:800px;}}

/*Links*/
div.Links {text-align:center; padding-left:15px; padding-right:15px;}
hr.TrennerLinks {width:70vw; border: 4px solid var(--farbelinien); border-radius:15px; margin-top:5px; margin-bottom:5px;}
@media only screen and (min-width: 900px) {hr.TrennerLinks {margin-left:0; width:40vw; margin:auto; margin-top:5px; margin-bottom:5px;}}
a.Links:link, a.Links:visited, a.Links:active, a.Links:hover {font-size:1em;}
img.linksbanner {border-width:2px; border-style:solid; border-color:var(--farbelinien);}
@media only screen and (max-width: 899px) {img.linksbanner {max-width:468px; width:100%;}}

/*######################################################################################*/
/* Aktuelles */
div.AktuellesText {text-align:left; padding-left:10px;}
@media only screen and (max-width: 650px) and (orientation: portrait) {div.AktuellesText {width:95vw;}}
@media only screen and (min-width: 900px) {div.AktuellesText {padding-right:50px;}}
img.BildAktuelles {width:30vw; border-radius:5%;}
@media only screen and (min-width: 900px) {img.BildAktuelles {width:10vw;}}

/*######################################################################################*/
/* Termine */
table.termine {font-size:0.8em; width:95%;}
@media only screen and (min-width: 900px) {table.termine {padding-right:20px;}}
td.TerminLegende {font-size:0.9em; font-style:italic; width:150px; max-width:33vw;}
td.TerminDatum {font-size:1.1em; text-align:left; padding:5px 0px 2px 15px; color:var(--farbeheadschrift); background-color:var(--farbeheadhintergrund); border-width:2px; border-style:solid solid none solid; border-radius:20px 20px 0px 0px; border-color:var(--farbeliniendunkel);}
@media only screen and (max-width: 650px) {td.TerminDatum {padding-left:20px; display:block;}}
tr.TerminEintrag:hover {background-color:var(--farbehintergrundhell);}
td.TerminLinks {padding-left:5px; white-space: nowrap;}
@media only screen and (min-width: 651px) {td.TerminLinks {border-width:2px; border-style:none none none solid; border-color:var(--farbeliniendunkel);}}
td.TerminTreffpunkt {font-size:0.9em;}
@media only screen and (min-width: 651px) {td.TerminTreffpunkt {max-width:25vw;}}
td.TerminRechts {font-size:0.9em;}
@media only screen and (min-width: 651px) {td.TerminRechts {padding-right:5px; min-width:80px; border-width:2px; border-style:none solid none none; border-color:var(--farbeliniendunkel);}}
td.TerminEnde {background-color:var(--farbeheadhintergrund); border-width:2px; border-style:none solid solid solid; border-radius:0px 0px 20px 20px; border-color:var(--farbeliniendunkel);}
td.TerminDatumNJahr {font-style:italic;}
div.TerminDatumNJahr {color:var(--farbeheadschrift); background-color:var(--farbeheadhintergrund); font-weight:bold; float:left; padding-right:30px;}
td.TerminSpacer {height:5px;}
td.Termine {text-align:left; vertical-align:middle;}
td.TerminSpezial {padding-left:5px; text-align:center; border-width:2px; border-style:none solid none solid; border-color:var(--farbeliniendunkel);}
@media only screen and (min-width: 651px) {td.TerminSpezial {padding-left:80px; text-align:left;}}
@media only screen and (max-width: 650px) {td.Termine {padding-left:20px; display:block; border-width:2px; border-style:none solid none solid; border-color:var(--farbeliniendunkel);}}
/*externer Termin (schwarz)*/
td.Termin0 {color:#000000;}
/*interner Termin (blau)*/
td.Termin1 {color:#0000ff;}
/*Probe (darkmagenta)*/
td.Termin2 {color:#8b008b;}
/*Termin vorgemerkt (seagreen)*/
td.Termin3 {color:#2e8b57; font-style:italic; font-size:0.9em;}
/*Termin Schuelerorchester (dark orange)*/
td.Termin4 {color:#9f6304;}
/*abgelaufener Termin */
td.TerminAbgelaufen {color:#606060; font-style:italic; font-size:0.9em;}
/*entfallener Termin (rot)*/
td.TerminEntfallen {color:#ff0000; text-decoration:line-through;}

/*######################################################################################*/
/* Ausbildung */
div.AusbildungAblauf {text-align:left; padding-left:0; padding-right:15px; padding-bottom:5px;}
#AusbildungAblaufContainer {width:100vw; text-align:center;}
@media only screen and (min-width: 900px) {#AusbildungAblaufContainer {width:61vw;}}
#AusbildungAblaufContainer a {display:block; background-color:var(--farbehintergrundhell);}
#AusbildungAblaufContainer a:hover {background-color:var(--farbehintergrundhell);}
#AusbildungAblaufEbene1 {width:80vw; line-height:30px; border:1px solid var(--farbeliniendunkel); margin:auto;}
@media only screen and (min-width: 900px) {#AusbildungAblaufEbene1 {width:57vw;}}
#AusbildungAblaufEbene1 a {height:30px;}
#AusbildungAblaufEbene2a {display:inline; border:1px solid var(--farbeliniendunkel); margin-left:8vw; float:left; clear:both;}
@media only screen and (min-width: 900px) {#AusbildungAblaufEbene2a {margin-left:2vw;}}
#AusbildungAblaufEbene2a a {width:40vw; height:25px; padding-top:8px;}
@media only screen and (min-width: 900px) {#AusbildungAblaufEbene2a a {width:28vw;}}
#AusbildungAblaufEbene2b {display:inline; border:1px solid var(--farbeliniendunkel); margin-left:12px; float:left;}
#AusbildungAblaufEbene2b a {width:40vw; height:25px; padding-top:8px;}
@media only screen and (min-width: 900px) {#AusbildungAblaufEbene2b a {width:28vw;}}
#AusbildungAblaufEbene3a {display:inline; border:1px solid var(--farbeliniendunkel); margin-left:8vw; float:left; clear:both;}
@media only screen and (min-width: 900px) {#AusbildungAblaufEbene3a {margin-left:2vw;}}
#AusbildungAblaufEbene3a a {width:40vw; height:25px; padding-top:8px;}
@media only screen and (min-width: 900px) {#AusbildungAblaufEbene3a a {width:28vw;}}
#AusbildungAblaufEbene4 {width:80vw; line-height:30px; border:1px solid var(--farbeliniendunkel); margin:auto; clear:both;}
@media only screen and (min-width: 900px) {#AusbildungAblaufEbene4 {width:57vw;}}
#AusbildungAblaufEbene5 {display:inline; border:1px solid var(--farbeliniendunkel); margin-left:20vw; float:left; clear:both;}
@media only screen and (min-width: 900px) {#AusbildungAblaufEbene5 {margin-left:15vw;}}
#AusbildungAblaufEbene5 a {width:60vw; height:25px; padding-top:8px;}
@media only screen and (min-width: 900px) {#AusbildungAblaufEbene5 a {width:30vw;}}
#AusbildungAblaufPfeilLinks1 {display:inline; color:#000000; margin-left:25vw; float:left; font-size:3em; clear:both;}
@media only screen and (min-width: 900px) {#AusbildungAblaufPfeilLinks1 {margin-left:14vw;}}
#AusbildungAblaufPfeilLinks2 {display:inline; color:#000000; margin-left:25vw; float:left; font-size:3em; clear:both;}
@media only screen and (min-width: 900px) {#AusbildungAblaufPfeilLinks2 {margin-left:14vw;}}
#AusbildungAblaufPfeilLinks3 {display:inline; color:#000000; margin-left:25vw; float:left; font-size:3em; clear:both;}
@media only screen and (min-width: 900px) {#AusbildungAblaufPfeilLinks3 {margin-left:14vw;}}
#AusbildungAblaufPfeilRechts1 {display:inline; color:#000000; margin-left:35vw; float:left; font-size:3em;}
@media only screen and (min-width: 900px) {#AusbildungAblaufPfeilRechts1 {margin-left:27vw;}}
#AusbildungAblaufPfeilRechts2 {display:inline; color:#000000; margin-left:35vw; float:left; font-size:3em;}
@media only screen and (min-width: 900px) {#AusbildungAblaufPfeilRechts2 {margin-left:27vw;}}
#AusbildungAblaufPfeilRechts3 {display:inline; color:#000000; margin-left:35vw; float:left; font-size:3em;}
@media only screen and (min-width: 900px) {#AusbildungAblaufPfeilRechts3 {margin-left:27vw;}}
#AusbildungAblaufPfeilMitte {display:inline; color:#000000; margin-left:45vw; float:left; font-size:3em; clear:both;}
@media only screen and (min-width: 900px) {#AusbildungAblaufPfeilMitte {margin-left:28vw;}}
div.AusbildungAblaufClear {clear:both;} 

div.AusbAllgemein {text-align:left; padding-left:15px; padding-right:15px; padding-bottom:5px; font-size:1.2em;}
@media only screen and (min-width: 900px) {div.AusbAllgemein {padding-left:0; padding-right:100px;}}
div.AusbInhalt {text-align:left; padding-left:15px; padding-right:15px; padding-bottom:5px;}
@media only screen and (min-width: 900px) {div.AusbInhalt {padding-left:0; padding-right:100px;}}
div.AusbInhaltEinfg {padding-top:13px; padding-bottom:10px;}
div.AusbBild {text-align:center; padding-bottom:5px;}
@media only screen and (min-width: 900px) {div.AusbBild {text-align:left; padding-left:10vw;}}

div.FruehUeberschrift {text-align:justify; padding-left:20px; padding-right:15px; padding-top:15px; margin:auto; font-weight:bold;}
@media only screen and (min-width: 651px) {div.FruehUeberschrift {padding-left:1vw; padding-right:5px;}}
@media only screen and (min-width: 900px) {div.FruehUeberschrift {padding-left:0;}}
div.FruehInhalt {text-align:left; padding-left:20px; padding-right:15px; padding-bottom:5px;}
@media only screen and (min-width: 651px) {div.FruehInhalt {padding-left:1vw; padding-right:70px;}}
div.FruehBild {text-align:center; padding-top:2px; padding-bottom:2px;}
@media only screen and (min-width: 651px) {div.FruehBild {text-align:left; padding-left:10vw; padding-bottom:5px;}}
img.FruehBild1 {height:20vh; max-width:80vw;}
img.FruehBild2 {height:40vh; max-width:60vw; border-radius:50%;}
div.FruehZielgruppe {text-align:left; padding-left:40px; padding-right:15px; padding-bottom:10px; margin:auto; font-style:italic;}
@media only screen and (min-width: 651px) {div.FruehZielgruppe {padding-left:30px; padding-right:unset;}}

div.AusbUeberschrift {text-align:justify; padding-left:15px; padding-right:15px; padding-top:15px; margin:auto; font-weight:bold;}
@media only screen and (min-width: 651px) {div.AusbUeberschrift {padding-left:1vw; padding-right:unset;}}
@media only screen and (min-width: 900px) {div.AusbUeberschrift {padding-left:0;}}
div.AusbUeberschriftUU {text-align:left; font-weight:bold; padding-left:15px; padding-top:10px;}
div.AusbKontakt {text-align:left; padding-left:15px; padding-right:15px; padding-top:5px; padding-bottom:10px; margin:auto;}
@media only screen and (min-width: 651px) {div.AusbKontakt {padding-left:15px; padding-right:unset;}}
div.AusbZielgruppe {text-align:left; padding-left:40px; padding-right:15px; padding-bottom:10px; margin:auto; font-style:italic;}
@media only screen and (min-width: 651px) {div.AusbZielgruppe {padding-left:30px; padding-right:100px;}}

/* Instrumente */
div.Instrumente {text-align:left; padding-left:20px; padding-right:15px; padding-bottom:5px;}
@media only screen and (min-width: 900px) {div.Instrumente {padding-left:0; padding-right:100px;}}
div.InstrumenteU {text-align:justify; font-size:1.1em; padding-left:20px; padding-right:15px; padding-top:15px; margin:auto; font-weight:bold;}
@media only screen and (min-width: 651px) {div.InstrumenteU {padding-left:1vw; padding-right:unset;}}
@media only screen and (min-width: 900px) {div.InstrumenteU {padding-left:0;}}
div.InstrumenteUU {text-align:left; font-weight:bold; padding-left:0; padding-top:10px;}
div.InstrumenteL {text-align:left; padding-left:10px; padding-right:15px; padding-top:10px; padding-bottom:10px; margin:auto; font-style:italic;}
@media only screen and (min-width: 651px) {div.InstrumenteL {padding-left:1vw; padding-right:unset;}}
img.Instrumente {border-radius:20px;}
@media only screen and (min-width: 651px) {img.Instrumente {float:right; padding-left:10px; padding-right:unset;}}
img.Instrumente2 {border-radius:20px;}

/* Jugendarbeit */
img.Jugendarbeit {border-radius:20px;}
img.Jugendvertreter {border-radius:20px; width:20vw;}
@media only screen and (max-width: 650px) {img.Jugendvertreter {width:30vw;}}
table.Jugendarbeit {width:95%;}
td.JugendarbeitLinks {text-align:right; width:35%; border-style:none none solid solid; border-width:2px; border-color:var(--farbeliniendunkel);}
td.JugendarbeitMitte {font-size:1.1em; font-weight:bold; text-align:center; border-style:none solid solid solid; border-width:2px; border-color:var(--farbeliniendunkel);}
td.JugendarbeitRechts {text-align:left; width:35%; border-style:none solid solid none; border-width:2px; border-color:var(--farbeliniendunkel);}
td.JugendarbeitAnfang {font-size:1.1em; font-weight:bold; border-top-style:solid;}

/* Spezialseiten */
div.AusbSpezialContainer {text-align:left; padding-left:10px; padding-right:10px; padding-top:15px; margin:auto; font-weight:bold;}
@media only screen and (min-width: 651px) {div.AusbSpezialContainer {padding-left:1vw; padding-right:5px;}}
@media only screen and (min-width: 900px) {div.AusbSpezialContainer {padding-left:0;}}
div.AusbSpezial01 {text-align:left; padding-left:20px; padding-right:15px; padding-bottom:5px; font-size:0.9em;}
@media only screen and (min-width: 651px) {div.AusbSpezial01 {padding-left:1vw; padding-right:70px;}}
div.AusbSpezialUeberschrift {padding-top:10px; font-size:1.1em; font-weight:bold;}
div.AusbSpezialBeschreibung {font-size:1.2em; padding-left:5px; padding-right:10px;}
audio.AusbSpezial {width:350px; max-width:70%; background:#e3e3e3;}
audio.AusbSpezialN {width:350px; max-width:70%; background:#e63323;}
audio.AusbSpezialF {width:350px; max-width:70%; background:#0000ff;}
div.AusbSpezialFilter {display:block;}
label.AusbSpezial {font-size:1.2em; display:inline;}
input[type=checkbox].AusbSpezial {display:inline;}
input.AusbSpezialSuchfeld {width:220px; font-size:1.0em;}
input.AusbSpezialButton {width:130px; font-size:1.1em;}

/*######################################################################################*/
/* Spielmannszug */
div.spzwirUeberschrift {text-align:left; padding-left:20px; padding-right:5px; margin:auto; font-weight:bold;}
@media only screen and (min-width: 900px) {div.spzwirUeberschrift {padding-left:50px; padding-right:50px;}}
div.spzwir {text-align:left; padding-left:5px; padding-right:5px; padding-bottom:30px; margin:auto;}
@media only screen and (min-width: 900px) {div.spzwir {text-align:justify; padding-left:50px; padding-right:50px;}}
div.spzwirZitat {text-align:left; padding-left:20px; padding-right:20px; padding-top:5px; padding-bottom:5px; margin:auto; font-style:italic; font-size:1.1em;}
@media only screen and (min-width: 900px) {div.spzwirZitat {text-align:justify; padding-left:80px; padding-right:50px;}}
div.Bild {text-align:center; padding-top:10px;}
img.spzwirFoto {max-width:90%; height:auto; border-width:5px; border-style:solid; border-color:var(--farbelinien); border-radius:15px; display:block; margin-left: auto; margin-right: auto;}
@media only screen and (min-width: 651px) {img.spzwirFoto {width:400px; height:222px;}}

/* Leitung */
div.Leitung {padding-right:10px; margin-left:20px; margin-top:20px; text-align:left;}
@media only screen and (min-width: 900px) {div.Leitung {padding-right:50px; margin-left:30px; margin-top:20px;}}
div.leitunguber {font-size:1.2em; color:var(--farbeheadschrift); background-color:var(--farbeheadhintergrund); text-align:left; padding-left:20px; padding-top:5px; padding-bottom:3px; width:80vw; border-radius:20px;}
@media only screen and (min-width: 900px) {div.leitunguber {width:50vw;}}
div.Leitung_Text {border-width:0px; border-style:none; margin:auto; padding-top:10px;}
div.LeitungEintrag1 {display:inline-block; padding-right:10px;}
@media only screen and (min-width: 900px) {div.LeitungEintrag1 {padding-right:100px;}}
div.LeitungEintrag2 {display:inline-block;}
img.Leitung {border-width:5px; border-style:solid; border-color:var(--farbelinien); width:28vw; border-radius:15px;}
@media only screen and (min-width: 651px) {img.Leitung {width:20vw;}}
@media only screen and (min-width: 900px) {img.Leitung {width:10vw;}}

/* Konzerte */
div.Konzert {padding-right:10px; margin-left:20px; margin-top:20px; text-align:left;}
@media only screen and (min-width: 900px) {div.Konzert {padding-right:50px; margin-left:30px; margin-top:20px;}}
div.konzertuber {font-size:1.2em; color:var(--farbeheadschrift); background-color:var(--farbeheadhintergrund); text-align:left; padding-left:20px; padding-top:5px; padding-bottom:3px; width:80vw; border-radius:20px;}
@media only screen and (min-width: 900px) {div.konzertuber {width:50vw;}}
div.Konzert_Text {border-width:0px; border-style:none; margin:auto; padding-top:10px;}
img.Konzert {border-width:5px; border-style:solid; border-color:var(--farbelinien); width:28vw; border-radius:15px;}
@media only screen and (min-width: 651px) {img.Konzert {width:28vw;}}
@media only screen and (min-width: 900px) {img.Konzert {width:16vw;}}
div.Konzert_Programm {font-size:1em;}
ul.Konzert {font-size:0.9em; padding-left:10px;}

/* Gruppenfotos */
@media only screen and (min-width: 900px) {div.gruppenfoto {text-align:left; padding-left:50px;}}
div.gruppenfoto1 {display:inline-block;}
div.gruppenfoto2 {display:inline-block;}
@media only screen and (min-width: 900px) {div.gruppenfoto2 {padding-left:20px; padding-right:20px;}}
div.gruppenfoto3 {display:inline-block;}
img.Gruppenfoto {border-width:5px; border-style:solid; border-color:var(--farbelinien); border-radius:15px;}

/* Forchheim */
div.forchheim {text-align:left; padding-left:10px; padding-right:10px; padding-bottom:30px; margin:auto;}
@media only screen and (min-width: 900px) {div.forchheim {padding-left:50px; padding-right:50px;}}
img.Forchheim {border-width:5px; border-style:solid; width:40vw; border-color:var(--farbelinien); border-radius:15px;}
@media only screen and (min-width: 651px) {img.Forchheim {width:20vw;}}
@media only screen and (min-width: 900px) {img.Forchheim {width:10vw;}}

/* Karte */
img.Karte1 {max-width:100%; height:auto;}
@media only screen and (min-width: 900px) {img.Karte1 {width:700px; height:418px;}}
img.Karte2 {max-width:100%;}
@media only screen and (min-width: 900px) {img.Karte2 {width:519px; height:695px;}}

/*######################################################################################*/
/* Galerie und Chronik */
/* Bilder */
div.Bildschrift {font-size:1.1em; text-decoration:underline; max-width:90vw;}
@media only screen and (max-width: 899px) {div.BilderArchivMenue {max-width:300px;}}

/* Geschichte */
div.Gesch {padding-right:5px; margin-left:5px; margin-top:20px;}
@media only screen and (min-width: 900px) {div.Gesch {padding-right:50px; margin-left:30px;}}
div.GeschichteTitel {font-size:1.25em; font-weight: bold; text-align:center; margin:auto; margin-top:5px; margin-bottom:10px;}
@media only screen and (min-width: 900px) {div.GeschichteTitel {font-size:1.5em; width:400px; height:50px;}}
div.geschuber {font-size:1.1em; color:var(--farbeheadschrift); background-color:var(--farbeheadhintergrund); text-align:left; padding-left:20px; padding-top:5px; padding-bottom:3px; margin-top:10px; margin-bottom:10px;}
div.GeschichteText {font-size:1.1em; text-align:left; padding-left:20px;}
@media only screen and (min-width: 651px) {div.GeschichteText {font-size:1em; padding-left:0;}}
ul.Geschichte {list-style-type: square; margin:0; padding:0;}
@media only screen and (min-width: 651px) {ul.Geschichte {padding-left:20px;}}
img.Geschichte1 {border-width:2px; border-style:solid; border-color:var(--farbelinien); border-radius:20px;}
@media only screen and (min-width: 651px) {img.Geschichte1 {float:right; margin-left:10px; padding-right:unset;}}
img.Geschichte2 {border-width:2px; border-style:solid; border-color:var(--farbelinien); border-radius:20px;}
img.StabfuehrerGruppe {max-width:90%; height:auto; border-width:5px; border-style:solid; border-color:var(--farbelinien); border-radius:15px; display:block; margin-left: auto; margin-right: auto;}

/* Timeline */
img.TimelineLinks {border-radius:15px; height:120px;}
@media only screen and (min-width: 651px) {img.TimelineLinks {float:left; margin-right:10px; padding-top:10px; height:140px;}}
img.TimelineRechts {border-radius:15px; height:120px;}
@media only screen and (min-width: 651px) {img.TimelineRechts {float:right; margin-left:10px; padding-top:10px; height:140px;}}

/* Timeline (senkrechte Linie) */
div.Timeline {position:relative; max-width:800px; margin: 0 auto;}
div.Timeline::after {content:''; position:absolute; width:6px; background-color:var(--farbeheadhintergrund); top:0; bottom:0; left:50%; margin-left:-3px;}
/* Container und Kreise auf der Timeline */
div.TimelineContainer {color:var(--farbeheadschrift); padding:10px 40px; position:relative; background-color:inherit; width:50%; box-sizing: border-box;}
div.TimelineContainer::after {content:''; position:absolute; width:25px; height:25px; right:-17px; background-color:var(--farbeliniendunkel); border:4px solid var(--farbelinien); top:15px; border-radius:50%; z-index: 1;}
div.TimelineLinks {left: 0;}
div.TimelineRechts {left: 50%;}
/* Pfeile zur Timeline */
div.TimelineLinks::before {content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; right: 30px; border: medium solid white; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent var(--farbelinien);}
div.TimelineRechts::before {content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; left: 30px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent var(--farbelinien) transparent transparent;}
div.TimelineRechts::after {left: -16px;}
/* Inhaltsfeld */
div.TimelineInhalt {padding: 5px 20px; background-color:var(--farbeheadhintergrund); position: relative; border-radius: 6px;}
@media only screen and (min-width: 651px) {div.TimelineInhalt {height:160px;}}
h2.Timeline {font-size:1.5em;}
@media only screen and (min-width: 651px) {h2.Timeline {font-size:1.2em;}}
p.Timeline1 {font-size:1.4em;}
@media only screen and (min-width: 651px) {p.Timeline1 {font-size:1.1em;}}
p.Timeline2 {font-size:1.2em;}
@media only screen and (min-width: 651px) {p.Timeline2 {font-size:0.9em;}}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 650px) {
  div.Timeline::after {left: 31px;}
  div.TimelineContainer {width: 100%; padding-left: 70px; padding-right: 25px;}
  div.TimelineContainer::before {left: 60px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent var(--farbelinien) transparent transparent;}
  div.TimelineLinks::after, div.TimelineRechts::after {left: 15px;}
  div.TimelineRechts {left: 0%;}
}

/* Festival */
div.FestivalInfo {text-align:left; padding-left:20px; padding-right:15px; padding-bottom:5px;}
@media only screen and (min-width: 900px) {div.FestivalInfo {padding-left:0; padding-right:70px;}}
img.Festival {max-width:100%; height:100px; border-radius:8px; object-fit:contain;}

/*######################################################################################*/
/* Mitgliedschaft / Spenden / Verein */
div.verein {text-align:left; padding-left:5px; padding-right:15px; padding-bottom:30px; margin:auto;}
@media only screen and (min-width: 900px) {div.verein {text-align:justify; padding-left:50px; padding-right:100px;}}

/*######################################################################################*/
/* Fehlerseite */
div.Fehlerseite {padding-top:10vh; text-align:center;}

/*######################################################################################*/