html, body{
    margin:0;
    background-color: white;
    font-family: Candara, Calibri, Segoe, Segoe UI, Optima,Arial,sans-serif;
    scroll-behavior: smooth;
}
header{
    /*  visibility:hidden;  */ 
    position:fixed;
    top:0;
    left:0;
    top:0;
    width:100%;
    cursor:pointer;
    z-index:11;
}
.section{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
   align-items:space-around;
    /* position:absolute; */
    margin-top:14%;
    margin-bottom:2em;
    text-align:left;
    left:0;
    /* top:calc(10px + 28%); */
    /* top:28%; */
    height:68%;
    width:98%;
   /*  aspect-ratio : 3 / 1; */
    overflow:auto;
    scroll-behavior: smooth;
    /* margin-top:13.5%; */      
/* height:calc(3% + 335px); */
/* height:same-as-width; */
    /* heigth:calc(100% - 2 * 50px); */
   /* border:1px solid #090; */
   /*  background-color:blue; 
    margin:20%; */
}

ol,ul{
    font-size:1.03em
}
.field{
    display:flex;
    justify-content:space-around;
    flex-wrap:wrap;
    align-items:center;
    border-radius:5px;
    margin:0.1em auto;
    width:80%;
    font-size:95%;
    min-height:1em;
    padding:5px;
    cursor:pointer;
}
#text{
    position:absolute;
    left:50%;
    text-align:center;
    margin:0 auto;
    font-size:2em;
    vertical-align:top;
}
table{
    border:1px solid #aaa;
    border-radius:5px;
     box-shadow: 5px 5px 10px #aaa;
}
tr:nth-child(odd):not(.d) { background-color:#00E5E5;  }      /* #00E5E5; */
tr:nth-child(even) { background-color:white; }
table .a{
    color:blue;
    text-decoration:underline;
}
.d{
    background-color:#eee;
    color:#999;
}
th, td{
    border-right:1px solid #aaa;
    border-bottom:1px solid #aaa;
    text-align:center;
    padding:0.5em;
}
th{
  color:white;
  background-color:#008080  
}
.bild{
    margin:0 2em;
    width:30%;
    height:auto;
    box-shadow: 5px 5px 10px #aaa;
    float:left;
    border-radius:5px;
}
.foto{
    margin:0 2em;
    width:30%;
    height:auto;
    float:left;
}
.slides{
    margin:0 2em;
    width:60%;
    height:auto;
    box-shadow: 5px 5px 10px #aaa;
    float:right;
    
}
.zitat{
    display:flex;
    justify-content:space-around;
    flex-wrap:wrap;
    width:60%;
    padding:0.5em; 
    margin:0 auto;
    border:1px solid #aaa;
    border-left:3px solid #009;
    color:#009;
    font-style:italic;
    background-color:#eee
}
.marker{
    width:60%;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    align-items:center;
    margin:1em auto;
    padding:1em;
    background-color:#629CD5;
    color:#fff;
    font-weight:bold;
    font-size:1.5em;
    line-height:2em;
    border-radius:10px;
}
.start{
    position: fixed;
    bottom:2em;
    right:1em;
    width:60px;
    border:1px solid #aaa;
    border-radius:5px;
    box-shadow: 5px 5px 10px #aaa;
}
.liste{
    width:80%;
    margin:0 auto;
    display:flex;
    justify-content:
    space-around;flex-wrap:wrap;
    
}
.buch{
    width:15%;
    padding:0.2em;
    margin:0.3em;
}
.buch img{
    width:100%;
}

.buch em{display:none;}
.buch:hover em{
    display:inline-block;
    position:fixed;
    top:35%;
    left:23%;
    width:50%;
    padding:1em;
    background-color:#FFFFF3;
    opacity:0.9;
    border:3px solid #444;
    border-radius:7px;
    box-shadow:#646C6C 5px 5px 10px;
    overflow:auto;
    max-height:60%;
    z-index:10;
}
.buch:hover em a{
    text-decoration:none;
    color:#808000;
}
.buch:hover em a:hover{
    text-shadow:#0f0 1px 2px 2px;
}
.buch:hover em img{
    width:25%;
    float:left;
    margin-right:1em;
}
.buch:hover em span{
    display:flex;
    justify-content:space-around;
    flex-wrap:wrap; 
    width:35%;
    float:right;
    border-left:3px solid #808000;
    color:#808000;
    padding-left:0.5em;
    margin-left:0.5em;
}

button{
    position:relative;
    font-size:1em;      
    font-family: Courier New; 
    font-weight:bold;
    border:1px solid #aaa;
    padding:0.2em 0.5em;
    border-radius:5px;
	cursor:pointer;
    transition:background 0.5s ease-out;
    transition:box-shadow 0.5s ease-out;

}
button:hover{
    background-color:white;
    box-shadow: 5px 5px 10px #aaa;
    transition:background 0.5s ease-out;
    transition:box-shadow 0.5s ease-out;
}                               
button:active{
    box-shadow: inset 2px 2px 5px #aaa;/* 5px 5px 10px #aaa; */
}

a,.link{
    text-decoration:none;
    color:black;
    font-weight:bold;
    cursor:pointer;
}
.link:hover{
    text-shadow:#0f0 1px 2px 2px;
}
.link:active{
    text-decoration:none;
    text-shadow:#a00 1px 2px 2px;
}
a:visited{
    text-decoration:none;
}
#login{
     display: flex;
     position:fixed;
     right:2px;
     bottom:0px;
     /* background:#007F3C;
    padding:0;  */
      margin:5px;
}
#login li{
     padding:5px 10px;
     margin:0;
     width:140px;
     list-style-type:none;
}
#login li ul{
     background:#fff;
     border:1px solid #fff;
     border-radius:5px;
     box-shadow:#666 0px 0px 30px;
}
#login li ul li ul{
     background:#799aff;
}
#login li ul,
#login li > ul li ul{
     position:absolute;
     right:0;padding:0.5em;
     bottom:-0.2em;
     visibility:hidden;
     opacity:0;
     height:0em;
     transition:all 0.5s ease-in 10s;
}
#login li:hover > ul,
#login li > ul li:hover ul li{
     visibility:visible;
     /* display:flex;flex-direction:column;justify-content:space-around; */
     opacity:1;
     height:8em;
     transition:all 0.5s ease-in;
}
#foot{
    display:flex;
    justify-content:space-between;
    align-items:center;
    position: fixed;
    left:0;
    bottom:0;
    padding:0.5em 0 ;
    /* height:4em; */
    width:100%;
    background-color:white;
    font-size: 0.8em;
    border-top:1px solid #aaa;
}
.textarea[contenteditable]:empty::before {
  content: "Ihre Nachricht...";
  color: gray;
}
.wappen{
    height:40px;
}
.ptn{
    display:flex;
    padding:0.8em;
    height:3em;
    width:80%;
    margin:1em;
    justify-content:space-between;
    align-items:center;
}
.section span[role=textbox] {
  padding:1px 6px;
  display: block;
  border:1px solid #aaa;
  border-radius:5px;
  overflow: hidden;
  resize: both;
  min-height: 40px;
  line-height: 20px;
}
.dialog{
    position:fixed;
    top:10%;
    left:10%;
    right:10%;
    margin: auto;
    width:450px;
    height:400px;
    border:2px solid #fff;
    border-radius:7px;
    background-color:#FFFFE7;
    box-shadow:#444 0px 0px 50px;
    z-index:40;
    overflow:hidden;
}
.dialog h1,h2,h3, .mbtn em h1,h2,h3{
    text-align:center;
    width:95%;
    margin:0.2em ;
    padding:0.4em;
    text-shadow:#222 2px 2px 2px;
    color:white;
    /* background-color:#CEC87F; */
    background:radial-gradient(ellipse at center, #CEC12D 0%,#CEC87f  100%);
    /* background:linear-gradient(0deg, #fff 0%,#CEC87F, 80%); */
    font-family:Verdana,Arial, Helvetica, sans-serif;
    border:1px solid #888;
    border-radius:5px;
    /* cursor:move; */
}
.dialog .cyan{
    color:#fff;
    background-color:#0bb; 
    text-shadow:#333 2px 2px 5px;
    background:linear-gradient(0deg, #0ee 5%, #0aa 70%);
    border:1px solid #666;
}
input[type=text], input[type=password], input[type=email], select, input[type=checkbox], textarea, input[type=time], input[type=number], input[type=date],.textarea {
    padding:0 8px;
    height:1.5em;
    margin:0.1em;
    font-family:Verdana,Arial, Helvetica, sans-serif;
    font-size:1em;
    color:#666;
    background-color:#fff;
    font-weight:normal;
    border:1px solid #a99;
    line-height:1.5;
    box-shadow: inset -2px 8px 8px -6px #aaa;
    border-radius:5px;
}
 input:hover, input:active, input:focus, select:hover,select:active,select:focus,textarea:hover,textarea:active,.textarea:hover,.textarea:active{
   box-shadow:inset 0 0 0 #fff;
}
input[readonly],input[disabled],select[disabled],select option[disabled]{
    color:#aaa;
    background-color:#fff;
    cursor:no-drop;
}
input:required:invalid,textarea:required:invalid {
      -webkit-box-shadow: 0px 0px 8px  rgba(255,0,50,.7); /* webkit browser*/
      -moz-box-shadow: 0px 0px 8px rgba(255,0,50,.7); /* firefox */
      box-shadow: 0px 0px 8px rgba(255,0,50,.7),inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
}
input:required:invalid:hover,textarea:required:invalid:hover {
    box-shadow:0px 0px 8px rgba(255,0,50,.7),inset 0 0 0 #fff;
}
#ableitung{
    display:flex;
    flex-direction:column;
    justify-content:space-around; 
    width:90%;
    height:70%;
    margin:0 auto;
    border:1px solid #aaa;
    background:linear-gradient(180deg,#d5effe 10%, #fff 100%);

    border-radius:7px;
}
#ableitung span{
    display:flex;
    justify-content:space-around;
    margin:0.5em;
}
#ableitung .abl,.abtn{
    margin:0.5em;
}
#inhaltvz{
    position:relative;
    display:none;
    flex-direction:column;
    justify-content:space-around;
    align-items:center;
    margin:0 auto;
    padding:0.5em;
    width:40%;
    background-color:#ccc;
    border:1px solid #666;
    border-radius:1em;
    box-shadow: 5px 5px 10px #aaa;
    
}
svg {
	background-color: #fff;
}
.path {
  fill: #0ff;
  opacity:0.2;
  stroke: #333;
  stroke-width: 1;
  transition: all 0.6s ease;
}

