@font-face {
    font-family: 'Gentium Plus';
    src: url('../fonts/GentiumPlus.woff2') format('woff2'),
        url('../fonts/GentiumPlus.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gentium Plus';
    src: url('../fonts/GentiumPlus-Italic.woff2') format('woff2'),
        url('../fonts/GentiumPlus-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gentium Plus';
    src: url('../fonts/GentiumPlus-Bold.woff2') format('woff2'),
        url('../fonts/GentiumPlus-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sofia Sans Condensed';
    src: url('../fonts/SofiaSansCondensed-Thin.woff2') format('woff2'),
        url('../fonts/SofiaSansCondensed-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sofia Sans';
    src: url('../fonts/SofiaSans-Regular.woff2') format('woff2'),
        url('../fonts/SofiaSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sofia Sans Condensed';
    src: url('../fonts/SofiaSansCondensed-Medium.woff2') format('woff2'),
        url('../fonts/SofiaSansCondensed-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

.alle { border-bottom: 2rem solid #5461C8;}
.mod02 .alle { border-bottom: none; border-left: 1rem solid #5461C8;}
.blog-item.alle figure { background: #5461C8;}

/*gemeinde + gd*/
.mod02 ul li:has(.tag-6) .fields-container {
    font: 400 2em 'Sofia Sans Condensed';
    padding: 0.6rem 0;
    color: #5461C8;
}
.mod02 ul li:has(.tag-6){ border-bottom: none; border-left: 1rem solid #5461C8;}

/*schelmengraben*/
/*.graben { border-bottom: 2rem solid #E492B7;}*/
.mod02 ul li:has(.tag-2) { border-bottom: none; border-left: 1rem solid #E492B7;}
ul.graben, .blog-items.graben figure { background: #E492B7;}
.mod-menu ul li:has(.graben) { border-bottom: none; background-color: #E492B7;}
.tag-2 a.btn {color: #E492B7;}
.moduletable.graben.angebote ul li {background: #E492B7;}
/*.com-tags-tag__category .list-group-item:has( a[href^="/index.php/schelmengraben/termine-schelmengraben/"]) {background: #E492B7;}*/

/*freudenberg*/
/*.berg { border-bottom: 2rem solid #EB568E;}*/
.mod02 ul li:has(.tag-3) { border-bottom: none; border-left: 1rem solid #EB568E;}
ul.berg, .blog-items.berg figure { background: #EB568E;}
.mod-menu ul li:has(.berg) { border-bottom: none; background-color: #EB568E;}
.tag-3 a.btn {color: #EB568E;}
.moduletable.berg.angebote ul li {background: #EB568E;}


/*schierstein*/
/*.stein{ border-bottom: 2rem solid #EA3380;}*/
.mod02 ul li:has(.tag-4){ border-bottom: none; border-left: 1rem solid #EA3380;}
ul.stein, .blog-items.stein figure { background: #EA3380;}
.mod-menu ul li:has(.stein) { border-bottom: none; background-color: #EA3380;}
.tag-4 a.btn {color: #EA3380;}
.moduletable.stein.angebote ul li {background: #EA3380;}

/*walluf*/
/*.wall{ border-bottom: 2rem solid #E50083;}*/
.mod02 ul li:has(.tag-5){ border-bottom: none; border-left: 1rem solid #E50083;}
ul.wall, .blog-items.wall figure { background: #E50083;}
.mod-menu ul li:has(.wall) { border-bottom: none; background-color: #E50083;}
.display .walluf figcaption {width: inherit;}
.tag-5 a.btn {color: #E50083;}
.moduletable.wall.angebote ul li {background: #E50083;}

html {

    font-family: "Gentium Plus", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    background: #fff;
    color: #555;
    scroll-behavior: smooth;
    word-wrap: break-word;
    hyphens: auto;
}
body {margin: 0; background-color: #F6BE00;}
*, *:before, *:after {
  box-sizing: border-box;
}

/*reset*/
ul {margin: 0; padding: 0;list-style: none;}
dl {margin: 0;}
a {
  color: #555;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease-out 0s;
}
a:hover {
  color: #5C2583;
}

.graben {}
.berg {}
.stein{}
.wall{}
.blog-item a {color: #5C2583;}

/*fonts*/
p {font-size: 1.2rem; color: #555; margin: 0.2rem 0;}
h1, h2, h3, h4, h5, h6 {font-family: 'Sofia Sans Condensed';margin: 0;}
h1, h2 {font-weight: 500;font-size: 2.3rem;line-height: 1.4;}
h3 {font-weight: 500;font-size: 1.6rem;line-height: 2;}
h4 {font-weight: 100;font-size: 2.4rem;text-decoration: underline;}
h5 {font-weight: 500;font-size: 1.4rem;}
h6 {font-size: .875rem;line-height: 1.4;}

figure {margin: 0;}
figure.image {

justify-self: start;
border: 0.1em solid #F6BE00;}
figure.image img {
    
    display: block;
    max-width: 100%;
}
.image figcaption {
    padding: .5em;
    text-align: center;
}
/*elemente*/
.button {
    display: flex;
    border: 2px solid #fff;
    padding: 0.5rem;
    gap: 0.5rem;
    text-wrap: nowrap;
}
.button > div {height: 30px;}
.buttongroup {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin: 2rem 0 0 0;
}
.button img {
  height: 100%;
}
.mod03 .button {
        border: 2px solid #fff;
}
.blog-item .button {
        border: 2px solid;
        width: max-content;
}
/*links*/
a[href^="https://"]::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M384 64C366.3 64 352 78.3 352 96C352 113.7 366.3 128 384 128L466.7 128L265.3 329.4C252.8 341.9 252.8 362.2 265.3 374.7C277.8 387.2 298.1 387.2 310.6 374.7L512 173.3L512 256C512 273.7 526.3 288 544 288C561.7 288 576 273.7 576 256L576 96C576 78.3 561.7 64 544 64L384 64zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 416C480 398.3 465.7 384 448 384C430.3 384 416 398.3 416 416L416 496C416 504.8 408.8 512 400 512L144 512C135.2 512 128 504.8 128 496L128 240C128 231.2 135.2 224 144 224L224 224C241.7 224 256 209.7 256 192C256 174.3 241.7 160 224 160L144 160z"/></svg>');
    height: 1em; 
    width: 1em; 
    filter: invert(0.5);
    display: inline-block;
    vertical-align: -0.2em;
}
a.noicon::before {
    content: none;
}
a[href^="mailto:"] {
    
}
a[href$=".pdf"]::before {
    content: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;"> <g id="download" transform="matrix(1,0,0,1,-0.5,0)"> <path d="M14,10L9.5,14.5L5,10" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:1px;"/> <rect x="3" y="17" width="13" height="1"/> <path d="M9.5,13.91L9.5,3" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:1px;"/> </g> </svg>');
    height: 1em; 
    width: 1em; 
    filter: invert(0.5);
    display: inline-block;
    vertical-align: -0.2em;
}

/*klassen*/
.span {
  grid-column: 1/-1;
}

.cflex {
    display: flex;
    flex-direction: column;
}
.blog-items.termin.masonry-2,
.blog-items .masonry-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(100px, 1fr));
    gap: 2rem;
}
.termin .blog-item {grid-template-columns: 1fr;}

.masonry-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(100px, 1fr));
    gap: 1rem;
}
.blog-items.termin .item-content {
    display: grid;
    grid-template-columns: 2fr 3fr;
}
.blog-items.termin .item-content .fields-container { grid-column:1/2; grid-row: 1/5; }
.blog-items.termin .item-content .page-header { grid-column:2/-1; grid-row: 1/2; }
.blog-items.termin .item-content .tags { grid-column:2/-1; grid-row: 4/5; }
.termin .blog-item .item-content {padding: 0;}
.termin .fields-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.termin .boxes ul.fields-container { 
    padding: 0;
}
.termin.pink1 .fields-container {background: #E492B7;}
.termin.pink2 .fields-container {background: #EB568E;}
.termin.pink3 .fields-container {background: #EA3380;}
.termin.pink4 .fields-container {background: #E50083;}
.termin .fields-container .field-value {
    font: 100 2.4em 'Sofia Sans Condensed';
    color: #fff;
}
.termin .fields-container li::before {content: none;}
.termin .fields-container li {padding: 0;}
/**/
.alles {
    display: grid;
    grid-template-areas: 
    "main"
    "modul"
    "fuss";
    width: 100vw;
    padding: 0.3rem;
}
@media (min-width: 60em) { 
    .alles {
        grid-template-areas: 
        "main modul"
        "fuss fuss";
        grid-template-columns: 5fr 2fr;
        max-width: 1470px;
        padding:0 0.3rem;
        margin: 0 auto;
}}

#eins {
    grid-area: main;
}
#zwo {
    grid-area: modul;
}
.main {
    gap: 2rem;
    display: flex;
    flex-direction: column;
}    
.kopf {
    display: grid;
    grid-template-rows: 1618fr 1000fr auto;
}    
.titel {
    display: flex;
    align-items: center;
}
.titel img {
    padding: 1rem 0;
    margin-right: 0.3rem;
    width: 100%;
}
figcaption {
    text-align: center;
}

@media (min-width: 60em) { 
    .logo {
        display: flex;
        flex-direction: column;
        
}}
.umlogo {
    display: none;
}
@media (min-width: 60em) { 
    .umlogo {
    display: flex;
    justify-content: center;
    aspect-ratio: 1618 / 1000;
    background-color: #5461C8;       
}}
.logo img {max-width: 96px;}

.display {
    width: 100%;
    aspect-ratio: 1618/1000;
    overflow: hidden;
    align-content: center;
}
.item-page figure,
.display .mod-custom figure {
    display: grid;
}
.item-page figure img,
.display .mod-custom figure img {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    object-fit: contain;
    aspect-ratio: 1618/1000;
}
.item-page figcaption,
.display figcaption {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1/-1;
}
.item-page figcaption {
    font: 400 1em 'Sofia Sans Condensed';
    color: #5C2583;
    padding: 0.5rem;
    background-color: #F6BE00;
    background-color: rgba(246, 190, 0, 0.5); 
    align-self: end;
 
}
.display figcaption h2 {
    font: 100 4em 'Sofia Sans Condensed';
    color: #5C2583;
    padding: 0.5rem;
    background-color: #F6BE00;    
    background: rgba(246, 190, 0, 0.5); 
    align-self: end;
}
.display5 figure img
{    padding: 3rem;}

.slide img, .display img  {
    height: 100%;
    object-fit: cover;
    width: 100%;
}
/*opener*/

.opener{
    display: flex;
  padding: 0.5rem;
  justify-content: center;
    }
@media (min-width: 60em) { 
    .opener{
    aspect-ratio: 1618/1000;
    display: grid;
    gap: 1rem;
    padding: 2rem;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 2fr repeat(4, 1fr) 2fr;
    }}
.opener > img {object-fit: contain; width: 12rem;}    
@media (min-width: 60em) { 
    .opener > img {object-fit: contain; width: inherit;}}

    .kieins, .kizwei, .kidrei, .kivier{
        display: none;
}
@media (min-width: 60em) { 
    .kieins{
        display: inline-block;
        grid-column: 1/span 2;
        grid-row: 1/span 4;
    }}

@media (min-width: 60em) { 
    .kizwei {
                display: inline-block;
        grid-column: 1/span 3;
        grid-row: 5/span 2;
    }}

@media (min-width: 60em) { 
    .kidrei {
                display: inline-block;
        grid-column: 4/span 3;
        grid-row: 1/2;
    }}

@media (min-width: 60em) { 
    .kivier {
                display: inline-block;
        grid-column: 4/span 3;
        grid-row: 6/7;
    }}

@media (min-width: 60em) { 
    .kicenter {

        grid-column: 3/span 2;
        grid-row: 2/6;
    }}

/*module*/
.homebtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 100%;
    padding: 0 1rem;
    background-color: #5461C8;
    aspect-ratio: 1618/1000;
}
.homebtn img {width: 100%}
@media (min-width: 60em) {
    .homebtn {display: none;}}


.mod-menu {
    display: flex;
}
.mod-menu ul {
    width: 100%;
}
.kopf .mod-menu ul li {
    display: inline-flex;
    align-items: end;
    width: 100%;
    justify-content: end;
    padding: 0 0.5rem;
}
.kopf .mod-menu ul li a {
    font:  normal 1.2em 'Sofia Sans Condensed'; color: #fff;}

    @media (min-width: 60em) { 
        .kopf .mod-menu ul li a {
            font:  500 1.6rem 'Sofia Sans Condensed';
        }}
.mod-menu ul li.current a {text-decoration: underline;}
.submenu ul li a{
    font-weight: 100;
    padding: 1.4rem 0;
    color: #fff;
}

footer {grid-area: fuss;padding-top: 10rem;}
footer .mod-menu {
    font: 400 1.1rem 'Sofia Sans Condensed';
    padding: 1rem 0.6rem;
    gap: 1.3rem;
    hyphens: none;
    hyphens: none;
    flex-wrap: wrap;
    justify-content: space-between;
}
.artist {

}
.wab {
    position: relative;
    vertical-align: -0.26em;
    margin: 0 0.1em 0 0.5em;
}
.wab svg {
    height: 1.2rem;
    position: relative;
}
.mod-menu .fussmenu ul {
    flex-wrap: wrap;
    gap:2rem;
}
.fussmenu .mod-menu__sub, .fussmenu .deeper {
    display: flex;
    gap: 1rem;
}
.mod-menu .fussmenu a{
    font-size: 1rem;
    color: #5C2583;
}
.mod01 {
    background: rgba(255, 255, 255, 0.5); 
    padding: 2rem;
    gap: 1rem;
}
.mod01 .mod-custom { 
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}
.mod01 .mod-custom div {flex-grow: 1;}
.mod02, .mod02 a, .mod02 h4  {color: #555;}
.mod02 h4 {font-size: 1.4rem; font-weight: 400;}
.mod02 ul.mod-list {
    display: flex;
    flex-wrap: wrap;
}

.modulhead {
    padding: 1rem 3rem;
}
.mod02 ul.mod-articles-items.mod-list > li
 {
    padding: 1rem 2rem;
    margin: 0 0 1rem 0;
    width: 300px;
    box-sizing: border-box;
}
.mod02 .mod-articles-item-content {
    display: flex;
    flex-direction: column;
}

.mod02 .mod-articles-item-content .mod-articles-tags {
    order: 10;
}
.tags a {
    font:  500 0.8rem 'Sofia Sans Condensed';
    text-transform: uppercase;
}
.com-tags-tag__category {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.list-group-item{
  background: #fff;
  padding: 0.6rem;
}

.mod03 {
    display: flex;
    padding: 3rem;
    flex-direction: column;
    gap: 1rem;
    background-color: #5461C8;
}

.mod03 p, .mod03 > *, .mod03 a {color: #fff; margin: 0; }

/* modul angebote */
.moduletable.angebote {display: grid; gap: 1rem; background: none; margin-right: 2rem;}
.moduletable.angebote p, .moduletable.angebote a {color: #fff;}
.moduletable.angebote h4 {font: 100 2.4em 'Sofia Sans Condensed'; padding: 0 0 1rem 0; text-decoration: none;}
.moduletable.angebote h5 {color: #fff; text-decoration: underline;}
.moduletable.angebote ul {display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; justify-content: stretch; grid-auto-flow: dense;}
.moduletable.angebote ul li {padding: 1rem; grid-column: 1/span5;}

@media (min-width: 60em) { 
.moduletable.angebote ul li:nth-child(4n) { grid-column: 4 / span 2;}}
@media (min-width: 60em) { 
.moduletable.angebote ul li:nth-child(4n+1) { grid-column: 1 / span 2;}}
@media (min-width: 60em) { 
.moduletable.angebote ul li:nth-child(4n-1) { grid-column: 1 / span 3;}}
@media (min-width: 60em) { 
.moduletable.angebote ul li:nth-child(4n-2) { grid-column: 3 / span 3;}}


/* Slideshow-Container */
.slideshow {
    position: relative;
    overflow: hidden;
    display: flex;
}
.slide-wrapper {
    display: flex;
    width: 400%; /* Extra Platz für den Trick */
    animation: slideAnimation 120s infinite ease-in-out;
}
.slide {
    flex: 0 0 100%;
}

@keyframes slideAnimation {
    0% { transform: translateX(0%); }
    33% { transform: translateX(-100%); }
    66% { transform: translateX(-200%); }
    100% { transform: translateX(-300%); }
}
/*kategrie*/
.com-content-category-blog__description {
    background: #fff;
    padding: 1rem;
}
/*inhalt*/
.blog-items {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 3rem 0 0 0;
}

.blog-item {
    display: grid;
    grid-template-columns: 1fr;
    background: #fff;
    gap: 2rem;
 }
    @media (min-width: 60em) { 
        .blog-item:has(figure) {
            grid-template-columns: 3fr 4fr;
}}


.blog-item figure
, .com-content-article.item-page figure {
    overflow: hidden;
 }
.blog-item figure img
, .com-content-article.item-page figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
 }
.blog-item .item-content {
    padding:1rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
 }
 .blog-item .item-content > * {
    margin: 0;
    padding: 0.6rem 0 0;
 }
.blog-item .item-content h2 {margin: 0;}
.blog-item .item-content h2.item-title a {
    color:#555;
    padding: 1rem 0;
}
.item-content dl.article-info {margin-top: auto;}
.article-info dd {
    font-size: 0.8rem;
    margin: 0;
}
.article-info .category-name a {color: #555;}

/*Artikel*/
.com-content-article.item-page {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "head"
                        "bild"
                        "text"
                        "info";
    background: #fff;
    gap: 2rem;
    padding: 1rem;
}
    @media (min-width: 60em) { 
        .com-content-article.item-page:has(figure) {
            grid-template-columns: 3fr 4fr;
            grid-template-areas: "bild head"
                                "bild text"
                                "bild info";
}}
    @media (min-width: 60em) { 
        .com-content-article.item-page {
            grid-template-columns: 1fr;
            grid-template-areas: "head"
                                "text"
                                "info";
}}
.item-page .item-image { grid-area: bild;}
.item-page .com-content-article__body {grid-area: text;}
.item-page .page-header {grid-area: head;}
.item-page .article-info {grid-area: info;} 
.item-page .pagenavigation  {grid-area:nav;}
.article-info-term {display: none;}
p.readmore {font-size:1rem;font-family: 'Sofia Sans Condensed'; text-transform: uppercase;opacity: 0.6;margin: 1.4rem 1rem 1rem 0;}

p.readmore a {
    border: solid 2px;
    padding: 0.6rem;
    width: max-content;
}
/*
*Liste
*/

.item-content ul, .item-page ul  {list-style: none; font-size: 1.2rem;}
.item-content ul li, .item-page ul li { padding-left: 20px; }
/*.item-content ul li::before, .item-page ul li::before  {
  content: '–\00A0\00A0';
  position: relative;
  left: -30px;
  width: 30px;
  height: 1.5em;
  margin-bottom: -1.5em;
  display: list-item;
  list-style-position: inside;
  text-align: right;
  }*/
.mod-tagspopular.tagspopular ul, .list-inline {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  gap: 0.6rem;
}
/*tooltip*/
[role=tooltip]:not(.show) {
  right: 5em;
  z-index: 1070;
  display: none;
  max-width: 100%;
  padding: 0.5em;
  margin: 0.5em;
  color: black;
  text-align: start;
  background: white;
  border: 1px solid #6d757e;
  border-radius: 0.25rem;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.8);
}
[role=tooltip]:not(.show)[id^=editarticle-] {
  right: auto;
  -webkit-margin-start: -10em;
          margin-inline-start: -10em;
}
[role=tooltip]:not(.show)[id^=editcontact-] {
  right: auto;
  -webkit-margin-start: -10em;
          margin-inline-start: -10em;
}
[role=tooltip]:not(.show)[id^=id-skip-] {
  right: auto;
}

[role=tooltip]:hover,
:focus + [role=tooltip],
:hover + [role=tooltip] {
  position: absolute;
  display: block;
}

.filter-search-bar__description {
  bottom: 100%;
}
/*elemente*/
.pagination {display: flex; gap: 3rem;}
.disabled {display: none;}
.com-content-category-blog__navigation, .com-tags-tag__pagination {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 1.4rem 0;
}