@charset "UTF-8";
/* OG-Profi CSS */

@import url("rlv.css");
@import url("news.css");
@import url("new-fonts.css");
@import url("klaro.css"); /* Cookie-Banner (Klaro! Consent Manager) im OG-Profi-Stil */

body
{
    font-family: 'Gibson', sans-serif;
    font-size: 1.2rem;
    background: #ffffff;
    margin: 0;
}

.cursor-pointer
{
    cursor: pointer;
}

.btn.btn-primary
{
    background-color: rgb(24, 118, 52);
    color: #fff;
    border-radius: 0;
}

.col-sm-1
{
    flex: 0 0 auto;
    width: 8.33333333%;
}



/* --Header-- */
#main-container .header-container
{
    height: 135px;
    background-repeat: no-repeat;
    background-size: cover;
    border-top: solid 0.5rem #BFE7CD;
    position: relative;
}

#main-container .header-container .header-container-background
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
}

#main-container .header-container .header-container-logo
{
    position: absolute;
    top:10px;
    left: 10px;
    width: 423px;
    height: 112px;
    background-image: url(../Images/FrontendLayout/OG-profi_logo.png);
    background-repeat: no-repeat;
    z-index: 10;
}

#main-container .header-container .navbar
{
    z-index: 200;
    width: 50%;
    float: right;
}

#main-container .header-container .navbar #offcanvasNavigation
{
    z-index: 1100;
}


.social-icons
{
    height: 40px;
}

.social-icons .social-media-link
{
    display: inline-block;
    margin: 5px 10px 0 10px;
}

.social-icons .social-media-link .social-media-icon
{
    height:35px;
    width:auto;
    padding-bottom:5px;
}

/* --Navigations--  */
.navigation
{

}



/* Navigation */
nav.top-navigation
{

}

.top-navigation .navbar-nav .nav-item,
.main-navigation .navbar-nav .nav-item
{
    margin-right: 40px;
}

.navbar-nav .nav-item.show,
.navbar-nav .nav-item.dropdown-item:hover,
.navbar-nav .nav-item.dropdown-item.active:hover,
.navbar-nav .nav-item:hover
{
    color: #000000;
    background-color: #ffffff;
    text-decoration: underline;
    text-decoration-color: #BFE7CD;
    text-decoration-thickness: 0.6rem;
    text-decoration-skip-ink: none;
}

.navbar-nav .nav-link
{
    color: #000000;
}

nav.main-navigation
{
    background-color: #ffffff;
    color: #000000;
    font-family: 'Gibson', sans-serif;
    font-weight: 800;
    /*padding: 0;*/
}

/* ── Navbar OVERWRITE */
.navbar-brand
{
    letter-spacing: 0.02em;
}


.navbar .dropdown-menu
{
    right: inherit;
    left: inherit;
    margin-top: 0;
    padding: 0;
    border-radius: 0;
    min-width: 100%;
    width: auto;
    text-align: left;
    border: 2px solid #BFE7CD;
    border-right: 2px solid #BFE7CD;
    border-bottom: 2px solid #BFE7CD;
    z-index: 500;
}

.navbar .dropdown-toggle::after
{
    margin: inherit; /* reset caret.scss */
    vertical-align: baseline; /* reset caret.scss */
    border: none; /* reset caret.scss */

    display: inline-block;
    font-family: FontAwesome;
    font-weight: 400;
    font-size: 1rem;
    content: "\f107";
    margin-left: 0.5rem

}

.navbar-nav .nav-item.show,
.navbar-nav .nav-item.dropdown-item:hover,
.navbar-nav .nav-item.dropdown-item.active:hover,
.navbar-nav .nav-item:hover
{
    color: #000000;
    background-color: #ffffff;
    text-decoration: underline;
    text-decoration-color: #BFE7CD;
    text-decoration-thickness: 0.3rem;
    /*text-decoration-skip-ink: none;*/
}

nav.navigation .nav-link,
nav.navigation .nav-link.show
{
    min-width: 70px;
    text-align: center;
}

