@charset "utf-8";

/* Reset default browser CSS */

:root{
--max-size: 12;
--min-size: 10;
--max-width: 100;
--min-width: 80;
--min-height: 200;
--max-height: 100;
--master-background: #9EC2FF;
--akzent-bg1: #BEE5F4;
--akzent-bg2: #9BD6EE;
--akzent-bg4: #87CEEB;
--akzent-bg5: #2EAADC;
}

/* icofont fuer die Icons */
@font-face{
    font-family: 'Icofont';
    font-weight: normal;
    font-style: normal;
    src:url('../../fonts/icofont/icofont.eot') format("eot"),
    url('../../fonts/icofont/icofont.woff2') format("woff2"),
    url('../../fonts/icofont/icofont.woff') format("woff"),
    url('../../fonts/icofont/icofont.ttf') format("true-type"),
    url('../../fonts/icofont/icofont.svg') format("svg");
    }



*{
    padding: 0;
    margin: 0;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    -ms-word-wrap: break-word;
     word-wrap: break-word;

     /* Non standard for WebKit */
     word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;

         /* Calculation */
    --diff-height: calc(var(--max-height) - var(--min-height));
    --responsive-height: calc((var(--min-height) * 1px) + var(--diff-height) * ((100vh - 600px) / (1500 - 600))); /* Ranges from 801px to 1499px */

         /* Calculation */
    --diff-width: calc(var(--max-width) - var(--min-width));
    --responsive-width: calc((var(--min-width) * 1px) + var(--diff-width) * ((100vw - 400px) / (3000 - 400))); /* Ranges from 401px to 2999px */

        /* Calculation */
    --diff: calc(var(--max-size) - var(--min-size));
    --responsive-size: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 400px) / (3000 - 400))); /* Ranges from 401px to 2999px */



}

div.slider{
    position: relative;
    display: block;
    max-width: 800px;
    aspect-ratio: 1 / 0.72;
    width: 85%;
    height: auto;
    padding: 0;
    margin: 0;

}

div.slider span.forward,
div.slider span.back,
div.slider span.close{
    position: absolute;
    z-index: 10;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    background-color: #eeeeee;
    color: #323323;
    border-radius: 50%;

}

div.slider span.forward{
    font-size: 2rem;
    top: 45%;
    right: -1rem;
    transform: translateY(-50%);
}

div.slider span.back{
    font-size: 2rem;
    top: 45%;
    left: -1rem;
    transform: translateY(-50%);

}

div.slider span.close{
    font-size: 1.0rem;
    top: -1rem;
    right: -1rem;

}

div.slider span:hover{
    cursor: pointer;
}

div.slider figure{
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: auto;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    transition: all 500ms ease-in-out;
}

div.slider figure img{
    position: relative;
    display: block;
    max-width: 800px;
    aspect-ratio: 1 / 0.67;
    width: 100%;
    height: auto;
    border: 2px solid #eeeeee;
    object-fit: cover;
    object-position: center center;
}

div.slider figure.portrait img{
    aspect-ratio: auto;
    width: auto;
    height: 100%;
    margin: 0 auto;
}

div.slider figure.show{
    opacity: 1;
    visibility: visible;
    z-index: 1;

}

div.slider figure figcaption{
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 2rem;
    width: 100%;
    height: auto;
    color: #ffffff;
    padding: 0 5px;
    margin: 0;

}

.siteline-1{
    border-left: 1px solid #888888;
    border-right: 1px solid #888888;
}

.siteline-2{
    border-left: 2px solid #888888;
    border-right: 2px solid #888888;
}


.align-left{
    text-align: left;
}
.align-center{
    text-align: center;
}
.align-right{
    float: right;
    text-align: right;
}

.padding-top1{
    padding-top: 1rem;
}
.padding-top2{
    padding-top: 2rem;
}
.padding-top3{
    padding-top: 3rem;
}
.padding-top4{
    padding-top: 4rem;
}


div.banner-image{
    position: relative;
    display: inline-block;
    --min-height: 75;
    --max-height: 100;
    min-height: var(--responsive-height);
    width: 100%;
    height: auto;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
     -o-background-size: cover;
    background-size: cover;
    padding: 0;
    margin: 0;
}

div.top-banner{
    z-index: 25;
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    --min-height: 75;
    --max-height: 100;
    min-height: var(--responsive-height);
    max-width: 400px;
    width: 100%;
    height: auto;
    --max-size: 15;
    --min-size: 13;
    font-size: var(--responsive-size);
    background-color: var(--master-background);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
     -o-background-size: 100% 100%;
    background-size: cover;
    padding: 0;
    margin: 0;
}

div.top-banner div.neutral{
    position: relative;
    display: block;
    min-height: inherit;
    max-height: inherit;
    width: 100%;
    height: 100%;
}

div.top-banner div.img-bg{
    position: relative;
    display: block;
    min-height: inherit;
    max-height: inherit;
    width: 100%;
    height: 100%;
    background-color: hsla(0, 0%, 68%, 0.2);
    color: #ffffff;
    text-shadow: 1px 1px 1px #000000;
}

div.top-banner > h3{
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    width: 100%;
    height:auto;

}

div.top-banner > h2{
    position: absolute;
    left: 3vw;
    bottom: 3.5vh;
    display: inline-flex;
    flex-direction: column;
    width: auto;
    height: auto;
    --max-size: 22;
    --min-size: 18;
    font-size: var(--responsive-size);
    border-radius: 8px;
    padding: 5px 20px;
}

ul.banner-navi{
    position: absolute;
    top: 10px;
    right: 1.5rem;
    width: auto;
    height: auto;

}

span.navi-menu{
    position: absolute;
    z-index: 5;
    right: 0;
    top: 0;
    display: inline-flex;
    justify-content: flex-end;
    align-items: flex-start;
    align-self: flex-end;
    width: auto;
    height: 3rem;
    padding: 8px 8px 0 0;
    margin: 0;

}

span.navi-menu span.icon{
    position: absolute;
    right: 0;
    z-index: 1;
    order: 3;
}


span.navi-menu ul.sub-button{
    order: 1;
    z-index: 5;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 2px;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    width: auto;
    height: auto;
    background-color: #ffffff;
    border: 1px solid #aaaaaa;
    box-shadow: 3px 3px 2px #000000;
    border-radius: 8px;
    padding: 0.3rem 1rem 0.3rem 1rem;
    margin: 0;
    transition: all 350ms ease-in-out;

}

ul.sub-button.show,
span.navi-menu:hover ul.sub-button{
    max-width: 20rem;
    opacity: 1;
    visibility: visible;

}
span.navi-menu ul.sub-button li{
    position: relative;
    display: inline-block;
    width: auto;
    height: auto;
    border: none;
    padding: 0;
    margin: 0;
}



span.navi-menu ul.sub-button li a{
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    color: #323323;
    font-size: 12px;
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    transition: 600ms all ease-in-out;
    padding: 2px 5px;
    margin: 0;
}

span.navi-menu ul.sub-button li a:hover{
    color: #000000;
    cursor: pointer;
    text-decoration: underline;
}


div.top-banner p{
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    height:auto;

}


