body {	
   width: 100%;
   min-width: 1000px;            /* wird vererbt */
   font-family:  Arial, Helvetica,  Sans-serif;/* Century Gothic, CenturyGothic, AppleGothic, sans-serif;*/  
   font-size: 10pt; /* 9pt; */
   color:Black; 
       line-height: 140%;
/*   color: #616161; */
/*   background-color: #4b7ab7 ;*/  /* #EEECED;  165 130 79  #0070C0 */ 
   padding:0px;
   text-align: center;
}
p {
   font-size:9pt;
   margin-top:6pt;
   margin-bottom:4pt;
   line-height : 120%;
}
h2 {
   color: black; /* #4b7ab7; */
   font-size: 1.25rem;
   line-height: 131%;
   font-weight: normal;
   text-transform: uppercase; */
/*    font-style: italic; */
}
a {
    color: rgba(0, 91, 202) ; /* rgb(68, 114, 196); */
   text-decoration:none;
}
* {
  margin:0 auto;
  padding:0;
}
hr {
    width: 70%;              /* Breite der Linie */
    height: 0.5px;             /* Dicke der Linie */
    background-color: rgba(0, 91, 202); /* Farbe der Linie */
    border: none;            /* Kein Rahmen */
    margin: 30px auto;       /* Abstand und Zentrierung */
}

.show1 { /*  Duenner Trennstrich */
    display: none;
}
.show2 { /*  dickerer Unterstrich */
    /* display: none; */
    width: 25%;  
    height: 1px;  
    color: rgba(0, 91, 202, 1);
}
.unterstrich {
    margin: 15px auto; 
    border: 0.5px solid;
}

.blue1 {
    color: rgba(0, 42, 134, 1);
}
.blue2 {
    background-color: rgba(200, 230, 250, 0.5); /*lightblue; */
}

.onlymobile {
    display: none;
}
.onlymobilenot {
    display: "";
}

#background {
    position:fixed; 
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    background-color: white;
    /* background-color: #fcfcfc ;*/
    z-index: -1 ;
    background-size: cover;    
}

#fixwrapper {
    width: 100%;
    position: fixed; 
    top: 0;
    background-color: transparent; 
    z-index: 10; /* damit scroll dahinter verschwindet */
}

#xwrapper{
   width: 1000px; 
   text-align: center;
}
#wrapper {
    margin-top: 158px;
    width: 1000px;
    text-align: center;
    
    z-index: 1 ! important; 
}
/* Grobe Bereiche: header / main / footer */
#header {
    margin: 0px 10pc 10px 10px auto;
    padding: 10px 0px 10px 0px;
    height: 120px;
    background-color: white ;
    position: relative; /* Bezug position header_img_left */
    border-bottom:  0.5px solid  #4b7ab7; /* der blaue Balken unten */
    border-top:     0px solid #4b7ab7; /* der blaue Balken oberhalb (Abstand bei Scrollen) */

    /*  background: linear-gradient(270deg,rgba(68, 114, 196, 1) 0%, rgba(68, 114, 196, 1) 13%,  rgba(158,179,219, 1) 50%,  rgba(255,255,255, 1) 70%) */ /* das ergibt dann im Firefox u Safari: 77, 114, 190 */
        /* 137, 209 , 255 */ 

    /* background: linear-gradient(90deg, rgba(255,255,255, 1) 29%, rgba(0, 112, 242, 1) 75%, rgba(0, 42, 134, 1) 99%, rgba(0, 42, 134, 1) 100% ); */  /* Slide 3 */
    
    background: linear-gradient(90deg, rgba(255,255,255, 1) 31%, rgba(137, 209, 255, 1) 47%, rgba(0, 112, 242) 71%, rgba(0, 42, 134, 1) 92%, rgba(0, 42, 134, 1) 100% );  /* Slide 2 */
}

.header_img_left {
   position: absolute;
   top: 30px; left: 30px;
   float:left; 
   max-width: 180px;
/*   height:120px; */
   margin-left:0px; 
   margin-right:0px;
   padding: 0px;
}

.logo_blue { 
   z-index: 10;  /* 10: anzeigen */
}
.logo_orange {
   /* z-index: 0; */ /* 0: verborgen */
    display: none;
}

#header_sub {  /* weil padding im header ausserhalb der 90% liegt .. */
   padding: 0px 0px 0px 0px;
    float: left;
}
#sizeinfo {
    display: none; 
}
#main {  /* main ist container fŸr navigation und content */
/*   width:90%; */
   margin: 0 auto;
   background-color:#fff;
   overflow: hidden;
         z-index: 5 ! important;
 /*   opacity: 85%; */ /* Damit Background durchschimmert */
}
#content {
   padding: 20px 40px 40px 40px;
   clear: both;
}
.content_img800 {
   width:100%;   
   margin-left:0px; 
   margin-right:0px;
   padding: 0px;
}

.content_imgwrap { /* Damit Bild ggf. zentriert wird */
    width: 100%;
    margin: 0 auto;
}
.content_img {
    width: 100%;
   margin-left:0px; 
   margin-right:0px;
   padding: 0px;
}

#navigation {
   height: 110px;
   margin: 0 auto; 
     padding: 32px 20px 0px 0px; /* --> steuert Abstand nav-Zeile von oben und rechts */
   text-align:center;      
   background-color: white/* #4b7ab7;*/ /* transparent;*/ /* #4b7ab7;*/ /* 75 122 183 */
   font-weight: bold;
    float: right;
}
#navigation ul {
   list-style:none;               /* keine Aufzählungspunkte */
   margin: 10px 0px 0px 6px;
}
#navigation /* ul */ li { 
   float:left;                     /* Anordnung links   */
   margin: 0px 0px; /* 15px 10px; */
