/* Grundlayout  */

@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
@import url('https://fonts.googleapis.com/css?family=Caveat');

html {
        background: transparent!important;
}

body {
        margin: 1em auto;
        max-width: 60em;
        font-family: arial, sans-serif;
/*        font-family: 'Roboto Slab',arial, sans-serif; */
        color: rgba(255, 255, 255, 1);                  /* <Farbe Text> alles, außer Menü */

        background: rgba(85,85,85,0.7);                 /* <Farbe Hintergrund> black; */
        background: rgba(85,85,85,1);                 /* <Farbe Hintergrund> black; */




        padding-left: 5px;                             /* verschiebt Kasten aside usw. von links nach rechts */

}

h1, main, main svg {
        border-radius: 0 .5rem .5rem;
        border: 0px solid;
        padding: 1rem;
        margin: 1rem;
}

h1 {
        padding-left: 0px;
        text-align: center;
        font-family: 'Caveat', cursive;
        font-size: 48px;
        margin-top: 0px;
        margin-bottom: 0px;
}

h2 {
        padding-left: 0px;
        font-family: 'Caveat', cursive;
        font-size: 36px;
        margin-top: 1px;
        margin-bottom: 1px;
}

h3 {
        padding-left: 5px;
        font-family: 'Caveat', cursive;
        font-size: 24px;
        margin-top: 1px;
        margin-bottom: 1px;
}

