/*Main Layout */

 /* Allgemein */


      @font-face {font-family: 'toff';
                src: url('../../grafics/fonts/icons.ttf') format('truetype'),
                     url('../../grafics/fonts/icons-webfont.woff') format('woff'),
                     url('../../grafics/fonts/icons-webfont.woff2') format('woff2');

             }
      @font-face {
            font-family: 'icons';
                src: url(../../grafics/fonts/icons-webfont.woff) format('woff'),
                     url(../../grafics/fonts/icons-webfont.woff2) format('woff2'),
                     url(../../grafics/fonts/icons.ttf) format('truetype');

             }

      @font-face {
            font-family: 'din1451m';
                src: url(../../grafics/fonts/din1451m.woff) format('woff'),
                     url(../../grafics/fonts/din1451m.woff2) format('woff2'),
                     url(../../grafics/fonts/din1451m.ttf) format('truetype');
                }

      @font-face {
            font-family: 'Segoeui';
                src: url(../../grafics/fonts/segoeui.woff) format('woff'),
                     url(../../grafics/fonts/segoeui.woff2) format('woff2'),
                     url(../../grafics/fonts/segoeui.ttf) format('truetype');
                }





 /* Body und Grundsettings */
  *,* ::before, *::after {
      box-sizing: border-box;
  }

  body{

       background-image: linear-gradient(to top, hsla(220, 100%, 0%, 0.2) 0%, transparent 60%),
                         linear-gradient(108deg, transparent 55%, hsla(220, 100%, 0%, 0.9) 55%, hsla(220, 100%, 0%, 0.8) 55.5%, transparent 58%),
                         linear-gradient(50deg, hsla(220, 100%, 9%, 0.1) 10%, hsla(220, 100%, 0%, 0.9) 10%, hsla(220, 100%, 0%, 0.8) 10.5%, transparent 15%),
                         radial-gradient(circle at 65% 5%, hsla(220, 0%, 35%, 1) 10%, hsla(220, 0%, 05%, 1) 100%);
       background-size:100% 100%;
       background-position: center center;
       background-repeat: no-repeat;

       font-family:var(--textbodyart);
       color:var(--textmaincolor);
       font-size:0.95em;
       /*background-attachment: fixed; */
       }

   table {
         border-collapse: collapse;
         }

   label {
        cursor: pointer;
    }

   form { display: contents;}

 /* Topleiste */

    maintopic{
            position:fixed;
            background-color: var(--cb-backgroundl);
            left:0px;
            top:0px;
            width:100%;
            height:var(--topmenueheight);
            z-index:99;
            display:flex;
            justify-content: space-between;
            align-content: center;
            }

    .maintopiccell {
        display:flex;
        flex-basis: content;
        margin:calc(var(--topmenueheight)*0.1);
        min-width:calc(var(--topmenueheight)*0.8);
        align-items:center;
        text-align: center;

    }
        .datecell {
            flex:1 1 content;
            display:flex;
            justify-content: space-between;
            align-items:center;
        }

        .datecell .txt{
            width:calc(var(--topmenueheight)*2.5);
            text-align:center;
            line-height:120%;
            font-weight:normal;
            font-size:1.2em;
        }

        .iconcell{
            width:cal(var(--topicicondim)+1);
            flex:1 1 content;
            display:flex;
            justify-content: center;
            align-items:center;
            vertical-align:middle;
        }

        .iconbutton {
            align-items:center;
            width:var(--topicicondim);
            height:var(--topicicondim);
            cursor:pointer;
        }