div.top-banner p.absolute-bottom{
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height:auto;
    padding: 5px 10px;

}

div.top-banner p span{
    width:auto;
    height: auto;
    }

div.top-banner.absolute{
    position: absolute;
    left: 0;
    top: 0;
    max-width: none;
    width: 100%;

}


div.top-banner.sticky{
    position: sticky;
    left: 0;
    top: 0;
    max-width: 800px;
    width: 100%;
}

div.top-banner.member-banner,
div.top-banner.bg-height{
    --min-height: 100;
    --max-height: 150;
    min-height: var(--responsive-height);
    max-height: var(--responsive-height);
}


div.top-banner.group-banner h2{
    position: absolute;
    left: 3vw;
    bottom: 3.5vh;
    display: inline-flex;
    flex-direction: column;
    width: auto;
    height: auto;
    --max-size: 20;
    --min-size: 16;
    font-size: var(--responsive-size);
    border-radius: 8px;
    padding: 5px 20px;
}


div.group-description{
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    max-height: 0;
    max-width: 30rem;
    width: 95%;
    height: auto;
    background-color: #ffffff;
    color: #323323;
    border: 1px solid #323323;
    border-radius: 0 0 5px 5px;
    padding: 10px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 500ms ease-in-out, opacity 480ms ease-in-out, visiility  480ms ease-in-out;
}

div.group-description.show{
    z-index: 1;
    opacity: 1;
    visibility: visible;
    max-height: 20rem;
    overflow-y: auto;
}

/*
div.top-banner.member-banner{
    --min-height: 100;
    --max-height: 150;
    min-height: var(--responsive-height);
    max-height: var(--responsive-height);

}
*/
div.top-banner.member-banner h2{
    position: absolute;
    left: 3rem;
    bottom: 2rem;
    width: auto;
    height: auto;
    padding: 5px 20px;
}

div.top-banner.member-banner div.profil-image{
    position: absolute;
    right: 3vw;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    aspect-ratio: 1 / 1;
    max-width: 10rem;
    width: auto;
    height: 80%;

}
div.top-banner.member-banner div.profil-image div.bg-image{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    background-color: hsla(0, 0%, 0%, 0.2);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
     -o-background-size: cover;
    background-size: cover;
    overflow: hidden;
    border-radius: 50%;
    color: #ffffff;

}

.min-height10{
    min-height: 10rem;
}

.min-height11{
    min-height: 11rem;
}

.min-height12{
    min-height: 12rem;
}

.min-height13{
    min-height: 13rem;
}

.min-height14{
    min-height: 14rem;
}

.min-height15{
    min-height: 15rem;
}

div.div-square,
div.div-round{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    max-width: 3rem;
    width: 100%;
    height: auto;
    overflow: hidden;

    padding: 0;
    margin: 3px 10px 3px 5px;
}

.zusatz{
    align-content: center;
    --max-size: 18;
    --min-size: 16;
    font-size: var(--responsive-size);
    font-family: Verdana, Geneva, sans-serif;
    font-weight: bold;
    border: 1px solid #333333;
    padding: 0 5px;

}

div.div-square.small{
    max-width: 2.5rem;
}

div.div-round.small{
    max-width: 2.25rem;
}

div.div-round{
    border-radius: 50%;
}

div.div-square{
    border-radius: 8px;
}

div.div-square img,
div.div-round img {

    width: 100%;
    height: 100%;
    object-position: center center;
    object-fit: cover;
    padding: 0;
    margin: 0;

}


div.button-center{
       position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    height: auto;

}


.btn,
a.btn{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 10rem;
    width: auto;
    height: auto;
    white-space: wrap;
    --max-size: 15;
    --min-size: 12;
    font-size: var(--responsive-size);
    border-radius: 4px;
    padding: 3px 8px;
    margin: 3px;
}

a.btn{

    min-height: 2.5rem;
    max-width: 10rem;
    width: auto;
    text-decoration: none;
    margin: 0;
}

a.btn:hover{
    color: #323323;
   cursor: pointer;

}


.btn-filter{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    text-transform: uppercase;
    font-weight: bold;
    --max-size: 15;
    --min-size: 14;
    font-size: var(--responsive-size);
    border-radius: 4px;
    padding: 3px 0;
    margin: 0 5px;
}

.btn-filter span.icon{
    font-size: 24px;
    font-weight: normal;
     transition: all 250ms linear;
    }
.btn-filter:hover span.icon{
     transform: rotate(45deg);
     background-color: #000000;
     color: #eeeeee;
    }

span.absolute-bottom{
    position: relative;
    z-index: 5;
    left: 0;
    top: 100%;
    display: inline-block;
    max-width: inherit;
    width: inherit;
    height: auto;
    text-align: right;
    font-size: 12px;
    background-color: inherit;
    padding: 0 15px 0 0;
    margin: 0;
}

span.del-icon{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    max-width: 1.75rem;
    width: 100%;
    height: auto;
    font-family: Icofont;
    --max-size: 18;
    --min-size: 15;
    font-size: var(--responsive-size);
    background-color: #ffffff;
    color: #323323;
    border-radius: 50%;
    padding: 5px;
    margin: 3px;
}



.font-size9{
    font-size: 9px;
}
.font-size10{
    font-size: 10px;
}
.font-size11{
    font-size: 11px;
}
.font-size12{
    font-size: 12px;
}

.font-size13{
    font-size: 13px;
}
.font-size14{
    font-size: 14px;
}

a.text-link{
    text-decoration: underline;
    font-weight: bold;
}


*[data-href]:hover,
a:hover{
    cursor: pointer;
}

span.absolute{
    position: absolute;
    display: inline-flex;
    align-items: center;
    align-content: center;
    gap: 10px;
    top: 5px;
    right: 10px;
    width: auto;
    height: auto;
}

span.absolute-50{
    position: absolute;
    display: inline-flex;
    align-items: center;
    align-content: center;
    gap: 10px;
    top: 0;
    right: 10px;
    width: auto;
    height: 100%;
}

span.dummy,
span.icon{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: auto;
    font-size: 1.35rem;
  font-family: "Icofont";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  line-height: 1;
/* Better Font Rendering =========== */
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
   overflow: hidden;
    padding: 0;
   margin: 0;
}

span.entry-icon{
    position: absolute;
    display: inline-flex;
    align-items: flex-end;
    top: 1vh;
    left: 1vw;
    width: 1.5em;
    height: 2.5em;
    background-color: #eeeeee;
    border: 1px solid #000000;
    border-radius: 3px;
    color: #323323;
    overflow: visible;
    transform: skewY(-10deg);
    padding: 0 0 5px 5px;
}

span.entry-icon span.icon{
    overflow: visible;
    color: #000000;
    text-shadow: 1px 1px 1px #ffffff;
}

span.dummy{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 80%;
    color: hsla(39, 100%, 50%, 1);
    --max-size: 144;
    --min-size: 120;
    font-size: var(--responsive-size);
}

/*----------Werbung-----------------*/

div.werbung{
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-content: space-between;
    flex-wrap: wrap;
    width: 96%;
    height: auto;
    padding: 0;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
     -o-background-size: cover;
    background-size: cover;
    margin: 1rem auto;
    border: 1px solid #666666;
}