main {
        display: block;     /* für IE                   ???? */
        background: #F1F3F4;
        border-color: #d5d5d5;
        min-height: 25em;
}

 a {
    color: yellow;
    border: 0px ;                      /*                alt 1px solid #dfac20*/
    /* margin: 2px;                    /*             Abstand von Link-Auswahl zum Rest*/
    text-decoration: none;
    /* text-align: center;                /*                alt: center */
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ flexibles Layout */


      body {
        display:-webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
      }

      /* --------------------------------------- Mobile first - alle Dokument-Blöcke bekommen 100% Breite ################# */
      header, article, section, aside, footer {
        border-radius: 0px 0.5em 0.5em;
        border: 1px solid;
        padding: 10px;
        padding-bottom: 6px;    /* Änd 02.01.18 - */
        margin: 10px;
        -webkit-flex: 1 100%;
        flex: 1 100%;
      }

      /* ---------------- von "header, article" rausgenommen ...   */
      nav, nav a  {
        border-radius: 2.5em 0.5em 2.5em;    /*alt  0.5em 0.5em 0.5em; --- <Hamburger Menü> als Quadrat */
        border: 1px solid;
        padding: 10px;
        margin: 10px;
        -webkit-flex: 1 100%;
        flex: 1 100%;
      }

      header {
        background: rgba(85,85,85,1.0);                     /* <Farbe Hintergrund>  */
        border-color:  rgba(213,213,213,1.0);               /* <Farbe Hintergrund Rand> */
        display:-webkit-flex;
        -webkit-flex-flow: row wrap;
        display: flex;
        flex-flow: row wrap;
        /*---------------neu----------*/
        border: 0px solid;
        padding: 1px;
        padding-top: 10px;
        margin-top: 7px;
        margin-bottom: 7px;
        margin: 1px;
      }
      header * {
        -webkit-flex: 1 1 0%;
        flex: 1 1 0%;
      }
      header img {
        -webkit-flex: 0 0 150px;
        flex: 0 0 150px;
        margin-right: 20px;
      }
      header nav {
        -webkit-flex: 1 1 100%;
        flex: 1 1 100%;
      }

      /* ------------------------------        Hauptmenü        -------*/
      nav, nav ul, nav li{
        margin: 0;
        padding:0;
        border:none;
      }
      nav ul {
        display: -webkit-flex;
        -webkit-flex-direction: column;
        display: flex;
        flex-direction: column;
        border-top: 2px solid;                 /* <Hamburger Menü> Grundlage */
        border-bottom: 2px solid;              /* <Hamburger Menü> Grundlage */
        width:100%;

      }
      nav li {
        list-style-type:none;
        margin: 1.1em 0;                        /* <Hamburger Menü> Höhe des Menüeintrages zum Vorgänger */
        -webkit-flex: 1 1 100%;
        flex: 1 1 100%;
      }
      nav a {
        display:inline-block;
        width:75%;                     /*alt: 95%   auch Position des <Hambuger Menü> */
        background: rgba(85,85,85,1.0);    /* <Menü> zeigt Farbe des Menüs - black; */
        border: 0px ;                      /*                alt 1px solid #dfac20*/
        /*margin: 2px;                       /*             Abstand von Link-Auswahl zum Rest*/
        text-decoration: none;
        text-align: center;                /*                alt: center */
      }

      /* ------------------------------        Kästen mit Text/Bilder        ---------------------------------------*/

      /* ------------------------------        ????????        -------*/
      section {
        background: rgba(85,85,85,1.0);
        border-color: slateblue;
      }
      /* ------------------------------        Kasten mittig        -------*/
      article {
        background: rgba(85,85,85,1.0);
        border-color: #df6c20;
      }





      /* ------------------------------        Kasten links + rechts -------*/
      aside {
        background: rgba(85,85,85,1.0);
        border-color: #8db243;
      }
      /* ------------------------------        Fußteil -------*/
      footer {
        background: rgba(85,85,85,1.0);
        border-color: #8a9da8;
        border: 0px solid;
        display:-webkit-flex;
        -webkit-flex-flow: row wrap;
        display: flex;
        flex-flow: row wrap;
      }
      footer * {
        -webkit-flex: 1 1 0%;
        -webkit-justify-content: space-between;
        flex: 1 1 0%;
        justify-content: space-between;
      }
      footer p {
        text-align: right;
          }

         /*  --------------------------------------- Smart Phones und Tablets mit mittlerer Auflösung #################*/
@media all and (min-width: 35em) {
      header img {
        margin-right: 50px;
      }
      nav ul {
        -webkit-flex-direction: row;
        flex-direction: row;
      }
      nav li {
        margin: 0 10px;
        -webkit-flex: 1 1 0%;
        flex: 1 1 0%;
      }
      /* --------------- ghe 02.12.16 A --- Versuch, ob das Objekt sich ändert ??? ----- */
      /* --------------- ghe 02.12.16 A --- --> Menü erscheint rechts im Header    ----- */
      /*      #nav {                                */
      /*        -webkit-flex: 1 auto;                */
      /*        -webkit-order: 3;                */
      /*        flex: 1 auto;                        */
      /*        order: 3;                        */
      /*      }                                */
      /* --------------- ghe 02.12.16 E --- Versuch, ob das Objekt fehlt ??? ----- */

      article {
        webkit-order: 2;
        order: 2;
      }
      #links {
        -webkit-flex: 1 auto;
        -webkit-order: 1;
        flex: 1 auto;
        order: 1;
      }
      #rechts {
        -webkit-flex: 1 auto;
        -webkit-order: 3;
        flex: 1 auto;
        order: 3;
      }

      aside {
      /* durch auto werden die beiden asides in eine Zeile gesetzt */
        -webkit-flex: 1 auto;
        -webikit-order: 4;
        flex: 1 auto;
        order: 1;

/*        border: 0px solid;                        entfernen vom Rand*/
              }
      footer {
        webkit-order: 5;
        order: 5;
      }
     /* ----------------------------------- Input-type flexible */
     /*  #eingabe_flex { width: 50%; }  */

}   /*von media !!! */

     /*  ---------------------------------------------------------------- Large screens ################# */
@media all and (min-width: 50em) {
     article {
        /* Der Article wird 2.5x so breit wie die beiden asides! */
        -webkit-flex: 5 1 0%;
        -webkit-order: 3;
        order: 3;
        flex: 5 1 0%;
      }
      aside {
        -webkit-flex: 2 1 0%;
        flex: 2 1 0%;

/*        border: 0px solid;                        entfernen vom Rand*/
      }
      #links {
        -webkit-flex: 2 1 0%;
        -webkit-order: 1;
      /*  -webkit-align-self: center;       */
        flex: 2 1 0%;
        order: 1;
      /*  align-self: center;                */
      /*  height: 120px;                    Höhe des linken Kasten */
      }

      #rechts {
        -webkit-flex: 2 1 0%;
        -webkit-order: 3;
      /*  -webkit-align-self: center;       */
        flex: 2 1 0%;
        order: 3;
      /*  align-self: center;                */
      /*  height: 120px;                    Höhe des linken Kasten */
      }

     /* ----------------------------------- Input-type flexible */
     /* #eingabe_flex { width: 50%; }  */

      header {
        padding-top: 60px;   /* 15px */
      }


} /* von media !!!! */