nav.navigation .nav-link.dropdown-item,
nav.navigation .nav-link.dropdown-item.show
{
    text-align: left;
}

/* Top Navigation */
nav.top-navigation ul.navbar-nav
{

}

nav.top-navigation .nav-link.active
{
    /*color: #005437;*/
    /*text-decoration: underline;*/
    font-weight: 500;
}

nav.top-navigation .nav-link.dropdown-item.active
{
    background-color: transparent;
}

nav.top-navigation .search-input
{
    border: 1px solid rgb(71,71,71);
    /*font-size: 0.75rem;*/
}

nav.top-navigation .search-button
{
    background-color: rgb(71,71,71);
}

/* Themen Navigation -- SecondaryNavigation */
.secondary-navigation-headline
{
    position: absolute;
    right: 20px;
    top: 20px;
}

.secondary-navigation
{
    z-index: 100;
    overflow-x: auto;
}

/* Immer als nebeneinander, wenn zu schmal quer scrollen */
.secondary-navigation.navbar-expand-lg .navbar-nav
{
    flex-direction: row;
}

.secondary-navigation .navbar-nav .nav-item.show,
.secondary-navigation .navbar-nav .nav-item.dropdown-item:hover,
.secondary-navigation .navbar-nav .nav-item.dropdown-item.active:hover,
.secondary-navigation .navbar-nav .nav-item:hover
{
    background-color: #ffffff;
    text-decoration: none;
}

.secondary-navigation .navbar-nav .nav-link
{
    margin-left: 25px;
    text-transform: uppercase;
}

.secondary-navigation .navbar-nav li:hover
{
    text-decoration-thickness: 0.2rem;
}

.secondary-navigation .navbar-nav .nav-link:hover
{
    text-decoration: underline;
    text-decoration-color: #93c8a0;
    text-decoration-thickness: 0.3rem;
}

.secondary-navigation .navbar-nav .nav-link[title=News]
{
    /* Barrierefreiheit: Schrift abgedunkelt (Kontrast ≥ 4,5:1), Original #E36408 bleibt für die Unterstreichung */
    color: #BE5407;
}
.secondary-navigation .navbar-nav .nav-link[title=News]:hover
{
    text-decoration: underline;
    text-decoration-color: #E36408;
    text-decoration-thickness: 0.3rem;
}

.secondary-navigation .navbar-nav .nav-link[title=Obst]
{
    color: #E3002C;
}
.secondary-navigation .navbar-nav .nav-link[title=Obst]:hover
{
    text-decoration: underline;
    text-decoration-color: #E3002C;
    text-decoration-thickness: 0.3rem;
}

.secondary-navigation .navbar-nav .nav-link[title=Gemüse]
{
    /* Barrierefreiheit: Schrift abgedunkelt (Kontrast ≥ 4,5:1), Original #00A139 bleibt für die Unterstreichung */
    color: #008730;
}
.secondary-navigation .navbar-nav .nav-link[title=Gemüse]:hover
{
    text-decoration: underline;
    text-decoration-color: #00A139;
    text-decoration-thickness: 0.3rem;
}

.secondary-navigation .navbar-nav .nav-link[title=Schwerpunkt]
{
    color: #006E91;
}
.secondary-navigation .navbar-nav .nav-link[title=Schwerpunkt]:hover
{
    text-decoration: underline;
    text-decoration-color: #006E91;
    text-decoration-thickness: 0.3rem;
}

.secondary-navigation .navbar-nav .nav-link[title=Weitwinkel]
{
    /* Barrierefreiheit: Schrift abgedunkelt (Kontrast ≥ 4,5:1), Original #A4998D bleibt für die Unterstreichung */
    color: #7F7365;
}
.secondary-navigation .navbar-nav .nav-link[title=Weitwinkel]:hover
{
    text-decoration: underline;
    text-decoration-color: #A4998D;
    text-decoration-thickness: 0.3rem;
}


/* Sonderfall News Carousel, */

