/*************************************************
 BEREINIGTE user.css Joomla 5
 Stand: Bereinigt nach Joomla 3 -> Joomla 5
 - Farben erhalten
 - Hover korrigiert
 - mobile Menüs stabilisiert
 - doppelte Regeln entfernt
*************************************************/


:root {
  --rot: #ab3c28;
  --dunkel: #444444;
  --gelb: #ffd919;
  --gelb2: #D1B214;
  --weiss: #ffffff;
  --blau: #006699;
  --grau: #666666;
}


/*************************************************
   Grundlayout
*************************************************/

body {
    position: relative;
    min-width: 0;
    text-align: center;
    font-size: 1.05em;
    color: var(--weiss);
    font-family: Arial, sans-serif;
    background: var(--dunkel);
}

a {
    color: var(--gelb);
    text-decoration: none;
}

a:hover {
    color: var(--gelb2);
    text-decoration: underline;
}


/*************************************************
   Header
*************************************************/

.container-header {
    z-index: 10;
    position: relative;
    background: var(--rot);
    box-shadow: inset 0 5px 5px #00000008;
    padding-top: 0;
    margin-top: 0;
}


.container-topbar {
    background: var(--rot);
    padding: 0;
    margin: 0;
    min-height: 0;
}


.mod-languages,
.mod-languages__list,
.mod-languages__list li a {
    padding: 0;
    margin: 0;
}


div.mod-languages img {
    width: 32px;
    height: auto;
}


div.mod-languages ul li.lang-active {
    background: transparent;
}


/*************************************************
   Überschrift / Logo zentrieren
*************************************************/

.header .navbar-brand {
    width: 100%;
    text-align: center;
}


.header .brand-logo {
    display: inline-block;
}


.header .brand-logo span {
    display: inline-block;
}


.below-top {
    text-align: center;
}


.below-top h1,
.below-top h2,
.below-top span,
.below-top a {
    text-align: center;
    display: block;
}


/*************************************************
   Überschriften
*************************************************/

h1,
h2,
h3,
h4,
h5,
.componentheading,
.blog > h1,
.blog > h2 {
    color: var(--gelb);
    font-family: 'Dosis', sans-serif;
}


h1,
.componentheading,
.blog > h2 {

    border-top: 2px solid #747474;
    border-bottom: 2px solid #747474;

    font-size: 1.5em;
    letter-spacing: -0.3px;
    line-height: 140%;

    padding: 30px 0 14px;
    margin: 0 auto 25px;

    text-align: center;
}


h2 {
    font-size: 1.5em;
    margin-bottom: 8px;
}


h3 {
    font-size: 1.15em;
    font-weight: bold;
}


h4 {
    font-size: 1.1em;
}


h5,
h6 {
    font-size: 1em;
}


/*************************************************
   Artikelbreite
*************************************************/

.com-content-article,
.item-page,
.blog-item,
.view-article .com-content-article {

    max-width: 780px;
    margin: 0 auto;
    text-align: left;
}


/*************************************************
   Rundgang-Menüs Grundformat
*************************************************/

li > a[class^="liste"] {

    box-sizing: border-box;

    width: 520px;
    max-width: calc(100% - 20px);

    height: 77px;

    display: block;

    margin: 1px auto;

    padding: 2px 95px;

    border-radius: 7px;

    color: var(--weiss);

    overflow: hidden;

    background-repeat: no-repeat;
    background-position: left center, right top;

    background-clip: padding-box;
}


/*************************************************
   Menü Hover - nur Farbe ändern
*************************************************/

li > a[class^="liste"]:hover {

    color: var(--weiss);

    background-color: #990000;

    transform: none;
    scale: none;

    border-radius: 7px;
}
/*************************************************
   Rundgang-Menü Bilder und Farben
*************************************************/


li > a.liste1 {
background:url("/images/qr_linkbilder/muensterplatz_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/01.gif") no-repeat right top;
background-color:var(--blau);
}

li > a.liste2 {
background:url("/images/qr_linkbilder/kreuzgang_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/02.gif") no-repeat right top;
background-color:var(--blau);
}

li > a.liste3 {
background:url("/images/qr_linkbilder/lindenhof_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/03.gif") no-repeat right top;
background-color:var(--rot);
}

li > a.liste4 {
background:url("/images/qr_linkbilder/gotisch_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/04.gif") no-repeat right top;
background-color:var(--rot);
}

li > a.liste5 {
background:url("/images/qr_linkbilder/zweierker_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/05.gif") no-repeat right top;
background-color:var(--rot);
}

li > a.liste6 {
background:url("/images/qr_linkbilder/kirche_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/06.gif") no-repeat right top;
background-color:var(--rot);
}

li > a.liste7 {
background:url("/images/qr_linkbilder/canaris_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/07.gif") no-repeat right top;
background-color:var(--rot);
}

li > a.liste8 {
background:url("/images/qr_linkbilder/alte-schule_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/08.gif") no-repeat right top;
background-color:var(--rot);
}

li > a.liste9 {
background:url("/images/qr_linkbilder/wasserturm_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/09.gif") no-repeat right top;
background-color:var(--rot);
}

li > a.liste10 {
background:url("/images/qr_linkbilder/st-josef_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/10.gif") no-repeat right top;
background-color:var(--rot);
}

li > a.liste11 {
background:url("/images/qr_linkbilder/papen_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/11.gif") no-repeat right top;
background-color:var(--rot);
}

