body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
    padding: 0px 0px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    line-height: 0 !important;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible
}

.hamburger:hover {
    opacity: 0.7
}

.hamburger.is-active:hover {
    opacity: 0.7
}

.hamburger.is-active .hamburger-inner,.hamburger.is-active .hamburger-inner::before,.hamburger.is-active .hamburger-inner::after {
    background-color: var(--color-hamburger)
}

.hamburger-box {
    width: 40px;
    height: 24px;
    display: inline-block;
    position: relative
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px
}

.hamburger-inner,.hamburger-inner::before,.hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: var(--color-hamburger);
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease
}

.hamburger-inner::before,.hamburger-inner::after {
    content: "";
    display: block
}

.hamburger-inner::before {
    top: -10px
}

.hamburger-inner::after {
    bottom: -10px
}

.hamburger--3dx .hamburger-box {
    perspective: 80px
}

.hamburger--3dx .hamburger-inner {
    transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dx .hamburger-inner::before,.hamburger--3dx .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dx.is-active .hamburger-inner {
    background-color: transparent !important;
    transform: rotateY(180deg)
}

.hamburger--3dx.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg)
}

.hamburger--3dx.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg)
}

.hamburger--3dx-r .hamburger-box {
    perspective: 80px
}

.hamburger--3dx-r .hamburger-inner {
    transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dx-r .hamburger-inner::before,.hamburger--3dx-r .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dx-r.is-active .hamburger-inner {
    background-color: transparent !important;
    transform: rotateY(-180deg)
}

.hamburger--3dx-r.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg)
}

.hamburger--3dx-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg)
}

.hamburger--3dy .hamburger-box {
    perspective: 80px
}

.hamburger--3dy .hamburger-inner {
    transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dy .hamburger-inner::before,.hamburger--3dy .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dy.is-active .hamburger-inner {
    background-color: transparent !important;
    transform: rotateX(-180deg)
}

.hamburger--3dy.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg)
}

.hamburger--3dy.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg)
}

.hamburger--3dy-r .hamburger-box {
    perspective: 80px
}

.hamburger--3dy-r .hamburger-inner {
    transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dy-r .hamburger-inner::before,.hamburger--3dy-r .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dy-r.is-active .hamburger-inner {
    background-color: transparent !important;
    transform: rotateX(180deg)
}

.hamburger--3dy-r.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg)
}

.hamburger--3dy-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg)
}

.hamburger--3dxy .hamburger-box {
    perspective: 80px
}

.hamburger--3dxy .hamburger-inner {
    transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dxy .hamburger-inner::before,.hamburger--3dxy .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dxy.is-active .hamburger-inner {
    background-color: transparent !important;
    transform: rotateX(180deg) rotateY(180deg)
}

.hamburger--3dxy.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg)
}

.hamburger--3dxy.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg)
}

.hamburger--3dxy-r .hamburger-box {
    perspective: 80px
}

.hamburger--3dxy-r .hamburger-inner {
    transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dxy-r .hamburger-inner::before,.hamburger--3dxy-r .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dxy-r.is-active .hamburger-inner {
    background-color: transparent !important;
    transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg)
}

.hamburger--3dxy-r.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg)
}

.hamburger--3dxy-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg)
}

.hamburger--arrow.is-active .hamburger-inner::before {
    transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1)
}

.hamburger--arrow.is-active .hamburger-inner::after {
    transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1)
}

.hamburger--arrow-r.is-active .hamburger-inner::before {
    transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1)
}

.hamburger--arrow-r.is-active .hamburger-inner::after {
    transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1)
}

.hamburger--arrowalt .hamburger-inner::before {
    transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.hamburger--arrowalt .hamburger-inner::after {
    transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.hamburger--arrowalt.is-active .hamburger-inner::before {
    top: 0;
    transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1);
    transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22)
}

.hamburger--arrowalt.is-active .hamburger-inner::after {
    bottom: 0;
    transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1);
    transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22)
}

.hamburger--arrowalt-r .hamburger-inner::before {
    transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.hamburger--arrowalt-r .hamburger-inner::after {
    transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.hamburger--arrowalt-r.is-active .hamburger-inner::before {
    top: 0;
    transform: translate3d(8px, -10px, 0) rotate(45deg) scale(0.7, 1);
    transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22)
}

.hamburger--arrowalt-r.is-active .hamburger-inner::after {
    bottom: 0;
    transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1);
    transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22)
}

.hamburger--arrowturn.is-active .hamburger-inner {
    transform: rotate(-180deg)
}

