@charset "UTF-8";
/*!
 * 
 */

@import url('mycss/myfarben.css');
@import url('mycss/myfonts.css');
@import url('mycss/mystyle.css');
@import url('mycss/stylesheet11_webapp.css');
@import url('mycss/stylesheet12_tabellen.css');
@import url('mycss/stylesheet13_form.css');
@import url('mycss/stylesheet14_scorekarte.css');
@import url('mycss/stylesheet15_farben.css');
@import url('mycss/stylesheet16_box.css');
@import url('mycss/stylesheet17_abstand.css');
@import url('mycss/stylesheet18_flipcard.css');
@import url('mycss/stylesheet19_font.css');
@import url('mycss/stylesheet20_backgrounds.css');
@import url('mycss/stylesheet20_float.css');
@import url('mycss/stylesheet21_screen.css');
@import url('mycss/stylesheet22_icons.css');
@import url('mycss/stylesheet23_wertunsgrunde.css');
@import url('mycss/stylesheet2_werbung.css');
@import url('mycss/stylesheet3_menu.css');
@import url('mycss/stylesheet5_link-button.css');
@import url('mycss/stylesheet6_text.css');
@import url('mycss/stylesheet7_bilder.css');

:root {
    --obenabstand_desktop: 170px;
    --obenabstand_mobil: 90px;
    --obenabstand_tablet: 170px; /* Angenommen, du wolltest hier 100px statt 1000px verwenden */
    --schriftfarbe: #14457D;
    --hintergrundfarbe: #ffffff;
    --logoarbe: #14457D;
    --orange: #E2800E;
    --myfont: Roboto;
    /* var(--obenabstand_tablet);*/
}
.MyLink {
    color: #e4e4e4;
    border: solid;
    border-color: #1C6EA4;
    border-radius: 10px;
    padding: 3px;
}

    .MyLink:hover {
        border: solid;
        border-color: #808080;
        border-radius: 15px;
        padding: 3px;
        color: #e0d7d7;
    }

ul {
    text-align: left !important;
}

li {
    text-align: left !important;
}

.blue_text {
    color: #10253F;
}

.label {
    border: none;
}

.clblue {
    background-color: #10253F;
    color: white;
}

.clblue_w {
    background-color: white;
    color: #10253F;
}

/* Der restliche Inhalt von main.css folgt... */
body {
    width: 100%; /* Erm�glicht dem Container, bis zu seiner maximalen Breite zu wachsen */
    /* Weiterer Inhalt-Stil hier */
    justify-content: center; /* Zentriert das Bild horizontal */
}

.container {
    max-width: 1280px; /* Maximale Breite f�r den Container */
    width: 100%; /* Erm�glicht dem Container, bis zu seiner maximalen Breite zu wachsen */
    /* Weiterer Inhalt-Stil hier */
}

.text-justify {
    text-align: justify;
}

    .text-justify::after {
        content: "";
        display: inline-block;
        width: 100%;
    }


.image-banner_gross {
    width: 100%; /* Erm�glicht der Container-Div, die volle Breite zu nutzen */
    display: flex;
    justify-content: center; /* Zentriert das Bild horizontal */
    align-items: center; /* Zentriert das Bild vertikal */
}

    .image-banner_gross img {
        max-width: 1920px; /* Maximale Breite des Bildes */
        width: 100%; /* Erm�glicht dem Bild, responsive zu sein */
    }

#section1 {
    margin-top: 45px;
    max-width: 1937px;
    max-height: 416px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

.date {
    color: #14457D;
    text-align: left;
    font-weight: 600;
}

.card {
    background: #FFF;
    /* box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.25);*/
    padding: 0px;
    border: unset;
}

.btn-primary {
    background-color: #14457D !important;
    color: white !important;
}

.card_ohenBild {
    border-top: none;
    border-right: 1px solid#DFDEDE !important;
    border-bottom: 1px solid #DFDEDE !important;
    border-left: 1px solid#DFDEDE !important;
    border-top: 1px solid#DFDEDE !important;
}


