/*the reset of the reset.min!!
===================*/


/* ^ deleatur*/
/* @import "fonts.css"; */
/* colors:
#2F5975 = blau
#E8EBEA = grau im Hintergrund
*/


html {
    /* overflow-y:scroll; */
}

* {
  box-sizing: border-box;
}

body {
   
    background-color:#f1fcf8;
    background-color: #E8EBEA;
    background-color: #fff;
    font: 100%/1.5 'PTSans', Arial, "sans-serif";
    letter-spacing: -.005rem;
}

/*##################
TYPO
###################*/

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
}

h1, h2, 
/* h3, h4,  */
h5, h6, p, pre, blockquote, table, ol, ul, form {
    margin-bottom: 0.666rem;
}

a, a:link, a:visited {
    outline: none;
}


h1 {
    font-family: 'PTSans', Arial, "sans-serif";
    font-size: 2.8rem;
    font-weight: 600;
    color: #2F5975;
    clear: both;
}

h2,
.content-teaser h1 {
    font-family: "PTSans", Arial, "sans-serif";
    font-size: 1.666rem;
    font-weight: 600;
    letter-spacing: 0rem;
    color: #2F5975;
    margin-bottom: 1.333rem;
}

/* .nl_leser h1, */
/* .newsletter h1, */
.art_teaser h2,
.mod_newsarchive h2,
h3 {  
    font-size: 1.666rem;
    font-weight: 400;
    color: #2F5975;
    margin-bottom: 0.333rem;
}

h3 a {
    font-weight: 400;
}

h4, h5 {
     font-size: 0.97rem;
     font-family: "PTSans", Arial, "sans-serif";
     font-weight: 600;
     letter-spacing: 0rem;
     color: #2F5975;
     /* margin-bottom: 0.333rem; */
}

/* Unterüberschrift unter Fetter Überschrift Abstandkorrektur*/
h2 + h4 {
    margin-top: -1rem;
}


/* nur zur Auszeichnung für Elementgruppen im Backend*/
h6 {
    display: none;
}

p {
    font-size: 0.97rem;
    font-weight: 400;
    hyphens: auto;
}

.visitenkarte p {
    font-weight: 400;
    font: 110%/1.4 'PTSans', Arial, "sans-serif";
    text-align: justify;
    hyphens: none;
}

a {
    text-decoration: none;
    color: #2F5975;
    font-weight: 600;
}

figcaption {
    font-size: 80%;
}

.events figcaption {
    font-size: 85%;
}

/*groessen und breiten…*/

/*footer fixed by wrapper flexed*/

#wrapper {
    display: flex;
    flex-direction: column;
    max-width: 1060px;
    /* max-width: 71.25rem; */
    min-height: 100vh;
    /* width: 80vw; */
    padding-top:1rem;
    padding-bottom:1rem;
    margin-right:auto;
    margin-left:auto;
    padding: 2rem 2.666rem 1rem 2.666rem; 
    background-color: #E8EBEA;
    border-left: 2px solid #F1F1F1;
    border-right: 2px solid #F1F1F1;
}

#container {
    /* margin-left: 7rem; */
    /* margin-right: 0rem; */
    /* min-height: calc(100vh - 12rem); */
    flex: 1;
    /* width: 80vw;  */
}

#header {
    height: 12.666rem;
}

 #header_mobil {
    display: none;
 }

/* korrekturen form.min.css*/

form button, input[type="submit"], .button {
    font-size: 100%;
    padding: 6px 18px 6px 17px;
    line-height: 1.3;
}


/*###############
MENUES
################*/

.menu_oben_rechts {
    float: right;  
    margin-bottom: 0.666rem;
}

.menu_oben_rechts ul {
    display: flex;
    justify-content: flex-start;
    column-gap: 1.666rem;
    list-style-type: none;
    margin: 0;
    padding: 0;
}


#menu ul {
    display: flex;
    justify-content: flex-start;
    column-gap: 2.666rem;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#menu ul.level_2 {
    display: block;
}

#menu ul.level_2 li {
    padding-bottom: 0.2rem;
}


/* extra farbe für newsletter-link*/
#menu .newsletter {
    color: #e60707;
}

.menu_oben_rechts a,
#menu a {
    text-decoration: none;
    /* font: 80%/1.4 PTSans, Arial, "sans-serif"; */
    color: #444;
    /* text-transform: uppercase; */
    font-weight: 600;
}

.menu_oben_rechts li .active,
.menu_oben_rechts ul li a:hover,
#menu li .active,
#menu ul li a:hover,
#menu .trail a {
    color: #2F5975;
    font-weight: 600;
}

.menu_oben_rechts a {
     font-weight:  400;
      /* font: 80%/1.4 PTSans, Arial, "sans-serif"; */
}