/*########################################################################  ENDE von verschiedenen Größen   ########################################*/


     /*  --------------------------------------- flexibles MENÜ  ANFANG -------------------------------------------------- */


                #nav
                {
                        width: 30em; /*  --> vorher 60em = 1000 */
                        font-family: 'Open Sans', sans-serif;
                        font-weight: 400;
                        position: relative;
/*                        position: absolute;                              */
/*                        top: 25%;                                        */
/*                        left: 50%;                                       */
/*                        margin-left: -30em;                              */        /* 30 480 */
                }

                        #nav > a
                        {
                                display: none;         /* zeigt Menü mit 'a href="#nav" ' nicht an*/
                        }


                        #nav li
                        {
                                position: relative;
                        }
                                #nav li a
                                {
                                        color: rgba(255, 255, 255, 1);        /*=Schrift; Farbe des Link-Textes; alt: #fff  */
                                        display: block;
                                }
                                #nav li a:active
                                {
                                        background-color: yellow !important;  /*HintergrundFarbe, wenn Klick; alt: #c00*/
                                }
                        #nav sp an:after
                        {
                                width: 0;
                                height: 0;
                                border: 0.313em solid transparent; /* 5 */
                                border-bottom: none;
                                border-top-color: black;                 /*alt: #efa585 */
                                content: '';
                                vertical-align: middle;
                                display: inline-block;
                                position: relative;
                                right: -0.313em; /* 5 */
                        }

                        /* first level */

                        #nav > ul
                        {
                                height: 2.0 em; /* 60 */
                                background-color: rgba(85,85,85,1.0) ; /*  dunkelgrau  Farbe des MenüBlockes  alt: #e15a1f = orange */
                        }
                                #nav > ul > li
                                {
                                        width: 25%;
                                        height: 50%;
                                        float: left;
                                }
                                        #nav > ul > li > a
                                        {
                                                height: 75%;
                                                font-size: 1.25em; /* 24 Schriftgröße im Menü -- vorher 1.00em*/
                                                line-height: 0.75em; /* 60 (24) Höhe des Menükasten*/
                                                text-align: center;
                                        }
                                                #nav > ul > li:not( :last-child ) > a
                                                {
                                                        border-right: 0px;  /*alt: 1px solid #cc470d */
                                                }
                                                #nav > ul > li:hover > a,
                                                #nav > ul:not( :hover ) > li.active > a
                                                {
                                                        background-color: white; /* Farbe, wenn Maus auf Link zeigt; alt:yellow; #dfac20 alt:#cc470d*/
                                                        color: black;
                                                }


                                /* second level */

                                #nav li ul
                                {
                                        background-color: black; /*black;        /*alt: #cc470d*/
                                        display: none;                        /* ':block' = Untermenü wird sofort angezeigt und bleibt*/
                                        position: absolute;
                                        top: 100%;
                                }
                                        #nav li:hover         ul                /* ':active'=nur bei Klick; alt 'li:hover' =lässt Untermenü bei Mauszeige automatisch anzeigen */
                                        {
                                                display: block;         /* lässt Untermenü als Block erscheinen */
                                                left: 0;
                                                right: 0;
                                                background-color: rgba(85,85,85,1.0);  /* dunkelgrau Hintergrundfarbe vom Untermenüblock  alt:red*/
                                                border: 0px solid;

                                        }
                                                #nav li:not( :first-child ):hover ul    /* Größe des Untermenüs */
                                                {
                                                        left: -1px;             /*verschiebt das Untermenü nach links oder rechts*/

                                                }
                                                #nav li ul a                        /*Eigenschaften vom Link*/
                                                {
                                                        font-size: 1.25em; /* 20 */  /*Schriftgröße für Untermenü; alt: 1.00em */
                                                        border-top: 0px;             /*alt: 1px solid #e15a1f*/
                                                        padding: 0.3em;             /* Höhe des Linkblockes;  alt=0.75em; 15 (20) */
                                                }
                                                        #nav li ul li a:hover,
                                                        #nav li ul:not( :hover ) li.active a
                                                        {
                                                                background-color: white;  /* Farbe im Untermenü, wenn Maus auf Link; alt:green; alt: #e15a1f */
                                                                color: black;
                                                        }


                @media only screen and ( max-width: 62.5em ) /* 1000 */
                {
                        #nav
                        {
                                width: 100%;
                                position: static;
                                margin: 0;
                        }
                }
                @media only screen and ( min-width: 63.0em ) /* 1xxx */
                {
                        #nav
                        {
                                width: 100%;                /* 60% (05.04.18)*/
                                position: static;
                                margin-left: 0%;            /* 20% (05.04.18)*/
                                margin-right: 0%;           /* 20% (05.04.18)*/
                        }
                }


                @media only screen and ( max-width: 40em ) /* 40em (05.04.18) ab 200em hier wird <Hamburger Menü> über ganze Breite erzeugt    640 */
                {
                        html
                        {
                                font-size: 100%; /* 75% (05.04.18)  12  <Hamburger Menü> Schriftgröße  */
                        }

                        #nav                                        /* hier wird <Hamburger Menü> erzeugt */
                        {
                                position: relative;
                                top: auto;
                                left: auto;                 /* 25% (05.04.18) <Hamburger Menü> mehr in die Mitte bringen*/                                left: auto;

                        }
                                #nav > a
                                {
                                        width: 2.125em; /* 50 */
                                        height: 2.125em; /* 50  ---------------HÖHE von <Hamburger Menü>*/
                                        text-align: left;
                                        text-indent: -9999px;
                                        background-color: black;   /*alt:#e15a1f */
                                        position: relative;
                                        border: 2px solid;
                                        border-color: rgba(255, 255, 255, 1);
                                }
                                        #nav > a:before,
                                        #nav > a:after
                                        {
                                                position: absolute;        /* Linie im <Hamburger Menü> */
                                                border: 2px solid #fff;
                                                top: 35%;
                                                left: 25%;
                                                right: 25%;
                                                content: '';
                                        }
                                        #nav > a:after
                                        {
                                                top: 60%;
                                        }

                                #nav:not( :target ) > a:first-of-type,
                                #nav:target > a:last-of-type
                                {
                                        display: block;

                                }


                        /* first level */

                        #nav > ul
                        {
                                height: auto;
                                display: none;
                                position: absolute;
                                left: 0;
                                right: 0;

                        }
                                #nav:target > ul
                                {
                                        display: block;

                                }
                                #nav > ul > li
                                {
                                        width: 80%;    /*Breite des Kasten für Link z.B. "Start"; alt: 100%*/
                                        float: none;

                                }
                                        #nav > ul > li > a
                                        {
                                                height: auto;
                                                text-align: left;
                                                padding: 0.2em 0.833em; /* 2=Abstand im <Hamburger Menü> von Link zu Link; Höhe 20 (24) */

                                        }
                                                #nav > ul > li:not( :last-child ) > a
                                                {
                                                        border-right: none;
                                                        border-bottom: 0px ;            /*alt: 1px solid #cc470d*/
                                                }


                                /* second level */

                                #nav li ul
                                {
                                        position: static;
                                        padding: 0.2em 0.133em; /* 20 */
                                        padding-top: 0;
                                }
                }



     /*  --------------------------------------- Menü vokabel + unterwegs bewegt ENDE -------------------------------------------------*/

