/* =========================================================
   Rottaler RC Freunde
   Joomla / Cassiopeia Child Template
   ========================================================= */


/* =========================================================
   FARBPALETTE
   ========================================================= */

:root {
    --rrcf-black: #0d0d0b;
    --rrcf-dark: #191812;

    --rrcf-cream: #f2ead8;
    --rrcf-olive: #68702f;
    --rrcf-olive-light: #9ca34d;
    --rrcf-orange: #c86b20;

    --rrcf-page-bg: #11110e;
    --rrcf-surface: #1b1a15;
    --rrcf-surface-2: #242219;

    --rrcf-border: #454323;

    --rrcf-text: #eee6d6;
    --rrcf-text-muted: #b9b19f;
}


/* =========================================================
   GRUNDLAYOUT
   ========================================================= */

html,
body {
    margin: 0;
    padding: 0;
    background: var(--rrcf-page-bg);
}

body {
    color: var(--rrcf-text);
}

.site-grid {
    background: var(--rrcf-page-bg);
    color: var(--rrcf-text);
}


/* =========================================================
   HEADER
   ========================================================= */

.container-header {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    background: var(--rrcf-black);
    background-image: none;

    box-shadow: none;

    /*
       WICHTIG:
       Dropdowns müssen den Header verlassen dürfen.
    */
    overflow: visible;
}


/* =========================================================
   RRCF BANNER
   ========================================================= */

.container-header .container-topbar {
    display: block;

    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    /*
       Nur der Banner darf abschneiden.
       Nicht der komplette Header.
    */
    overflow: hidden;
}

.container-header .container-topbar .mod-custom {
    display: block;

    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;
}

.container-header .container-topbar .mod-custom > p {
    display: block;

    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;
}

.container-header .container-topbar .mod-custom img {
    display: block;

    width: 100% !important;
    max-width: none !important;

    height: clamp(300px, 29vw, 520px);

    margin: 0;
    padding: 0;

    object-fit: cover;
    object-position: center center;
}


/* =========================================================
   HAUPTNAVIGATION
   ========================================================= */

.container-header .container-nav {
    width: 100%;
    max-width: none;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    background: var(--rrcf-page-bg);

    padding-left:
        max(1.5rem, calc((100vw - 1280px) / 2));

    padding-right:
        max(1.5rem, calc((100vw - 1280px) / 2));

    border-top: 1px solid #3a2a18;
    border-bottom: 3px solid var(--rrcf-olive);

    overflow: visible;
}

.container-header .navbar,
.container-header .navbar-collapse {
    overflow: visible;
}

.container-header .mod-menu {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;

    gap: .25rem;

    margin: 0;
    padding: 0;

    overflow: visible;
}


/* Hauptmenüpunkte */

.container-header .mod-menu > li {
    position: relative;

    margin: 0;
    padding: 0;
}


/*
   Normale Links
   PLUS Joomla-Menüüberschrift als BUTTON.
*/

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .mod-menu > li > button.mod-menu__heading {
    display: flex;
    align-items: center;

    min-height: 58px;

    margin: 0;
    padding: 0 1.25rem;

    color: var(--rrcf-cream);

    background: transparent;

    font-family: inherit;
    font-size: inherit;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .045em;

    text-decoration: none;

    border: 0;
    border-bottom: 3px solid transparent;

    cursor: pointer;

    transition:
        color .15s ease,
        background-color .15s ease,
        border-color .15s ease;
}


/* Hover */

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus,
.container-header .mod-menu > li > span:hover,
.container-header .mod-menu > li > button.mod-menu__heading:hover,
.container-header .mod-menu > li > button.mod-menu__heading:focus {
    color: var(--rrcf-orange);

    background: #1d1b14;

    border-bottom-color: var(--rrcf-orange);
}


/* Aktiver Hauptpunkt */

.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a,
.container-header .mod-menu > li.active >
button.mod-menu__heading {
    color: var(--rrcf-olive-light);

    border-bottom-color: var(--rrcf-orange);
}


/* =========================================================
   COMMUNITY / UNTERMENÜ
   Joomla erzeugt:
       button.mod-menu__heading
       ul.mm-collapse
       ul.mm-collapse.mm-show
   ========================================================= */

.container-header .metismenu.mod-menu
.metismenu-item > ul.mm-collapse {

    min-width: 240px;

    margin: 0;
    padding: .4rem 0;

    background: #181711 !important;

    border: 1px solid var(--rrcf-border);
    border-top: 3px solid var(--rrcf-olive);

    border-radius: 0 0 4px 4px;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, .60);

    z-index: 9999;
}


/*
   Wenn MetisMenu geöffnet ist
*/

.container-header .metismenu.mod-menu
.metismenu-item > ul.mm-collapse.mm-show {

    background: #181711 !important;
}


/* Untermenü-LI */

.container-header .metismenu.mod-menu
.metismenu-item > ul > li {

    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    background: transparent !important;
}


/* Untermenü-Links */

.container-header .metismenu.mod-menu
.metismenu-item > ul > li > a {

    display: block;

    width: 100%;

    margin: 0;
    padding: .8rem 1rem;

    color: var(--rrcf-cream) !important;

    background: transparent !important;

    font-weight: 600;

    text-transform: none;
    letter-spacing: .01em;

    text-decoration: none;

    white-space: nowrap;

    border: 0;
}