.menu_oben_rechts a.trail {
    font-weight: 600;
}

.footer-nav ul li,
.menu_oben_rechts ul li,
#menu ul li {
     font: 0.9rem/1.4 "PTSans", Arial, "sans-serif";
}

#footer {
    margin-top: 1.666rem;
}

#footer nav ul {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

#footer nav ul li:after {
    content:  "•";
    padding-left: 1rem;
}

#footer nav ul li.kontakt:after {
    content:  none;
}

#menu .submenu .level_2 {
   position: relative;
   /* left: auto; */
   max-height: 0;
   z-index: 1001;
}


/* #menu .submenu.trail .level_2, */
/* #menu .submenu:active .level_2, */
#menu .submenu:hover .level_2  {
   max-height: 100%;
   padding: 0.333rem 1.333rem;
   margin-left: -1.333rem;
   display: block;
}

/*##########################
Pfeilchen hinter links mit submenu, kann vllt auch mit (has) gehen?
###########################*/

li .preis::after {
    background:rgba(0,0,0,0) url("/files/wmg_standard_theme/expand_more_24dp_2F5975.png") center center no-repeat;
    content: " ";
    padding-left: 1.5rem;
    padding-bottom: 0.23rem;
}

li .trail.preis::after {
    background:rgba(0,0,0,0) url("/files/wmg_standard_theme/expand_less_24dp_2F5975.png") center center no-repeat;
    content: " ";
    padding-left: 1.5rem;
    padding-bottom: 0.23rem;
}


/*###############
LAYOUT/ BREAKDOWN
################*/

.noshow,
.info .author,
.hinweis {
    display: none;
}

.draft {
    background-color: #F1F1F1;
    background-color: #f3f4f4;
    border: 1px solid #2F597550;
    color: #2F5975;
    padding: 0.6666rem;
}

.article {
    /* clear: both; */
    border-bottom: 2px solid #2F597550;
    /* padding-bottom: 1.666rem; */
    margin-bottom: 1.666rem;
}

/*########
FLEX & Co.
#########*/

.boxed {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;    
    column-gap: 2.333rem;
}

.colspan_1 {
    width: 30%;
    flex: 1 1 30%;
}

.colspan_2 {
    width: 64%;
    /* flex: 1 1 64%; */
}

/*korrektur news teaser übernahme */
.home .colspan_2,
.events .layout_short.colspan_2 {
    width: 100%;
}


.back {
    width: 100%;
    grid-column-start: 1;
    grid-column-end: span3;
}

.events .content-image img {
    padding-inline: 5% 5%;
    padding-block: 5% 5%;
    background-color: rgb(232, 235, 234);
    background-color: #ffffff50;
    border: 1px solid #2f597550;

}

/*##############
Abstände
###############*/

.boxed,
.unboxed,
.article {
    padding-bottom: 2.666rem;
}

.less_gap {
    padding-bottom: 0.333rem;
}

.more_gap {
    padding-bottom: 2.666rem;
}


/*############
GRID auf .home und alles!!
#############*/

.gridboxed {
    display: grid;
    grid-template-columns:  repeat(3, 1fr);
    gap: 2.333rem;
}


.grid-1span1 {
    grid-column-start: 1;
    grid-column-end: span 1;
}

.grid-1span2 {
    grid-column-start: 1;
    grid-column-end: span 2;
}

.grid-1span3 {
    grid-column-start: 1;
    grid-column-end: span 3;
}

.grid-2span1 {
    grid-column-start: 2;
    grid-column-end: span 1;
}

.grid-2span2 {
    grid-column-start: 2;
    grid-column-end: span 2;

}
.grid-3span1{
    grid-column-start: 3;
    grid-column-end: auto;
}

/*##########
korrektur artikel-teaser
#########*/

.art_teaser > .ce_text {
    grid-column-start: 1;
    grid-column-end: span 2;
}
/*###########*/

.newsletter .liste {
    margin-bottom: 1.666rem;
}

.newsletter .liste {
    padding: 0.666rem;
}

.logline h1,
.linkteaser h2 {
    margin-top: 0;
}

.absatz {
    margin-bottom:  2.666rem;
}



/*###############
Galeriebox
###############*/

.event-detail .galeriebox-5 ul {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* flex-wrap: wrap; */
    justify-content: space-between;
    /* flex-flow: row wrap; */
    gap: 1.333rem;
}

.preis .galeriebox-5 ul {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* flex-wrap: wrap; */
    justify-content: space-between;
    /* flex-flow: row wrap; */
    gap: 1.333rem;
    
}

.preis .galeriebox-5 img {
    width: 16.4vw;
    /* margin-right: 1vw; */
    /* margin-bottom: 1.333rem; */
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}


/* text innen-abstand nach rechts */
.rechts_off {
   padding-right: 1.333rem;
}