.hamburger--arrowturn.is-active .hamburger-inner::before {
    transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1)
}

.hamburger--arrowturn.is-active .hamburger-inner::after {
    transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1)
}

.hamburger--arrowturn-r.is-active .hamburger-inner {
    transform: rotate(-180deg)
}

.hamburger--arrowturn-r.is-active .hamburger-inner::before {
    transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1)
}

.hamburger--arrowturn-r.is-active .hamburger-inner::after {
    transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1)
}

.hamburger--boring .hamburger-inner,.hamburger--boring .hamburger-inner::before,.hamburger--boring .hamburger-inner::after {
    transition-property: none
}

.hamburger--boring.is-active .hamburger-inner {
    transform: rotate(45deg)
}

.hamburger--boring.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0
}

.hamburger--boring.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg)
}

.hamburger--collapse .hamburger-inner {
    top: auto;
    bottom: 0;
    transition-duration: 0.13s;
    transition-delay: 0.13s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--collapse .hamburger-inner::after {
    top: -20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear
}

.hamburger--collapse .hamburger-inner::before {
    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--collapse.is-active .hamburger-inner {
    transform: translate3d(0, -10px, 0) rotate(-45deg);
    transition-delay: 0.22s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--collapse.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear
}

.hamburger--collapse.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-90deg);
    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--collapse-r .hamburger-inner {
    top: auto;
    bottom: 0;
    transition-duration: 0.13s;
    transition-delay: 0.13s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--collapse-r .hamburger-inner::after {
    top: -20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear
}

.hamburger--collapse-r .hamburger-inner::before {
    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--collapse-r.is-active .hamburger-inner {
    transform: translate3d(0, -10px, 0) rotate(45deg);
    transition-delay: 0.22s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--collapse-r.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear
}

.hamburger--collapse-r.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(90deg);
    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--elastic .hamburger-inner {
    top: 2px;
    transition-duration: 0.275s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.hamburger--elastic .hamburger-inner::before {
    top: 10px;
    transition: opacity 0.125s 0.275s ease
}

.hamburger--elastic .hamburger-inner::after {
    top: 20px;
    transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.hamburger--elastic.is-active .hamburger-inner {
    transform: translate3d(0, 10px, 0) rotate(135deg);
    transition-delay: 0.075s
}

.hamburger--elastic.is-active .hamburger-inner::before {
    transition-delay: 0s;
    opacity: 0
}

.hamburger--elastic.is-active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(-270deg);
    transition-delay: 0.075s
}

.hamburger--elastic-r .hamburger-inner {
    top: 2px;
    transition-duration: 0.275s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.hamburger--elastic-r .hamburger-inner::before {
    top: 10px;
    transition: opacity 0.125s 0.275s ease
}

.hamburger--elastic-r .hamburger-inner::after {
    top: 20px;
    transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.hamburger--elastic-r.is-active .hamburger-inner {
    transform: translate3d(0, 10px, 0) rotate(-135deg);
    transition-delay: 0.075s
}

.hamburger--elastic-r.is-active .hamburger-inner::before {
    transition-delay: 0s;
    opacity: 0
}

.hamburger--elastic-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(270deg);
    transition-delay: 0.075s
}

.hamburger--emphatic {
    overflow: hidden
}

.hamburger--emphatic .hamburger-inner {
    transition: background-color 0.125s 0.175s ease-in
}

.hamburger--emphatic .hamburger-inner::before {
    left: 0;
    transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in
}

.hamburger--emphatic .hamburger-inner::after {
    top: 4px6px;
    right: 0;
    transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in
}

.hamburger--emphatic.is-active .hamburger-inner {
    transition-delay: 0s;
    transition-timing-function: ease-out;
    background-color: transparent !important
}

.hamburger--emphatic.is-active .hamburger-inner::before {
    left: -80px;
    top: -80px;
    transform: translate3d(80px, 80px, 0) rotate(45deg);
    transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1)
}

.hamburger--emphatic.is-active .hamburger-inner::after {
    right: -80px;
    top: -80px;
    transform: translate3d(-80px, 80px, 0) rotate(-45deg);
    transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1)
}

.hamburger--emphatic-r {
    overflow: hidden
}

.hamburger--emphatic-r .hamburger-inner {
    transition: background-color 0.125s 0.175s ease-in
}

.hamburger--emphatic-r .hamburger-inner::before {
    left: 0;
    transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in
}

.hamburger--emphatic-r .hamburger-inner::after {
    top: 4px6px;
    right: 0;
    transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in
}

.hamburger--emphatic-r.is-active .hamburger-inner {
    transition-delay: 0s;
    transition-timing-function: ease-out;
    background-color: transparent !important
}

.hamburger--emphatic-r.is-active .hamburger-inner::before {
    left: -80px;
    top: 80px;
    transform: translate3d(80px, -80px, 0) rotate(-45deg);
    transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1)
}

.hamburger--emphatic-r.is-active .hamburger-inner::after {
    right: -80px;
    top: 80px;
    transform: translate3d(-80px, -80px, 0) rotate(45deg);
    transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1)
}

.hamburger--minus .hamburger-inner::before,.hamburger--minus .hamburger-inner::after {
    transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear
}

.hamburger--minus.is-active .hamburger-inner::before,.hamburger--minus.is-active .hamburger-inner::after {
    opacity: 0;
    transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear
}

.hamburger--minus.is-active .hamburger-inner::before {
    top: 0
}

.hamburger--minus.is-active .hamburger-inner::after {
    bottom: 0
}

.hamburger--slider .hamburger-inner {
    top: 2px
}

.hamburger--slider .hamburger-inner::before {
    top: 10px;
    transition-property: transform, opacity;
    transition-timing-function: ease;
    transition-duration: 0.15s
}

.hamburger--slider .hamburger-inner::after {
    top: 20px
}

.hamburger--slider.is-active .hamburger-inner {
    transform: translate3d(0, 10px, 0) rotate(45deg)
}

.hamburger--slider.is-active .hamburger-inner::before {
    transform: rotate(-45deg) translate3d(40px/-7, -6px, 0);
    opacity: 0
}

.hamburger--slider.is-active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(-90deg)
}

