*     {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
     }

html     {background-image:url("bilder/bg.gif");overflow-y:scroll  }

body             {
         font-family: Arial 100.01%;
         font-size:16px;
         color:gray;
         height:100%;
         margin:0;
         padding:0;
         }
a        {
         text-decoration:none;
         }

#center-container{
         width:70%;
         min-width: 1000px; /* Minimale Breite in px */
         max-width: 80em; /* Maximale Breite in em */
         margin: 10px auto;
         }
/*Formatierung des Sliders auf der Startseite*/
.rslides {
        position: relative;
        list-style: none;
        overflow: hidden;
        width: 50%;
        padding: 0;
        margin-left:40%;
/*        margin-right:auto; */
        }

.rslides li {
          -webkit-backface-visibility: hidden;
          position: absolute;
          display: none;
          width: 100%;
          left: 0;
          top: 0;
          }

.rslides li:first-child {
        position: relative;
        display: block;
        float: left;
        }

.rslides img {
          display: block;
          height: auto;
          float: left;
          width: 100%;
          border: 0;
          margin-bottom:10px;
          }

.link    {
        color:crimson;
        text-decoration:none;
        font-weight:bold;
         }

.startseite-inhalt      {
/*         border:1px solid #cccccc;
         background-color:#f9f9f9;  */
         padding:50px;
         font-size:1.0em;
         }
.startseite-inhalt li  {
         font-size:1.1em;
         width:99%;
         background-color:white;
         line-height:2em;
         text-align:center;
         }

.inhalt  {
         overflow:auto;
         margin-top:20px;
         font-family: Arial;
         color:gray;
         border:1px solid  #cccccc;
         padding:20px 50px;
         background-color:#f9f9f9;
         }
/*Enthält linke Seite der Website inkl. Menü*/
.kasten-links   {
         position:absolute;
         width:300px;
         float:left;
         top:20px;
/*         border:1px solid #cccccc;*/
         }

.menu-rahmen     {
         width: 260px;
         margin-left:20px;
         height:100%;
         }
.left-menue              {
         font-family:Arial;
         font-size:  1.0em;
         }

.left-menue ul              {
            display: block;
            position:static;
            }

.left-menue li          {
            list-style-type: none;
            margin-left:-40px;
            }

.left-menue a        {
            display:block;
            text-decoration:    none;
            width:260px;
            height:40px;
            padding:10px 0 4px 10px;
            margin:20px 0;
            border:1px solid gray;
            -moz-border-radius: 5px;
            -webkit-border-radius:5px;
            border-radius:5px;
            background-color:#f5f5f5;
            color:gray;
                         }

.left-menue p         {
            height:40px;
            width:260px;
            padding:10px 0 4px 10px;
            margin:20px 0;
            border:1px solid gray;
            -moz-border-radius: 5px;
            -webkit-border-radius:5px;
            border-radius:5px;
            color:              red;
            font-weight:bold;
            background-color:#f5f5f5;
            }

.left-menue a:hover {
            color:              black;
            font-weight:bold;
            background-color: #dcdcdc;
            }

.mail-rahmen  {
         position:relative;
         width:230px;
         border:1px solid gray;
         background-color:#fffafa;
         padding:20px 0 20px 10px;
         margin-top:40px;
         margin-left:20px;
         }
.mail    {
        font-family:Arial;
        font-size:0.8em;
        width:180px;

        }
.mail a   {
        text-decoration:none;
        color:gray;
         }
.mail img {
         border:0px solid;
         vertical-align:middle;
         width:30px
         }