li > a.liste12 {
background:url("/images/qr_linkbilder/wehrturm_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/12.gif") no-repeat right top;
background-color:var(--rot);
}

li > a.liste13 {
background:url("/images/qr_linkbilder/ordt_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/13.gif") no-repeat right top;
background-color:var(--rot);
}

li > a.liste14 {
background:url("/images/qr_linkbilder/rother_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/14.gif") no-repeat right top;
background-color:var(--rot);
}

li > a.liste15 {
background:url("/images/qr_linkbilder/judenhaus_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/15.gif") no-repeat right top;
background-color:var(--rot);
}

li > a.liste16 {
background:url("/images/qr_linkbilder/kellerei_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/16.gif") no-repeat right top;
background-color:var(--rot);
}

li > a.liste17 {
background:url("/images/qr_linkbilder/buechel_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/17.gif") no-repeat right top;
background-color:var(--rot);
}

li > a.liste18 {
background:url("/images/qr_linkbilder/kurfuerstlicher_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/18.gif") no-repeat right top;
background-color:var(--rot);
}

li > a.liste19 {
background:url("/images/qr_linkbilder/spital_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/19.gif") no-repeat right top;
background-color:var(--rot);
}

li > a.liste20 {
background:url("/images/qr_linkbilder/port_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/20.gif") no-repeat right top;
background-color:var(--rot);
}

li > a.liste21 {
background:url("/images/qr_linkbilder/lauffenburg_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/21.gif") no-repeat right top;
background-color:var(--rot);
}

li > a.liste22 {
background:url("/images/qr_linkbilder/bur_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/22.gif") no-repeat right top;
background-color:var(--blau);
}

li > a.liste23 {
background:url("/images/qr_linkbilder/josefkapelle_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/23.gif") no-repeat right top;
background-color:var(--rot);
}

li > a.liste24 {
background:url("/images/qr_linkbilder/pult_synagoge_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/24.gif") no-repeat right top;
background-color:var(--blau);
}

li > a.liste25 {
background:url("/images/qr_linkbilder/synagoge_85-2.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/25.gif") no-repeat right top;
background-color:var(--rot);
}

li > a.liste26 {
background:url("/images/qr_linkbilder/schoenecker_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/26.gif") no-repeat right top;
background-color:var(--rot);
}

li > a.liste27 {
background:url("/images/qr_linkbilder/betsaal_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/27.gif") no-repeat right top;
background-color:var(--rot);
}

li > a.liste28 {
background:url("/images/qr_linkbilder/martinsplatz_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/28.gif") no-repeat right top;
background-color:var(--blau);
}

li > a.liste29 {
background:url("/images/qr_linkbilder/rathaus_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/29.gif") no-repeat right top;
background-color:var(--rot);
}

li > a.liste30 {
background:url("/images/qr_linkbilder/propstei_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/30.gif") no-repeat right top;
background-color:var(--blau);
}

li > a.liste31 {
background:url("/images/qr_linkbilder/drusilla_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/31.gif") no-repeat right top;
background-color:var(--rot);
}

li > a.liste32 {
background:url("/images/qr_linkbilder/wilder_mann_85.jpg") no-repeat left,
url("/images/qr_linkbilder/liste/17-2.gif") no-repeat right top;
background-color:var(--rot);
}
/*************************************************
   Mobile Optimierung Rundgang-Menüs
*************************************************/


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

    li > a[class^="liste"] {

        width: calc(100% - 20px);
        max-width: 780px;

        height: 70px;

        padding: 5px 55px 5px 95px;

        margin: 1px auto;

        border-radius: 7px;

        background-position: left center, right center;
        background-size: 85px auto, 45px auto;

        line-height: 60px;

        display: block;
        box-sizing: border-box;

        overflow: hidden;
    }

}


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

    li > a[class^="liste"] {

        height: 65px;

        padding-left: 85px;
        padding-right: 45px;

        background-size: 75px auto, 40px auto;

        font-size: 17px;

        line-height: 55px;
    }

}


/*************************************************
   Menü Listen
*************************************************/


.mod-menu li {

    list-style: none;

    border-radius: 7px;

    overflow: hidden;

    margin: 0;
}


/*************************************************
   Obere Navigation
*************************************************/


.container-nav,
.menu {

    display:flex;

    justify-content:center;
}


.container-nav .mod-menu {

    display:flex;

    justify-content:center;

    gap:20px;

    margin:0;
    padding:0;
}


li > a.oben {

    border-radius:7px;

    height:55px;

    font-size:100%;

    font-weight:bold;

    background-color:#676767;
}


li > a.oben:active,
li > a.oben:focus {

    background-color:#444444;
}


li > a.oben:hover {

    background-color:#990000;

}


/*************************************************
   Übersichtsbutton
*************************************************/


li > a.uebersicht,
li > a.uebersicht:hover {

    background:#AB3C28;

    color:var(--weiss);

    border-radius:7px;

    font-size:20px;

    margin:5px;
}


/*************************************************
   Bilder Module
*************************************************/


div.module_menu-oben img {

    width:100%;
}


/*************************************************
   Banner
*************************************************/


.container-banner .banner-overlay {

    height:50vh;

    color:var(--gelb);
}


/*************************************************
   Sonstiges
*************************************************/


.wrapper-website {

    width:980px;
}


.left_column,
.right_column {

    width:200px;
}


.image-module .wrapper-website {

    width:980px;
}


.border-box {

    box-sizing:border-box;

    width:80%;
}