/* Menues */

    .mtbcheck[type="checkbox"]{
        display:none;
    }
    .mtbcheck[type="checkbox"]:checked ~ mainmenue{
        left:0em;
    }

   mainmenue {position:fixed;
             display:block;
             top:var(--topmenueheight);
             bottom:0px;
             width:var(--mainmenuewith);
             background-color:rgba(0,0,0,0.3);
             background-image:linear-gradient(180deg, rgba(var(--darkbgcolor),0.25) 0, transparent 1em),
                              linear-gradient(90deg, rgba(var(--darkbgcolor),0.25) 0, transparent 1em),
                              linear-gradient(120deg, var(--cb-backgroundd) 0%, var(--cb-backgroundl) 100%);

             /* box-shadow: .2em 0 .6em #2F2F2F;  */
             -moz-transition:all 200ms ease-in-out;
             -webkit-transition:all 200ms ease-in-out;
             -o-transition:all 200ms ease-in-out;
             -transition:all 200ms ease-in-out;

             color:var(--light_text_color);
             overflow-y:hidden;
             z-index:97;
             backdrop-filter: blur(5px);

             }

             .mmuser    {  flex:1;
                       display:block;
                       padding:1em 1em;
                       text-align:center;
                       }

             .mmlogo    {  flex:1;
                       text-align:center;
                       padding-bottom:1em;}

             menuegroup{
                       display:block;
                       margin:0.6em 1em;
                       font-size:0.8em;
                       color:var(--middle_text_color);
                       }

             menuelink{
                       display:block;
                       font-weight:normal;
                       padding:0.6em 0.8em;
                       font-size:1em;
                       background: none;
                       transition: background 750ms;
                       cursor:pointer;
             }
             menuelink a:hover, menuelink a:focus,  menuelink a:active {
                         color:var(--dark_text_color);
                         text-decoration:none;
                         }
             menuelink a, menuelink a:link, menuelink a:visited {
                         color:var(--light_text_color);
                         text-decoration:none;
                         }


             menuelink .fonticon{  display:inline-block;
                                   font-weight:100;
                                   font-size:2em;
                                   width:1.4em;
                                   vertical-align:middle;
                                   text-align:center;}

             menuelink:hover, menuelink:focus {

                        background:var(--cb-backgroundd);
                        color:var(--dark_text_color);
             }

   .submenue, .mansubmenue {
             position:fixed;
             left:calc(var(--mainmenuewith)+0.6em);
             top:var(--topmenueheight);
             right:0;
             height:var(--submenueheight);
             background-image:  linear-gradient(90deg, rgba(var(--darkbgcolor),0.25) 0, transparent 1em),
                                linear-gradient(180deg, rgba(var(--darkbgcolor),0.25) 0, transparent 1em),
                                linear-gradient(70deg, var(--cb-backgroundl) 0%,  var(--cb-backgroundd) 25%,  var(--cb-backgroundm) 45%);
             z-index:96;
             backdrop-filter: blur(50px);
             white-space: nowrap;
             overflow-x: auto;
             overflow-y:hidden;
             }


             .submenue::-webkit-scrollbar, .mansubmenue::-webkit-scrollbar{
                     width: 0px;
                     height: 0px;
             }

            submenuelink, .smdd{

                       color:var(--light_text_color);
                       display:inline-block;
                       font-weight:;
                       padding:0.6em 2em;
                       font-size:1em;
                       transition: color 750ms, background-color 750ms;
                       /*width:fit-content; */

             }

             submenuelink .activepage{
                       color:var(--light_text_color);

             }

            submenuelink a:hover, submenuelink a:focus,  submenuelink a:active,
                        .smdd:hover, .smdd:focus
                        {
                         color:var(--light_text_color);
                         text-decoration:none;

                }
               submenuelink:hover, submenuelink:focus {
                    background-color:var(--cb-backgroundd);

                }



            submenuelink a, submenuelink a:link, submenuelink a:visited {
                         color:var(--middle_text_color);
                         text-decoration:none;
                         }

            .smdd {
                border-bottom:1px solid #FFFFFF;
                font-size:1rem;
                background-image:linear-gradient(315deg, #FFFFFF 0.5em, transparent 0.5em);



            }


            .smddcontent {
                padding:1em;
                border:1px solid rgb(var(--darkbordercolor));
                background-image:
                                linear-gradient(120deg, rgba(var(--mainmenuecolor),0.95) 0%, rgba(var(--mainmenuecolor),1.00) 50%, rgba(var(--mainmenuecolor),0.90) 100%);
                /*box-shadow: inset .2em 0 .6em #2F2F2F;  */
                color:rgb(var(--darktextcolor));
                }

/*Mainpage*/

   .main     {
             position:fixed;
             bottom:0;
             right:0;
             overflow-y:auto;}


             .main.sub{     /* Seitenanfang MIT Submenue */
                   top:calc((var(--topmenueheight)) + (var(--submenueheight)));
                   }

             .main.nosub{   /* Seitenanfang OHNE Submenue */
                   top:var(--topmenueheight);
                   }


            .content {
                position: absolute;
                inset:0;
                margin:auto;
                display:grid;
                grid-template-rows: min-content;
                grid-auto-flow: dense;
                grid-gap:1em;
                /*backdrop-filter: blur(5px); */
                padding:1em;
                overflow-x: no-content;
                overflow-y: auto;
                align-content: flex-start;

            }

            .content_box {
                overflow: visible;
                font-size:0.8em;
                z-index: 1;

            }

            @media (max-width:420px){

                .content {grid-template-columns: repeat(4, minmax(1rem, 1fr));}
                .content_box {font-size:0.7em;}
                .gw1{grid-column:span 1;}
                .gw2{grid-column:span 2;}
                .gw3{grid-column:span 4;}
                .gw4{grid-column:span 4;}
                .gw5{grid-column:span 4;}
                .gw6{grid-column:span 4;}
                .gw7{grid-column:span 4;}
                .gw8{grid-column:span 4;}
                .gw9{grid-column:span 4;}

            }

            @media (max-width: 770px) and (min-width: 421px) {

                .content {grid-template-columns: repeat(4, minmax(1rem, 1fr));}
                .content_box {font-size:0.7em;}
                .gw1{grid-column:span 2;}
                .gw1 .cb-topic{grid-template-columns:1fr !important; }
                .gw2{grid-column:span 2;}
                .gw3{grid-column:span 4;}
                .gw4{grid-column:span 4;}
                .gw5{grid-column:span 4;}
                .gw6{grid-column:span 4;}
                .gw7{grid-column:span 4;}
                .gw8{grid-column:span 4;}
                .gw9{grid-column:span 4;}

            }

            @media (max-width: 1280px) and (min-width: 771px){

                .content {grid-template-columns: repeat(10, minmax(1rem, 1fr));}
                .content_box {font-size:0.7em;}
                .gw1{grid-column:span 3;}
                .gw1 .cb-topic{grid-template-columns:1fr !important;}
                .gw2{grid-column:span 4;}
                .gw3{grid-column:span 5}
                .gw4{grid-column:span 6;}
                .gw5{grid-column:span 8;}
                .gw6{grid-column:span 10;}
                .gw7{grid-column:span 10;}
                .gw8{grid-column:span 10;}
                .gw9{grid-column:span 10;}

            }

            @media (max-width: 1920px) and (min-width: 1281px){

                .content {grid-template-columns: repeat(18, minmax(1.5rem, 1fr));}
                .content_box {font-size:0.8em;}  
                .gw1{grid-column:span 3;}
                .gw1 .cb-topic{grid-template-columns:1fr !important;}
                .gw2{grid-column:span 6;}
                .gw3{grid-column:span 9;}
                .gw4{grid-column:span 12;}
                .gw5{grid-column:span 15;}
                .gw6{grid-column:span 18;}
                .gw7{grid-column:span 18;}
                .gw8{grid-column:span 18;}
                .gw9{grid-column:span 18;}

            }

            @media (min-width: 1921px){

                .content {grid-template-columns: repeat(36, minmax(2em, 1fr));}
                .content_box {font-size:0.9em;}
                .gw1{grid-column:span 4;}
                .gw1>.cb-topic{grid-template-columns:1fr;}
                .gw2{grid-column:span 8;}
                .gw3{grid-column:span 12;}
                .gw4{grid-column:span 16;}
                .gw5{grid-column:span 20;}
                .gw6{grid-column:span 24;}
                .gw7{grid-column:span 28;}
                .gw8{grid-column:span 32;}
                .gw9{grid-column:span 36;}

            }