/*   width:110px; */
   padding: 0px 10px;                /* a muss ganzen Bereich fuellen  */
    display: inline-block;   /* neu */
    position: relative;  /* neu */
    z-index: 999; /* neu */
} 

/* untermenu*/
#navigation ul li ul {
  position: absolute;
  left: 10px;
  width: 125px;
  background:#fff; /* #fff; */ 
/*  display: none; */ /* hide submenu */
display: none; 
       margin: 0px 0px 0px 0px; /* oben muss 0 bleiben, damit hover bleibt ..*/
}

#navigation ul li ul li {
     width: 100%;
    text-align: left;
    margin: 0px;
    padding: 5px 5px 5px 10px;
 /* display: block; */
}

/* unter menu bei hover anzeigen */
#navigation li:hover > ul {
  display: initial;
}

.selected {
   padding: 8px 6px 10px 20px;
/*  background-color: #ffe18d; */ /*selected mit Hintergrundbild von #main */
}
.selected a{
   color: black; /* #6D6D6D */
}
.unselected {
   padding: 8px 6px 10px 20px;
   color: rgba(0, 91, 202) ;
}

.unselected a{
    color: white; /*`#4b7ab7 */
    text-shadow: 0 0 1px black; /* damit mans besser sieht */
} 

#navigation ul li ul li a {
    color:rgba(0, 91, 202) ;
    text-shadow:  0 0 0px black ;
}

#navigation ul li ul li a:hover {
    color: black ;
}

.unselected a:hover {
   color: black ;/* #6D6D6D */
     text-shadow: 0 0 15px white; /* damit mans besser sieht */
  /*   background-color: rgba(137, 209, 255, 1); */ /* Hoverbackground */
}
.navText {   /* font: font/linesize */
   font-weight: bold;
   font-size: 17px;
   text-decoration: none;
   font-size-adjust: none; font-stretch: normal;
   display: block;
    padding: 10px 10px; /* (unten) Der Abstand zu den Submenus */
}

/* begin iphone select */
.menuMobile {
    padding-top: 20px;
   display: none;
   text-align: center;
   float: right;
    margin-top: 10px; 
    width: 100%;
}

.menuMobile ul { 
    list-style:none;               /* keine Aufzählungspunkte */
}

.menuMobile /* ul */ li { 
   text-align: left;   
    margin: 1em 0em 0em 0em;
}
.menuMobile ul li ul li {
    font-size: 1.5rem;
    padding: 10px 0px 0px 30px;
}

.menuMobileSelect {
   font-size: 1.5rem ;/* wie h2 */  /*2rem; */
   width: 100%;
   text-align: center;
   background-color:rgba(0, 91, 202); /* 75 122 183 */
   color: white ;
    display: block;
}
.barBox {
    float: none;
    display: block;
    text-align: right;
    padding-bottom: 40px; 
}
#innerBarBox {
    display: inline-block;
    padding-right: 15px;
}
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: lightblue; /* white;*/ /* #333; */
  margin: 6px 0;
  transition: 0.4s;
}
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

.ulBox {
    float: none;
    display: none;
    background-color:aliceblue;
    padding: 1em;
}

/* ende  iphone select */

#footer {
   clear: both;
   height: 30px;
    margin: 0 auto;
    background-color:rgba(0, 42, 134, 1);
}
#footer ul {
   list-style:none;               /* keine Aufzählungspunkte */
    float: right;
}
#footer li {
   float: right;
   /* padding: 8px ; */
    padding: 7px 28px 8px 25px;
}
#footer a{
   color: white ;
   font: 12px/16px Arial, Helvetica, sans-serif;
   letter-spacing: 0.1em;
}


.content_left{
    float: left;
    text-align: justify;
   width: 370px;
   padding: 1em 2em 1em 6em;
   margin: 10px 10px 10px 10px;
}

.content_right{
    float: left;
    text-align: justify;
   width: 370px;
   padding: 1em 6em 1em 2em;
   margin: 10px 10px 10px 10px;
}
.content_sep{
    float: left;
    width: 100%;
    scroll-margin-top: 130px;
    margin: 20px 0px 0px 0px; /*10px 10px 10px; */
    padding-bottom: 15px;
}