.hamburger--slider-r .hamburger-inner {
    top: 2px
}

.hamburger--slider-r .hamburger-inner::before {
    top: 10px;
    transition-property: transform, opacity;
    transition-timing-function: ease;
    transition-duration: 0.15s
}

.hamburger--slider-r .hamburger-inner::after {
    top: 20px
}

.hamburger--slider-r.is-active .hamburger-inner {
    transform: translate3d(0, 10px, 0) rotate(-45deg)
}

.hamburger--slider-r.is-active .hamburger-inner::before {
    transform: rotate(45deg) translate3d(40px/7, -6px, 0);
    opacity: 0
}

.hamburger--slider-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(90deg)
}

.hamburger--spin .hamburger-inner {
    transition-duration: 0.22s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--spin .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in
}

.hamburger--spin .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--spin.is-active .hamburger-inner {
    transform: rotate(225deg);
    transition-delay: 0.12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--spin.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out
}

.hamburger--spin.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--spin-r .hamburger-inner {
    transition-duration: 0.22s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--spin-r .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in
}

.hamburger--spin-r .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--spin-r.is-active .hamburger-inner {
    transform: rotate(-225deg);
    transition-delay: 0.12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--spin-r.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out
}

.hamburger--spin-r.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--spring .hamburger-inner {
    top: 2px;
    transition: background-color 0s 0.13s linear
}

.hamburger--spring .hamburger-inner::before {
    top: 10px;
    transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--spring .hamburger-inner::after {
    top: 20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--spring.is-active .hamburger-inner {
    transition-delay: 0.22s;
    background-color: transparent !important
}

.hamburger--spring.is-active .hamburger-inner::before {
    top: 0;
    transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 10px, 0) rotate(45deg)
}

.hamburger--spring.is-active .hamburger-inner::after {
    top: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 10px, 0) rotate(-45deg)
}

