.mod_article > .inside,
header .inside,
footer > .inside{
    width:calc(100% - 2rem);
    max-width: 1640px;
    margin:0 auto;
    padding:0 1rem;
}

.mod_article.thin > .inside{
    max-width: 812px;
}

main section{
    padding:5rem 0;
}

/* ----------------------------------------------------------------------------------------------------------------------------- */
/* ANCHOR Menü / Kopfzeile */
/* ----------------------------------------------------------------------------------------------------------------------------- */



header .inside{
    position:relative;
    height: 7rem;
    transition:height var(--transition);
}

body:not(.open) header .inside{
    transition-delay: .2s;
}

#logo{
    font-size:0;
    display:block;

    position:absolute;
    left:1rem;
    top:2rem;

    height:3rem;
    aspect-ratio: 5/1;
    color:transparent;

    background-image:url(../img/logo.svg);
    background-size:contain;
    background-repeat: no-repeat;
    background-position:left center;
}

.hamburger{
    position:absolute;
    right:1rem;
    top:3rem;
    display:none;
    align-items: center;
    gap:var(--grid__gutter);

    background-color:var(--c-green);
    border-radius:var(--br);
    color:#fff;
    font-family:'K2D_semibold';
}


header nav{
    position:absolute;
    right:1rem;
    bottom:2rem;
}

header nav ul{
    display:flex;
    gap:var(--grid__gutter);
}

header nav :where(a, strong){
    font-family:'K2D_semibold';
    text-decoration:none;
    color:var(--c-font-color);
    transition:color var(--transition);
}

header nav a:where(:hover, :focus),
header nav strong{
    color:var(--c-green);
}




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

    .hamburger{
        display:flex;
    }

    body.open header > .inside{
        height:100vh;
    }

    header nav{
        position:fixed;
        right:-50vw;
        bottom:inherit;
        transform:translateY(-50%);
        top:50%;

        transition:right var(--transition);
    }

    body.open header nav{
        right:1rem;
        transition-delay: .2s;
    }

    header nav ul{
       flex-direction: column;
       text-align:right;
    }

    header nav li.extern{
        margin-top:2rem;
    }

}




















header nav li.extern a{
    padding:.7rem 1rem;
}

#language{
    display:flex;
    gap:.5rem;
    position:absolute;
    right:1rem;
    top:1rem;
}

#language a{
    display:block;
    font-size:0;
    color:transparent;
    width:1rem;
    aspect-ratio: 1;

    background-repeat:no-repeat;
    background-size:contain;
    background-position: center;
}

#language a.german{ background-image:url(../img/de.svg); }
#language a.mandarin{ background-image:url(../img/tw.svg); }
#language a.english{ background-image:url(../img/en.svg); }



/* ----------------------------------------------------------------------------------------------------------------------------- */
/* ANCHOR Hero */
/* ----------------------------------------------------------------------------------------------------------------------------- */

#hero{
    background-color: var(--c-green-light);
    height:calc(100vh - 5rem);
}

#hero :where(.inside, section, .row){
    height:100%;
}

/* ----------------------------------------------------------------------------------------------------------------------------- */
/* ANCHOR Main / Artikel */
/* ----------------------------------------------------------------------------------------------------------------------------- */

#wrapper:has(#hero) main > .inside > section:nth-child(even),
#wrapper:not(:has(#hero)) main > .inside > section:nth-child(odd){
    background-color: var(--c-green-light);
}

section.green{
    background-color:var(--c-green) !important;
    color:#fff;
}

/* ----------------------------------------------------------------------------------------------------------------------------- */
/* ANCHOR Listen mit Icons */
/* ----------------------------------------------------------------------------------------------------------------------------- */

.content-text ul:has(img) li{
    display:flex;
    gap:var(--grid__gutter);
    align-items: center;
}

.content-text ul:has(img) strong{
    font-family:'K2D_semibold';
}

/* ----------------------------------------------------------------------------------------------------------------------------- */
/* ANCHOR diverse Elemente */
/* ----------------------------------------------------------------------------------------------------------------------------- */

main > .inside > section > .inside > div:not(:last-child),
main > .inside > section > .inside > .row > .ce_columns > div:not(:last-child){
    margin-bottom:1.5rem;
}

.content-text ul:has(img) li:not(:last-child){
    margin-bottom:var(--grid__gutter);
}

.content-text ul:not(:has(img)){
    margin-left:1rem;
    list-style:disc;
}

.content-text :where(p:not(:last-child), ul:not(:has(img))){
    margin-bottom:1rem;
}

ol{
    margin-left:1rem;
}

.notice{
    font-family: 'K2D_semibold';
    color:var(--c-green);
    position:relative;
    padding-left:2.5rem;
    margin-bottom:1rem;
}

section.green .notice{
    color:#fff;
}

.notice:before{
    content:"";
    display:block;
    width:2rem;
    height:2px;
    position:absolute;
    transform:translateY(-50%);
    top:50%;
    left:0;
    background-color:var(--c-green);
}

section.green .notice:before{
    background-color:#fff;
}

p.more a{
    color:var(--c-green);
    text-decoration:none;
    font-size: var(--fs-smaller);
    font-family:'K2D_semibold';
}

.mod_newslist:has(.fullHeight),
.mod_eventlist:has(.fullHeight){
    height:100%;
}

pre{
    font-family:inherit;
    white-space: inherit;

    font-size:var(--fs-smaller);

    padding:.5rem;
    border-radius:var(--br);
    background-color:#eee;
    margin:.5rem 0;
}

.handorgel__content__inner{
    padding:2rem;
}

.handorgel__content{
    border-radius:var(--br);
}