#content_history {
   text-align: left;
   padding: 8px 40px 40px 40px;
   clear: both;
}
.historyTable{
   margin-top: 20px;
   margin-left: 5em;
   margin-right: 3em;
   text-align: left;
    border-collapse: collapse;
}
.historyTableRow{
    
}
.historyTableDataPoster{
    /* border-bottom :   0.5px solid rgba(0, 91, 202); */
    margin : 25px 5px 25px 5px; 
    padding : 15px 30px 20px 45px;
    vertical-align : top;
}
.historyTableDataText{
   width: 600px;
   /* border-bottom :  0.5px solid rgba(0, 91, 202); */
   margin : 12px 5px 12px 20px;
   padding : 20px 10px 10px 120px;
   vertical-align : top;
}
.historyDate{
/*   font-size:10pt; */
     font-size: 1.1em; /* wieso ist 1.1rem größer? */
   font-weight : bold;
   margin-left : 0em;
   margin-top:4pt;
   margin-bottom:2pt;
   line-height : 100%;
}
.historyLocation{
/*   font-size:9pt; */
    font-size: 1.0em; /* wieso ist 1.0rem größer? */
   margin-left : 0em;
   margin-top:2pt;
   margin-bottom:2pt;
   /* line-height : 100%;	*/
}
.historyCompoBlock{
   background-color: #FFF; 
   margin-left: 0em;
   margin-right: 0em;
   padding-top: 2px;
   padding-bottom: 2px;
}
.historyComponist{
 /*  font-size:10pt; */
     font-size: 1.1em; 
   font-weight : bold;
   margin-left : 0em; 
   margin-top:4pt;
   margin-bottom:2pt;
   line-height : 110%;
   color: rgba(0, 91, 202);
   font : italic;	 
}
.historyComposition{
/*   font-size:9pt; */   /*  font-style : italic; */
     font-size: 1.0em; 
   margin-left : 0em; 
   margin-top:2pt;
   margin-bottom:2pt;
   line-height : 100%;	
  /* color: black;   */     /*	color: #D2691E; */
}
.historyPerformer{
 /*  font-size:10pt; */
     font-size: 1.1em; 
/*    font-weight : bold; */
   margin-left : 0em;
   margin-top:5pt;
   margin-bottom:2pt;
   /* line-height : 100%;	`*/
}
.historySpacer{
   font-size:5pt;
   margin-top:2pt;
   margin-bottom:2pt;
   line-height : 100%;	
}
.historySpacerEnd{
   font-size:5pt;
   /* margin-top:10pt;
   margin-bottom:2pt;*/
   line-height : 100%;	
}
.historyLineWidth {
    width: 40%;
}
img.historyPoster{
   height: 220px;
   width: 155px;
    border: 1px solid lightgray;
   /* border : medium outset rgb(160,160,160); /* gray; */ /* #D3D3D3; nix bei Safari */
   border-width : 3 3 3 3; */
   text-align : center;
   margin-top : 5px;
   margin-bottom : 5px;
}
.topHeaderRuler{
   padding-right : 2px;
   padding-left : 2px;
   padding-top : 2px;
   padding-bottom : 2px;
   border-bottom : 2px solid #00214a;
}

#content_presse {
   text-align: left;
   padding: 8px 40px 40px 40px;
   clear: both;
}
#content_presse h2 {
   text-align: center;
}
.presseYear{
   display:none;
   margin : 20px 2em 5px 1em;
   font-weight: bold;
   font-size: 10pt;
   line-height : 125%;
   text-align : center;	
}
.presseBlock{
/*	border-top : 1px dotted Gray;  */
   margin: 10px 10px 11px 0px;
   padding: 3em 1em 0em 1em;
   /* line-height : 125%; */
   text-align : justify;
   clear: both;
}
.presseBold{
   font-weight : bold;
   line-height : 125%;
}
.presseSource{
   margin : 2px 0px 0px 0px;
/* padding-bottom: 1em; */
   font-weight : bold;
   text-align : right;
   font-style : italic;
}
.presseImg {
    margin:  0px 20px 8px 0px;
    padding-top: 0px;
    max-width: 15%;
    border: 1px solid lightgray;
}

/* internal */
#content_internal {
   text-align: left;
   padding: 8px 40px 40px 40px;
   clear: both;
}

.internTable{
   margin-top: 20px;
/*   margin-left: 0em;
   margin-right: 0em; */ /* ohne margin left/right: ist zentriert..*/
   text-align: left;
    border-collapse: collapse;
}
.internRow{
   font-size:9pt;
}
.internRow:nth-of-type(even) {
		background-color:  rgba(200, 230, 250, 0.5); /*lightblue; */
	}

.internFullDate{
   vertical-align : top;
   padding: 5px 10px 5px 10px;
   width : 20em;
    border-bottom : 0.5px solid rgba(0, 91, 202);
}
.internNoDate{
   vertical-align : top;
   padding: 5px 10px 5px 10px;
   width : 20em;
    border-bottom : 0.5px solid rgba(0, 91, 202);
/*   background-color: #FFF; */
}
.internWeekday{
   font-weight : bold;
}
.internDate{
/*   font-weight : bold; */
   /* color:Maroon; */
   padding-left: 1em;
}
.internFullActivity{
   vertical-align : top;
   border-bottom : 0.5px solid rgba(0, 91, 202);
   padding: 5px 10px 5px 20px;
}
.internActivity{	
}


/* Impressum */
#content_impressum {
   padding: 20px 40px 40px 40px;
/*   clear: both; */
   text-align: justify;
}
#content_impressum h2 {
   text-align: center;
}

/* positionining */

.center {
   text-align: center;
}
.center1{
	margin-left : 10em;
	margin-right: 10em;
	text-align: center
}
/* -------------------------------------------------------------------------------------------*/
/* Layout für mittlere Bildschirme (bis 1000px) */
@media (max-width: 1000px) {
body {	
   width: 100%;
   min-width: 800px;            /* wird vererbt */
   font-family:  Arial, Helvetica,  Sans-serif;/* Century Gothic, CenturyGothic, AppleGothic, sans-serif;*/  
   font-size: 10pt; /* 9pt; */
   color:Black; 
        line-height: 130%;
   padding:0px;
   text-align: center;
}
p {
   font-size:9pt;
   margin-top:6pt;
   margin-bottom:4pt;
   line-height : 120%;
}
h2 {
   color: black; /* #4b7ab7; */
   font-size: 1.25rem;
   line-height: 131%;
   font-weight: normal;
   text-transform: uppercase; */
}
a {
    color: rgba(0, 91, 202) ; /* rgb(68, 114, 196); */
   text-decoration:none;
}
    
#xwrapper{
   width: 800px; 
   text-align: center;
}
#wrapper {
    margin-top: 158px;
    width: 800px;
    text-align: center;
    
    z-index: 1 ! important; 
}
/* Grobe Bereiche: header / main / footer */
#header {
    margin: 0px 10pc 10px 10px auto;
    padding: 10px 0px 10px 0px;
    height: 120px;
    background-color: white ;
    position: relative; /* Bezug position header_img_left */
    border-bottom:  0.5px solid  #4b7ab7; /* der blaue Balken unten */
    border-top:     0px solid #4b7ab7; /* der blaue Balken oberhalb (Abstand bei Scrollen) */
    
    background: linear-gradient(90deg, rgba(255,255,255, 1) 31%, rgba(137, 209, 255, 1) 47%, rgba(0, 112, 242) 71%, rgba(0, 42, 134, 1) 92%, rgba(0, 42, 134, 1) 100% );  /* Slide 2 */
}