div.werbung::before{
    content: 'Anzeige';
    position: absolute;
    top: -15px;
    right: 8px;
    width: auto;
    height: auto;
    font-size: 12px;
    color: #666666;
    padding: 0;
    margin: 0;

}


div.werbung.square-200x200{
    padding: 1rem 0.5rem;
    max-width: 200px;
    min-height: 200px;
    max-height: 200px;
}


div.werbung.square-250x250{
    padding: 1rem 0;
    max-width: 250px;
    min-height: 250px;
    max-height: 250px;
}


div.werbung.inline-300x250{
    padding: 1.5rem 0.5rem;
    max-width: 300px;
    min-height: 250px;
    max-height: 250px;

}


div.werbung.inline-336x280{
    padding: 1.5rem 0.5rem;
    max-width: 336px;
    min-height: 280px;
    max-height: 280px;
}

div.werbung.skyscraper-120x600{
    padding: 5rem 0.5rem;
    max-width: 120px;
    min-height: 600px;
    max-height: 600px;
}

div.werbung.skyscraper-160x600{
    padding: 5rem 0.5rem;
    max-width: 160px;
    min-height: 600px;
    max-height: 600px;
}

div.werbung.banner-468x60{
    padding: 0.5rem 1rem;
    max-width: 468px;
    min-height: 60px;
    max-height: 60px;
}

div.werbung.banner-468x60 p,
div.werbung.banner-468x60 a{
    max-height: 1.5em;
    overflow: hidden;

}


div.werbung.banner-728x90{
    padding: 0.5rem 1rem;
    max-width: 728px;
    min-height: 90px;
    max-height: 90px;
}


 .banner-layout1{

     background-color: #002266;
     color: #eeeeee;
 }

 .banner-layout1 p{
     position: relative;
     width: 95%;
     height: auto;
    text-align: center;
     margin: 0;

 }

div.werbung.skyscraper-160x600.banner-layout1 p{
    --max-size: 24;
    --min-size. 18;
    font-size: var(--responsive-size);
}


 .banner-layout1 a{
    position: relative;
    width: 95%;
    height: auto;
    text-align: center;
    color: inherit;
    margin: 0;
    text-decoration: none;
 }

 .banner-layout1 a:hover{
    text-decoration: underline;
 }



/*--------------Figure------------------------------*/
figure.member-image {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    max-width: 180px;
    width: 100%;
    height: auto;
    border: 1px solid #666666;
    padding: 0;
    margin: 5px auto;
}


figure.member-image div{
    position: relative;
    display: inline-block;
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
}


figure.member-image div img{
    position: relative;
    display: block;
    max-width: max-content;
    max-height: max-content;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
}


figure.member-image figcaption{
    position: relative;
    display: inline-flex;
     justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    background-color: rgba(0, 0, 51, 0.6);
    color: #ffffff;
    padding: 5px 0;
    margin: 0;
}



/*-----------------Formulare-------------------------*/
div.formular{
    all: unset;
    position: relative;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    justify-items: flex-start;
    align-content: center;
    align-items: center;
    gap: 0;
    width: 98%;
    height: auto;
    background-color: #fefefe;
    color: #333333;
    border-radius: 5px;
    overflow: hidden;
    padding: 0 0 1.75rem;

}


div.formular.maxheight{
    max-height: 90%;
    height: 90%;
    overflow-y: auto;
    padding: 0;
}

div.formular > h3,
div.formular > blockquote,
div.formular div.table,
div.formular > footer{
    position: relative;
    display: inline-block;
    width: 100%;
    height: auto;
    padding: 5px 15px;
    margin: 0;
}


div.formular > h3{
    --max-size: 15;
    --min-size: 14;
    font-size: var(--responsive-size);

}



div.formular > h3:first-child{
    --max-size: 17;
    --min-size: 15;
    font-size: var(--responsive-size);

}


div.formular div.gallery {
    position: relative;
    display: inline-grid;
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    grid-template-rows: auto;
    grid-column-gap: 7px;
    grid-row-gap: 7px;

    width: 100%;
    height: auto;
    padding: 10px;
    margin: 0;
}

div.formular div.gallery img{
    width: 100%;
    height: auto;
}

div.formular div.table {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 1rem auto;
}

div.formular div.table div.tr{
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
}

div.formular div.table div.tr p{
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    --max-size: 14;
    --min-size: 12;
    font-size: var(--responsive-size);

    padding: 5px 10px;
    margin: 0;
}


div.formular > h3 span.icon{
    font-size: 1.35rem;
}

div.formular > form{
    max-width: 80%;
    padding: 1rem 2rem 0;
}



div.formular > blockquote{
    max-height: 60vh;
    min-height: 10vh;
    overflow-y: auto;
    padding: 25px 36px;

}

.list-button{
    position: relative;
    display: inline-flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: flex-start;
    gap: 10px;
    max-height: none;
}
.list-button a{
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    background-color: #aaaaaa;
    color: #323323;
    border: 1px solid #323323;
    border-radius: 5px;
    padding: 5px 10px;
    margin: 5px;
}
.list-button a:hover{
    cursor: pointer;
}

.list-button a.active{
    background-color: #00aa00;
    color: #ffffff;
}

div.formular > footer{
    text-align: center;

}

div.formular > footer a{
    font-size: 12px;
    color: #333333;
    text-decoration: none;
}

div.formular > footer a:hover{
    cursor: pointer;
    text-decoration: underline;
}

div.formular p.row{
    position: relative;
    display: inline-block;
    float: left;
    width: 90%;
    height: auto;
    margin: 5px auto;
}

div.formular p.row label{
    position: relative;
    display: inline-block;
    float: left;
    width: min(8em,25%);
    height: auto;
}

div.formular p.row input{
    max-width: min(15em,60%);
}


/*------------Layout-content---------------*/


div.formular.layout-content{
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    justify-items: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    border-radius: 0;
    --max-size: 15;
    --min-size: 13;
    font-size: var(--responsive-size);
    margin: 2rem auto;
}

div.formular.layout-content > *{
    position: relative;
    display: inline-block;
    max-width: 50rem;
    width: 80%;

}

div.formular.layout-content > h3{
    padding: 5px 15px;
    margin: 1rem auto 0.5rem;
}

div.formular.layout-content > h3:first-child{
    max-width: none;
    width: 95%;
    padding: 15px 0 0 25px;
    margin: 0 auto 1.5rem;

}

div.formular.layout-content blockquote{
    position: relative;
    max-height: none;
    min-height: 1rem;
    padding: 5px 36px;
    margin: 0 auto 1.5rem;
    
}

div.formular.layout-content blockquote h3{
    width: 100%;
    padding: 5px 15px;
    margin: 1rem auto 0.2rem !important;

}
div.formular.layout-content p{
    position: relative;
    padding: 0;
    margin: 0 auto 0.5rem;
}

div.formular.layout-content p label{
    position: relative;
    display: inline-block;
    max-width: 10rem;
    width: 100%;
    height: auto;
    font-weight: bold;
    padding: 0;
    margin: 0 2rem 0 0;
}


/*------------Layout-1----------------------*/