.clear {}


/*datum der News*/
.layout_full .info {
    text-align: right;
}

/*###########
ENTWURF AKZIDENTE REGELN
############*/

.wiesinger {
    margin-top: 7rem;
}

.mt4 {
    margin-top: 4rem;
}

.mt5 {
    /* margin-top: 5rem; */
}



.mod_newsarchive p.info {
    display: none;
}

.mm-wrapper .fa-xmark {
    display: none;
}

.mm-wrapper--opened .fa-xmark {
    display: block;
}

.mm-wrapper--opened .fa-bars {
    display: none;
}


/*################
FONTAWESOME STUFF
################*/

.icon::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}



/*################
AKKORDEON / HANDORGEL & ELEMENTGRUPPE
#################*/

.content-accordion  .handorgel__header {
    
    margin-bottom: 0rem;
    display: block;
  }

.handorgel__header__button {
    display: flex;
    width: 100%;
    position: relative;
    cursor: pointer;
    transition:color ease-in-out .2s;
    padding:1.5rem calc(2rem + 2rem + 1.5rem) 1.5rem 0rem;
    display: block;
    width: 100%;
    margin: 0;
    border: none;
    border-top: 1px solid #eee;
    background-color: #e8ebea;
    border-radius: 0;
    /* text-align: left; */
    transition: background-color 0.2s ease;
    user-select: none;
}


.handorgel__header__button:after,
.handorgel__header__button:before {
    transition:opacity ease-in-out .2s;
    position:absolute;
    top:1.8rem;
    right:1.5rem;
    z-index:5;
    width:2rem;
    height:2rem;
    font: var(--fa-font-solid);
  /* background:rgba(0,0,0,0) url("/files/wmg_standard_theme/expand_more_24dp_2F5975.png") center center no-repeat; */
    content:"\f6e2";
}

.handorgel__header__button:before {
    opacity:1;
    content: "\2b";
}

.handorgel__header__button:after {
    opacity:0;
 /* background:rgba(0,0,0,0) url("../../files/contaodemo/theme/src/img/icons/minus-circle.svg") center center no-repeat; */
    content: "\f068";
}

.handorgel__header--open .handorgel__header__button:before {
    opacity:0
}

.handorgel__header--open .handorgel__header__button:after {
    opacity:1;
}

.handorgel__content {
    background-color: #e8ebea;
}

.content-accordion {
    border-bottom: 1px solid #eee;
}

.handorgel__header {
    display: block;
    margin: 0;
    width: calc(30% + 5rem);
}


.handorgel__header__button::-moz-focus-inner {
    border: 0;
}

.handorgel__content {
    display: none;
    overflow: hidden;
    height: 0;
    border-top: 1px solid #eee;
    background-color: #e8ebea;
    transition: height 0.1s ease 0.1s;
}

.handorgel__content--open {
    display: block;
    transition: height 0.2s ease;
}

.handorgel__content--opened {
    overflow: visible;
}

