/* 1. Font Awesome Framework laden (Datei muss im /css/ Ordner liegen) */
@import url('all.min.css');
/**
 * 2. TimberCharmS - user.css fuer Cassiopeia (Joomla 5)
 * Erstellt: 2026-03-04
 *
 * Farbpalette:
 *   Hauptfarbe:    #993300  (Braun-Rot - die TimberCharmS-Farbe)
 *   Holzton hell:  #f5f0e8  (Cremeweiß - wie helles Holz)
 *   Holzton mitte: #d4a96a  (Sandbraun - wie Ahornholz)
 *   Holzton dunkel:#8b6914  (Goldbraun - wie geöltes Holz)
 *   Hintergrund:   #f8f4ec  (Elfenbein - Seitenhintergrund)
 *   Grau hell:     #c6c6c6  (für Footer, Trenner)
 */
/* 3. Schriften laden */
/* Roboto Regular laden */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-v51-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Roboto Bold laden (für Überschriften) */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-v51-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Fix für alle Font-Awesome Icons */
.fa, .fas, .fa-solid, [class^="icon-"], [class*=" icon-"] {
    font-family: "Font Awesome 7 Free" !important;
    font-weight: 900;
    color: var(--ff-red);
}
/* FontAwesome Solid lokal definieren */
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/fa-solid-900.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto Condensed';
  src: url('../fonts/roboto-condensed-v31-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto Condensed';
  src: url('../fonts/roboto-condensed-v31-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* 4. Joomla Icons mit Font Awesome 7 ersetzen */
[class*="icon-"] {
    font-family: "Font Awesome 7 Free" !important;
    font-weight: 900 !important;
    -webkit-font-smoothing: antialiased;
}
/* 5. Weltkugel-Fix: Das Joomla-Standard-Icon durch FA7 ersetzen */
.icon-globe::before {
font-family: "Font Awesome 7 Free" !important;
    content: "\f0ac" !important; /* Unicode für die Weltkugel */
    font-weight: 900 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    color: #8b6914 !important; /* Dein Braun-Goldton */
}
/* 6. Untermenü-Pfeile (Dreiecke) im Menü sichtbar machen */
.container-header .mod-menu > li.deeper.parent > a::after,
.container-header .mod-menu > li.deeper.parent > span::after {
    border-top-color: #f5f0e8 !important; /* Cremeweiß */
}
/* Pfeil-Farbe beim Hovern auf Weiß ändern */
.container-header .mod-menu > li.deeper.parent:hover > a::after {
    border-top-color: #ffffff !important;
}
/* 7. Zuweisung an die Webseite */
body, h1, h2, h3, h4, h5, h6, p, a, li, span {
  font-family: 'Roboto', sans-serif !important;
}
/* ---------------------------------------------------------------
  8. GRUNDLAYOUT
--------------------------------------------------------------- */
body {
}
/* Hintergrundfarbe JCE Editor */
body.mceContentBody {
    background-color: #ffffff !important;
    background-image: none;
}
/* Editor-Bereich */
.editor {
    background-color: #f8f8f8;
    background-image: none;
}
/* ---------------------------------------------------------------
   9. LINKS
--------------------------------------------------------------- */
a {
    color: #993300;
}

a:hover,
a:focus {
    color: #8b6914;
    text-decoration: underline;
}

/* ---------------------------------------------------------------
   10. ÜBERSCHRIFTEN
--------------------------------------------------------------- */
h1 { font-size: 2em;    line-height: 2.5em;  color: #993300; }
h2 { font-size: 1.5em;  line-height: 1.8em;  color: #993300; }
h3 { font-size: 1.15em; line-height: 1.3em;  color: #993300; }
h4 { font-size: 1.0em;  line-height: 1.15em; color: #993300; }
h5 { font-size: 0.8em;  line-height: 1.0em;  color: #993300; }
h6 { font-size: 0.5em;  line-height: 0.8em;  color: #993300; }

/* ---------------------------------------------------------------
  11.  CONTENT-BEREICH
--------------------------------------------------------------- */
main#content {
    background-color: #f8f4ec;
    padding: 15px;
    border-radius: 6px;
}

#content h1 {
    font-size: 2rem;
    line-height: 2.5rem;
    color: #993300;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 2px solid #d4a96a;
}

#content > div.blog > div.items-row {
    border-bottom: 2px solid #d4a96a;
    margin-bottom: 15px;
}

#content > div.blog > .item-image,
.pull-left.item-image {
    max-width: 60%;
}

/* ---------------------------------------------------------------
   12. HEADER / LOGO-BEREICH
--------------------------------------------------------------- */
.header {
    background-color: transparent;
}

/* Weißes Kästchen um Logo und Slogan - wie auf der alten Seite */
.header .logo,
.navbar-brand,
#logo {
    background-color: #ffffff;
    padding: 10px 15px;
    border-radius: 6px;
    display: inline-block;
}

.site-name {
    color: #993300;
}

/* 13. Slogan unter dem Logo */
.container-header .site-description,
.site-description,
.navbar-brand .site-description {
    color: #993300 !important;
    font-size: 0.5em;
    font-style: italic;
}

/* ---------------------------------------------------------------
   14. NAVIGATION (Cassiopeia)
--------------------------------------------------------------- */
.plg-system-languagefilter {
    float: right;
    margin: 5px 10px;
}

/* Navigationsleiste Hintergrund */
.navbar,
nav.navbar {
    background-color: #993300 !important;
}

/* Hauptnavigation Links */
.mod-menu__link 
.navbar-nav .mod-menu__link,
nav .mod-menu__link,
.container-navbar .mod-menu__link,
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > a > span {
    color: #ffffff !important;
    font-weight: bold !important;
    text-transform: uppercase;
    font-size: 0.95rem !important;
    letter-spacing: 0.05em !important;
    padding: 10px 16px !important;
}

.mod-menu__link:hover,
.mod-menu__link:focus {
    color: #ffffff !important;
    background-color: #8b6914 !important;
    text-decoration: none;
}

/* Aktiver Menüpunkt */
.mod-menu li.active > a,
.mod-menu li.current > a {
    color: #ffffff !important;
    background-color: #8b6914 !important;
}

/* Dropdown-Untermenü */
.mod-menu .nav-child {
    background-color: #f5f0e8;
    border: 1px solid #d4a96a;
    border-radius: 4px;
}

.mod-menu .nav-child a {
    color: #993300 !important;
}

.mod-menu .nav-child a:hover {
    background-color: #993300 !important;
    color: #ffffff !important;
}

/* Sprachumschalter */
.mod-languages {
    float: right;
    margin: 5px 10px;
}

/* ---------------------------------------------------------------
  15. BREADCRUMB
--------------------------------------------------------------- */
.breadcrumb {
    background-color: #f5f0e8;
    border: 1px solid #d4a96a;
    padding: 8px 15px;
    margin: 10px 0;
    border-radius: 4px;
}

.breadcrumb .active {
    color: #993300;
    font-weight: bold;
}

/* ---------------------------------------------------------------
   16. BUTTONS
--------------------------------------------------------------- */
.btn-primary {
    background-color: #993300;
    background-image: linear-gradient(to bottom, #d4a96a, #993300);
    border-color: #8b6914;
    color: #ffffff;
    border-radius: 4px;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #8b6914;
    background-image: linear-gradient(to bottom, #993300, #8b6914);
    border-color: #993300;
    color: #ffffff;
}

.btn {
    margin-top: 5px;
    margin-bottom: 5px;
}

/* ---------------------------------------------------------------
   17. SIDEBAR / ASIDE
--------------------------------------------------------------- */
.sidebar-nav h3,
#aside h3 {
    background-color: #993300;
    color: #f5f0e8;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: bold;
    border-radius: 4px;
    padding: 5px 10px;
    border: 1px solid #8b6914;
}

.sidebar-nav a,
#aside a {
    color: #993300;
}

.sidebar-nav a:hover,
#aside a:hover {
    color: #8b6914;
}

/* ---------------------------------------------------------------
   18. FOOTER
--------------------------------------------------------------- */
.footer-sitemap-menu {
    color: #565656;
    background-color: #f5f0e8;
    opacity: 0.9;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid #d4a96a;
}

.footer-sitemap-menu h2 {
    color: #993300;
    padding: 10px 0;
}

.footer-sitemap-menu a {
    color: #993300;
}

.footer-sitemap-menu a:hover {
    color: #8b6914;
}
/* ---------------------------------------------------------------
   18a. FOOTER - Menü horizontal
--------------------------------------------------------------- */
.container-footer {
    background-color: #993300;
    padding: 20px 0;
    text-align: center;
}

.container-footer .mod-menu {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.container-footer .mod-menu li {
    display: inline-block !important;
}

.container-footer .mod-menu li a {
    color: #f5f0e8 !important;
    padding: 5px 15px;
    border-right: 1px solid #f5f0e8;
    text-decoration: none;
}

.container-footer .mod-menu li:last-child a {
    border-right: none;
}

.container-footer .mod-menu li a:hover {
    color: #d4a96a !important;
}


/* 19. Copyright-Bereich */
.COPY {
    background-color: #f5f0e8;
    padding: 5px;
    max-width: 200px;
    color: #993300;
    border-radius: 4px;
}

/* Nach-oben-Link */
#back-top {
    background-color: #d4a96a;
    padding: 5px;
    border-radius: 4px;
}

/* ---------------------------------------------------------------
   20. KONTAKTFORMULAR
--------------------------------------------------------------- */
.contact-address,
.contact-form,
fieldset,
legend {
    color: #993300;
}

.ansprechbottom {
    background-color: #993300;
    color: #ffffff;
    text-align: center;
    line-height: 2rem;
    font-size: 1.4rem;
    padding: 10px;
    border-radius: 4px;
}

/* 21. Formularfelder */
input.input-80 {
    max-width: 85%;
    width: 70%;
    margin: auto;
}

textarea.input-80 {
    max-width: 85%;
    width: 70%;
    margin: auto;
}

select.input-80 {
    max-width: 85%;
    width: 70%;
    margin: auto;
}

/* ---------------------------------------------------------------
   22. KATEGORIEN
--------------------------------------------------------------- */
.subheading-category {
    color: #993300;
    border-bottom: 1px solid #d4a96a;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

/* ---------------------------------------------------------------
  23. TIMBER-SCHRIFTKLASSEN (in Beiträgen verwendet)
--------------------------------------------------------------- */
.TIMBERSMALL {
    font-size: 1.0em;
    line-height: 1.2em;
    color: #993300;
}

.TIMBERNORMAL {
    font-size: 1.2em;
    line-height: 1.4em;
    color: #993300;
}

.TIMBERNORMALFETT {
    font-size: 1.3em;
    line-height: 1.5em;
    font-weight: bold;
    color: #993300;
}

.TIMBERBIG {
    font-size: 1.5em;
    line-height: 1.8em;
    color: #993300;
}

.TIMBERBIGGER {
    font-size: 1.7em;
    line-height: 1.9em;
    color: #993300;
}

/* ---------------------------------------------------------------
   24. ALLGEMEINE SCHRIFTKLASSEN (in Beiträgen verwendet)
--------------------------------------------------------------- */
.MINI {
    font-size: 0.8em;
    line-height: 1.0em;
}

.KLEIN {
    font-size: 1.0em;
    line-height: 1.2em;
}

.TEXT {
    font-size: 1.2em;
    line-height: 1.4em;
}

.TEXTFETT {
    font-size: 1.2em;
    line-height: 1.4em;
    font-weight: bold;
}

.GROSS {
    font-size: 1.4em;
    line-height: 1.6em;
    font-weight: bold;
}

.ART {
    font-size: 1.2em;
    line-height: 1.5em;
}

/* ---------------------------------------------------------------
   25. TRENNLINIEN
--------------------------------------------------------------- */
.TRENNEN {
    height: 1px;
    color: #993300;
    border: 1px solid #993300;
    width: 80%;
    text-align: center;
    margin: 10px auto;
}

.TRENNENSHORT {
    height: 1px;
    color: #d4a96a;
    border: 1px solid #d4a96a;
    width: 50%;
    text-align: center;
    margin: 10px auto;
}

/* ---------------------------------------------------------------
   26. FEHLERSEITE
--------------------------------------------------------------- */
.errorhead {
    margin: 3%;
    padding: 3%;
    font-size: 2.5rem;
    line-height: 3.5rem;
    color: #993300;
    text-align: center;
    border-radius: 6px;
}

.notfound {
    color: #993300;
    font-size: 1.5rem;
    line-height: 3rem;
    padding-top: 10px;
}

.errorhome a.btn {
    background: #993300;
    background-image: linear-gradient(to bottom, #d4a96a, #993300);
    color: #ffffff;
    border-radius: 4px;
    border: 1px solid #8b6914;
}

.errorhome a.btn:hover {
    background-color: #8b6914;
    color: #ffffff;
}

/* ---------------------------------------------------------------
   27. BILDER
--------------------------------------------------------------- */
.gallery {
    float: right;
    margin: 5px;
}

.pg-cv-box {
    max-height: 600px !important;
}

/* ---------------------------------------------------------------
   28. COOKIE-HINWEIS
--------------------------------------------------------------- */
.jb.cookie-bg.white {
    background-color: #f5f0e8 !important;
    opacity: 0.9 !important;
}

/* ---------------------------------------------------------------
   29. RESPONSIVE - Mobile Anpassungen
--------------------------------------------------------------- */
@media (max-width: 480px) {
    h2 { font-size: 1.2em; }

    img {
        max-width: 100%;
        height: auto;
        padding: 5px;
    }
}

@media (max-width: 768px) {
    h2 { font-size: 1.3em; }

    img {
        max-width: 100%;
        height: auto;
    }

    .mod-menu__link {
        padding: 10px 15px;
        font-weight: bold;
    }
}

@media (max-width: 979px) {
    h2 { line-height: 1.6em; }
}

/* ---------------------------------------------------------------
   30. CASSIOPEIA-SPEZIFISCHE ANPASSUNGEN
--------------------------------------------------------------- */

/* Container-Hintergrund */
.container-fluid.wrapper-container {
    background-color: transparent;
}

/* Topbar */
#wrapper_content {
    background-color: #f8f4ec;
    border-radius: 6px;
    padding: 10px;
}

/* Artikel-Info (Datum, Autor etc.) */
.article-info {
    color: #8b6914;
    font-size: 0.9em;
}

/* Weiterlesen-Button */
.readmore a {
    background-color: #993300;
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 4px;
    text-decoration: none;
}

.readmore a:hover {
    background-color: #8b6914;
    color: #ffffff;
}

/* Paginierung */
.pagination .active a,
.pagination .active span {
    background-color: #993300;
    border-color: #8b6914;
    color: #ffffff;
}

.pagination a:hover {
    background-color: #f5f0e8;
    color: #993300;
}
/* 31. Bilder responsiv machen (Wichtig für Handy/Tablet) */
.com-content-article img, 
.blog img {
    width: auto !important;           /* Ignoriert feste Breitenangaben vom JCE */
    height: auto !important;          /* Verhindert Verzerrungen */
    max-width: 100% !important;       /* Bild darf nie breiter als der Text sein */
    display: block;                   /* Verhält sich wie ein eigener Block */
    margin-top: 1.5rem;               /* Abstand nach oben */
    margin-bottom: 1.5rem;            /* Abstand nach unten */
    margin-left: auto;                /* Zentrierung links */
    margin-right: auto;               /* Zentrierung rechts */
    border-radius: 4px;               /* Optionale leichte Abrundung der Ecken */
}

/* 32. Verhindern, dass Bilder in der Blog-Ansicht zu riesig werden */
@media (min-width: 992px) {
    .com-content-article img, 
    .blog img {
        max-width: 800px !important;  /* Auf großen Monitoren auf 800px begrenzen */
    }
}
/* 33. MASSIVER FIX: Sprachflaggen im Beitrag nebeneinander halten */
div.item-content dd.association a img,
.com-content-article .association img,
.mod-languages img {
    display: inline-block !important;
    margin-left: 10px !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: middle !important;
    width: auto !important;
    border: none !important;
}
/*--------------------------------------------------------------- */
/* 34. Zweispaltiges Layout für die Holzliste */
.holz-liste-kompakt ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    gap: 15px;
}

.holz-liste-kompakt li {
    flex: 0 0 calc(50% - 15px); /* Macht zwei Spalten */
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

/* Mobil-Optimierung: Auf dem Handy nur eine Spalte */
@media (max-width: 600px) {
    .holz-liste-kompakt li {
        flex: 0 0 100%;
    }
}

/* --------------------------------------------------------------- */
/* 35. Menu rechts – optimiert in TimberCharmS-Farben */
/* --------------------------------------------------------------- */

/* --- Seitenmenü Grundstil --- */
.menu-right {
    background: #fafafa;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    padding: 15px 18px;
    margin-bottom: 30px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* --- Überschrift im Menü --- */
.menu-right h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #993300;           /* TimberCharmS Braun-Rot */
}

/* --- Linkliste --- */
.menu-right ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-right ul li {
    margin: 6px 0;
}

/* --- Links --- */
.menu-right ul li a {
    display: block;
    padding: 6px 10px;
    border-radius: 6px;
    color: #993300 !important;    /* TimberCharmS Braun-Rot */
    text-decoration: none;
    transition: all 0.2s ease;
    font-weight: 500;
}

/* Hover-Effekt */
.menu-right ul li a:hover {
    background: #f5f0e8;          /* heller Holzton */
    color: #8b6914 !important;    /* dunkler Holzton */
}

/* Aktiver Menüpunkt */
.menu-right ul li.active > a,
.menu-right ul li.current_page_item > a,
.menu-right ul li.current-menu-item > a {
    background: #993300;          /* TimberCharmS Braun-Rot */
    color: #ffffff !important;
    font-weight: bold;
}

/* --- Mobile Darstellung --- */
@media (max-width: 768px) {
    .menu-right {
        margin-top: 20px;
    }
}