div.formular.layout-1 > h3{
    background-color: #e5e5e5;
    color: #323323;
}


div.formular.layout-1 {
    border: 1px solid #e5e5e5;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.27), -3px 3px 5px rgba(0, 0, 0, 0.27);

}


/*------------Layout-inbox----------------------*/

div.formular.layout-inbox {
    max-width: 18rem;
    min-height: 20vh;
    max-height: 90vh;
    background-color: #f6f6f6;
}

div.formular.layout-inbox > h3{
    background-color: #e6e6e6;

}


/*------------Layout-2----------------------*/


div.formular.layout-2 {
    border: 0px solid #e5e5e5;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.27), -1px 1px 2px rgba(0, 0, 0, 0.27);

}


div.formular.layout-2 > h3{
    background-color: #f4f4f4;
    color: #323323;
    border-bottom: 1px solid #aaaaaa;
}


/*------------Layout-3----------------------*/


div.formular.layout-3{
    border: 1px solid #bcbcbc;
    border-radius: 0.7rem;
    background-color: #ffffff;
    overflow: hidden;
    padding: 0;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    margin 2rem auto;
}

/*------------Layout-4----------------------*/

div.formular.layout-4{
    background-color: transparent;
    margin 2rem auto;
}


div.formular.layout-4 blockquote{
    min-height: 6rem;
    padding: 15px 36px;
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.23);
    margin: 0 auto 0.5rem;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;

}

/*------------Layout-5----------------------*/



div.formular.layout-5{
    border: 1px solid #006699;
    box-shadow: 8px 10px 15px rgba(0, 0, 0, 0.27), -8px 10px 15px rgba(0, 0, 0, 0.27);
    z-index: 10000;
}

div.formular.layout-5 > h3{
    background-color: #006699;
    color: #ffffff;

}


/*------------Layout-6----------------------*/

/*------------Layout-7----------------------*/

/*------------Layout-8----------------------*/

/*------------Layout-Form----------------------*/


div.formular.layout-form {
    border: 0px solid #e5e5e5;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.27), -1px 1px 2px rgba(0, 0, 0, 0.27);

}


div.formular.layout-form > h3{
    background-color: #f4f4f4;
    color: #323323;
    border-bottom: 1px solid #aaaaaa;
}


div.formular.layout-form form{
    gap: 0;
    max-width: none;
    width: 100%;
    padding: 0 0 2rem;
}

div.formular.layout-form form h3.form-check{
    max-width: none;
    width: 100%;
}

div.formular.layout-form form select,
div.formular.layout-form form input{
    max-width: none;
    width: 95%;
    margin: 0 auto 5px;
}

 .font-red{
     color: #cc0000;
 }

 .font-blue{
     color: #0000FF;
 }

 .font-orange{
     color: #FFA500;
 }

 .font-green{
     color: #228822;
 }

 .font-violet{
     color: #8B008B;
 }


 .bg-red{
     background-color: #cc0000;
    color: #ffffff;
 }

 .bg-blue{
    background-color: #1E85AE;
    color: #ffffff;
 }

 .bg-orange{
     background-color: #FFA500;
    color: #333333;
 }

 .bg-weiss{
     background-color: #ffffff;
    color: #333333;
 }

 .bg-green{
     background-color: #228822;
    color: #ffffff;
 }

 .bg-violet{
    background-color: #8B008B;
    color: #ffffff;
 }


/*---------------Max-Width--------------------------*/

.max-auto{
max-width: none;
width: auto !IMPORTANT;
}
.max2{
max-width: 2rem !IMPORTANT;

}
.max3{
max-width: 3rem !IMPORTANT;

}
.max4{
max-width: 4rem !IMPORTANT;

}
.maxhalb5{
max-width: 4.5rem !IMPORTANT;

}
.max5{
max-width: 5rem !IMPORTANT;

}
.max6{
max-width: 6rem !IMPORTANT;

}
.max7{
max-width: 7rem !IMPORTANT;

}
.max8{
max-width: 8rem !IMPORTANT;

}
.max9{
max-width: 9rem !IMPORTANT;

}
.max10{
max-width: 10rem !IMPORTANT;

}
.max11{
max-width: 11rem !IMPORTANT;

}
.max12{
max-width: 12rem !IMPORTANT;

}

.max13{
max-width: 13rem !IMPORTANT;

}

.max14{
max-width: 14rem !IMPORTANT;

}

.max15{
max-width: 15rem !IMPORTANT;

}

.max20{
max-width: 20rem !IMPORTANT;

}

.max25{
max-width: 25rem !IMPORTANT;
width: 100%;
}

.max30{
max-width: 30rem !IMPORTANT;

}
.max35{
max-width: 35rem !IMPORTANT;

}
.max40{
max-width: 40rem !IMPORTANT;
}
.max45{
max-width: 45rem !IMPORTANT;
}

.max50{
max-width: 50rem !IMPORTANT;

}
.max60{
max-width: 60rem !IMPORTANT;

}
.max65{
max-width: 65rem !IMPORTANT;

}
.max70{
max-width: 70rem !IMPORTANT;

}
.max75{
max-width: 75rem !IMPORTANT;

}
.max80{
max-width: 80rem !IMPORTANT;

}
.max-eindrittel{
max-width: 30% !IMPORTANT;

}
.max-zweidrittel{
max-width: 60% !IMPORTANT;

}
.max-halb{
max-width: 45% !IMPORTANT;

}

.max-dreiviertel{
max-width: 70% !IMPORTANT;

}

.max-einviertel{
max-width: 22% !IMPORTANT;

}



/*-----------------Formulare------------------------------*/

 input,
 textarea,
 select{
    position: relative;
    display: inline-block;
    width: 100%;
    min-height: 1rem;
    height: auto;
  /*  color: #333333;
    font-family: "Verdana", "Geneva", "sans-serif", "Icofont";
    background-color: #ffffff;  */
    outline: none;
    border: 1px solid #666666;
    border-radius: 3px;
    padding: 3px 10px;
    margin: 0 auto;

}

input[type="range"]{
    max-width: 8rem !important;
}

input[type="checkbox"],
input[type="radio"]{

    max-width: 1.25rem;
    aspect-ratio: 1 / 1;
    padding: 0;
    margin: 4px;
}


input[type="date"],
input[type="time"],
input[type="datetime-local"]{
    width: auto;
    padding: 5px auto;
    margin: 4px;
}

 input[type="submit"],
 input[type="button"],
 input[type="submit"].btn-small,
 input[type="button"].btn-small{
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 8rem;
    max-width: 22rem;
    width: auto;
    height: auto;
    background-color: #ffffff;
    color: #333333;
    border: 1px solid #006699;
    border-radius: 3px;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    outline: none;
    padding: 5px 10px;
    margin: 0.5rem;
    transition: all 250ms ease-in-out;
}

 input[type="submit"].btn-small,
 input[type="button"].btn-small{
    min-width: 5rem;
    font-size: 12px;

 }

input[type="submit"]:hover,
input[type="button"]:hover{
    background-color: #D1E8FF;
    cursor: pointer;
}

 input[type="submit"]:disabled,
  input[type="button"]:disabled{
    background-color: #ffffff;
    color: #efefef;
    cursor: default;
}