.news-carousel .carousel-indicators [data-bs-target]
{
    background-color: #ededed;
    height: 7px;
    width: 55px
}
.news-carousel .carousel-indicators [data-bs-target].active
{
    background-color: #BFE7CD;
}


.carousel-control-next,
.carousel-control-prev
{
    z-index: 100;
    align-items: unset;
    top: 43%;
    /* Barrierefreiheit: Klickfläche nur so groß wie der Pfeil (3rem). Vorher reichte sie bis
       zum unteren Rand und überdeckte den „Lesen“-Link (WCAG 2.5.8). Optik unverändert. */
    bottom: auto;
    height: 3rem;
}

.carousel-control-next
{
    right: 10px;
}

.carousel-control-prev
{
    left: 10px;
}

.carousel-control-prev-icon
{
    background-image: url("../Icons/FrontendLayout/icon_left.svg");
    width: 3rem;
    height: 3rem;
}

.carousel-control-next-icon
{
    background-image: url("../Icons/FrontendLayout/icon_right.svg");
    width: 3rem;
    height: 3rem;
}

.news-carousel .news-content-carousel
{
    margin-bottom: 2em;
}

/*die Pagination soll ausgeblendet sein, über CSS da sonst das "max-Items" in der Extension nicht greift */
.news-carousel .f3-widget-paginator
{
    display: none;
}

/* Design des Carousels anpassen */

/* Sonderfall für News die als flex-element gestylt sind */
.news-carousel .news-content-carousel .carousel-item.article
{
    display: none;
    height: 100%;
    max-height: 600px;
    min-height: 600px;
}
.news-carousel .news-content-carousel .carousel-item.article.active
{
    display: block;
}

.news-carousel .news-content-carousel .news-img-wrap
{
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: absolute;
    z-index: 10;
}

.news-carousel .news-content-carousel .news-img-wrap img
{
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
}

.news-carousel .news-content-carousel .news-carousel-text-wrap .header,
.news-carousel .news-content-carousel .news-carousel-text-wrap .news-text-wrap
{
    width: 85%;
}

.news-carousel .news-content-carousel .news-carousel-text-wrap .header h3
{
    font-size: 2rem;
}

.news-carousel .news-content-carousel .news-carousel-text-wrap .news-text-wrap p
{
    font-size: 1.2rem;
    font-weight: bold;
}

.news-carousel .news-content-carousel .news-carousel-text-wrap .more-button
{
    position: absolute;
    bottom: 2em;
    right: 1em;
}

.news-carousel .news-content-carousel .news-carousel-text-wrap .more-button a
{
    font-weight: 600;
}

.news-carousel .news-content-carousel .news-carousel-text-wrap,
.news-carousel .news-content-carousel .news-carousel-text-wrap-background
{
    width: 100%;
    height: 50%;
    position: absolute;
    z-index: 20;
    bottom: 0;
    padding: 1em;
}

.news-carousel .news-content-carousel .news-carousel-text-wrap-background
{
    z-index: 15;
    background-color: #ffffff;
    opacity: 0.8;
}


/* Sidebar */
#content-sidebar
{

}

/* Erstes Typo3 Element, Content oder Werbeblock, immer so hoch, wie das Carousel */
#content-sidebar div:nth-child(1).frame-default
{
    height: 600px;
}

/* Footer */

footer
{

}

footer .footer-row
{

}

footer .footer-row .footer-col
{
    background-color: #ededee;
    padding: 40px 30px 10px 30px;
}

/* Grauer Footer bündig mit dem Inhalt (#content-main): Die Spalte bekommt den gleichen
   Spaltenabstand (Gutter) als Außenabstand, den #content-main als Innenabstand hat,
   damit die graue Fläche links und rechts genau an der Textkante endet. */
footer .footer-row > .footer-col
{
    margin-left: calc(var(--bs-gutter-x) * .5);
    margin-right: calc(var(--bs-gutter-x) * .5);
    width: calc(100% - var(--bs-gutter-x));
}