/*-----A--- Aktion links oder rechts ein fester Block für "nach oben" oder "Link" - schnellzugriff */
#fixiert_oben {
  position: fixed;
  top: 0%;
  height: 9%;
  left: 0%;
/*  right: 95%;*/
  width: 100%;
/*  padding: 0px;*/
  padding: 0em 0em;
  border-bottom: 0px solid white;           /* rgba(0, 0, 0, 1); */
  border-radius: 0em 0em 0em  0em;
/*  background-color: rgba(64, 65, 66, 0.5);   /* rgba(7, 52, 109, 1)=blau / rgba(145,146,148)=hellgrau; */
/*  background-image:
        url("icons/pfeil-oben2.jpg");
        height: 8em;
        outline: 0px solid;
        width: 10em;
        background-repeat: no-repeat;
*/
}

#fixiert_unten {
  position: fixed;
  top: 81%;  /*91*/
  height: 19%; /*9*/
  left: 0%;
/*  right: 95%;*/
  width: 100%;
/*  padding: 0px;*/
  padding: 0em 0em;
  border-top: 0px solid white;                         /* rgba(0, 0, 0, 1); */
  border-radius: 0em 0em 0em  0em;

  background-color: rgba(64, 65, 66, 0.8);                      /* rgba(145,146,148); */