input[type="file"]{
   visibility:hidden;
}

input[type="file"]::-webkit-file-upload-button {
    visibility: hidden;
}


textarea.hidden{
    display: none !important;
}

textarea{
    min-height: 4rem;
}

textarea.height2{
    min-height: 2rem !important;
}

textarea.height3{
    min-height: 3rem;
}

textarea.height5{
    min-height: 5rem;
}

textarea.height6{
    min-height: 6rem;
}

textarea.height7{
    min-height: 7rem;
}

textarea.height8{
    min-height: 8rem;
}

textarea.height10{
    min-height: 10rem;
}

textarea.height12{
    min-height: 12rem;
}



form{
    position: relative;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 90%;
    height: auto;
    gap: 10px;
    padding: 0;
    margin: 0;

}


form h3.form-check{
    position: relative;
    display: block;
    z-index: 1;
    width: 100%;
    height: auto;
    --max-size: 15;
    --min-size: 13;
    font-size: var(--responsive-size);
    padding: 5px 0 1px 15px;
    margin: 0 auto;
}

span.form-info{
    position: relative;
    display: none;
    width: 100%;
    height: auto;
    border: 0;
    color: #cc0000;
    text-transform: uppercase;
    font-size: 12px;
    overflow: hidden;
    padding: 2px 0 5px 15px;
    margin: 0;
}

span.form-info.show{
    display: inline-block;
}

form a{
    color: inherit;
    text-decoration: none;
}

form div.error-info{
    position: relative;
    display: block;
    width: 90%;
    color: #cc0000;
    text-align: center;
    font-weight: bold;
    margin: 0 auto;
}


form div.callback{
    position: relative;
    display: block;
    width: 90%;
    color: #333333;
    text-align: center;
    font-weight: bold;
    margin: 0 auto;
}

form div.form-table{
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

form div.form-table label{
    position: relative;
    display: inline-block;
    max-width: 10rem;
    width: 30%;
    font-weight: bold;
    height: auto;
    margin: 0;
}


form div.form-table input[type="text"],
form div.form-table select,
form div.form-table textarea,
form div.form-table p{
    max-width: 20rem;
    width: 70%;
    height: auto;
    margin: 0;
}
form div.form-table span{
    position: relative;
    display: inline-block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}



form div.form-row{
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto;
    max-height: 100%;
    opacity: 1;
    visibility: visible;

}

div.form-row.hidden{
    max-height: 0;
    opacity: 0;
    visibility: hidden;

}

div.form-row.button-center{
    text-align: center;
    margin: 1.5rem auto 1rem;
   }

div.form-row.button-left{
    text-align: left;
    margin: 1.5rem auto 1rem;
   }

div.form-row.button-right{
    text-align: right;
    margin: 1.5rem auto 1rem;
}

div.form-row.checkbox-left{
    text-align: justify;
    margin: 1.5rem auto 1rem;
   }

div.form-row.checkbox-left input[type="checkbox"]{
    float: left;
    margin: 3px 16px 6px 3px;
   }

div.form-row.checkbox-right{
    text-align: justify;
    margin: 1.5rem auto 1rem;
   }

div.form-row.checkbox-right input[type="checkbox"]{
    float: right;
    margin: 3px 3px 6px 16px;

   }

div.form-row.button-between{
    position: relative;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 0 10px;
    margin: 0 auto 3px;
}

div.form-row.button-between span{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
}


/*--------------------Search--------------------------------------*/
form.search{
   position: relative;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     flex-wrap: nowrap;
     max-width: 2.25rem;
    width: 100%;
    height: auto;
    color: #323323;
    /*border: 1px solid #000000; */
    padding: 0;
    margin:0;
    transition: max-width 500ms ease-in-out;

}

form.search input[name="zipcity"]{
   position: relative;
     display: flex;
     max-width: 8rem;
    width: 100%;
    height: 2rem;
    border: 1px solid #666666;
    padding: 5px 15px;
    margin:0 5px 0 0;

}

form.search select{
   position: relative;
    display: flex;

    width: auto;
    height: 2rem;
    border: 1px solid #666666;
    padding: 5px 15px;
    margin:0 5px 0 0;

}

form.search select option{
   text-transform: capitalize;
}

form.search input[name="search"]{
   position: relative;
    display: inline-block;
    max-width: 0;
    width: 100%;
    height: 2rem;
    border: 1px solid #666666;
    border-radius: 1rem;
    padding: 5px 15px;
    margin:0;
    opacity: 0;
    visibility: hidden;
    transition: max-width 500ms ease-in-out;
}

form.search.trigger{
    max-width: 13rem;
}

form.search input[name="search"].trigger{
    max-width: 10rem;
    opacity: 1;
    visibility: visible;
}

form.search input[name="search-button"]{
   position: relative;
     display: none;
     justify-content: center;
     align-items: center;
    min-width: unset;
    max-width: 2.25rem;
    width: 100%;
    height: 2rem;
    font-family: Icofont;
    font-size: 1.5rem;
    font-weight: bold;
    background-color: transparent;
    border: 0px solid #565656;
    padding: 5px;
    margin:0;

}

form.search input[name="search-button"].show{
    display: inline-flex;
}

form.search span[data-web="search-button"]{
    font-weight: bolder;
}

form.search span[data-web="search-button"].hidden{
    display: none;
}

form.search input[name="search-button"]:hover{
    cursor: pointer;
    }


/*-----------master-background----------------------*/


#wall-activ,
.zentriert,
#wall{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    z-index: -1;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: all 450ms ease-in-out, z-index 100ms ease;
}



#wall-activ{
    justify-content: center;
    align-items: center;
   background-color:rgba(125, 125, 125, 0.7);

}

#wall{
    background-color: hsla(0, 0%, 0%, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px); /* Für Safari */
    color: #ffffff;
}



.zentriert,
#wall.show,
#wall-activ.show {
    height: 100%;
    width: 100%;
    opacity: 1;
    visibility: visible;
    z-index: 5000;

    }

/*--------------Article-Community---------------------------*/
li.com-unity{
    position: relative;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    justify-items: flex-start;
    align-content: center;
    align-items: center;
    gap: 0;
    max-width: 44rem;
    width: 98%;
    height: auto;
    border: 1px solid #bcbcbc;
    border-radius: 0.7rem;
    overflow: hidden;
    padding: 0;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}



li.com-unity > div{
    position: relative;
    display: inline-flex;
    flex-flow: row wrap;
    width: 100%;
    height: auto;

}

li.com-unity div.com-header{
    order: 1;
    min-height: 1.25rem;
    background-color: #ffffff;
/*    border-top: 1px solid #bcbcbc;
    border-left: 1px solid #bcbcbc;
    border-right: 1px solid #bcbcbc;
    border-radius: 0;   */
}


li.com-unity div.com-header > h3{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    height: auto;
    --max-size: 17;
    --min-size: 15;
    line-height: 1;
    font-size: var(--responsive-size);
    padding: 5px 0 5px 15px;
    margin: 0;
}

li.com-unity div.com-header hr{
    width: 90%;
    color: #666666;
    margin: 0.2rem auto 0.4rem;
}