@media (min-width: 768px)
{
    footer .footer-row > .footer-col.col-md-9
    {
        width: calc(75% - var(--bs-gutter-x));
    }
}

footer .footer-row .left-column
{

}

footer .footer-row .right-column
{

}

footer .footer-row .footer-navigation
{
    display: flex;
}

footer .footer-row .footer-navigation .navbar-nav .nav-item
{

}

footer .footer-row .footer-navigation .navbar-nav .nav-item .nav-link
{

}

/* Footer-Navigation Hover-Fix*/
.footer-navigation .navbar-nav .nav-item:hover,
.footer-navigation .navbar-nav .nav-item.show,
.footer-navigation .navbar-nav .nav-item.dropdown-item:hover,
.footer-navigation .navbar-nav .nav-item.dropdown-item.active:hover
{
    background-color: transparent;
    color: #000000;
}
.footer-navigation .nav-link,
.footer-navigation .nav-link:hover,
.footer-navigation .nav-link:focus,
.footer-navigation a:hover,
.footer-navigation a:focus
{
    color: #000000 !important;
    background-color: transparent;
}

/* --Media Querys-- */
@media (max-width: 1270px)
{
    #main-container
    {
        width: 1270px;
    }
}

@media (max-width: 1199.98px)
{
    .news-carousel .news-content-carousel .news-carousel-text-wrap .header h3
    {
        font-size: 1.5rem;
    }

    .news-carousel .news-content-carousel .news-carousel-text-wrap .news-text-wrap p
    {
        font-size: 1.0rem;
        font-weight: bold;
    }
}

@media (min-width: 1200px)
{
    /*#main-container*/
    /*{*/
    /*    width: 960px;*/
    /*}*/


}

/*
    bis 991,98px Breite die mobile Navigation einblenden und die Desktop Navigation ausblenden
    Kommazahl als "Trick", damit die mobile Navigation NIEMALS im DesktopStyle bei genau 992px aufblitzt
*/
@media (max-width: 991.98px)
{
    nav.mobile-navigation
    {
        display: block;
    }
    nav.main-navigation,
    nav.top-navigation
    {
        display: none;
    }

    .container
    {
        width: 100%;
        max-width: 100%;
    }

    footer .footer-row .footer-col
    {
        padding: 15px 30px 10px 30px;
    }

    footer .footer-row .footer-navigation
    {
        display: none;
    }
}

@media (min-width: 992px)
{

}

@media(max-width:767.98px)
{

    #content
    {
        margin-bottom: 50px;
    }

    .container-xs-height
    {
        display: table;
        padding-right: 0;
    }

    .row-xs-height
    {
        display: table-row;
    }

    .col-xs-height
    {
        display: table-cell;
        float: none;
    }

    .col-middle
    {
        vertical-align: middle;
    }

    #content-wrapper .active
    {
        position: relative;
        right: 0;
    }

    #main-container .header-container
    {
        height: 190px;
        background-repeat: no-repeat;
        background-size: cover;
        border-top: solid 0.5rem #BFE7CD;
        position: relative;
    }

    #main-container .header-container .navbar
    {
        width: 100%;
    }

    #main-container .header-container .header-container-logo
    {
        position: absolute;
        top:65px;
        left: 10px;
        width: 423px;
        height: 112px;
    }

    .secondary-navigation .secondary-navigation-headline
    {
        display: none;
    }

    .secondary-navigation.navbar
    {
        padding-top: 1rem;
        padding-bottom: 0;
        margin-bottom: 4rem;
    }

}

@media (min-width: 768px)
{
    .secondary-navigation.navbar
    {
        padding-top: 3rem;
        padding-bottom: 1rem;
    }
}