/*  background-image:
        url("icons/pfeil-oben2.jpg");
        height: 8em;
        outline: 0px solid;
        width: 10em;
        background-repeat: no-repeat;
*/

}
/*-----A--- Aktion links oder rechts ein fester Block für "nach oben" oder "Link" - schnellzugriff */
#fixiert_links {
  position: fixed;
  top: 82%;
/*  left: 95%; */
  right: 95%;
  width: 5%;
  padding: 0px;
/*  border: 0.5px solid rgba(0, 0, 0, 1);
  border-radius: 0em 2.5em 2.5em  0em;
  background-color: rgba(145,146,148,0.75); */
}
#fixiert {
  position: fixed;
  top: 62%;
  left: 95%;
/*  right: 95%; */
  width: 5%;
  padding: 0px;
/*  border: 0.5px solid rgba(0, 0, 0, 1);
  border-radius: 0em 2.5em 2.5em  0em;
  background-color: rgba(145,146,148,0.75); */
}
/*-----E---  */

#hinweis {                    /* für Container          ???? */
        padding: 1em;
        margin: 2em auto;
        width: 20em;
        height: 10em;
        background: #f1f3f4;
        border-left: 5px solid #c32e04;

}

.hinweis {                    /* für Textzeile          ????  */
        color: #c32e04;
        font-style: italic;
        border-bottom: 1px dotted;
        display:inline-block;
}

/* ------------------------------------------------------------------------- Eingabefelder -START-  */
   #eingabe_readonly { background-color: #82898C; }

/* ---------------------------------------- Anpassungen für die textarea*/
input, select, textarea {
   font: 0.86em/120% Tahoma, Arial, sans-serif;
/*   background: #046389; */
/*   color: white;          */
   font-size: 1.0em;
   padding-left: 4px;
}
textarea {
   /* background:url(textarea-background-image.png) top right no-repeat; */
   background-size: 100%;
   border-radius: 4px;     /* 18px; */
   border:2px solid silver;
   width: 92%;
   outline: none;
   /* padding-top: 0px; */

}
textarea:focus {
    background-color: #82898C;
    box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px white; /*rgba(102,175,233,.6);*/
                /*    rgba(85,85,85,1.0) #5FAECE*/
}
/* ---------------------------------------- Anpassungen für die LABEL*/
label {
  font: 1.0em/120% Tahoma, Arial, sans-serif;
/*  display: inline-block; */
/*  display: block; */
  width: 6em;
}

/* ---------------------------------------- Anpassungen für die SELECT*/
select {
  background: white;
  background:url(icons/pfeil-unten.jpg) top right no-repeat;
  padding-right: 16px;
  width: 97%;
  border-radius: 4px;     /* 18px; */
  appearance: none;
  /*  -webkit-appearance: none; */
  -moz-appearance: none; /* Dropdown "Dreieck"nachunten*/
  outline: none;
}
select[multiple] {
  background: white;

}
select:focus {
    background-color: #82898C;
    box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px white; /*rgba(102,175,233,.6);*/
                /*    rgba(85,85,85,1.0) #5FAECE*/
}

/* ---------------------------------------- Anpassungen für die input TEXT*/
input[type=text] {
/*   padding: 2px 16px; */
   height: 20px;
   border-radius: 4px;     /* 18px; */
   width: 92%;
   outline: none; // keine blaue Umrandung beim Fokus
}
input[type=text]:focus {
    background-color: #82898C;
    box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px white; /*rgba(102,175,233,.6);*/
                /*    rgba(85,85,85,1.0) #5FAECE*/
}
/* ---------------------------------------- Anpassungen für die input SUBMIT*/
input[type=button], input[type=submit], input[type=reset] {
   background-color: #9da2a1;  /*grau*/
   height: 30px;
   font-size: 0.9em;
   color: #454141;
   border-radius: 12px;
   outline: none; // keine blaue Umrandung beim Fokus
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
   background-color: #717574;  /*grau*/
   color: white;
}