.header_img_left {
   position: absolute;
   top: 30px; left: 30px;
   float:left; 
   max-width: 180px;
/*   height:120px; */
   margin-left:0px; 
   margin-right:0px;
   padding: 0px;
}

.logo_blue { 
   z-index: 10;  /* 10: anzeigen */
}
.logo_orange {
   z-index: 0;  /* 0: verborgen */
}

#header_sub {  /* weil padding im header ausserhalb der 90% liegt .. */
   padding: 0px 0px 0px 0px;
    float: left;
}
#main {  /* main ist container fŸr navigation und content */
   margin: 0 auto;
   background-color:#fff;
   overflow: hidden;
         z-index: 5 ! important;
 /*   opacity: 85%; */ /* Damit Background durchschimmert */
}
#content {
   padding: 20px 40px 40px 40px;
   clear: both;
}
.content_img800 {
   width:100%;   
   margin-left:0px; 
   margin-right:0px;
   padding: 0px;
}

.content_imgwrap { /* Damit Bild ggf. zentriert wird */
    width: 100%;
    margin: 0 auto;
}
.content_img {
    width: 100%;
   margin-left:0px; 
   margin-right:0px;
   padding: 0px;
}

#navigation {
   height: 110px;
   margin: 0 auto; 
     padding: 32px 27px 0px 0px; /* --> steuert Abstand nav-Zeile von oben und rechts */
   text-align:center;      
   background-color: white/* #4b7ab7;*/ /* transparent;*/ /* #4b7ab7;*/ /* 75 122 183 */
   font-weight: bold;
    float: right;
}
#navigation ul {
   list-style:none;               /* keine Aufzählungspunkte */
   margin: 10px 0px 0px 6px;
}
#navigation /* ul */ li { 
   float:left;                     /* Anordnung links   */
   margin: 0px 0px; /* 15px 10px; */
/*   width:110px; */
   padding: 0px 0px;                /* a muss ganzen Bereich fuellen  */
    display: inline-block;   /* neu */
    position: relative;  /* neu */
    z-index: 999; /* neu */
} 

/* untermenu*/
#navigation ul li ul {
  position: absolute;
  left: 0px;
  width: 125px;
  background:#fff; /* #fff; */ 
/*  display: none; */ /* hide submenu */
display: none; 
       margin: 0px 0px 0px 0px; /* oben muss 0 bleiben, damit hover bleibt ..*/
}

#navigation ul li ul li {
     width: 100%;
    text-align: left;
    margin: 0px;
    padding: 5px 5px 5px 10px;
 /* display: block; */
}

.selected {
   padding: 8px 6px 10px 20px;
/*  background-color: #ffe18d; */ /*selected mit Hintergrundbild von #main */
}
.selected a{
   color: black; /* #6D6D6D */
}
.unselected {
   padding: 8px 6px 10px 20px;
   color: rgba(0, 91, 202) ;
}

.unselected a{
    color: white; /*`#4b7ab7 */
    text-shadow: 0 0 1px black; /* damit mans besser sieht */
} 

#navigation ul li ul li a {
    color:rgba(0, 91, 202) ;
    text-shadow:  0 0 0px black ;
}

.navText {   /* font: font/linesize */
   font-weight: bold;
   font-size: 17px;
   text-decoration: none;
   font-size-adjust: none; font-stretch: normal;
   display: block;
    padding: 10px 10px; /* (unten) Der Abstand zu den Submenus */
}
    
#footer {
   clear: both;
   height: 30px;
    margin: 0 auto;
    background-color:rgba(0, 42, 134, 1);
}
#footer ul {
   list-style:none;               /* keine Aufzählungspunkte */
    float: right;
}
#footer li {
   float: right;
   /* padding: 8px ; */
    padding: 8px 28px 8px 25px;
}
#footer a{
   color: white ;
   font: 12px/16px Arial, Helvetica, sans-serif;
   letter-spacing: 0.1em;
}

.content_left{
    float: left;
    text-align: justify;
   width: 350px;
   padding: 1em 0.8em 1em 1em;
   margin: 10px 10px 10px 10px;
}

.content_right{
    float: left;
    text-align: justify;
   width: 350px;
   padding: 1em 1em 1em 0.8em;
   margin: 10px 10px 10px 10px;
}
.content_sep{
    float: left;
    width: 100%;
    scroll-margin-top: 130px;
    margin: 20px 0px 0px 0px; /*10px 10px 10px; */
    padding-bottom: 15px;
}

