/* CSS für Klassen */

@media screen {

/* Text einrücken bei Aufzählung 1. oder a) */
.a {
  margin-left: 7px;
  text-indent: -18px;
  padding: 5px 0 0 15px;
}

/* Text einrücken bei Aufzählung bis 9. und wenn 10. folgt */
.a9 {
  margin-left: 9px;
  text-indent: -17px;
  padding: 5px 0 0 15px;
}

/* Text einrücken bei Aufzählung bis 9, wenn ein neuer Absatz */
.ein_a9 {
  margin: 0 0 0 20px;
}

/* Text einrücken bei Aufzählung ab 10. */
.a10 {
  margin-left: 17px;
  text-indent: -28px;
  padding: 5px 0 0 15px;
}

.abstand {
	line-height: 5;
}
/*  Aufzählung mit einrücken */
.ap {
  margin-left: 15px;
  text-indent: -22px;
  padding: 5px 0 0 12px;
}

/* Abstand zwischen den Buchstaben */
.b {
  letter-spacing: 5px;
}

/* einrücken */
.ein {
  margin: 0 0 0 15px;
}

/* Einrücken 20px */
.ein_20 {
	margin-left: 20px; 
}

/* Einrücken 40px  */
.ein_40 {
	margin-left: 40px; 
}

/* Einrücken 60 px */
.ein_60 {
	margin-left: 60px; 
}
/* Einrücken bei a, wenn Text unterbrochen ist*/
.ein_a {
  margin: 0 0 0 22px;
}

.ein_a10 {
  margin: 0 0 0 27px;
}
/* Rahem um einen Text */
.rahmen {
  border: solid #000000 2px;
  padding: 6px;
  margin: 30 0 0 5px;
}

/* Rechteck_hoch zeigt ein schwarzes Rechteck in der Höhe der Schrift */
.Rechteck_hoch {
	height: 1px; 
   width: 1px;	
   background-color: black; 
    } 

/* Rahem um einen Text in der Mitte angepasst an die Breite des Textes */
.rahmen_text_mitte {
  border: solid #000000 2px;
  padding: 5px;
  margin: 0 auto;
  width: 40%;
}

/* Videos werden fexibel gemacht */
.embed-container {
position: relative; 
padding-bottom: 56.25%; /* ratio 16x9 */
height: 0; 
overflow: hidden; 
width: 100%;
height: auto;
margin: .5em .25em 0 .9em;
}

.embed-container iframe {
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
}

/* ratio 4x3 */
.embed-container.ratio4x3 {
  padding-bottom: 75%;
}

.video-wrapper {
   width: 600px;
   max-width: 100%;
   } 

.video-container {
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 30px; height: 0; 
   overflow: hidden;
   }

.video-container iframe,
.video-container object,
.video-container embed {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   }

/* Hintergrund wird grau hinterlegt mit Schatten */
.grau {
 background-color: #DFDFDF;
 border-radius: .5em;
 padding: .5em;
 margin: 0 .25em 0 .25em;
 box-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

/* Hintergrund wird grau hinterlegt mit Schatten für Chronik Tage
hier mehr links eingerückt */
.grau_tage {
 background-color: #DFDFDF;
 border-radius: .5em;
 padding: .1em .25em .25em 0;
 margin: 0 .25em 0 .9em;
 box-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
/* Hintergrund wird grau hinterlegt mit Schatten für Chronik Tage
hier mehr links eingerückt. Verkürzt für 28.11.1989 */
.grau_281189 {
 width: 74%;
 background-color: #DFDFDF;
 border-radius: .5em;
 padding: 0 .25em .25em 0;
 margin: -.6em 0 -.6em .9em;
 box-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
/* Hintergrundfarbe für die Abschnitte in der Chronik */

.hinterlegt_tage {
	background-color: #F8F8F8 ;
	width: 100%;
	margin: .7em;
}

/* Chronik rechts außerhalb anbringen */
.monatschronik {
position: fixed;
top:50px;
margin-left:447px;
left:50%;
width:429px;
height: 600px;
z-index:1000;
}

/* große Schrift mittig */
.gr {
  line-height: 1.4;
  font-size: 2em;
  font-style: normal;
  font-weight: bold;
  text-align: center;
  margin: 10px 30px;
}

/* große Schrift links */
.grl {
  line-height: 1;
  font-size: 1.5em;
  font-style: normal;
  font-weight: bold;
  text-align: left;
}

.hinterlegt {
  background-color: #EFEFEF;
  width: 100%;
  padding: .3em .2em .3em;
  border-radius: .5em;
}

/* Hintergrund mit Schatten */
.schatten {
 border-radius: .5em;
 padding: .5em;
 margin: .3em .25em .25em .5em;
 box-shadow: 0 1px 3px rgba(0,0,0,0.7);
 background: #e2e2e2; /* Old browsers */
        background: -moz-linear-gradient(top, #e2e2e2 0%, #fefefe 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #e2e2e2 0%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #e2e2e2 0%,#fefefe 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #e2e2e2 0%,#fefefe 100%); /* IE10+ */
        background: linear-gradient(to bottom, #e2e2e2 0%,#fefefe 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
}

/* gesamter Text von Spiegelstrichpunkten wird eingerückt */ 
.s {
  margin-left: 7pt;
  text-indent: -9pt;
  padding: 5px 0 3px 40px;
}

/* Text von Spiegelstrichpunkten wird eingerückt */  
.sp {
  margin-left: 5px;
  text-indent: -13px;
  padding: 0 0 0 10px;
}

/* Text von Spiegelstrichpunkten wird eingerückt */  
.spmitpunkt {
  margin-left: 5px;
  text-indent: -20px;
  padding: 0 0 0 20px;
}

/* kursiv */
.kursiv {
  font-style: italic;
}

/* rechts und kursiv */
.rkursiv {
  font-style: italic;
  text-align: right;
}

/* fett und kursiv */
.kfett {
  font-style: italic;
  font-weight: bold;
}

.klein {
   font-size: .7em;
}

/* fett und klein */
.fettk {
  font-size: .7em;
  font-weight: bold;
}

/* mitte und klein */
.mklein {
   font-size: .7em;
   text-align: center;
}
/* rechts und klein */
.rklein {
 font-size: .7em;
 font-style: normal;
 font-weight: normal;
 font-family: Verdana,Arial,Helvetica,sans-serif;
 text-align: right;
 padding: 0 20px 5px 0;
}
/* mitte und kursiv */
.mkursiv {
   font-style: italic;
   text-align: center;
}
/* klein, unterstrichen, rechts */
.kur {
   font-size: .7em;
   text-decoration: underline;
   text-align: right;
}

.im {
  font-size: .7em;
  text-align: right;
  margin: 0 27px 0 0;
}

.rechts {
  text-align: right;
}

.mitte {
  text-align: center;
}
/* mitte und fett */
.mfett {
  text-align: center;
  font-weight: bold;
}
/* rechts fett */
.rfett {
  text-align: right;
  font-weight: bold;
}

.fett {
  font-weight: bold;
}

.u {
  text-decoration: underline;
}
/* unterstrichen und fett */
.ufett {
  text-decoration: underline;
  font-weight: bold;
}

.trans a img:hover {
	transform: scale(1.25);
}

.videos {
  margin: 0 0 10px 15px;
  font-family: Verdana,Helvetica,Arial,sans-serif;
  font-size: .7em;
  text-align: center;
}
/* Abstand zwischen den Worten */
.w {
  word-spacing: 15px;
}

.blau {
 color: blue;
}

.rot {
 color: red;
 text-decoration: underline;
}
/* Schrift nach oben, wenn skript */
.nach_oben {
	font-family: Verdana,Helvetica,Arial,sans-serif;
	line-height: 1.5;
  font-size: .875rem;
  font-style: normal;
  font-weight: normal;
  color: black;
  padding: 5px;
}

/* Bild außerhalb anbringen */
.ausserhalb {
position: fixed;
top:52px;
margin-left:450px;
left:50%;
width:429px;
height: 600px;
z-index:1000;
}

/* Schriftgröße für Menü Betriebe, Frauen usw. kleine Bildschirme */
.schrift {
	font-size: 15px;
	font-weight: bold;
}

/* Schriftgröße für Menü Betriebe, Frauen usw. kleine Bildschirme innerhalb */
.schriftgroesse_innerhalb {
	font-size: 15px;
	font-weight: bold;
}

/* Die Buchstaben bei der Natigation Abkürzungen werden nebeneinander angeordnet */
.abkuerzungen_nebeneinander a {
width: 2.4rem;
display: inline-block;
text-align: center;
}

/* Die Buchstaben bei der Natigation Abkürzungen werden nebeneinander angeordnet, für kleine Bildschirme */
.abkuerzungen_nebeneinander_klein a {
width: .5em;
float: left;
font-size: 15px;
font-weight: bold;
text-indent: -5px;
}

/* Die Buchstaben bei der Natigation Abkürzungen werden nebeneinander angeordnet, für kleine Bildschirme für den Buchstaben Z */
.abkuerzungen_nebeneinander_klein_z a {
width: 7.1em;
float: left;
font-size: 15px;
font-weight: bold;
text-indent: 45px;
}

/* Die Buchstaben bei der Natigation für Buchstaben Z, bei großen Bildschirmen */
.abkuerzungen_nebeneinander_z a {
width: 8.27rem;
display: inline-block;
text-align: center;
}

/* Die Zahlen bei der Natigation für Monat 12/90 */
.Monat_1290 a {
width: 8.21rem;
display: inline-block;
text-align: center;
}

/* Die Monate bei der Natigation Chronik werden nebeneinander angeordnet */
.chronik_nebeneinander a {
width: 3.86rem;
display: inline-block;
text-align: center;
}

/* Die Monate bei der Natigation Chronik werden nebeneinander angeordnet für kleine Bildschirme */
.chronik_nebeneinander_klein a {
width: 3em;
float: left;
font-size: 15px;
font-weight: bold;
text-indent: -10px;
}

/* Der Monat bei der Natigation Chronik 12/90 für kleine Bildschirme */
.chronik_klein_1290 a {
width: 8.22rem;
float: left;
text-align: center;
font-size: 15px;
font-weight: bold;
text-indent: -10px;
}

[data-tooltip] {
    position: relative;
}
 
[data-tooltip]::after {
  content: attr(data-tooltip);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
 
  display: block;  
  position: absolute; 
  bottom: 1em;
  left: -6em;
  width: 25em;
  padding: 0.5em;
  z-index: 100;
  color: #000; 
 background-color: #DFDFDF;
  border: solid 1px #c32e04;
  border-radius: 0.5em;  
}
 
[data-tooltip]:hover::after {
  opacity: 1;
}

.tooltip {
  color: blue; 
  text-decoration: underline; 

}

@media (max-width: 1700px) {
.ausserhalb {
width:300px;
height:450px;
}}

@media (max-width: 1600px) {
.ausserhalb {
width:200px;
height:350px;
}}

@media (max-width: 1500px) {
.ausserhalb {
width:150px;
height:250px;
}}

@media (max-width: 1350px) {
.ausserhalb {
display: none;
}}

/* Ende Basis */

/* Eine Version für max 960 Pixel */   
@media only screen and (max-width: 960px) { 

.klein {
 font-size: .563rem;
}

/* Text von Spiegelstrichpunkten wird eingerückt */  
.sp {
  text-indent: -8px;
  padding: 0 0 0 5px;
}

/* Text einrücken bei Aufzählung 1. oder a) */
.a {
  margin-left: -3px;
  text-indent: -12px;
}

/* Text einrücken bei Aufzählung bis 9. und wenn 10. folgt */
.a9 {
  margin-left: 6px;
  text-indent: -11px;
}

/* Text einrücken bei Aufzählung bis 9, wenn ein neuer Absatz */
.ein_a9 {
  margin: 0 0 0 12px;
}

/* Text einrücken bei Aufzählung ab 10. */
.a10 {
  margin-left: 8px;
  text-indent: -18px;
}
/* Text einrücken bei Aufzählung ab 10, wenn ein neuer Absatz */
.ein_a10 {
  margin: 0 0 0 17px;
}

.ein_a {
  margin: 0 0 0 14px;
}

/* 1.) Aufzählung mit einrücken */
.ap {
  margin-left: 8px;
  text-indent: -15px;
  padding: 5px 0 0 8px;
}

}
/* Ende Version für 960 Pixel */ 

/* Version für 480 Pixel  */   
@media only screen and (max-width: 480px) { 

main h1 {
  font-size: .875em;
}

main p, pushy-submenu {
	font-size: .75em;
}

.pushy-submenu {
	font-size: 1.5em;
}

.schriftgroesse_innerhalb {
	font-size: 1.75em;
}

.chronik_nebeneinander_klein {
	font-size: .5em;
}

.abkuerzungen_nebeneinander_klein {
	font-size: .5em;
}

.abkuerzungen_nebeneinander_klein_z {
	font-size: .5em;
}

/* Text einrücken bei Aufzählung 1. oder a) */
.a {
  margin-left: 5px;
  text-indent: -17px;
}
/* Text von Spiegelstrichpunkten wird eingerückt */  
.sp {
  margin-left: -2px;
  text-indent: -6px;
  padding: 0 0 0 10px;
}



}
/* Ende Version für 480 Pixel  */ 
} 
/* } für @media screen Ende */