/* ------------------------------------------------------------------------- Eingabefelder -ENDE-  */
button {
   background-color: #9da2a1;  /*grau*/
/*   height: 30px; */
   font-size: 1.1em;
   color: #454141;
   border-radius: 12px;
}
/*---------------- für den Schließen-Button in einem extra Fenster */
.button.red {
    background: #c41d1d;
    color: #fff;
}

/*
button:hover {
   background-color: #717574;
   color: white;
}
*/
/*
.button {               ---> doppelt siehe button.red für Fenster schließen
    height: 30px;
    width:100%;
    line-height: 30px;
    padding: 0 15px;
    border: 1px solid #ccc;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}
*/



                                        /* nur für Fehlermeldungen mit Datenbank (Hintergrund: hell; Umrandung: rot */
.errorTable
{
        BORDER-RIGHT: #9F0004 1px solid;
        BORDER-TOP: #9F0004 1px solid;
        BORDER-LEFT: #9F0004 10px solid;
        BORDER-BOTTOM: #9F0004 1px solid;
        FONT-SIZE: 11px;
        background-color: rgba(226, 225, 225, 1);
        color: rgba(10, 10, 10, 1);
        padding: 1em;
        margin: 2em auto;
}

                                        /* nur für erfolgreiche Aktionen mit Datenbank (Hintergrund: hell; Umrandung: rot */
.erfolgTable
{
        BORDER-RIGHT: rgba(10, 10, 10, 1) 1px solid;
        BORDER-TOP: rgba(10, 10, 10, 1) 1px solid;
        BORDER-LEFT: rgba(10, 10, 10, 1) 10px solid;
        BORDER-BOTTOM: rgba(10, 10, 10, 1) 1px solid;
        FONT-SIZE: 11px;
        background-color: rgba(226, 225, 225, 1);
        color: rgba(10, 10, 10, 1);
        padding: 1em;
        margin: 2em auto;
}

.anzeigekopf_tr {
        background: rgba(7, 52, 109, 1);
        background: rgba(11, 71, 131, 1);
}
.anzeigespalte_tr {
        background: rgba(52, 57, 62, 1);
}

.zentriert {
  margin-left:auto;
  margin-right:auto;
  /* border: thin solid; */
  text-align: center;
}



.antwort
{
 -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;
 border:1px solid #B9B9B9;
 padding:8px;
 padding-top:10px;
 padding-bottom:10px;
 background-image:url('../images/button.back.gif');
 background-repeat:repeat-x;
 background-color:#F2F2F2;
 color:#323131;
 display:inline-block;
 font-size:1.063em;
 margin-left:5px;
 width:calc(100% - 50px);
 margin-bottom:6px
}

.antwort:hover
{
 background-color:#eeeeee; font-weight:bold;
 background-image:url('../images/button.back.active.gif'); background-repeat:repeat-x;
}

.box
{
 -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
 border: 1px solid #EFF4F9;
 border: 0px solid #EFF4F9;
 background-color: rgba(85,85,85,1.0); /* dunkelgrau */
 margin-top:2px;    /* Änd 01.01.18 - alt 10px*/
 width:100%;
}

.box_intern
{
 padding:6px;       /* Änd 01.01.18 - alt 12px*/
 padding-bottom:0px /* Änd 02.01.18 */
}

.infobox2
{
 -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
 border: 1px solid #EFF4F9;
 background-color:#B7D6F6;
 padding:15px;
 margin-bottom:14px;
}

.infobox3
{
 -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
 border: 1px solid #FFF5E3;
 padding:15px;
 background-color:#F9B741;
 margin-bottom:14px;

}

.box_class_frage
 {
 -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
 border: 1% solid #FFF5E3;
 padding:1%;
 background-color:#FFF5E3;
 width:98%; float:left; margin-right:1%; text-align:center;

 /*margin-top:1%; */
 margin-bottom: 2%;
 color: black;
 }