.hamburger--spring-r .hamburger-inner {
    top: auto;
    bottom: 0;
    transition-duration: 0.13s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--spring-r .hamburger-inner::after {
    top: -20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear
}

.hamburger--spring-r .hamburger-inner::before {
    transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--spring-r.is-active .hamburger-inner {
    transform: translate3d(0, -10px, 0) rotate(-45deg);
    transition-delay: 0.22s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--spring-r.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear
}

.hamburger--spring-r.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(90deg);
    transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--stand .hamburger-inner {
    transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear
}

.hamburger--stand .hamburger-inner::before {
    transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--stand .hamburger-inner::after {
    transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--stand.is-active .hamburger-inner {
    transform: rotate(90deg);
    background-color: transparent !important;
    transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear
}

.hamburger--stand.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-45deg);
    transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--stand.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(45deg);
    transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--stand-r .hamburger-inner {
    transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear
}

.hamburger--stand-r .hamburger-inner::before {
    transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--stand-r .hamburger-inner::after {
    transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--stand-r.is-active .hamburger-inner {
    transform: rotate(-90deg);
    background-color: transparent !important;
    transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear
}

.hamburger--stand-r.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-45deg);
    transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--stand-r.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(45deg);
    transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--squeeze .hamburger-inner {
    transition-duration: 0.075s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--squeeze .hamburger-inner::before {
    transition: top 0.075s 0.12s ease, opacity 0.075s ease
}

.hamburger--squeeze .hamburger-inner::after {
    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--squeeze.is-active .hamburger-inner {
    transform: rotate(45deg);
    transition-delay: 0.12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--squeeze.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.075s ease, opacity 0.075s 0.12s ease
}

.hamburger--squeeze.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--vortex .hamburger-inner {
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1)
}

.hamburger--vortex .hamburger-inner::before,.hamburger--vortex .hamburger-inner::after {
    transition-duration: 0s;
    transition-delay: 0.1s;
    transition-timing-function: linear
}

.hamburger--vortex .hamburger-inner::before {
    transition-property: top, opacity
}

.hamburger--vortex .hamburger-inner::after {
    transition-property: bottom, transform
}

.hamburger--vortex.is-active .hamburger-inner {
    transform: rotate(765deg);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1)
}

.hamburger--vortex.is-active .hamburger-inner::before,.hamburger--vortex.is-active .hamburger-inner::after {
    transition-delay: 0s
}

.hamburger--vortex.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0
}

.hamburger--vortex.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(90deg)
}

.hamburger--vortex-r .hamburger-inner {
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1)
}

.hamburger--vortex-r .hamburger-inner::before,.hamburger--vortex-r .hamburger-inner::after {
    transition-duration: 0s;
    transition-delay: 0.1s;
    transition-timing-function: linear
}

.hamburger--vortex-r .hamburger-inner::before {
    transition-property: top, opacity
}

.hamburger--vortex-r .hamburger-inner::after {
    transition-property: bottom, transform
}

.hamburger--vortex-r.is-active .hamburger-inner {
    transform: rotate(-765deg);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1)
}

.hamburger--vortex-r.is-active .hamburger-inner::before,.hamburger--vortex-r.is-active .hamburger-inner::after {
    transition-delay: 0s
}

.hamburger--vortex-r.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0
}

.hamburger--vortex-r.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg)
}
/*
 * Stylesheet for Contao 5.x
 * Base by mario.assmann@acs-it.de
 * Normalized for Production
 */

/* ==========================================================================
   1. Variablen (Custom Properties)
   ========================================================================== */
:root {
    /* Brand Colors */
    --dunkelviolett: #67267A;
    --flieder:      #C7A4CF;
    --flieder:     #C0A7C7;
    --hellviolett:  #F5F2F7;
    --orange:       #F39200;
                                   
    /* Semantic Colors */
    --color-bg-default: #fff;
    --color-text-on-default: var(--dunkelviolett);
    --color-bg-nav: var(--dunkelviolett);
    --color-text-on-nav: #fff;
    --mm-color-background: var(--hellviolett);
    
    /* Background & Text Pairs */
    --bg-default: #fff;
    --text-on-default: var(--dunkelviolett);

    --bg-subtle: var(--dunkelviolett);
    --text-on-subtle: var(--dunkelviolett);

    --bg-contrast: var(--flieder);
    --text-on-contrast: var(--dunkelviolett);

    --bg-accent: var(--hellviolett);
    --text-on-accent: var(--dunkelviolett);
    
    --bg-header: var(--bg-accent);
    
    --bg-footer: var(--dunkelviolett);
    --text-on-footer: #fff;
    
    --color-hamburger: var(--color-bg-default); 

    /* Layout Sizes */
    --width-small: 870px;
    --width-regular: 1000px;
    --width-large: 1240px;
    --width-full: 100vw;
  
    /* Spacing System */
    --space-sm: 1.25rem;    /* 20px base */
    --space-md: 2.5rem;     /* 40px base */
    --space-lg: 5rem;       /* 80px base */
    --space-xl: 8rem;       /* 128px base */
    
    /* Typography stacks */
    --ff-body: 'Open Sans', "Arial", sans-serif;
    --ff-heading: 'Open Sans 700', sans-serif;

    /* Fluid Typography (80px -> 45px etc.) */
    --fs-80: clamp(2.813rem, 4.042vw + 1.767rem, 5rem);
    --lh-80: clamp(2.637rem, 3.789vw + 1.656rem, 4.688rem);

    --fs-60: clamp(2.813rem, 1.732vw + 2.364rem, 3.75rem);
    --lh-60: clamp(2.503rem, 1.542vw + 2.104rem, 3.338rem);

    --fs-45: clamp(2.5rem, 0.577vw + 2.351rem, 2.813rem);
    --lh-45: clamp(2.5rem, 0.577vw + 2.351rem, 2.813rem);

    --fs-35: clamp(1.563rem, 1.155vw + 1.264rem, 2.188rem);
    --lh-35: clamp(1.781rem, 1.316vw + 1.441rem, 2.494rem);
    
    --fs-30: clamp(1.375rem, 1.018vw + 1.112rem, 1.875rem);
    --lh-30: clamp(1.375rem, 1.018vw + 1.112rem, 1.875rem);
    
    --fs-22: clamp(1.25rem, 0.231vw + 1.19rem, 1.375rem);
    --lh-22: clamp(1.412rem, 0.261vw + 1.345rem, 1.554rem);
    
    --fs-service-nav: 0.85rem;
}