#content_history {
   text-align: left;
   padding: 8px 20px 40px 20px;
   clear: both;
}
.historyTable{
   margin-top: 20px;
   margin-left: 3em;
   margin-right: 3em;
   text-align: left;
    border-collapse: collapse;
}
.historyTableRow{
    
}
.historyTableDataPoster{
    /* border-bottom :   0.5px solid rgba(0, 91, 202); */
    margin : 25px 5px 25px 5px; 
    padding : 15px 30px 20px 45px;
    vertical-align : top;
}
.historyTableDataText{
   width: 600px;
   /* border-bottom :  0.5px solid rgba(0, 91, 202); */
   margin : 12px 5px 12px 20px;
   padding : 20px 10px 10px 60px;
   vertical-align : top;
}
.historyDate{
/*   font-size:10pt; */
     font-size: 1.1em; /* wieso ist 1.1rem größer? */
   font-weight : bold;
   margin-left : 0em;
   margin-top:4pt;
   margin-bottom:2pt;
   line-height : 100%;
}
.historyLocation{
/*   font-size:9pt; */
    font-size: 1.0em; /* wieso ist 1.0rem größer? */
   margin-left : 0em;
   margin-top:2pt;
   margin-bottom:2pt;
   /* line-height : 100%;	*/
}
.historyCompoBlock{
   background-color: #FFF; 
   margin-left: 0em;
   margin-right: 0em;
   padding-top: 2px;
   padding-bottom: 2px;
}
.historyComponist{
 /*  font-size:10pt; */
     font-size: 1.1em; 
   font-weight : bold;
   margin-left : 0em; 
   margin-top:4pt;
   margin-bottom:2pt;
   line-height : 110%;
   color: rgba(0, 91, 202);
   font : italic;	 
}
.historyComposition{
/*   font-size:9pt; */   /*  font-style : italic; */
     font-size: 1.0em; 
   margin-left : 0em; 
   margin-top:2pt;
   margin-bottom:2pt;
   line-height : 100%;	
  /* color: black;   */     /*	color: #D2691E; */
}
.historyPerformer{
 /*  font-size:10pt; */
     font-size: 1.1em; 
/*    font-weight : bold; */
   margin-left : 0em;
   margin-top:5pt;
   margin-bottom:2pt;
   /* line-height : 100%;	`*/
}
.historySpacer{
   font-size:5pt;
   margin-top:2pt;
   margin-bottom:2pt;
   line-height : 100%;	
}
.historySpacerEnd{
   font-size:5pt;
   /* margin-top:10pt;
   margin-bottom:2pt;*/
   line-height : 100%;	
}
.historyLineWidth {
    width: 40%;
}
img.historyPoster{
   height: 220px;
   width: 155px;
    border: 1px solid lightgray;
   /* border : medium outset rgb(160,160,160); /* gray; */ /* #D3D3D3; nix bei Safari */
   border-width : 3 3 3 3; */
   text-align : center;
   margin-top : 5px;
   margin-bottom : 5px;
}
.topHeaderRuler{
   padding-right : 2px;
   padding-left : 2px;
   padding-top : 2px;
   padding-bottom : 2px;
   border-bottom : 2px solid #00214a;
}

#content_presse {
   text-align: left;
   padding: 8px 40px 40px 40px;
   clear: both;
}
#content_presse h2 {
   text-align: center;
}
.presseYear{
   display:none;
   margin : 20px 2em 5px 1em;
   font-weight: bold;
   font-size: 10pt;
   line-height : 125%;
   text-align : center;	
}
.presseBlock{
/*	border-top : 1px dotted Gray;  */
   margin: 10px 10px 11px 0px;
   padding: 3em 1em 0em 1em;
   /* line-height : 125%; */
   text-align : justify;
   clear: both;
}
.presseBold{
   font-weight : bold;
   line-height : 125%;
}
.presseSource{
   margin : 2px 0px 0px 0px;
/* padding-bottom: 1em; */
   font-weight : bold;
   text-align : right;
   font-style : italic;
}
.presseImg {
    margin:  0px 20px 8px 0px;
    padding-top: 0px;
    max-width: 15%;
    border: 1px solid lightgray;
}

/* internal */
#content_internal {
   text-align: left;
   padding: 8px 40px 40px 40px;
   clear: both;
}

.internTable{
   margin-top: 20px;
/*   margin-left: 0em;
   margin-right: 0em; */ /* ohne margin left/right: ist zentriert..*/
   text-align: left;
    border-collapse: collapse;
}
.internRow{
   font-size:9pt;
}
.internRow:nth-of-type(even) {
		background-color:  rgba(200, 230, 250, 0.5); /*lightblue; */
	}

.internFullDate{
   vertical-align : top;
   padding: 5px 10px 5px 10px;
   width : 20em;
    border-bottom : 0.5px solid rgba(0, 91, 202);
}
.internNoDate{
   vertical-align : top;
   padding: 5px 10px 5px 10px;
   width : 20em;
    border-bottom : 0.5px solid rgba(0, 91, 202);
/*   background-color: #FFF; */
}
.internWeekday{
   font-weight : bold;
}
.internDate{
/*   font-weight : bold; */
   /* color:Maroon; */
   padding-left: 1em;
}
.internFullActivity{
   vertical-align : top;
   border-bottom : 0.5px solid rgba(0, 91, 202);
   padding: 5px 10px 5px 20px;
}
.internActivity{	
}


/* Impressum */
#content_impressum {
   padding: 20px 40px 40px 40px;
/*   clear: both; */
   text-align: justify;
}    
    
    
}



