/* =====================================
   GRUNDEINSTELLUNGEN
===================================== */

:root {
    --site-background: #ffffff;
    --site-text: #111111;
    --site-font: Arial, Helvetica, sans-serif;
    --menu-width: 100px;
    --content-width: 850px;
}

body {
    background: var(--site-background);
    color: var(--site-text);
    font-family: var(--site-font);
    font-size: 16px;
    line-height: 1.4;
}

/* =====================================
   KOPFBEREICH
===================================== */

.container-header {
    background: #ffffff;
    background-image: none;
    box-shadow: none;
    color: #111111;
}


/* =====================================
   HAUPTLAYOUT
===================================== */

.site-grid {
    display: grid;
    grid-template-columns: var(--menu-width) minmax(0, 1fr);
    column-gap: 40px;
    row-gap: 0;
    max-width: 1450px;
    margin: 0;
    padding: 25px 30px;
    align-items: start;
}

.site-grid > .container-sidebar-left {
    grid-column: 1;
    grid-row: 1 / span 20;
    width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0;
}

.site-grid > .container-component {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: var(--content-width);
    min-width: 0;
    padding: 0;
    margin: 0;
}

.site-grid > .container-main-top,
.site-grid > .container-main-bottom {
    grid-column: 2;
}


/* =====================================
   MENÜ: RAHMEN UND HINTERGRUND ENTFERNEN
===================================== */

/* Äußere Menü-Spalte */
.container-sidebar-left,
.container-sidebar-left > div,
.container-sidebar-left .moduletable,
.container-sidebar-left .card,
.container-sidebar-left .module,
.container-sidebar-left .mod-menu {
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
}

/* Karten-Inhalt */
.container-sidebar-left .card-header,
.container-sidebar-left .card-body,
.container-sidebar-left .card-footer {
    border: 0;
    box-shadow: none;
    padding: 0;
}

/* Menü-Anordnung */
.container-sidebar-left .mod-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    background: #ffffff;
    padding: 20px;
}

.container-sidebar-left .mod-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Menülinks: standardmäßig schwarz */
.container-sidebar-left .mod-menu a,
.container-sidebar-left .mod-menu a:link,
.container-sidebar-left .mod-menu a:visited,
.container-sidebar-left .mod-menu .current > a,
.container-sidebar-left .mod-menu .active > a {
    color: #000000;
    font-size: 17px;
    line-height: 1.25;
    letter-spacing: 1px;
    text-decoration: none;
    border: 0 ;
    box-shadow: none;
    padding: 0;
    transition: color 0.2s ease;
}

a.home-button,
.home-button, a
.home-button, a:link
.home-button, a:visited
.home-button .current > a,
.home-button .active > a { 
  font-weight: bold;
}
  
/* Beim Darüberfahren mit der Maus: grau */
.container-sidebar-left .mod-menu a:hover {
  color: #888888 ;
}

/* Aktueller Menüpunkt */
.container-sidebar-left .mod-menu .current > a,
.container-sidebar-left .mod-menu .active > a {
    text-decoration: none;
  color: #0ff000
}

/* Tastaturfokus sichtbar lassen */
.container-sidebar-left .mod-menu a:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 3px;
}


/* =====================================
   ÜBERSCHRIFTEN
===================================== */

h1, h2, h3, h4 {
    color: #0ff000;
    font-weight: 400;
    line-height: 1.25;
}

h1, h2 {
    font-size: 25px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 10px;
}


/* =====================================
   BILDER UND ARTIKEL
===================================== */

/* Weiterlesen */
.btn-secondary {
  border:0;
  display: inline;
  background: #fff;
--btn-hover-bg: #fff;
}

.com-content-article img,
.container-component img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.com-content-article {
    margin: 0;
}


/* =====================================
   LINKS IM INHALT
===================================== */

a,
a:link,
a:visited,
a:active {
    color: #0ff000;
}

a:hover  {
    color: #fff000;
}

a:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 3px;
}


/* =====================================
   KARTEN UND FOOTER
===================================== */

.card,
.card-header,
.card-body {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.container-footer {
    background: #ffffff;
    color: #111111;
    border: 0;
    padding: 30px 5%;
}


/* =====================================
   HINTERGRUNDBILD / -FARBE
===================================== */

.container-component {
    background: #ffffff;
    /*padding: 35px 25px;*/
    max-width: 850px;
    padding: 5px 15px 20px 15px !important;
}

body.home-page {
    background: #E2DEB6;
}
body.comic-page {
    background: #BEC190;
}

body.illustration-page {
    background: #C1A090;
}

body.murals-page {
    background: #CCDEC1;
}

body.painting-page {
    background: #9EADC1;
}

body.about-page {
    background-image: url("https://jmundinger.de/joomla/images/hintergrundbilder/sophia-hirsch.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.about-page .container-component {
    background: #ffffff;
    padding: 35px 25px;
    max-width: 850px;
}


/* =====================================
   MOBILE
===================================== */

@media (max-width: 767px) {

    /* Grundlayout */
    .site-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 5px 20px 15px 20px;
        margin-top: 0 ;
    }

    /* Menü immer zuerst */
    .site-grid > .container-sidebar-left {
        order: 1;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

  
    /* Beitrag direkt unter dem Menü */
    .site-grid > .container-component {
        order: 2;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 0 0 10px;
    }

    /* Oberen Abstand des ersten Artikelelements entfernen */
    .container-component > *:first-child,
    .container-component .com-content-article,
    .container-component .page-header {
        margin-top: 0 !important;
    }

    .container-component h1 {
        margin-top: 0 !important;
    }

    /* Hamburgerbutton: Rahmen und Schatten entfernen */
    button.navbar-toggler,
    .navbar-toggler,
    .container-header .navbar-toggler {
        border: none;
        outline: none;
        box-shadow: none;
        background: #fff;
        padding: 10px 15px;
    }

    /* Hamburger-Symbol: drei kräftigere Linien */
    .navbar-toggler-icon {
        width: 30px;
        height: 30px;
    }

    /* Menü kompakt halten */
    .container-sidebar-left .mod-menu {
        padding: 0 ;
    }

    /* Überschriften */
    h1 {
        font-size: 21px;
        letter-spacing: 1px;
    }

    h2 {
        font-size: 21px;
    }

    /* About-Seite */
    .about-page .container-component {
        padding: 5px 15px 20px 15px !important;
    }

    body.about-page {
        background-attachment: scroll;
    }
}