/* ==========================================================================
   2. Modern Reset & Fonts
   ========================================================================== */
@font-face {
    font-display: swap;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../../files/theme/lprth/fonts/open-sans-v44-latin-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Open Sans 700';
    font-style: normal;
    font-weight: 700;
    src: url('../../files/theme/lprth/fonts/open-sans-v44-latin-700.woff2') format('woff2');
}

*, *::before, *::after {
    box-sizing: border-box;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
    margin: 0;
}

img, picture {
    display: block;
    max-width: 100%;
    height: auto;
}

input, button, textarea, select {
    font: inherit;
}

/* ==========================================================================
   3. Basis-Layout und Grids
   ========================================================================== */
html {
    font-size: 150%; /* 20px Basis */
    background: var(--color-bg-default);
    scroll-behavior: smooth;
}

body {
    color: var(--color-text-on-default);
    font-family: var(--ff-body); /* Geändert von 'Open Sans' */
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Contao Standard-Container */
.mod_article {
    width: 100%;
    position: relative;
}

.mod_article .inside {
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--space-sm);
}

main .content-text,
main .mod_eventlist,
main .content-gallery {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
}

@media (max-width: 768px) {
    .mod_article .inside {
        padding: var(--space-md) var(--space-sm);
    }
}

  /* Grids */
  .grid { display: grid; gap: 1rem; }
  .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-2-3-2 { grid-template-columns: 3fr 2fr;  }
  .grid figure {display: grid; justify-content: flex-end;}

/* ==========================================================================
   4. Typografie & Content Elements
   ========================================================================== */
h1, h2, h3, h4 {
    font-family: var(--ff-heading); /* Geändert von 'Open Sans 700' */
    font-weight: 700;
    color: var(--logobraun);
    margin-bottom: var(--space-sm);
}

h2 { margin-top: var(--space-lg); }
h3 { margin-top: var(--space-md); }
h4 { margin-top: var(--space-sm); }
h1:first-child, h2:first-child, h3:first-child { margin-top: 0; }

/* Sticky Headlines: Wenn zwei Überschriften aufeinander folgen */
h1 + h2, h2 + h3, h3 + h4 { margin-top: 0.5rem; }

h1, .h1 {
    font-size: var(--fs-35); /* Standard für Inhaltsseiten */
    line-height: var(--lh-35);
}

/* Die ganz große Hero-Überschrift (z.B. nur auf der Startseite) */
.hero-title {
    font-size: var(--fs-80);
    line-height: var(--lh-80);
}

h2, .h2 {
    font-size: var(--fs-30);
    line-height: var(--lh-30);
}

h3, .h3 {
    font-size: var(--fs-22);
    line-height: var(--lh-22);
}

p, ul, ol, .ce_text, .ce_table {
    margin-bottom: var(--space-sm);
}

p:last-child { margin-bottom: 0; }

/* Listen */
ul, ol {
    padding-left: var(--space-sm);
}

li {
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
}

li::marker {
    color: var(--gelbbraun);
    font-size: 1.1em;
}

/* Tabellen */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-md);
    font-size: 0.95rem;
    line-height: 1.4;
}

th, td {
    padding: var(--space-sm);
    border-bottom: 1px solid var(--gruenbraun);
    vertical-align: top;
    text-align: left;
}

th {
    font-family: var(--ff-heading); 
    background-color: rgba(176, 116, 37, 0.1);
    border-bottom: 2px solid var(--gelbbraun);
}