#desktopNav {
    height: auto;
    background-color: white;
}

    #desktopNav .hauptmenue, .hauptmenue_sub, .HauptDashbord, .Hauptmenue_kl {
        font-family: Roboto;
        font-style: normal;
        line-height: normal;
        color: var(--blue, #14457D);
        cursor: pointer;
    }

    #desktopNav .hauptmenue {
        color: var(--blue, #14457D);
        font-size: 22px;
        font-weight: 600;
    }

    #desktopNav .hauptmenue_sub {
        color: var(--white, #FFF);
        font-size: 16px;
        font-weight: 700;
    }

        #desktopNav .hauptmenue_sub:hover {
            color: #14457D;
            font-size: 20px;
            font-weight: 600;
        }

    #desktopNav .hover-locked {
        /*background-color: #E2800E !important;*/
        color: #E2800E !important;
        padding: 5px;
    }

    #desktopNav .hauptmenue:hover {
        color: #E2800E;
    }

    #desktopNav .HauptDashbord {
        text-align: center;
        font-size: 20px;
        font-weight: 900;
        color: var(--blue, #14457D);
        border: 2px solid #FF9900;
        padding: 2px 30px;
        margin: 2px;
        border-radius: 4px;
        text-decoration: none;
    }

        #desktopNav .HauptDashbord:hover {
            color: #FF9900;
            ;
        }

    #desktopNav .Hauptmenue_kl {
        color: var(--blue, #14457D);
        font-size: 16px;
        font-weight: 400;
    }

        #desktopNav .Hauptmenue_kl:hover {
            color: #E2800E;
            font-weight: 600;
        }

    #desktopNav .NavLogo {
        width: 85px;
        height: 85px;
        margin-left: 85px;
    }

        #desktopNav .NavLogo:hover {
            background-color: #d4d4d4 !important;
        }

    #desktopNav .fixed-top.row {
        display: flex;
        align-items: center;
    }

    #desktopNav .navbar-nav {
        display: flex;
        align-items: center;
        flex-direction: row;
    }

    #desktopNav .navbar-expand-lg, .navbar {
        width: 100%;
        margin: 0;
    }

@media (max-width: 992px) {
    .navbar.navbar-expand-xxl {
        display: none;
    }

    #desktopNav {
        display: none;
    }
}

#desktopNav .navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#desktopNav .navbar {
    height: 100px;
}

#desktopNav .search-form {
    display: flex;
    align-items: center;
}

    #desktopNav .search-form input {
        width: 100px;
        margin-right: 10px;
    }

    #desktopNav .search-form button {
        border: none;
        background: none;
        padding: 0;
    }




#katCheck .BoxenSuche {
    width: 20px;
    height: 20px;
}

    #katCheck .BoxenSuche:checked {
        color: white;
    }


#katCheck .btn-kategorie {
    display: inline-block;
    padding: 5px 10px;
    color: #000; /* Standard Textfarbe schwarz */
    text-align: center;
    font-size: 14px;
}

    #katCheck .btn-kategorie.active {
        color: #fff;
        background-color: orange;
    }

    #katCheck .btn-kategorie.active {
        color: orange;
        background-color: white;
        border: none;
    }

#katCheck .btn-kategorie {
    color: black;
    background-color: white;
    border: none;
    font-weight: 600;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}

.checkbox-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Abstand zwischen Checkbox und Button */
}

    .checkbox-container .checkbox-inline {
        margin-right: 10px; /* Abstand zwischen Checkbox und Button */
    }

.checkbox-inline {
    margin-right: 0;
}

.btn-kategorie {
    flex-grow: 1; /* Lässt den Button den verfügbaren Platz einnehmen */
}




cardteasertext {
    color: violet;
    text-align: left;
    padding: 10px;
}

.card-container {
    display: flex;
    display: flex;
    flex-direction: column;
    height: 100%; /* Setzen Sie eine feste H�he, falls n�tig */
}

.card-footer {
    margin-top: auto;
    background-color: #ffffff; /* Hintergrundfarbe f�r Footer */
    border: none;
    text-align: left;
    padding: 10px !important
}

.card-Relevant {
    font-size: small;
    /* color: #14457D;*/
    color: #ff0000;
    text-align: left;
    font-weight: 600;
}