/* enthält die Überschriftenzeile rechts oben*/
.right-top                {
      width:100%;
      height:                40px;
      background-image: linear-gradient(to top,#cdcdcd 0%,#f8f8f8  50%); /*in grau*/
      border-style:        solid;
      border-width:        1px;
      border-color:        #cccccc;
      }
.textbox   {
      font-family: Arial;
      font-size: 18px;
      font-weight:bold;
      color:red ;
      margin-top:7px;
      margin-left:20px;
      }

/*Formatiert den Rahmen der Inhaltsseite*/
.kasten-rechts {
      font-size:1.0em;
      margin-top: 45px;
      margin-left: 30%;
      width:70%;
      background-color:transparent;
         }

.rechts-inhalt   {
      position:relative;
      margin-top:20px;
      padding:20px;
      background-color:#f8f8ff;
      border:1px solid #dcdcdc;
      height:750px;
      font-family:Arial;
      font-size:0.9em;
      }
.rechts-inhalt-projekt   {
      position:relative;
      margin-top:50px;
      width:100%;
      height:100%;
      padding:30px;
      background-color:#f8f8ff;
      border:1px solid #dcdcdc;
      font-family:Arial;
      overflow:auto;
      }

/*Formatiert die Horizontalmenüs bei den Projekten*/
.menue-horizontal ul {
         padding-left: 7em;
         margin-bottom: 10px;
         text-align:justify;

         }

.menue-horizontal li {
         display:inline-block;
         float: right;
         list-style-type: none;
         font-size:0.8em;
         font-weight:normal;
         background-color:#f9f9f9;
         line-height:1.5em;
         }

.menue-horizontal a {
         color:darkred;
         text-decoration:none;
         }

.menue-horizontal a:hover  {
         background-color:lightgrey;
         color:gray;
         }

.menue-horizontal span   {
         color:#red;
         font-weight:normal;
         }

li #line {padding-left:100%;}



.rechts-inhalt-formen   {
      display: table;
      width: 100%;
      table-layout: fixed;
      border-spacing: 20px;
      background-color:#f8f8ff;
      border:1px solid #dcdcdc;
      height:750px;
      font-family:Arial;
      }
.rechts-inhalt-kurse   {
      position:relative;
      margin-top:20px;
      padding-left:20px;
      background-color:#f8f8ff;
      border:1px solid #dcdcdc;
      height:750px;
      font-family:Arial;
      }
/*Formatiert Kopf der Objektdarstellung nach Kategorien*/
.formen-header  {
      position:absolute;
      left:0;
      display:table;
      height:50px;
      width:100%;
      display: flex;
      align-items: center;
      text-indent:20px;
      margin-top:-20px;
      background-color:#dcdcdc;
      }
.formen-header-text  {
      color:red;
      font-weight:bold;
      }
.formen-bemerkung   {
      margin-top:40px;
      color:red;
      font-size:0.9em;
      height:20px;
      }
/*Formatiert Darstellung der Konstruktionsbeschreibung*/
.formen-konstruktion  {
      width:100%;
      margin-top:20px;
      margin-bottom:20px;
      }
/*Formatiert Bilddarstellung bei hohen Bildern*/
.formen-bild-hoch   {
      position:absolute;
      bottom:0;
      right:0;
      margin-right:20px;
      margin-bottom:20px;
      }
.formen-bildrahmen-hoch  {
      float:right;
      height:auto;
      width:350px;
      border:1px solid gray;
      }
.formen-bild-hoch img {
      height:auto;
      width:100%;
      border:5px solid white;
      }
.formen-thumbs-hoch  {
      width:20%;
      height:100%;
      float:right;
      margin-right:5px;
      border:1px solid gray;
      }
.formen-thumbs-hoch img {
      width:100%;
      height:auto;
      }
/*Formatiert Bilddarstellung bei breiten Bildern*/
.formen-bild-breit   {
      position:absolute;
      bottom:0;
      right:0;
      width:62%;
      height:auto;
      margin-right:20px;
      margin-bottom:20px;
      }
.formen-bildrahmen-breit  {
      float:right;
      width:100%;
      height:auto;
      border:1px solid gray;
      }
.formen-bild-breit img {
      width:100%;
      border:5px solid white;
      }
.formen-thumbs-breit  {
      height:100px;
      margin-bottom:5px;
      border:1px solid gray;
      }
.formen-thumbs-breit img {
      width:auto;
      height:100%;
      }

/*formatiert Anzeige der Maßbezeichnungen*/
.formen-masse-hoch  {
      position:absolute;
      top:320px;
      width:60%;
      margin-bottom:50px
      }
.formen-masse-breit  {
      position:absolute;
      top:320px;
      width:40%;
      margin-bottom:50px
      }
/*Formatiert Anzeige der Ortsbezeichnungen*/
.formen-ort-hoch  {
      position:absolute;
      top:480px;
/*      float:left;*/
      width:65%;
      margin-bottom:50px;
      }
.formen-ort-breit  {
      position:absolute;
      top:480px;
      width:30%;
      margin-bottom:50px;
      }
/*Formatiert Anzeige der Baujahrangabe*/
.formen-baujahr-hoch  {
      position:absolute;
      top:650px;
      width:60%;
      }
.formen-baujahr-breit  {
      position:absolute;
      top:650px;
      width:35%;
      }
/* formatiert die Seite mit Kategorien der Formen in Stahl*/
.uebersicht-box {
      width:23%;
      display: table-cell;
      padding: 10px;
      background-color:#dcdcdc;
      }

.uebersicht-box  a  {
      text-decoration:none;
      }
.uebersicht-box:last-child  {
      margin-right:0px;
      }
.uebersicht-box img {
      display:block;
      width:90%;
      height:150px;
      margin-left:auto;
      margin-right:auto;
      margin-bottom:10px;
      }
.uebersicht-box-text  {
      font-family:Arial;
      font-size: 0.9em;
      color: black;
      margin:20px 0 20px 10px;
      }

/*Ende der Kategorien*/

/*Menü unter den Formen*/
.formen-menue-rahmen   {
       margin:       15px 0 0 0;
       width:        100%;
       height:       37px;
       background:   #f9f9f9 url(bilder/bgOFF.gif) repeat-x;
       border-style: solid;
       border-color: lightgrey;
       border-width: 1px 0px 0px 0px;
       overflow:     hidden;
       }

.formen-menue-rahmen ul        {
        margin:                0px;
        list-style-type:none;
                 }

.formen-menue-rahmen ul li        {
        float:                left;
        width:               5.5%;
        border-bottom:        1px solid lightgrey;
                 }

.formen-menue-rahmen ul li a        {
        display:        block;
        color:          gray;
        text-decoration:none;
        text-align:     center;
        margin:         0px;
        padding:        8px 0px 0px 0px;
        height:         37px;
        background:     transparent url(bilder/bgDIVIDER.gif) no-repeat;
                 }

.formen-menue-rahmen ul li a:hover,.formen-menue-rahmen ul li a.current{
        color:                #B30000;
        background:        #ebebeb url(bilder/bgON.gif) repeat-x top left;
                 }

/*Formatiert den Inhalt der Kontaktseite*/
.inhalt-kontakt  {
         margin-top:20px;
         border:1px solid  #cccccc;
         padding:20px 50px;
         background-color:#f9f9f9;
         }

.kontakt-top  {
           margin-left:auto;
           margin-right:auto;
           font-family:Arial;
           font-size:1em;
           text-align:center;
           background-color:#f9f9f9;
           width:100%;
            }

.kontakt-left {
           width:55%;
           float:left;
           font-family:Arial;
           font-size:0.9em;
           color:gray;
           padding:20px 0 30px 20px;
           margin-top:20px;
/*           border:1px solid grey;   */
           }
.kontakt-right {
/*         position: absolut;*/
/*         bottom:0;*/
/*        right:0;*/
         float:right;
         width:35%;
         font-family:Arial;
         font-size: 0.8em;
         color: gray;
         text-align:center;
         margin-right:30px;
         margin-bottom:30px;
         border:1px solid grey;
         }

.kontakt-right img {
         width:100%;
         margin-bottom:10px;
         }

.kontakt-bottom {
         clear:right;
         padding:20px 20px;
         margin-top:20px;
         font-family:Arial;
         font-size:0.8em;
         }

.clearfix {
         clear:both;
         display:inline-box;
         }
/*Formatierung der Seiten für Werkstattkurse*/

.kurse-fenster   {
         width:100%;
         overflow:auto;
         height:100%;
         }
.kurse-header   {
      position:absolute;
      left:0;
      display:table;
      height:50px;
      width:100%;
      display: flex;
      align-items: center;
      text-indent:20px;
      background-color:#dcdcdc;
      color:black;
      font-weight:bold;
      }
.kurse-header-text  {
      color:red;
      font-weight:bold;
      }

.kurse-ueberschrift  {
      margin-top:60px;
      color:black;
      font-weight:bold;
      }

.kurse-teilnehmer-fenster  {
         margin-top:20px;
         width:100%;
         height:150px;
        font-size:0.9em;
         }
.kurse-teilnehmer-textfenster  {
        float:right;
        width: 40%;
        }

.kurse-teilnehmer-bildfenster  {
        float:right;
        width: 40%;
        height:auto;
        }
.kurse-teilnehmer-bildfenster img {
        height:120px;
        }

.kursebild1        {
        width:60%;
        margin:10px 20px 10px 0;
        float:left;
         }

.kursebild1 img  {
         width:100%;
         }

.kursebild2        {
        float:right;
        width:55%;
        margin:20px 0px 10px 20px;
         }

.kursebild2 img  {
         width:100%;
         }

.kursetext1{
         float:right;
         width:37%;
         font-size: 0.8em;
         padding: 10px;
         margin-top:15px;
         border: 1px solid lightgrey;
         line-height:1.4em;
         }

.kursetext2        {
         float:left;
         margin-top:20px;
         font-size:0.8em;
         padding:10px;
         width: 40%;
         line-height:1.4em;
         border: 1px  solid lightgrey;
         }
.kurse-menue-rahmen   {
       margin: 15px 0 0 0;
       width:100%;
       height:                        37px;
       background:                #f9f9f9 url(bilder/bgOFF.gif) repeat-x;
       border-style:                solid;
       border-color:                lightgrey;
       border-width:                1px 0px 0px 0px;
       overflow:                hidden;
       }

.kurse-menue-rahmen ul        {
        margin:                0px;
        list-style-type:none;
                 }

.kurse-menue-rahmen ul li        {
        float:                left;
        width:               10%;
        border-bottom:        1px solid lightgrey;
        font-size:           0.9em;
                 }

.kurse-menue-rahmen ul li a        {
        display:        block;
        color:                gray;
        text-decoration:none;
        text-align:                center;
        margin:                0px;
        padding:        8px 0px 0px 0px;
        height:                37px;
        background:        transparent url(bilder/bgDIVIDER.gif) no-repeat;
                 }
.kurse-menue-rahmen ul li a:hover,.kurse-menue-rahmen ul li a.current{
                color:                #B30000;
                background:        #ebebeb url(bilder/bgON.gif) repeat-x top left;
                 }

#akkordeon:not(:target) .ds-inhalt {display: none;}

#akkordeon:target .ds-inhalt {display: block;}

#akkordeon:target .show {display: none;}

#akkordeon:not(:target) .hide {display: none;}

.ds-inhalt {
width:600px;
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
padding: 20px 20px 20px 20px;
margin: 20px 0px 10px;
}

.show,
.hide {
padding:10px;
background: yellow  /*rgb(254, 164, 0); */
box-shadow:none!important;
color:red;?font-weight:bold;
margin-left:-10px;
}

.show:hover,
.hide:hover {
background: rgb(255, 214, 118);
color:navy!important;
transition:0.2s all ease-in-out!important;
}