li.com-unity:nth-child(odd) div.com-header hr{
    display: none;
}


li.com-unity div.com-content{
    order: 3;
  /*  border-left: 1px solid #bcbcbc;
    border-right: 1px solid #bcbcbc;   */

}

li.com-unity:nth-child(odd) div.com-content{
    order: 6;
    }


li.com-unity div.com-content p.text-block{
    position: relative;
    display: inline-block;
    width: 100%;
    height: auto;
    text-align: justify;
    line-height:  normal;
    padding: 20px 40px;
    background-color: #ffffff;
    margin: 0;
    transition: max-height 650ms ease-in-out;
}

a.news-banner{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 468px;
    width: 96%;
    height: 60px;
    background-color: var(--master-background);
    line-height:  normal;
    padding: 5px 15px;
    margin: 0 auto;
}
img.news-banner-image{
    position: relative;
    display: block;
    max-width: 468px;
    width: 96%;
    height: auto;
    padding: 0;
    margin: 5px auto;
}


img.news-image{
    position: relative;
    display: block;
    max-width: 180px;
    width: 96%;
    height: auto;
    padding: 0;
    margin: 5px auto;
}

span.weiter-lesen b{
    color: rgba(153, 0, 0, 1);
    text-decoration: underline;
}

li.com-unity div.com-image{
    order: 4;
    background-color: #ffffff;

}


li.com-unity:nth-child(odd) div.com-image{
    background-color: rgba(0, 0, 0, 0.7);
    }


li.com-unity div.com-image div.video,
li.com-unity div.com-image div.images-eins,
li.com-unity div.com-image div.images-zwei,
li.com-unity div.com-image div.images-drei,
li.com-unity div.com-image div.images-vier{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0 auto;
    /* border: 1px solid #333333; */
}



li.com-unity div.com-image div.video video{
   position: relative;
    display: block ;
    max-height: 25rem;
    width: 100%;
    height: auto;

    padding: 0;
    margin: 0;


}


li.com-unity div.com-image div.images-eins div,
li.com-unity div.com-image div.images-zwei div,
li.com-unity div.com-image div.images-drei div,
li.com-unity div.com-image div.images-vier div{
   position: relative;
    display: none;
    min-height: var(--responsive-height);
    max-height: var(--responsive-height);
    width: 100%;
    height: auto;
    border: 2px solid #aaaaaa;
    border-radius: 8px;
    padding: 0;
    margin: 2px;
    overflow: hidden;
    transition: all 300ms ease-in-out;

}


li.com-unity div.com-image div.images-eins div.portrait,
li.com-unity div.com-image div.images-drei div.portrait:first-child{
    width: auto;
    height: 100%;

}



li.com-unity div.com-image div.images-zwei div.portrait,
li.com-unity div.com-image div.images-drei div.portrait:nth-child(2),
li.com-unity div.com-image div.images-drei div.portrait:last-child,
li.com-unity div.com-image div.images-vier div.portrait{
    display: inline-flex;
    max-width: 35%;
    width: auto;
    height: 100%;

}


li.com-unity div.com-image div.images-eins div img,
li.com-unity div.com-image div.images-zwei div img,
li.com-unity div.com-image div.images-drei img,
li.com-unity div.com-image div.images-vier div img {
    min-height: inherit;
    max-height: inherit;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center center;
    padding: 0;
    margin: 0 auto;

}

li.com-unity div.com-image div.images-eins div.portrait img,
li.com-unity div.com-image div.images-drei div.portrait:first-child img{
    width: auto;
    height: 100%;
}



li.com-unity div.com-image div.images-zwei div,
li.com-unity div.com-image div.images-vier div:nth-child(1),
li.com-unity div.com-image div.images-vier div:nth-child(2),
li.com-unity div.com-image div.images-vier div:nth-child(3),
li.com-unity div.com-image div.images-vier div:nth-child(4){
    display: inline-block;
    width: 48.5%;


}

li.com-unity div.com-image div.images-vier div div.img-info{
    position: absolute;
    top: 0;
    left: 0;
    z-index:1;
     display: inline-flex;
     justify-content: center;
     align-items: center;
    min-height: inherit;
    max-height: inherit;
     max-width: none;
     border: none;
     width: 100%;
     height: auto;
     --max-size: 48;
     --min-size: 32;
     font-size: var(--responsive-size);
     font-weight: bold;
     background-color: rgba(51, 51, 51, 0.4);
     color: #ffffff;
}


li.com-unity div.com-image div.images-eins div,
li.com-unity div.com-image div.images-drei div:first-child{
    display: inline-flex;
    width: 100%;

}


li.com-unity div.com-image div.images-drei div:nth-child(2),
li.com-unity div.com-image div.images-drei div:last-child{
    display: inline-flex;
    width: 48.5%;

}





/* -----------------com-footer------------------------------ */

li.com-unity div.com-footer{
    order: 10;
    position: relative;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
    min-height: 1.5rem;
    width: 100%;
    background-color: #ffffff;
 /*   border-left: 1px solid #bcbcbc;
    border-right: 1px solid #bcbcbc;
    border-bottom: 1px solid #bcbcbc;
    border-radius: 0 0 0.7rem 0.7rem; */
}

/*-------------kommentare----------------------*/
li.com-unity div.com-footer div.kommentar-box{
    position: relative;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    max-width: 30rem;
    width: 80%;
    height: auto;
    padding: 0;
    margin: 0;

}

li.com-unity div.com-footer div.kommentar-box div.kommentare{
    position: relative;
    top: 0;
    z-index: 0;
    display: inline-flex;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    flex-flow: row wrap;
    max-height: 0;
    width: 100%;
    height: auto;
    --max-size: 12;
    --min-size: 10;
    font-size: var(--responsive-size);
    margin: 0;
    overflow: hidden;
    background-color: #fafafa;
    opacity: 0;
    visibility: hidden;
    transition: all 300ms ease-in-out, max-height 600ms ease-in-out;
}

li.com-unity div.com-footer div.kommentar-box div.kommentare h4{
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    background-color: #efefef;
    --max-size: 14;
    --min-size: 12;
    font-size: var(--responsive-size);
    padding: 5px 0 2px 10px;
    margin: 0;
}

li.com-unity div.com-footer div.kommentar-box div.kommentare b{
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
    height: auto;
    line-height: 1;
    --max-size: 12;
    --min-size: 10;
    font-size: var(--responsive-size);
    padding: 5px 0 5px;
    margin: 5px 0;
}


li.com-unity div.com-footer div.kommentar-box div.kommentare span {
    width: 90%;
    max-height: 3.5rem;
    --max-size: 13;
    --min-size: 12;
    font-size: var(--responsive-size);
    overflow-y: hidden;
    margin: 5px auto;
    padding-bottom: 0.5rem;
    transition: max-height 500ms ease-in-out;
}

li.com-unity div.com-footer div.kommentar-box div.kommentare span.open{
    max-height: 12rem;
    overflow-y: auto;

}


li.com-unity div.com-footer div.kommentar-box form.kommentar{
    position: relative;
    top: 0;
    z-index: 1;
    display: inline-flex;
    justify-content: flex-end;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    gap: 2px;
    max-height: 0;
    width: 100%;
    height: auto;
    margin: 0 auto;
    overflow-y: hidden;
    opacity: 0;
    visibility: hidden;
    transition: all 500ms ease-in-out 100ms, max-height 900ms ease-in-out 100ms;
}