.btn-nomyAktion {
    color: black; /* Button-Textfarbe */
    font-family: var(--myfont);
    font-style: normal; /* Schriftstil */
    font-weight: 600; /* Schriftgewicht */
    line-height: normal; /* Zeilenhöhe */
    padding: 1rem; /* Innenabstand */
    transition: background-color 0.3s; /* Weiche Übergang für den Hover-Effekt */
    background-color: white;
    border-radius: 0;
    margin-top: 1.5rem;
    margin-left: 0;
    font-size: calc(1rem + 1.5vw); /* Schriftgröße passt sich an die Breite des Viewports an */
}

.btn-myAktion {
    color: #FFF; /* Button-Textfarbe */
    font-family: var(--myfont);
    font-style: normal; /* Schriftstil */
    font-weight: 600; /* Schriftgewicht */
    line-height: normal; /* Zeilenhöhe */
    padding: 1rem; /* Innenabstand */
    transition: background-color 0.3s; /* Weiche Übergang für den Hover-Effekt */
    background-color: var(--orange);
    border-radius: 0;
    margin-top: 1.5rem;
    margin-left: 0;
    font-size: calc(1rem + 1.5vw); /* Schriftgröße passt sich an die Breite des Viewports an */
}

    .btn-myAktion:hover {
        background-color: #9f5b11; /* Dunklere Hintergrundfarbe beim Hover */
        /* Optional k�nnen Sie hier weitere Stile �ndern, z.B. die Textfarbe */
    }


/* Schriftgröße für kleinere Bildschirme */
@media (max-width: 576px) {
    .btn-myAktion {
        font-size: calc(1rem + 1vw); /* Größere Schriftgröße für kleine Bildschirme */
        padding: 1.2rem; /* Größere Innenabstände für kleine Bildschirme */
    }
}

/* Schriftgröße für mittlere Bildschirme */
@media (min-width: 577px) and (max-width: 768px) {
    .btn-myAktion {
        font-size: calc(1rem + 0.8vw); /* Schriftgröße für mittlere Bildschirme */
    }
}

/* Schriftgröße für größere Bildschirme */
@media (min-width: 769px) {
    .btn-myAktion {
        font-size: calc(1rem + 0.5vw); /* Standard-Schriftgröße für große Bildschirme */
    }
}

.btn-myAktion_reset {
    color: #FFF; /* Button-Textfarbe */
    font-family: var(--myfont);
    font-style: normal; /* Schriftstil */
    font-weight: 600; /* Schriftgewicht */
    line-height: normal; /* Zeilenhöhe */
    padding: 1rem; /* Innenabstand */
    transition: background-color 0.3s; /* Weiche Übergang für den Hover-Effekt */
    background-color: #14457D; /* Dunklere Hintergrundfarbe beim Hover */
    border-radius: 0;
    margin-top: 1.5rem;
    margin-left: 0;
}


    .btn-myAktion_reset:hover {
        background-color: #CEDCE7; /* Dunklere Hintergrundfarbe beim Hover */
        color: var(--orange);
        /* Optional k�nnen Sie hier weitere Stile �ndern, z.B. die Textfarbe */
    }


h1 {
    text-align: center;
    /* H1 */
    font-family: var(--myfont);
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    font-family: Roboto;
    color: #14457D;
}

h2 {
    text-align: center; /* Zentriert den Text */
    font-family: var(--myfont);
    font-size: 25px; /* Schriftgr��e */
    font-style: normal; /* Normale Schrift */
    font-weight: 600; /* Halbfett */
    font-family: Roboto;
    color: #14457D;
}

h3 {
    font-family: var(--myfont);
    font-size: 20px; /* Kleine Schriftgr��e */
    font-style: normal; /* Normale Schrift */
    font-weight: 600; /* Halbfett */
    line-height: 1.0; /* Normale Zeilenh�he */
    font-family: Roboto;
}

p {
    text-align: left;
    /* content */
    font-family: var(--myfont);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    font-family: Roboto;
    color: #000;
}

.obenunten {
    margin-top: 130px;
    margin-bottom: 200px;
}

.nuroben {
    margin-top: 160px;
}

.nurunten {
    margin-bottom: 200px;
}
/* Keine Media Query notwendig f�r XS - Standard f�r Smartphones im Hochformat */

/*@media (min-width: 576px) {*/ /* SM - Smartphones quer */
/*.obenunten {
        margin-top: var(--obenabstand_mobil);
        margin-bottom: 200px;
    }
}

@media (min-width: 768px) {*/ /* MD - Tablets hoch */
/*.obenunten {
        margin-top: var(--obenabstand_tablet);*/ /* Korrigiert zu --obenabstand_tablet */