/* ==========================================================================
   5. Komponenten (Header, Footer, Nav)
   ========================================================================== */

/* 5.1 Header & Nav */
#header {
    background: var(--bg-header); 
//    padding-top: 60px;
//    padding-bottom: 110px; 
    
    background-image: linear-gradient(
      to bottom, 
      transparent calc(100% - 50px), 
      var(--flieder) calc(100% - 50px), 
      var(--flieder) calc(100% - 40px), 
      var(--dunkelviolett) calc(100% - 40px)
    );
    
    background-repeat: no-repeat;

 }
 
#header .inside {
//    max-width: var(--width-large);
//    margin: 0 auto;
    position: relative;
//    padding: 0 var(--space-sm);
}

.header-content .inside {
  padding: var(--space-lg) var(--space-sm);
}

.header-logo figure {
  display: flex;
  justify-content: flex-end;
}

.nav-row {
  background: var(--dunkelviolett);
  height: 80px;
  position: relative;
}

.nav-row ul {
    max-width: var(--width-large);
    
    display: flex;
    list-style: none;
  //  margin: 0;
  //  padding: 0;
    gap: var(--space-sm);
    margin: 0 auto;
    padding: 0 var(--space-sm);
    line-height: 2.5;
}

.nav-row a, .nav-row strong {
    text-decoration: none;
    color: var(--color-text-on-nav);
    font-size: 1.2rem;
}

.nav-row ul li {
    margin-bottom: initial;
    padding-left: initial;
}

.nav-row .nav-icon {
  display: none;
  position: absolute;
  left: var(--space-sm);
  top: var(--space-sm);
}



/* Footer */
#footer {
    background-color: var(--bg-footer);
    color: var(--text-on-footer);
    padding: var(--space-md) 0;
}

.footer-grid .inside {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    max-width: var(--width-large);
}

@media (max-width: 768px) {
 footer .content-element-group {
    text-align: center;
 }
 
  footer .content-element-group img {
    margin: 0 auto;
 }
 
}

/* --- 5.2 Mobile Navigation & mmenu --- */

/* 1. Trigger (Burger-Button) standardmäßig verstecken */
.mobile-trigger {
    display: none;
    width: 2.5rem; 
    height: 2.5rem;
    position: absolute;
    z-index: 102;
    cursor: pointer;
    top: 10px;
    left: 0;
    
}

/* 2. mmenu Plugin-spezifische Overrides & Fixes */
/* Verhindert das Aufblitzen beim Laden */
#mobile-navh:not(.mm-menu) {
    display: none;
}

.mm-navbar {
    display: none;
}

.mm-panels {
    background: var(--hellbeige); /* Nutzt deine Variable */
}

.mm-panel {
    background: none;
}

/* Der Schließen-Button im mmenu */
.mm-close-button {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    cursor: pointer;
}

.mm-close-button::before,
.mm-close-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 20%;
    width: 60%;
    height: 2px;
    background-color: var(--dunkelviolett);
}

.mm-close-button::before { transform: rotate(45deg); }
.mm-close-button::after  { transform: rotate(-45deg); }