/*  media Anweisung für große Breite am Bildschirm  ANFANG*/

 .box_class0
 {
 -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
 border: 1% solid #FFF5E3;
 padding:1%;
 background-color:#F9B741;
 width:14%; float:left; margin-right:1%; text-align:center;
 margin-top:1%;
 color: black;
 }

 .box_class1
 {
 -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
 border: 1% solid #FFF5E3;
 padding:1%;
 background-color:#F9B741;
 width:25%; float:left; margin-right:1%; text-align:center;
 margin-top:1%;
 color: black;
 }
 .box_class2
 {
 -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
 border: 1% solid #FFF5E3;
 padding:1%;
 background-color:#B7D6F6;
 width:25%; float:left; margin-right:1%; text-align:center;
 margin-top:1%;
 color: black;
 }

 .box_class3
 {
 -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
 border: 1% solid #FFF5E3;
 padding:1%;
 background-color:#FFF5E3;
 width:25%;
 float:left;
 margin-right:1%;
 text-align:center;
 margin-top:1%;
 color: black;
 }


         .box_class4
         {
         -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
         border: 0% solid #FFF5E3;
         padding:1%;
         background-color:#FFF0;
         width: 12%;
         float:left;
         margin-right:1%;
         text-align:center;
         margin-top:1%;
         color: white;
         }

/*  media Anweisung für große Breite am Bildschirm  ENDE */



@media only screen and ( max-width: 40em ) /* 1000   für kleine Bildschirme!!!!! */
 {
         .box_class0
         {
         -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
         border: 1% solid #FFF5E3;
         padding:1%;
         background-color:#F9B741;
         width:1%; float:left; margin-right:1%; text-align:center;
         margin-top:1%;
         color: black;
         }

         .box_class1
         {
         -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
         border: 1% solid #FFF5E3;
         padding:1%;
         background-color:#F9B741;
         width:15%; float:left; margin-right:1%; text-align:center;
         margin-top:1%;
         color: black;
         }
         .box_class2
         {
         -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
         border: 1% solid #FFF5E3;
         padding:1%;
         background-color:#B7D6F6;
         width:15%; float:left; margin-right:1%; text-align:center;
         margin-top:1%;
         color: black;
         }

         .box_class3
         {
         -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
         border: 1% solid #FFF5E3;
         padding:1%;
         background-color:#FFF5E3;
         width: 15%;
         float:left;
         margin-right:1%;
         text-align:center;
         margin-top:1%;
         color: black;
         }

         .box_class4
         {
         -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
         border: 0% solid #FFF5E3;
         padding:1%;
         background-color:#FFF0;
         width: 15%;
         float:left;
         margin-right:1%;
         text-align:center;
         margin-top:1%;
         color: white;
         }


#fixiert_unten {
  position: fixed;
  top: 87%;  /*91*/
  height: 13%; /*9*/
  left: 0%;
/*  right: 95%;*/
  width: 100%;
/*  padding: 0px;*/
  padding: 0em 0em;
  border-top: 0px solid white;                         /* rgba(0, 0, 0, 1); */
  border-radius: 0em 0em 0em  0em;

  background-color: rgba(64, 65, 66, 0.8);                      /* rgba(145,146,148); */
/*  background-image:
        url("icons/pfeil-oben2.jpg");
        height: 8em;
        outline: 0px solid;
        width: 10em;
        background-repeat: no-repeat;
*/

}


 }


.test {  font-size:1.231em; margin-left:10px; }
.text {  margin-left:5px; margin-top:8px; display:block; }


.levelbox_small_text
{
 font-size:0.75em;
/* color:black;		/*ÄND 24.04.25 - Zeichen wurden weiß dargestellt */
}

.levelbox_big_text
{
 font-size:1.113em;
 font-weight:bold;
/* color:black;		/*ÄND 24.04.25 - Zeichen wurden weiß dargestellt */
}

.levelbox_small_text_LS
{
 font-size:0.75em;
 color:black;		/*ÄND 24.04.25 - Zeichen wurden weiß dargestellt */
}

.levelbox_big_text_LS
{
 font-size:1.113em;
 font-weight:bold;
 color:black;		/*ÄND 24.04.25 - Zeichen wurden weiß dargestellt */
}


     /*  --------------------------------------- Menü Üben 02 */
.box_wortwahl
 {
 -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
 border: 1% solid #FFF5E3;
 padding:1%;
 background-color:#FFF5E3;
 /* width:28%; */
 float:left; margin-right:1%; text-align:center;
 /*margin-top:1%; */
 margin-bottom: 2%;
 color: black;
 }