li.com-unity div.com-footer div.kommentar-box form.kommentar h4{
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    background-color: #efefef;
    --max-size: 14;
    --min-size: 12;
    font-size: var(--responsive-size);
    padding: 5px 0 2px 10px;
    margin: 0;
}



li.com-unity div.com-footer div.kommentar-box div.kommentare.show,
li.com-unity div.com-footer div.kommentar-box form.kommentar.show{
    max-height: 30rem;
    opacity: 1;
    visibility: visible;
}

li.com-unity div.com-footer div.button-column{
    position: relative;
    display: inline-flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: auto;
    padding: 10px;
    margin: 0;

}

li.com-unity div.com-footer div.button-column span.button-row{
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 30%;
    height: auto;
    padding: 5px;
    margin: 0;

}


span.like-icon{
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 3rem;
    width: auto;
    height: 2.25rem;
    font-family: Verdana, Geneva, sans-serif, Icofont;
    font-size: 1.35rem;
    padding: 0;
    margin: 0 10px;

}


span.like-icon span.tag-before{
    position: absolute;
    top: 0;
    left: 5px;
    width: 1.5rem;
    height: auto;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    padding: 0;
}
span.like-icon span.tag-after{
    position: absolute;
    z-index: 5;
    bottom: 0;
    left: 65%;
    width: 3.25rem;
    height: auto;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    padding: 0;
}


li.com-unity div.com-footer span.icon{
    font-size: 1.35rem;
}




/*-----------------Navi-List-----------------------*/

ul.navi-list,
ul.member-list{
    all: unset;
    position: relative;
    display: block;
    width: 90%;
    height: auto;
    padding: 0;
    margin: 0 auto;
}

ul.navi-list li{
    position: relative;
    display: inline-block;
    width: 100%;
    height: auto;
    padding: 2px 0 2px 10px;
    margin: 2px auto;
    line-height: 1;
    --max-size: 15;
    --min-size: 13;
    font-size: var(--responsive-size);
}

ul.member-list li{
    position: relative;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    width: 100%;
    height: auto;
    line-height: 1;
    --max-size: 14;
    --min-size: 12;
    font-size: var(--responsive-size);
    padding: 5px 0;
    margin: 0;
}

ul.navi-list li[data-href]:hover{
    cursor: pointer;
    background-color: #efefef;
}

ul.member-list li span.icon{
    width: 2rem;
    --max-size: 19;
    --min-size: 17;
    font-size: var(--responsive-size);

    }



/*-----------------Entry-Navi------------------------*/


ul.entry-navi {
    z-index: 5;
    position: relative;
    top: 1.15rem;
    right: 3.5rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    width: 100%;
    height: auto;
    background-color: #ffffff;
    border: 1px solid #aaaaaa;
    box-shadow: 3px 3px 2px #000000;
    border-radius: 8px;
    padding: 0.3rem 1rem 0.3rem 1rem;
    margin: 0;
    transition: all 350ms ease-in-out;
}

ul.entry-navi.show{
    max-width: 15rem;
    opacity: 1;
    visibility:  visible;

}

ul.entry-navi li{
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    height: auto;
    border: none;
    padding: 0;
    margin: 3px auto;
}



ul.entry-navi li a{
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    color: #333333;
    font-size: 12px;
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    transition: 600ms all ease-in-out;
    padding: 2px 5px;
    margin: 0;
}

ul.entry-navi li a:hover{
    color: #000000;
    cursor: pointer;
    text-decoration: underline;
}



/*---------------ul-msg-inbox------------------------------*/

ul.msg-inbox{
        position: relative;
        display: block;
        width: 100%;
        height: auto;
        max-height: 100%;
        overflow-y: auto;
        padding: 0;
        margin: 0;

}

ul.msg-inbox li{
        position: relative;
        display: block;
        width: 90%;
        height: auto;
        border-left: 5px solid transparent;
        background-color: #ffffff;
        padding: 0;
        margin: 3px auto;
}


ul.msg-inbox li:nth-child(even){
        background-color: #e4e4e4;
}

ul.msg-inbox li.new{
        border-left: 5px solid #0033FF;

}

ul.msg-inbox li div.member{
        position: relative;
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
        width: 95%;
        font-size: 13px;
        padding: 2px 0 2px 5px;
        margin: 0 auto;
}


ul.msg-inbox li span{
        position: relative;
        display: block;
        width: 95%;
        font-size: 12px;
        padding: 2px 0 2px 10px;
        margin: 0 auto;
}




/*-----------------Msg-Body------------------------*/

li.msg-body{
        position: relative;
        display: inline-block;
        width: 100%;
        height: auto;
        padding: 10px 15px;
        margin:  0;
}

li.msg-body.sticky{
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 0;
}


li.msg-body.sticky h3.msg-title{
    position: relative;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: auto;
    gap: 8px;
    font-size: 14px;
    background-color: inherit;
    padding: 5px 0 10px 20px;
    margin 0 auto 0.5rem;
}


li.msg-body div.msg-sender,
li.msg-body div.msg-empfaenger{
        position: relative;
        display: inline-block;
        max-width: 24rem;
        width: 80%;
        height: auto;
        padding: 0;
        margin: 0;
}

li.msg-body div.msg-sender blockquote,
li.msg-body div.msg-empfaenger blockquote{
        position: relative;
        display: inline-flex;
        justify-content: flex-start;
        align-items: flex-start;
        align-content: flex-start;
        flex-wrap: wrap;
        width: 100%;
        height: auto;
        border: 0px solid #333333;
        border-radius: 6px;
        font-size: 14px;
        padding: 5px 20px 10px;
        margin: 0;
}

li.msg-body div.msg-sender span,
li.msg-body div.msg-empfaenger span{
        position: absolute;
        bottom: 0;
        right: 12px;
        display: inline-block;
        width: auto;
        height: auto;
        font-size: 10px;
        padding: 0;
}

li.msg-body div.msg-sender{
        float: right;
    /* background-color: #55aa00; */
}

li.msg-body div.msg-empfaenger{
        float: left;
 /*  background-color: #778899; */

}
li.msg-body div.msg-sender blockquote{

 background-color: #ffffff;

}

li.msg-body div.msg-empfaenger blockquote{

 background-color: #ffffff;

}

li.msg-body div.msg-sender blockquote div.msg-image,
li.msg-body div.msg-empfaenger blockquote div.msg-image{
    position: relative;
    display: inline-block;
    aspect-ratio: 1 / 1;
    max-width: 10rem;
    width: 47%;
    height: auto;
    overflow: hidden;
    border-radius: 5px;
    padding: 0;
    margin: 5px;

}