/* 3. Mobile Zustände (Media Query innerhalb der Komponente) */
@media (max-width: 768px) {

    .nav-row .nav-icon {
      display: block;
    }

    .mobile-trigger {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Das "Burger"-Icon aus CSS-Linien */
    .burger-inner, 
    .burger-inner::before, 
    .burger-inner::after {
        width: 1.5rem;
        height: 2px;
        background-color: var(--hellviolett);
        position: absolute;
        transition: all 0.3s ease;
    }

    .burger-inner::before { content: ""; top: -8px; left: 0; }
    .burger-inner::after  { content: ""; top: 8px; left: 0; }
    
    /* Desktop-Navigation ausblenden */
    .nav-row ul.level_1 {
        position: static;
        height: 0;
        overflow: hidden;
    }
    
    .nav-row.active {
      height: auto;
    }

    .nav-row.active ul.level_1 {
        position: static;
        overflow: visible;
        padding-top: 80px;
        flex-direction: column;
        height: auto;
        transition: 0.2s;
        gap: initial;
        text-align: center;
    }
    
}

/* --- 5.3 Service-Navigation (Footer/Top-Bar) --- */


.nav-service ul {
    display: flex;
    flex-direction: column; /* Untereinander auf Handys */
  /*  gap: 0.75rem;*/
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-service ul li {
    padding-left: initial;
    margin-bottom: initial;
}

.nav-service a {
    text-decoration: none;
   /* font-size: var(--fs-service-nav);     */
    color: inherit; /* Übernimmt die Farbe vom Footer (z.B. hellbeige) */
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

/* Interaktion & Barrierefreiheit */
.nav-service a:hover {
    color: var(--gelbbraun);
    text-decoration: underline;
}

.nav-row a:focus,
.nav-service a:focus,
.event a:focus,
p.back a:focus {
    outline: 3px solid #fff; /* Deine Akzentfarbe */
    outline-offset: 4px;
    background-color: #fff; /* Kontrast zum Hintergrund */
    color: var(--text-on-default);
    border-radius: 2px;
}

.event a:focus,
p.back a:focus {
    outline: 3px solid var(--text-on-default);
 }

/* Mobile Anpassung */
@media (max-width: 768px) {
    .nav-service ul {
        flex-direction: column; /* Untereinander auf Handys */
        gap: 0.75rem;
      /*  align-items: center; */   /* Falls der Footer zentriert ist */
    }

    .nav-service li::after {
        display: none;          /* Trennstrich auf Mobile ausblenden */
    }
}

/* ==========================================================================
   6. Formulare
   ========================================================================== */
form {
    padding: var(--space-md);
    border-radius: 4px;
}

.formbody {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.widget-textarea, .widget-checkbox, .widget-submit {
    grid-column: span 2;
}

input[type="text"], input[type="email"], select, textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--hellbeige);
    border: 1px solid transparent;
    color: var(--logobraun);
}

input:focus, textarea:focus {
    outline: none;
    border-color: var(--logobraun);
}

button[type="submit"] {
    background-color: var(--logobraun);
    color: var(--hellbeige);
    padding: 1rem 2rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}

button[type="submit"]:hover {
    background-color: var(--gelbbraun);
}

/* ==========================================================================
   7. Hilfsklassen & Utilities
   ========================================================================== */
.invisible { display: none; }

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Hintergrund-Stile für Artikel-Templates */
.bg-default  { background-color: var(--bg-default);  color: var(--text-on-default); }
.bg-subtle   { background-color: var(--bg-subtle);   color: var(--text-on-subtle); }
.bg-contrast { background-color: var(--bg-contrast); color: var(--text-on-contrast); }
.bg-accent   { background-color: var(--bg-accent);   color: var(--text-on-accent); }

/* WICHTIG: Kontrast für Überschriften innerhalb dieser Hintergründe anpassen */
.bg-contrast h1, .bg-contrast h2, .bg-contrast h3, .bg-contrast h4,
.bg-accent h1, .bg-accent h2, .bg-accent h3, .bg-accent h4 {
    color: inherit; /* Nutzt die Textfarbe der jeweiligen bg-Klasse */
}

/* Breiten-Varianten für .mod_article */
.width-large .inside  { max-width: var(--width-large); }
.width-medium .inside { max-width: var(--width-regular); }
.width-small .inside  { max-width: var(--width-small); }
.width-full .inside   { max-width: none; padding: 0; }

.borderline-akzent {
  border-bottom: 40px solid var(--dunkelviolett); 
}

.skip-link {
    position: absolute;
    top: -100px;         
    left: 10px;
    background: #fff; 
    color: var(--color-text-on-default); 
    padding: 1rem;
    z-index: 1000;
    text-decoration: none;
}

.skip-link:focus {
    top: 10px;              /* Erscheint beim Tabben */
    outline: 3px solid var(--color-text-on-default); /* Deine Akzentfarbe */
    outline-offset: 4px;
    background-color: #fff; /* Kontrast zum Hintergrund */
    color: var(--color-text-on-default);
    border-radius: 2px;
}

.deco-1 {
  position: relative;
}

.deco-1::after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: solid 10px var(--flieder);
  z-index: 10;
}

.deco-1 .inside {
    padding-bottom: 22vw;
    background-image: url(../../files/theme/lprth/images/illu-personen.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
}

.content-text.card {
    background-color: var(--hellviolett);
    padding: var(--space-md);
}




@media (min-width: 1200px) {

.deco-1 .inside {
      padding-bottom: 12rem;
    }

}


/* ==========================================================================
   8. Module (Eventliste, News, etc.)
   ========================================================================== */

/* Container für die Liste */

.mod_eventlist.cards .card {
    background: #fff;
    color: var(--text-on-default);
}

.mod_eventlist.cards .card header {
  background: var(--dunkelviolett);
  color: #fff;
  text-align: center;
  padding: var(--space-sm);
}



.mod_eventlist.cards .card:not(:last-child) {
  margin-bottom: var(--space-md);
}

.mod_eventlist.cards .card header h3 {
  margin: 0;
}

.mod_eventlist.cards .card .event-content {
  padding: var(--space-md);
}

.mod_eventlist.cards .card .event-content > *:last-child {
  margin-bottom: 0;
}

.mod_eventlist.cards .card .event-content .location,
.mod_eventlist.cards .card .event-content .info {
  display: flex;
}

.mod_eventlist.cards .card .event-content .location span,
.mod_eventlist.cards .card .event-content .info span {
  font-weight: bold;
  width: var(--space-md);
}

.mod_eventreader {
  margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
} 

/* Spezielles Styling für die Programmtabelle der Veranstaltung */
.program-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-md); /* Nutzt den Standard-Abstand aus den Quellen [4] */
    font-family: var(--ff-body); /* Open Sans [2] */
    font-size: 0.95rem; /* Standard-Tabellengröße [4] */
    line-height: 1.4; [4]
}