.box_wortgewaehlt_TEST
 {
 background-color: grey;
 color: grey;
 }
.box_wortwahl:hover {}

.box_wortwahl_richtig
 {
 -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
 border: 1% solid #FFF5E3;
 padding:1%;
 background-color: green;
 /* width:28%; */
 float:left; margin-right:1%; text-align:center;
 /*margin-top:1%; */
 margin-bottom: 2%;
 color: white;
 font-size:0.8em;
 }
.box_wortwahl_richtig:hover {}

.box_wortgewaehlt
 {
 -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
 border: 1% solid #FFF5E3;
 padding:1%;
 background-color: grey;
 /* width:28%; */
 float:left; margin-right:1%; text-align:center;
 /*margin-top:1%; */
 margin-bottom: 2%;
 color: grey;
/* font-size:0.8em; --> führt dazu, dass die Spalte auseinander gerissen wird*/
 }
.box_wortgewaehlt:hover {}

.box_wortwahl_fehlt
 {
 -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
 border: 1% solid #FFF5E3;
 padding:1%;
 background-color: blue;
 /* width:28%; */
 float:left; margin-right:1%; text-align:center;
 /*margin-top:1%; */
 margin-bottom: 2%;
 color: white;
 font-size:0.8em;
 }
.box_wortwahl_fehlt:hover {}

.box_wortwahl_falsch
 {
 -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
 border: 1% solid #FFF5E3;
 padding:1%;
 background-color: red;
 /* width:28%; */
 float:left; margin-right:1%; text-align:center;
 /*margin-top:1%; */
 margin-bottom: 2%;
 color: white;
 font-size:0.8em;
 }
.box_wortwahl_falsch:hover {}

.box_vorschlag
 {
 -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
 border: 1% solid #FFF5E3;
 padding:1%;
 background-color: darkgrey;
 /* width:28%; */
 float:left; margin-right:1%; text-align:center;
 /*margin-top:1%; */
 margin-bottom: 2%;
 color: black;
 }
.box_vorschlag:hover { background-color: red;}

.box_text
 {
 -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
/*  border: 1% solid #FFF5E3; */
 padding:1%;
/* background-color: darkgrey; */
 /* width:28%; */
 float:left; margin-right:1%; text-align:center;
 /*margin-top:1%; */
 margin-bottom: 2%;
 color: black;
 }

/*###################################### modales Fenster ################# ANFANG*/
/* The Modal (background) */

.modal,
.modal2,
.modal3 {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 60%;
}


@media only screen and (min-width: 30em) {         /*  ------- Large screens ################# */
    /* Modal Content */
    .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 40%;
    }

}

/* The Close Button */
.close,
.close2,
.close3 {
    color: #aaaaaa;
    color: red;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus,
.close2:hover,
.close2:focus,
.close3:hover,
.close3:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

 /* Modal Header */
.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

/* Modal Body */
.modal-body {
    padding: 2px 16px;
    color: black;
}

/* Modal Footer */
.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    animation-name: animatetop;
    /*animation-duration: 0.4s */
    animation-duration: 0.2s
}

/* Add Animation */
@keyframes animatetop {
    from {top: -30px; opacity: 0}
    to {top: 0; opacity: 1}
}

/*@keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}
*/

/*###################################### modales Fenster ################# ENDE*/


 /*
.button {                           button ist doppelt!!!
    height: 30px;
    width:100%;
    line-height: 30px;
    padding: 0 15px;
    border: 1px solid #ccc;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}
*/





/*
Farben:

rgba(0, 0, 0, 1)        schwarz
rgba(10, 10, 10, 1)     schwarz grau
rgba(255, 255, 255, 1)  weiß

rgba(85,85,85,1.0)      dunkelgrau

rgba(43, 64, 1, 1)      dunkelgrün
rgba(58, 119, 57, 0,7)  dunkelgrün

rgba(7, 52, 109, 1)     dunkelblau
rgba(44, 92, 152, 1)    dunkelblau


<Farbe Text>
<Farbe Hintergrund>
<Farbe Hintergrund Rand>
<Hamburger Menü>
<Menü>

*/