/* Layout für kleine Bildschirme (bis 800px) -----------------------------------------------------------*/
@media (max-width: 800px) {

body {	
   width: 100%;
   min-width: 600px;            /* wird vererbt */
   font-family:  Arial, Helvetica,  Sans-serif;
   font-size: 9pt; /* 9pt; */
   color:Black; 
        line-height: 130%;
   padding:0px;
   text-align: center;
}
p {
   font-size:9pt;
   margin-top:6pt;
   margin-bottom:4pt;
   line-height : 120%;
}
h2 {
   color: black; /* #4b7ab7; */
   font-size: 1.0rem;
   line-height: 131%;
   font-weight: normal;
   text-transform: uppercase; */
}
a {
    color: rgba(0, 91, 202) ; /* rgb(68, 114, 196); */
   text-decoration:none;
}
    
#xwrapper{
   width: 600px; 
   text-align: center;
}
#wrapper {
    margin-top: 140px; /* test#### */
    width: 600px;
    text-align: center;
    
    z-index: 1 ! important; 
}
/* Grobe Bereiche: header / main / footer */
#header {
    margin: 0px 10pc 10px 10px auto;
    padding: 10px 0px 10px 0px;
    height: 100px;
    background-color: white ;
    position: relative; /* Bezug position header_img_left */
    border-bottom:  0.5px solid  #4b7ab7; /* der blaue Balken unten */
    border-top:     0px solid #4b7ab7; /* der blaue Balken oberhalb (Abstand bei Scrollen) */
    
    background: linear-gradient(90deg, rgba(255,255,255, 1) 31%, rgba(137, 209, 255, 1) 47%, rgba(0, 112, 242) 71%, rgba(0, 42, 134, 1) 92%, rgba(0, 42, 134, 1) 100% );  /* Slide 2 */
}

.header_img_left {
   position: absolute;
   top: 30px; left: 30px;
   float:left; 
   max-width: 150px;
/*   height:120px; */
   margin-left:0px; 
   margin-right:0px;
   padding: 0px;
}

.logo_blue { 
   z-index: 10;  /* 10: anzeigen */
}
.logo_orange {
   z-index: 0;  /* 0: verborgen */
}

#header_sub {  /* weil padding im header ausserhalb der 90% liegt .. */
   padding: 0px 0px 0px 0px;
    float: left;
}
#main {  /* main ist container fŸr navigation und content */
   margin: 0 auto;
   background-color:#fff;
   overflow: hidden;
         z-index: 5 ! important;
 /*   opacity: 85%; */ /* Damit Background durchschimmert */
}
#content {
   padding: 20px 40px 40px 40px;
   clear: both;
}
.content_img800 {
   width:100%;   
   margin-left:0px; 
   margin-right:0px;
   padding: 0px;
}

.content_imgwrap { /* Damit Bild ggf. zentriert wird */
    width: 100%;
    margin: 0 auto;
}
.content_img {
    width: 100%;
   margin-left:0px; 
   margin-right:0px;
   padding: 0px;
}

#navigation {
   height: 110px;
   margin: 0 auto; 
     padding: 27px 10px 0px 0px; /* --> steuert Abstand nav-Zeile von oben und rechts */
   text-align:center;      
   background-color: white/* #4b7ab7;*/ /* transparent;*/ /* #4b7ab7;*/ /* 75 122 183 */
   font-weight: bold;
    float: right;
}
#navigation ul {
   list-style:none;               /* keine Aufzählungspunkte */
   margin: 10px 0px 0px 6px;
}
#navigation /* ul */ li { 
   float:left;                     /* Anordnung links   */
   margin: 0px 0px; /* 15px 10px; */
/*   width:110px; */
   padding: 0px 0px;                /* a muss ganzen Bereich fuellen  */
    display: inline-block;   /* neu */
    position: relative;  /* neu */
    z-index: 999; /* neu */
} 

/* untermenu*/
#navigation ul li ul {
  position: absolute;
  left: 10;
  width: 120px;
  background:#fff; /* #fff; */ 
/*  display: none; */ /* hide submenu */
display: none; 
       margin: 0px 0px 0px 0px; /* oben muss 0 bleiben, damit hover bleibt ..*/
}
.menu_last {
    position: absolute;
    left: -38.5px ! important;
}

#navigation ul li ul li {
     width: 100%;
    text-align: left;
    margin: 0px;
    padding: 5px 5px 5px 10px;
 /* display: block; */
}

.selected {
   padding: 8px 6px 10px 20px;
/*  background-color: #ffe18d; */ /*selected mit Hintergrundbild von #main */
}
.selected a{
   color: black; /* #6D6D6D */
}
.unselected {
   padding: 8px 6px 10px 20px;
   color: rgba(0, 91, 202) ;
}

.unselected a{
    color: white; /*`#4b7ab7 */
    text-shadow: 0 0 1px black; /* damit mans besser sieht */
} 

#navigation ul li ul li a {
    color:rgba(0, 91, 202) ;
    text-shadow:  0 0 0px black ;
}

.navText {   /* font: font/linesize */
   font-weight: bold;
   font-size: 13px;
   text-decoration: none;
   font-size-adjust: none; font-stretch: normal;
   display: block;
    padding: 10px 10px; /* (unten) Der Abstand zu den Submenus */
}
    
#footer {
   clear: both;
   height: 30px;
    margin: 0 auto;
    background-color:rgba(0, 42, 134, 1);
}
#footer ul {
   list-style:none;               /* keine Aufzählungspunkte */
    float: right;
}
#footer li {
   float: right;
   /* padding: 8px ; */
    padding: 8px 28px 8px 25px;
}
#footer a{
   color: white ;
   font: 12px/16px Arial, Helvetica, sans-serif;
   letter-spacing: 0.1em;
}

.content_left{
    float: left;
    text-align: justify;
   width: 280px;
   padding: 1em 0.5em 1em 0em;
   margin: 10px 5px;
}

.content_right{
    float: left;
    text-align: justify;
   width: 280px;
   padding: 1em 0em 1em 0.5em;
   margin: 10px 5px;
}
.content_sep{
    float: left;
    width: 100%;
    scroll-margin-top: 118px;
    margin: 20px 0px 0px 0px; /*10px 10px 10px; */
    padding-bottom: 15px;
}