li.msg-body div.msg-sender.img-count1 blockquote div.msg-image:first-child,
li.msg-body div.msg-empfaenger.img-count1 blockquote div.msg-image:first-child,
li.msg-body div.msg-sender.img-count3 blockquote div.msg-image:first-child,
li.msg-body div.msg-empfaenger.img-count3 blockquote div.msg-image:first-child,
li.msg-body div.msg-sender.img-count5 blockquote div.msg-image:first-child,
li.msg-body div.msg-empfaenger.img-count5 blockquote div.msg-image:first-child{
    max-width: none;
    aspect-ratio: auto;
    width: 95%;
    margin: 3px auto;
}



li.msg-body div.msg-sender blockquote div.msg-image img,
li.msg-body div.msg-empfaenger blockquote div.msg-image img{
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;

}


li.msg-body div.msg-sender.img-count1 blockquote div.msg-image:first-child img,
li.msg-body div.msg-empfaenger.img-count1 blockquote div.msg-image:first-child img,
li.msg-body div.msg-sender.img-count3 blockquote div.msg-image:first-child img,
li.msg-body div.msg-empfaenger.img-count3 blockquote div.msg-image:first-child img,
li.msg-body div.msg-sender.img-count5 blockquote div.msg-image:first-child img,
li.msg-body div.msg-empfaenger.img-count5 blockquote div.msg-image:first-child img{
    height: auto;
}


/*---------------------Gridlist------------------------------------------*/

div.gridlist{
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 'liste-header' 'liste-main' 'liste-footer';
    min-height: 95%;
    max-height: 95%;
    max-width: 70rem;
    width: 98%;
    height: auto;
    overflow: hidden;
    padding: 0;
    margin: 1rem auto 1.5rem;
    border: 0px solid #666666;
}


h2.gridlist-header{
    grid-area: liste-header;
    position: relative;
    display: block;
    width: 100%;
    min-height: 1rem;
    height: auto;
    font-size: 18px;
    text-transform: uppercase;
    border-bottom: 1px solid #333333;
    padding: 5px 0 2px 20px;
    margin: 0 auto;

}

div.gridlist-main{
    grid-area: liste-main;
    position: relative;
    display: block;
    float: left;
    width: 98%;
    max-height: 100%;
    height: auto;
    overflow-y: auto;
    padding: 1rem 0;
    margin: 0 auto;
}


div.gridlist-main div.grid-liste{
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    width: 100%;
    height: auto;
    background-color: #f5f5f5;
    padding: 0;
    margin: 0 auto;
}

div.gridlist-main div.grid-liste.grid-p1{
    grid-template-columns: 1fr 2.5rem;
    grid-template-areas: 'grid-daten grid-button';

}

div.gridlist-main div.grid-liste.grid-p2{
    grid-template-columns: 2fr 2.5rem;

}
div.gridlist-main div.grid-liste.grid-p3{
    grid-template-columns: 2fr 1fr 2.5rem;

}
div.gridlist-main div.grid-liste.grid-p4{
    grid-template-columns: 1fr 1fr 1fr 2.5rem;

}


div.gridlist-main div.grid-liste.grid-p1:nth-child(odd),
div.gridlist-main div.grid-liste.grid-p2:nth-child(odd),
div.gridlist-main div.grid-liste.grid-p3:nth-child(odd),
div.gridlist-main div.grid-liste.grid-p4:nth-child(odd),
div.gridlist-main div.grid-liste.grid-p5:nth-child(odd){
    background-color: #e5e5e5;
    }

div.gridlist-main div.grid-liste span{
    position: relative;
    display: inline-block;
    width: 100%;
    height: auto;
    padding: 5px;
    margin: 0;

}
div.gridlist-main div.grid-liste span.grid-daten{
    grid-area: grid-daten;
    position: relative;
    display: inline-flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
    gap:5px;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
}

div.gridlist-main div.grid-liste span.grid-daten p{
    flex: 1 1 100%;
    width: auto;
    height: auto;
    padding: 5px;
    margin: 0;
   /* border: 1px solid #cc0000; */
}


div.gridlist-main div.grid-liste span.grid-button{
    grid-area: grid-button;
    position: relative;
    display: inline-block;
    width: 100%;
    height: auto;
    padding: 5px;
    margin: 0;
}

div.gridlist-main div.grid-liste span.grid-daten[data-action]:hover,
div.gridlist-main div.grid-liste span.link:hover{
    cursor: pointer;
    background-color: hsla(216, 100%, 50%, 0.5);
}



div.gridlist-main div.grid-liste div.iconliste{
    position: relative;
    display: inline-grid;
    grid-template-columns: repeat(auto-fit, minmax(3.0rem, 3.0rem));
    grid-template-rows: repeat(auto-fit, 3.0rem);
    width: 100%;
    height: auto;
    padding: 5px;
    margin: 5px auto;

}

div.gridlist-main div.grid-liste div.div-line{
    position: relative;
    display: inline-block;
    width: 100%;
    height: auto;
    margin: 5px auto;
}

div.gridlist-main div.grid-liste div.iconliste span.icon{
    display: inline-block;
    text-align: center;
    font-weight: normal;
    --max-size: 36;
    --min-size: 28;
    font-size: var(--responsive-size);
    aspect-ratio: 1 / 1;
    max-width: 2.5rem;
    width: 100%;
    height: auto;
    line-height: 2.5rem;
    padding: 0;
    margin: 0;
}


nav.gridlist-footer{
    grid-area: liste-footer;
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 1rem;
    height: auto;
    padding: 5px 0 0;
    margin: 0;

}

nav.gridlist-footer a{
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 2rem;
    aspect-ratio: 1 / 1;
    width: 90%;
    height: auto;
    border: 1px solid #565656;
    border-radius: 4px;
    background-color: #D7D7D7;
    color: #333333;
    padding: 5px;
    margin: 3px;
}

nav.gridlist-footer a:hover,
nav.gridlist-footer a.active{
   background-color: #3366FF;
   color: #d7d7d7;
   cursor: pointer;
}


/*------------------------------------------------------*/


ul.button-liste{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    max-width: 3rem;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0 ;

}

ul.button-liste li{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    width: 100%;
    height: auto;
    background-color: transparent;
    padding: 0;
    margin: 0 auto;
}

ul.button-liste li span.icon{
    font-weight: bolder;
    --max-size: 28;
    --min-size: 22;
    font-size: var(--responsive-size);
    }


ul.button-liste li ul.sub-button{
    z-index: 25;
    position: absolute;
    top: 5%;
    right: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    width: auto;
    height: auto;
    background-color: #ffffff;
    border: 1px solid #565656;
    border-radius: 0 0 5px 5px;
    padding: 0.3rem 2rem 0.3rem 1rem;
    margin: 0;
    transition: all 750ms ease-in-out;
}

ul.button-liste li:hover ul.sub-button{

    max-width: 50vw;
    opacity: 1;
    visibility:  visible;

}

ul.button-liste li ul.sub-button li{
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    min-width: 8rem;
    width: 90%;
    height: auto;
    border: none;
    padding: 0;
    margin: 2px auto;
}

ul.button-liste li ul.sub-button li a{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    color: #ffffff;
    font-size: 12px;
    border: 1px solid #565656;
    border-radius: 5px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    transition: 0.65s all ease;
    padding: 5px 10px;
    margin: 0;
}

ul.button-liste li ul.sub-button li a:hover{
    color: #000000;
    background-color: #666666;
    cursor: pointer;
}