/* Styling der Tabellenzellen */
.program-table td {
    padding: var(--space-sm); /* Standard-Padding [5] */
    border-bottom: 1px solid var(--gruenbraun); /* Rahmenfarbe aus dem Basis-Design [5] */
    vertical-align: top; [5]
}

/* Zebrastreifen-Effekt für bessere Lesbarkeit */
.program-table tr:nth-child(even) {
    background-color: var(--hellviolett); /* Subtile Hintergrundfarbe für Senioren-Kontext [1] */
}

/* Fokus auf die Zeitspalte (erste Spalte) */
.program-table td:first-child {
    font-family: 'Open Sans 700', sans-serif; /* Fettgedruckte Schrift [6] */
    font-weight: 700; [7]
    color: var(--dunkelviolett); /* Markenfarbe für Akzente [1, 3] */
    white-space: nowrap; /* Verhindert Zeilenumbruch bei Uhrzeiten */
    width: 150px; /* Feste Breite für die Zeitangabe */
}

/* Interaktion beim Drüberfahren */
.program-table tr:hover {
    background-color: rgba(199, 164, 207, 0.1); /* Hauchzartes Flieder beim Hovern [1] */
    transition: background-color 0.3s ease;
}

/* Mobile Optimierung */
@media (max-width: 768px) {
    .program-table {
        font-size: 0.85rem; /* Etwas kleinere Schrift auf Handys [2, 8] */
    }
    
    .program-table td:first-child {
        width: 100px;
    }
}

/* Der Galerie-Container */
.content-gallery > ul {
    display: grid;
    gap: var(--gap); /* Abstand zwischen den Bildern */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 4 Spalten Logik */
.content-gallery--cols-4 > ul {
    grid-template-columns: repeat(4, 1fr);
}

/* Responsivität für Tablet (2 Spalten) */
@media (max-width: 1024px) {
    .content-gallery--cols-4 > ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsivität für Smartphone (1 Spalte) */
@media (max-width: 600px) {
    .content-gallery--cols-4 > ul {
        grid-template-columns: 1fr;
    }
}

/* Optik der Listenelemente und Bilder */
.content-gallery li figure {
    margin: 0;
}

.content-gallery img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--base-border-radius); /* Falls du Rundungen nutzt */
    transition: transform 0.3s ease;
}

/* Ein kleiner Hover-Effekt (optional) */
.content-gallery a:hover img {
    transform: scale(1.02);
}




/* ==========================================================================
   9. Media Queries (Mobile First oder Anpassungen)
   ========================================================================== */
@media (max-width: 768px) {

    .header-content .inside {
      padding: var(--space-sm) var(--space-sm) var(--space-lg) var(--space-sm);
    }

    .formbody, .footer-grid .inside, .grid {
        grid-template-columns: 1fr !important;
    }
    
    .grid figure {display: grid; justify-content: center; padding-top: var(--space-sm);}
    
    main .content-text,
    main .mod_eventlist  {
        margin-top: var(--space-md);
        margin-bottom: var(--space-md);
    }

    /* #header .content-image img { max-width: 276px; }  */
    
    .mobile-trigger {
        display: flex;
        /* Burger-Logik hier lassen */
    }
    
    .mod_eventlist.cards .card .event-content {
      padding: var(--space-sm);
    }
    
    .mod_eventlist.cards .card .event-content .location,
    .mod_eventlist.cards .card .event-content .info {
      flex-direction: column;
      text-align: center;
    }
    
    .mod_eventlist.cards .card .event-content .location span,
    .mod_eventlist.cards .card .event-content .info span {
      width: initial;
    }
    
}