#content_history {
   text-align: left;
   padding: 8px 20px 40px 20px;
   clear: both;
}
.historyTable{
   margin-top: 20px;
   margin-left: 3em;
   margin-right: 3em;
   text-align: left;
    border-collapse: collapse;
}
.historyTableRow{
    
}
.historyTableDataPoster{
    /* border-bottom :   0.5px solid rgba(0, 91, 202); */
    margin : 25px 5px 25px 5px; 
    padding : 15px 30px 20px 0px;
    vertical-align : top;
}
.historyTableDataText{
   width: 600px;
   /* border-bottom :  0.5px solid rgba(0, 91, 202); */
   margin : 12px 5px 12px 20px;
   padding : 20px 0px 10px 5px;
   vertical-align : top;
}
.historyDate{
/*   font-size:10pt; */
     font-size: 1.1em; /* wieso ist 1.1rem größer? */
   font-weight : bold;
   margin-left : 0em;
   margin-top:4pt;
   margin-bottom:2pt;
   line-height : 100%;
}
.historyLocation{
/*   font-size:9pt; */
    font-size: 1.0em; /* wieso ist 1.0rem größer? */
   margin-left : 0em;
   margin-top:2pt;
   margin-bottom:2pt;
   /* line-height : 100%;	*/
}
.historyCompoBlock{
   background-color: #FFF; 
   margin-left: 0em;
   margin-right: 0em;
   padding-top: 2px;
   padding-bottom: 2px;
}
.historyComponist{
 /*  font-size:10pt; */
     font-size: 1.1em; 
   font-weight : bold;
   margin-left : 0em; 
   margin-top:4pt;
   margin-bottom:2pt;
   line-height : 110%;
   color: rgba(0, 91, 202);
   font : italic;	 
}
.historyComposition{
/*   font-size:9pt; */   /*  font-style : italic; */
     font-size: 1.0em; 
   margin-left : 0em; 
   margin-top:2pt;
   margin-bottom:2pt;
   line-height : 100%;	
  /* color: black;   */     /*	color: #D2691E; */
}
.historyPerformer{
 /*  font-size:10pt; */
     font-size: 1.1em; 
/*    font-weight : bold; */
   margin-left : 0em;
   margin-top:5pt;
   margin-bottom:2pt;
   /* line-height : 100%;	`*/
}
.historySpacer{
   font-size:5pt;
   margin-top:2pt;
   margin-bottom:2pt;
   line-height : 100%;	
}
.historySpacerEnd{
   font-size:5pt;
   /* margin-top:10pt;
   margin-bottom:2pt;*/
   line-height : 100%;	
}
.historyLineWidth {
    width: 40%;
}
img.historyPoster{
   height: 220px;
   width: 155px;
    border: 1px solid lightgray;
   /* border : medium outset rgb(160,160,160); /* gray; */ /* #D3D3D3; nix bei Safari */
   border-width : 3 3 3 3; */
   text-align : center;
   margin-top : 5px;
   margin-bottom : 5px;
}
.topHeaderRuler{
   padding-right : 2px;
   padding-left : 2px;
   padding-top : 2px;
   padding-bottom : 2px;
   border-bottom : 2px solid #00214a;
}

#content_presse {
   text-align: left;
   padding: 8px 40px 40px 40px;
   clear: both;
}
#content_presse h2 {
   text-align: center;
}
.presseYear{
   display:none;
   margin : 20px 2em 5px 1em;
   font-weight: bold;
   font-size: 10pt;
   line-height : 125%;
   text-align : center;	
}
.presseBlock{
/*	border-top : 1px dotted Gray;  */
   margin: 10px 10px 11px 0px;
   padding: 3em 1em 0em 1em;
   /* line-height : 125%; */
   text-align : justify;
   clear: both;
}
.presseBold{
   font-weight : bold;
   line-height : 125%;
}
.presseSource{
   margin : 2px 0px 0px 0px;
/* padding-bottom: 1em; */
   font-weight : bold;
   text-align : right;
   font-style : italic;
}
.presseImg {
    margin:  0px 20px 8px 0px;
    padding-top: 0px;
    max-width: 15%;
    border: 1px solid lightgray;
}

/* internal */
#content_internal {
   text-align: left;
   padding: 8px 40px 40px 40px;
   clear: both;
}

.internTable{
   margin-top: 20px;
/*   margin-left: 0em;
   margin-right: 0em; */ /* ohne margin left/right: ist zentriert..*/
   text-align: left;
    border-collapse: collapse;
}
.internRow{
   font-size:9pt;
}
.internRow:nth-of-type(even) {
		background-color:  rgba(200, 230, 250, 0.5); /*lightblue; */
	}

.internFullDate{
   vertical-align : top;
   padding: 5px 10px 5px 10px;
   width : 20em;
    border-bottom : 0.5px solid rgba(0, 91, 202);
}
.internNoDate{
   vertical-align : top;
   padding: 5px 10px 5px 10px;
   width : 20em;
    border-bottom : 0.5px solid rgba(0, 91, 202);
/*   background-color: #FFF; */
}
.internWeekday{
   font-weight : bold;
}
.internDate{
/*   font-weight : bold; */
   /* color:Maroon; */
   padding-left: 1em;
}
.internFullActivity{
   vertical-align : top;
   border-bottom : 0.5px solid rgba(0, 91, 202);
   padding: 5px 10px 5px 20px;
}
.internActivity{	
}


/* Impressum */
#content_impressum {
   padding: 20px 40px 40px 40px;