.path:hover {
  fill: #00ABAB;/* #dfac20; */
  filter: drop-shadow( 4px 4px 3px rgba(0, 0, 0, .7));
  opacity:0.5;transition: all 0.5s linear;
}

text {
  opacity: 0.2;
  font-size: 1.2em;
  font-style: italic;
  /* font-family:cursive; */
  fill: #666;
  pointer-events: none;
}

.path:hover ~ text {
  opacity: 1;transition: all 0.5s ease;
}

.info {
    opacity: 0;
	font-size: 1.2em;
	fill: black;
	pointer-events: none;
    transition: all 0.5s linear;
}
#MS:hover ~ .MS ,.MS text,
#SH:hover ~ .SH ,.SH text,
#BB:hover ~ .BB,.BB text,
#WF:hover ~ .WF,.WF text,
#HE:hover ~ .HE,.HE text,
#RP:hover ~ .RP,.RP text,
#PPS:hover ~ .PPS,.PPS text,
#SCG:hover ~ .SCG,.SCG text,
#SWE:hover ~ .SWE,.SWE text,
#SAX:hover ~ .SAX,.SAX text
 {
	opacity: 1;filter: drop-shadow( 4px 4px 3px rgba(0, 0, 0, .7));
	transition: all 0.5s linear;
}