/*margin-bottom: 200px;
    }
}

@media (min-width: 992px) {*/ /* LG - Tablets quer */
/*.obenunten {
        margin-top: var(--obenabstand_tablet);*/ /* Annahme, dies sollte auch f�r LG gelten */
/*margin-bottom: 200px;
    }*/
/* Weitere LG-spezifische Stile */
/*}

@media (min-width: 1200px) {*/ /* XL - Desktops */
/*.obenunten {
        margin-top: var(--obenabstand_desktop);
        margin-bottom: 200px;
    }
}

@media (min-width: 1400px) {*/ /* XXL - Gro�e Desktops */
/*.obenunten {
        margin-top: var(--obenabstand_desktop);
        margin-bottom: 200px;
    }
}*/
#katBlog .nav-link {
    color: #10253F !important;
    text-align: center;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    background-color: #CEDCE7 !important;
    border-radius: 10px;
}

    #katBlog .nav-link:hover {
        color: #ffffff !important;
        text-align: center;
        font-family: Roboto;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        background-color: #E2800E !important;
        border-radius: 10px;
    }

    #katBlog .nav-link.active {
        color: #ffffff !important;
        text-align: center;
        font-family: Roboto;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        background-color: #E2800E !important;
        border-radius: 10px;
    }

#katBlog .navbar-toggler-icon {
    color: #f00;
}

#katBlog .dropdown-menu {
    background-color: #ffffff;
    border: none;
    box-shadow: none;
    padding: 0;
    width: 100%;
}

#katBlog .dropdown-item {
    color: #10253F;
    padding: 12px;
    border-bottom: 1px solid #10253F;
}

    #katBlog .dropdown-item:hover {
        background-color: #E2800E;
        color: white !important;
    }

    #katBlog .dropdown-item.active {
        color: #ffffff !important;
        background-color: #00ff00 !important; /* Set the active color to green */
    }

#BlogMenue_Blog .navbar-toggler-icon {
    color: #fff;
}



#BlogMenue_Blog .nav-link {
    color: #10253F !important;
    text-align: center;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    background-color: #CEDCE7 !important;
}

#BlogMenue .nav-link:hover {
    background-color: #CEDCE7;
    color: #10253F;
}

#BlogMenue_Blog .dropdown-menu {
    background-color: #CEDCE7;
    border: none;
    box-shadow: none;
    padding: 0;
    width: 100%;
}

#BlogMenue_Blog .dropdown-item {
    color: #10253F;
    padding: 10px;
    border-bottom: 1px solid #10253F;
}

    #BlogMenue_Blog .dropdown-item:hover {
        background-color: #ffffff;
        color: #fff;
    }


.breadcrumb-item {
    display: inline-block;
    margin-right: 10px;
    font-size: 14px;
    color: #10253F;
    text-decoration: none;
    position: relative;
}

    .breadcrumb-item::after {
        content: ">>";
        margin-left: 10px;
        color: #6c757d;
    }

    .breadcrumb-item:last-child::after {
        content: " <<";
        margin-left: 0;
    }

    .breadcrumb-item:hover {
        color: #10253F;
        text-decoration: underline;
    }

    .breadcrumb-item a {
        color: inherit;
        text-decoration: none;
    }

        .breadcrumb-item a:hover {
            color: inherit;
            text-decoration: none;
        }

.btn-kategorie.active {
    color: #E2800E;
    background-color: aqua;
}

.BoxenSuche {
    width: 20px;
    height: 20px;
    background: #E2800E;
    color: white;
}

    .BoxenSuche:checked {
    }

.ergebnisse {
    color: var(--white, #FFF);
    text-align: center;
    font-family: Roboto;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    background: #E2800E;
    padding: 10px;
    margin: 10px;
}


.checkbox-container {
    display: inline-flex;
    align-items: center;
    margin: 1px;
}

.search-container {
    display: none;
    align-items: center;
    margin-top: 10px;
}

.btn-kategorie {
    display: inline-block;
    padding: 10px 20px;
    margin: 0 5px;
    border: 1px solid #d3d3d3;
    background-color: #E2800E;
    color: #000;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}