/* Hover im Dropdown */

.container-header .metismenu.mod-menu
.metismenu-item > ul > li > a:hover,

.container-header .metismenu.mod-menu
.metismenu-item > ul > li > a:focus {

    color: var(--rrcf-orange) !important;

    background: var(--rrcf-surface-2) !important;
}


/* Aktiver Unterpunkt */

.container-header .metismenu.mod-menu
.metismenu-item > ul > li.active > a,

.container-header .metismenu.mod-menu
.metismenu-item > ul > li.current > a {

    color: var(--rrcf-olive-light) !important;

    background: var(--rrcf-surface-2) !important;
}


/* =========================================================
   HAUPTINHALT
   ========================================================= */

main,
.container-component {
    background: var(--rrcf-surface);
    color: var(--rrcf-text);
}

.container-component {
    padding: 1.5rem 2rem;
}


/* =========================================================
   TYPOGRAFIE
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--rrcf-cream);
}

p,
li {
    color: var(--rrcf-text);
}

a {
    color: var(--rrcf-olive-light);
}

a:hover,
a:focus {
    color: var(--rrcf-orange);
}


/* =========================================================
   BREADCRUMBS
   ========================================================= */

.breadcrumb {
    margin-bottom: 1rem;

    padding: .65rem 1rem;

    background: var(--rrcf-surface-2);

    color: var(--rrcf-text-muted);

    border: 1px solid var(--rrcf-border);
    border-radius: 4px;
}

.breadcrumb a {
    color: var(--rrcf-olive-light);
}

.breadcrumb a:hover,
.breadcrumb a:focus {
    color: var(--rrcf-orange);
}


/* =========================================================
   MODULE / KARTEN / SIDEBAR
   ========================================================= */

.card {
    background: var(--rrcf-surface);

    color: var(--rrcf-text);

    border: 1px solid var(--rrcf-border);

    box-shadow: none;
}

.card-header {
    background: var(--rrcf-surface-2);

    color: var(--rrcf-cream);

    border-bottom: 2px solid var(--rrcf-olive);
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    color: var(--rrcf-cream);
}

.card-body {
    color: var(--rrcf-text);
}

.card a,
.sidebar-right a,
.sidebar-left a {
    color: var(--rrcf-olive-light);
}

.card a:hover,
.sidebar-right a:hover,
.sidebar-left a:hover {
    color: var(--rrcf-orange);
}


/* =========================================================
   FORMULARE / LOGIN
   ========================================================= */

.form-control,
.form-select {
    background: #11110e;

    color: var(--rrcf-text);

    border: 1px solid #555238;
}

.form-control:focus,
.form-select:focus {
    background: #16150f;

    color: var(--rrcf-text);

    border-color: var(--rrcf-orange);

    box-shadow:
        0 0 0 .2rem rgba(200, 107, 32, .20);
}

.form-control::placeholder {
    color: #8f897b;
}

.form-check-input {
    background-color: #11110e;

    border-color: #68624b;
}

.form-check-input:checked {
    background-color: var(--rrcf-olive);

    border-color: var(--rrcf-olive);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn-primary {
    background-color: var(--rrcf-olive);

    border-color: var(--rrcf-olive);

    color: var(--rrcf-cream);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--rrcf-orange);

    border-color: var(--rrcf-orange);

    color: #ffffff;
}


/* =========================================================
   TABELLEN
   ========================================================= */

.table {
    color: var(--rrcf-text);
}

.table > :not(caption) > * > * {
    background: var(--rrcf-surface);

    color: var(--rrcf-text);

    border-color: var(--rrcf-border);
}


/* =========================================================
   HINWEISE
   ========================================================= */

.alert {
    background: var(--rrcf-surface-2);

    color: var(--rrcf-text);

    border-color: var(--rrcf-border);
}


/* =========================================================
   FOOTER
   ========================================================= */

.container-footer {
    background: var(--rrcf-black);

    color: var(--rrcf-text-muted);

    border-top: 2px solid var(--rrcf-olive);
}

.container-footer a {
    color: var(--rrcf-olive-light);
}

.container-footer a:hover,
.container-footer a:focus {
    color: var(--rrcf-orange);
}


/* =========================================================
   TABLET / MOBIL
   ========================================================= */

@media (max-width: 991px) {

    .container-header .container-topbar .mod-custom img {
        height: 330px;

        object-position: center center;
    }

    .container-header .container-nav {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .container-header .mod-menu {
        width: 100%;
    }

    /*
       Mobil sollen Unterpunkte innerhalb des Menüs
       stehen und nicht frei schweben.
    */

    .container-header .metismenu.mod-menu
    .metismenu-item > ul.mm-collapse {

        position: static;

        width: 100%;
        min-width: 0;

        margin: 0 0 0 .75rem;

        box-shadow: none;

        border-top: 0;
        border-left: 3px solid var(--rrcf-olive);
    }
}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 768px) {

    .container-header .container-topbar .mod-custom img {
        height: 240px;

        object-position: 40% center;
    }

    .container-component {
        padding: 1rem;
    }

    .container-header .container-nav {
        padding-left: .75rem;
        padding-right: .75rem;
    }
}


/* =========================================================
   KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 480px) {

    .container-header .container-topbar .mod-custom img {
        height: 195px;

        object-position: 38% center;
    }

    .container-component {
        padding: .8rem;
    }
}