.navi{
  font-family:Courier New;
  height:1em;
  padding:0;
  margin:0;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav ul li {
    display: inline-block;
    position: relative;
    padding:0 0.3em; 
}
nav ul li a {
    background-color:#eee;
    display: block;
    font-size:1em;
    font-weight:bold;
    border:1px solid #aaa;
    padding:0.2em 0.5em;
    border-radius:5px;
	height:100%;
	cursor:pointer;
    transition:background 0.5s ease-out;
    transition:box-shadow 0.5s ease-out;
}
nav ul li a:hover {
    background-color: #fff;
    box-shadow: 5px 5px 10px #aaa;
    transition:background 0.5s ease-out;
    transition:box-shadow 0.5s ease-out;
}
nav ul li a:active{
    box-shadow: inset 2px 2px 5px #aaa;/* 5px 5px 10px #aaa; */
}
nav ul li ul {
    display: none;
    position: absolute;
    background-color: #eee;
    box-shadow: 5px 5px 10px #aaa; border: 1px solid #aaa;
    border-radius:5px;

}

nav ul li:hover ul {
    display: block;
    transition: display 1s;
}
nav ul li ul li {
    display: block;
    white-space: nowrap;
    transition: display 1s;
}

nav ul li ul li a {
    display: block;
    padding: 10px 20px;
    background-color: #fff;
    text-decoration: none;
    color: #333;
    transition: background-color 0.5s;
    border:1px solid #eee;
    border-radius:0;
}

nav ul li ul li a:hover {
    background-color: #ccc;
    transition: background-color 0.5s;

}
nav ul li ul li ul{
    display: none;
    position: absolute;
    background-color: #fff;
    box-shadow: 5px 5px 10px #aaa; border: 1px solid #aaa;
    transition: display 1s;
    float:left;
}
nav ul li ul li ul li{
    display: none;
    white-space: nowrap;
    transition: display 1s;
}
nav ul li ul li:hover ul{
    display: block;
    position: absolute;
    left:  13.4em; 
    top:0;
    background-color: #fff;
    box-shadow: 5px 5px 10px #aaa; border: 1px solid #aaa;
    transition: display 1s;
    
}
nav ul li ul li:hover ul li{
    display: block;
    white-space: nowrap;
    position:relative;
    transition: display 1s;
}
/* stylish-regular - latin */
/* h1{
    font-family: Architects Daughter;
    font-size:1.4em;
} */
h4{
    font-family:Stylish;
    font-weight:bold;
    font-size:1.5em; 
}
h5{
  font-family:Courier New;
    font-weight:bold;
    font-size:1.1em;
}
h6{
    font-family:UnifrakturMaguntia;
    font-weight:normal;
    font-size:1.4em;
}
p{
    font-size:1.1em;
    line-height:150%;
}
.fett{
    margin:1em 0 1em 0;
    font-weight:bold;
    font-style:italic;

}
.bss-slides{
    width: 60%;
    position: relative;
    display: block;
    margin:0 2em;
    height:auto;
    float:right;
}
.bss-slides:focus{
 outline: 0;
}
.bss-slides figure{
  position: absolute;
  top: 0;
  width: 100%;
}
.bss-slides figure:first-child{
  position: relative;
}
.bss-slides figure img{
  opacity: 0;
  -webkit-transition: opacity 3s;
  transition: opacity 3s;
  position: relative;
  border-radius:5px;
  box-shadow: 5px 5px 10px #aaa;
}
.bss-slides .bss-show {
  z-index: 3;
}
.bss-slides .bss-show img{
  opacity: 1;
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Stylish';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/stylish-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* gloria-hallelujah-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Gloria Hallelujah';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/gloria-hallelujah-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* architects-daughter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Architects Daughter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/architects-daughter-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* black-and-white-picture-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Black And White Picture';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/black-and-white-picture-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* chelsea-market-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Chelsea Market';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/chelsea-market-v13-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dekko-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Dekko';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/dekko-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* unifrakturmaguntia-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'UnifrakturMaguntia';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/unifrakturmaguntia-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}