/*   clear: both; */
   text-align: justify;
}    
    
    
    
    
    
    
    
}





/* ==================================================================================*/

@media only screen and (max-width: 640px) and (orientation: portrait)
{
/* Achtung: <meta name="viewport" content="width=device-width; initial-scale=1.0;" />  nštig f smartphobe */
/* 
@viewport {
   width: device-width;
   zoom:1;
}  */   /* tut leider nicht auf iphone */
body {	
   width: 100%;
   min-width: 10px;
   font-size: 10pt;}
   
h2 {
   font-size: 1.5rem ! important;
   line-height: 100%;
}
p {
   font-size: 1em;
   margin-top:0.5em;
   margin-bottom:0.5em;
   line-height : 100%;
}
#fixwrapper {
    width: 100%;
    position: fixed; 
    top: 0;
    background-color: transparent; 
}

#xwrapper{
   width: 100%;  /* iphone */
   text-align: center;
}
#wrapper {
/*   width: 985px; */
     margin-top: 138px;
   width: 100%;  /* iphone */
}
#header {
   height: 100px;
}
.header_img_left {
   position: absolute;
   top: 30px; left: 30px;
   float:left; 
   max-width: 180px;
/*   height:120px; */
   margin-left:0px; 
   margin-right:0px;
   padding: 0px;
}
#content {
   padding: 10px 20px 20px 20px; /* iphone */
   }

#content h2:first-child{
   display: none;
} 
.content_imgwrap {
    margin: 0 auto;
    width: 80%;
}
.content_img {‚
    width: 100% ; /* iphone */
    margin: auto;
   }

.onlymobile {
    display:inherit;
}
.onlymobilenot {
    display: none; 
}       
    
.mobilcenter {
   text-align: center ! important;
}
.menuMobile {
   display: block !important;
  }
#navigation {
   display: none !important;
  }
.navText {   /* font: font/linesize */
   font-weight:normal;
   font-size: 2.5rem;
}
    
.unselected {
   padding: 8px 6px 10px 11px;
    background-color: transparent;
}    
    
.unselected a{
    color: rgba(0, 91, 202);
   /* text-shadow: 0 0 1px black;*/ /* damit mans besser sieht */
} 
#footer {
   clear: both;
   height: 3em;
  }
#footer ul {
   list-style:none;               /* keine Aufzählungspunkte */
    float: left;
    padding-left: 23px;
}
#footer li {
   float: right;
   /* padding: 8px ; */
    padding: 8px 8px 8px 8px;
}
#footer a{
   font: 1.5em Arial, Helvetica, sans-serif;
   letter-spacing: 0.1em;
}
     
.content_left{
    float: left;
    text-align: justify;
    width: 90%;
    padding: 1em 1em 1em 1em;
    margin: 10px 10px 10px 10px;
}

.content_right{
    float: left;
    text-align: justify;
    width: 90%;
    padding: 1em 1em 1em 1em;
    margin: 10px 10px 10px 10px;
}
.content_sep{
    float: left;
    width: 100%;
    scroll-margin-top: 122px;
    padding-bottom: 15px;
}    

#content_presse {
   text-align: left;
   padding: 18px 10px 10px 10px;
   clear: both;
}
    
/* internal */
#content_internal {
   text-align: left;
   padding: 18px 40px 40px 40px;
   clear: both;
}
#content_history {
   text-align: left;
    padding: 18px 40px 40px 40px;
  
   clear: both;
}

.historyTable{
   margin-top: 20px;
   margin-left: 0.5em;
   margin-right: 0.5em;
    border-collapse: collapse;
}
.historyTableRow{
    /* border-bottom :  0.5px solid rgba(0, 91, 202); */
}
.historyTableDataPoster{
   display: none;
}
.historyTableDataText{
    /* border-bottom :  0.5px solid rgba(0, 91, 202); */
   margin : 12px 5px 12px 20px;
   padding : 1em 0em;
}

.historyDate{
   font-size:1.1em;
   font-weight : bold;
   margin-left : 0em;
   margin-top:4pt;
   margin-bottom:2pt;
   line-height : 100%;
}
.historyLocation{
   font-size: 1em;
   margin-left : 0em;
   margin-top:2pt;
   margin-bottom:2pt;
   /* line-height : 100%;	*/
}
.historyCompoBlock{
   background-repeat: repeat;  */
   background-color: #FFF; 
   margin-left: 0em;
   margin-right: 0em;
   padding-top: 2px;
   padding-bottom: 2px;
/* border: 1px solid rgba(0, 91, 202); */
}
.historyComponist{
   font-size:1.1em;
   font-weight : bold;
   margin-left : 0em; 
   margin-top:4pt;
   margin-bottom:2pt;	 
}
.historyComposition{
   font-size:1.0em;
   margin-left : 0em; 
   margin-top:2pt;
   margin-bottom:2pt;
}
.historyPerformer{
   font-size:1.1em;
   margin-left : 0em;
   margin-top:5pt;
   margin-bottom:2pt;
}
.historySpacer{
   font-size:5pt;
   margin-top:2pt;
   margin-bottom:2pt;
   line-height : 100%;	
}
.historySpacerEnd{
   font-size:5pt;
   /* margin-top:10pt;
   margin-bottom:2pt; */
   line-height : 100%;	
}

.internRow{
   font-size:1.0em;
}
.internFullDate{
/*   border-bottom : 1px dotted white; */
       width : 10em;
   padding: 5px 5px 5px 5px;
}
.internNoDate{
   width : 10em;

/*   background-color: #FFF; */
}
.internFullActivity{
 /*  width: 55%; */
   padding: 0.5em;
}

}