/* ----------------------------------------------------------------------------------------------------------------------------- */
/* ANCHOR Schaltflächen */
/* ----------------------------------------------------------------------------------------------------------------------------- */

div[class^='btn_']{
    display:inline-block;
    margin-top:1.5rem;
}

div[class^='btn_'] a,
li.extern a{
    text-decoration: none;
    border-radius: var(--br);
    padding:.7rem 2.5rem .7rem 1rem;
    position:relative;
    font-family:'K2D_semibold';
    transition:background-color var(--transition), border-color var(--transition);
}

div[class^='btn_'] a{
    display:inline-block;
}



div[class^='btn_'].down a{
    padding:.7rem 1rem .7rem 2.5rem;
}


div[class^='btn_'] a:after{
    content:"";
    position:absolute;
    transform:translateY(-50%);
    right:1rem;
    top:50%;
    
    display:block;
    width:.8rem;
    aspect-ratio: 1;
    
    mask-image: url(../img/pfeil.svg);
    mask-repeat:no-repeat;
    mask-size: contain;
    mask-position: center;
    background-color: var(--c-green);
}

div[class^='btn_'].down a:after{
    right:inherit;
    left:1rem;
    transform:translateY(-50%) rotate(90deg);
}

.btn_dark a:after{
    background-color:#fff !important;
}

.btn_bright a{
    color:var(--c-green);
    background-color:#fff;
    border:2px solid var(--c-green);
}

.btn_bright a:where(:hover, :focus){
    background-color: var(--c-green-light) !important;
}

.btn_dark a,
.extern a{
    color:#fff;
    background-color:var(--c-green);
    border:2px solid var(--c-green);
}

section.green .btn_dark a{
    border-color:#fff;
}

.btn_dark a:where(:hover, :focus),
.extern a:where(:hover, :focus){
    background-color: var(--c-green-dark) !important;
    border-color: var(--c-green-dark) !important;
}

div[class^='btn_']+div[class^='btn_']{
    margin-left:var(--grid__gutter);
}

/* ----------------------------------------------------------------------------------------------------------------------------- */
/* ANCHOR Kacheln */
/* ----------------------------------------------------------------------------------------------------------------------------- */

.tiles{
    display: grid;
    gap:var(--grid__gutter);
}

.tiles.cols_2{ grid-template-columns: repeat(2, 1fr); }
.tiles.cols_3{ grid-template-columns: repeat(3, 1fr); }
.tiles.cols_4{ grid-template-columns: repeat(4, 1fr); }
.tiles.cols_5{ grid-template-columns: repeat(5, 1fr); }
.tiles.cols_6{ grid-template-columns: repeat(6, 1fr); }

@media screen and (max-width: 1400px){
    .tiles.cols_4,
    .tiles.cols_5,
    .tiles.cols_5{ grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 499px){
    .tiles{
        display:block;
    }

    .tiles .tile:not(:last-child){
        margin-bottom:var(--grid__gutter);
    }
}

.tile,
.news.teaser,
.event.teaser{
    background-color:#fff;
    border-radius:var(--br);
    padding:2rem 2rem 5rem 2rem;
    position:relative;

    border: 1px solid var(--c-border-light);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    cursor: default;
}

.tile:where(:hover, :focus),
.news.teaser:where(:hover, :focus),
.event.teaser:where(:hover, :focus){
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10);
    border-color: var(--c-green);
}

.tile .image_container{
    margin-bottom:1rem;
}

.tile p.more a,
.teaser p.more a{
    position:absolute;
    bottom:2rem;
    left:2rem;
}



.news.teaser,
.event.teaser{
    padding:0;
    overflow:hidden;
    height:100%;
}

.news.teaser > .inside,
.event.teaser > .inside{
    padding:2rem 2rem 5rem 2rem;
}

.teaser a.type{
    text-decoration:none;
    font-family:'K2D_semibold';
    color:var(--c-green-dark);
    background-color:var(--c-green-light);
    border-radius:var(--br);
    font-size:var(--fs-smaller);
    text-transform: uppercase;
    padding:.3rem .5rem;
    display:inline-block;
    transition:background-color var(--transition);
    margin-bottom:1rem;
}

.teaser a.type:where(:hover, :focus){
    background-color:var(--c-gold-light);
}

.teaser .ce_text{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

.teaser .time{
    font-family:'K2D_semibold';
    font-size:var(--fs-smaller);
    margin-bottom:1rem;
    color:var(--c-gray-light);
}

.teaser .image_container{
    position:relative;
    aspect-ratio: 4/2;
    overflow: hidden;

    background-color:tomato;
}

.teaser .image_container img{
    position:absolute;
    transform:translate(-50%, -50%);
    top:50%;
    left:50%;
}

@media screen and (max-width:939px){
    .teaser .image_container{
        aspect-ratio: 4/1.5;
    }
}

.mod_newslist.grid,
.mod_eventlist.grid{
    display:grid;
    gap:var(--grid__gutter);
    grid-template-columns: repeat(3, 1fr);
}

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

.formbody .widget{
    position:relative;
}

label{
    display:block;
}

input.text, select, textarea{
    width:100%;
}

/* ----------------------------------------------------------------------------------------------------------------------------- */
/* ANCHOR Footer */
/* ----------------------------------------------------------------------------------------------------------------------------- */

footer{
    background-color:var(--c-midnight);
    color:#fff;
    padding:5rem 0;
}

footer .row{
    border-bottom:1px solid rgba(255,255,255,0.08);
    padding-bottom:3rem;
    margin-bottom:3rem;
}

footer .content-text{}

footer a{
    text-decoration:none;
    color:inherit;
    opacity:.5;
    transition:opacity var(--transition);
}

footer a:where(:hover, :focus){
   opacity:1; 
}