@media (max-width: 575.98px)
{
    #main-container .header-container
    {
        height: 160px;
        background-repeat: no-repeat;
        background-size: cover;
        border-top: solid 0.5rem #BFE7CD;
        position: relative;
    }

    #main-container .header-container .header-container-logo
    {
        position: absolute;
        top:65px;
        left: 10px;
        background-size: contain;
        width: 20rem;
        height: 5rem;
    }

    .news-carousel .news-content-carousel .news-carousel-text-wrap .header h3
    {
        font-size: 1.2rem;
    }

    .news-carousel .news-content-carousel .news-carousel-text-wrap .news-text-wrap p
    {
        font-size: 1rem;
        font-weight: normal;
    }
}

@media (min-width: 576px)
{
    .col-sm-1
    {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .secondary-navigation.navbar-expand-lg  .navbar-nav .nav-link
    {
        margin-left: 1rem;
        min-width: auto;
    }

}


/* ─────────────────────────────────────────────
   Standard-Textlinks im Inhalt: OG-Grün ohne Unterstreichung.
   #008730 hat 4,6:1 Kontrast zu Weiß und 3,3:1 zum Fließtext (#212529),
   dazu Unterstreichung bei Hover/Fokus (WCAG 1.4.1 / 1.4.3).
   ───────────────────────────────────────────── */
#content-main .frame :is(p, li, td, dd, address) a:not([class]) {
    color: #008730;
    text-decoration: none;
}
#content-main .frame :is(p, li, td, dd, address) a:not([class]):hover,
#content-main .frame :is(p, li, td, dd, address) a:not([class]):focus-visible {
    color: #006b26;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* ─────────────────────────────────────────────
   Formular-Buttons (EXT:form, z. B. „Rückmeldung senden“) im OG-Stil:
   schwarze Schrift, dicke hellgrüne Linie unten, beim Hover dunkleres Grün
   (wie „Weitere Termine“ / „Digitalausgabe ansehen“).
   ───────────────────────────────────────────── */
.frame-type-form_formframework .form-navigation .btn,
.frame-type-form_formframework .form-navigation .btn:active {
    padding: .15em 0;
    color: #000;
    background: transparent;
    border: 0;
    border-bottom: 9px solid #C7E6CF;
    border-radius: 0;
    box-shadow: none;
    font-size: 1.2rem;
    font-weight: 600;
    transition: border-color .2s ease;
}
.frame-type-form_formframework .form-navigation .btn:hover,
.frame-type-form_formframework .form-navigation .btn:focus-visible {
    color: #000;
    background: transparent;
    border-bottom-color: #93c8a0;
}
.frame-type-form_formframework .form-navigation .btn + .btn,
.frame-type-form_formframework .form-navigation .btn-group + .btn-group {
    margin-left: 1.5rem;
}

/* Formular-Auswahlfelder (EXT:form): Radio-Buttons und Checkboxen im OG-Grün statt Bootstrap-Blau.
   Rand der leeren Felder dunkler (#767676, 4,5:1), damit sie gut erkennbar sind (WCAG 1.4.11). */
.frame-type-form_formframework .form-check-input {
    border-color: #767676;
}
.frame-type-form_formframework .form-check-input:checked {
    background-color: #008730;
    border-color: #008730;
}
.frame-type-form_formframework .form-check-input:focus {
    border-color: #008730;
    box-shadow: 0 0 0 .25rem rgba(0, 135, 48, .25);
}
.frame-type-form_formframework .form-check-input:not(:checked):hover {
    border-color: #008730;
}

/* ─────────────────────────────────────────────
   Vorlese-Button (EXT:rlv_voicereader): Font-Awesome-Icon im OG-Link-Grün.
   Die Site-Einstellung "Farbe des Buttons" hätte Vorrang (setzt die Variable am Element).
   ───────────────────────────────────────────── */
.rlv-voicereader {
    --rlv-voicereader-color: #008730;
}

/* Vorlese-Player (rlv_voicereader, Player-Design "Farben der Seite") im OG-Profi-Grün */
:root {
    --rlv-voicereader-player-bg: #008730;
    --rlv-voicereader-player-icon: #ffffff;
    --rlv-voicereader-highlight: #BFE7CD;
    --rlv-voicereader-highlight-word: #93c8a0;
}