.handorgel__content__inner {
    padding: 0;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.handorgel__content--opened .handorgel__content__inner {
    opacity: 1;
    transition: opacity 0.3s ease;
}

dd, dt {
  /* font-size: 0.8333rem; */
  font-family: 'PTSans', Arial, "sans-serif";
  line-height: 1.3;
  hyphens: manual;
}

dd {
  margin-left: 0rem;
  width: auto;
  hyphens: manual;
}

dt {
  float: left;
  width: auto;
  padding-right: 0.5rem;
  font-weight: 600;}


  /*####################
  Newsletterleser Korrekturen Für Anzeige im Browser
  ######################*/

.nl_leser .mod_newsletterreader h1 {
    display: none;
}

.newsletter .page {
    width: 64%;
    margin-top: 2.666rem;
}

/*############################################################*/

@media only screen and (max-width: 640px) {


    body {
        font: 110%/1.3 'PTSans', Arial, "sans-serif";
        letter-spacing: .01rem;
    }

/* .nl_leser h1, */
.newsletter h1,
.art_teaser h2,
.mod_newsarchive h2,
h3 {  
    font-size: 1.666rem;
    font-weight: 400;
    color: #2F5975;
    margin-bottom: 0.333rem;
}

h3 a {
    font-weight: 400;
}

h4, h5 {
     font-size: 1.097rem;
     font-family: "PTSans", Arial, "sans-serif";
     font-weight: 600;
     color: #2F5975;
     margin-bottom: 0.666rem;
}

p {
    font-size: 1.097rem;
    font-weight: 400;
    hyphens: auto;
}

.visitenkarte p {
    font-weight: 400;
    font: 110%/1.4 PTSans, Arial, "sans-serif";
    text-align: justify;
    hyphens: auto;
}

a {
    text-decoration: none;
    color: #2F5975;
    /* text-transform: uppercase; */
    font-weight: 600;
}

figcaption {
    font-size: 70%;
}

.content-image {
    margin-bottom: 0.666rem;
}

    #wrapper {
        display: flex;
        flex-direction: column;
        max-width: 100%;
        /* max-width: 71.25rem; */
        min-height: 100vh;
        /* width: 80vw; */
        padding-top:1rem;
        padding-bottom:1rem;
        margin-right:auto;
        margin-left:auto;
        padding: 1rem 0.6875rem 1rem 0.6875rem; 
        background-color: #E8EBEA;
        border-left: 2px solid #F1F1F1;
        border-right: 2px solid #F1F1F1;
    }

    #header {
        /* position: fixed; */
    height: 5rem;
    /* display: none; */
    /* background-color: #ffffff; */
    width: 100%;
    z-index: 11;
    }

    .maintitle {
        margin-top:  4rem;
        display: none;
    }

    .mod_customnav,
    .mod_navigation {
        display: none;
    }

    #header_mobil {
        display: block;
        position: fixed;
        height: 4.5rem;
        width: 100%;
        background-color: #E8EBEA;
        padding-top: 0rem;
        margin-top: 0rem;
        top: 0rem;
        left: 0rem;
        z-index: 12;
        box-shadow: 0px 3px 5px #2f597550;
    }

    #nav_mobil_icon {
        display: flex;
        gap: 0.666rem;
        z-index: 11;
        position: relative;
        padding-block: 1rem;
        padding-inline: 1rem;
        margin: 0rem 0rem 0rem 0rem;
        /* background-color: #2f597530; */
        top: 0rem;
        /* border-bottom: 1px solid #2f597550; */

    }

    #nav_mobil_icon h1 {
        font-size: 1.2rem;
        align-self: left;
        margin: 0;
        flex: 1 0 auto; 
        letter-spacing: -0.006rem;
    }

    .mb_position,
    .hl_position {
        display: flex;
        flex-flow: column;
        /* align-items: flex-start; */
        justify-content: space-between;
        height: 3.1rem;
    }

    .hl_position p {
        color: #2F5975;
        margin-bottom: 0;
        font-weight: 400;
        font-size: 1rem;
        padding-left: 0rem;
    }

    #container {
        /* margin-top: 12rem; */
        z-index: 10;
    }

    #main .inside {
        display: inline-block;
    }

    .colspan_1 {
    width: 100%;
    /* flex: 1; */
    }

    .colspan_2 {
    width: 100%;
    /* flex: 0 2 auto; */
    }

    .span_50 {
    /* width: 100%; */
    flex: 1 1 100%;
    margin-bottom: 1.666rem;
    }

    .span_100 {
    width: 100%;
    margin-bottom: 1.666rem;
    }

    .boxed,
    .unboxed,
    .home .article {
    padding-bottom: 1.666rem;
}

    .gridboxed {
    display: block;
    /* grid-template-columns: 1fr; */
    gap: 2.333rem;
    }


    .home .item,
    .home .draft,
    .draft {
        margin-bottom: 2.333rem;
        padding: 0.6666rem;
    }


    .galeriebox-5 ul {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* flex-wrap: wrap; */
    justify-content: space-between;
    /* flex-flow: row wrap; */
    gap: 1rem;
    }
    
    .bruecke  {
        order: 1;
    }

    .noshowmobil {
        display: none;
    }
   
   .handorgel__header {
    width: 100%;
   }

   ul li .kuratorium {
    padding-left: 2.666rem;
   }

   .mm-menu a, .mm-menu a:active, .mm-menu a:hover, .mm-menu a:link, .mm-menu a:visited {
    text-decoration: none;
    color: #2F5975;
    }

    .mm-menu ul li .active {
        font-weight: 600;
    }

    .newsletter.mm-listitem::after,
    .member.mm-listitem::after  {
        border-bottom-color: #2F597575;
        left: -1rem;
    }

    .mm-menu .archiv,
    .mm-menu .verein,
    .mm-menu .member,
    .mm-menu .kontakt,
    .mm-menu .datenschutz,
    .mm-menu .impressum {
        font-weight: 400;
    }

    .mm-menu .archiv .active,
    .mm-menu .verein .active,
    .mm-menu .member .active,
    .mm-menu .kontakt .active,
    .mm-menu .datenschutz .active,
    .mm-menu .impressum .active {
        font-weight: 400;
    }

    .mb_position {
        border-right: 1px solid #2F597575;
        padding-right: 0.333rem;
    }

    .hl_position {
        flex: 1 0 auto;
    }

    .newsletter .page {
        width: 100%;
    }

    .article {
    /* clear: both; */
    border-bottom: 2px solid #2F597550;
    /* padding-bottom: 1.666rem; */
    margin-bottom: 1.666rem;
}

}