main .parallax {
    /* source: https://blog.hubspot.de/website/parallax-scrolling */
    /*Set a specific height*/
    min-height: 500px;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-reeat;
    background-size: cover;

    /* full width; source: https://css-tricks.com/full-width-containers-limited-width-parents/ */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    /* end full width */

    margin-top: 20px;
    margin-bottom: 20px;
}
.parallax img { display: none; }

a { border: none !Important; }

.socialMediaIcon { background-color: #444444 !important; border-radius: 50%; height: 50px; width: 50px; }

main .hidden { visibility: hidden; }
.lang-container { vertical-align: bottom; }
.icon-container { display: inline-flex; }
.icon-container .linkedin, .icon-container .geo, .icon-container .telephone, .icon-container .envelope, .icon-container .search {
    border: 3px solid #ccc !important;
    display: inline-block;
    text-decoration: none;
    color: black;
    text-align: center;
    line-height: 38px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin: 0 5px;
}
.icon-container .linkedin:hover, .icon-container .geo:hover, .icon-container .telephone:hover, .icon-container .envelope:hover, .icon-container .search:hover {
    border: 3px solid #000 !important;
    transition: border-color 1s;
}

#background-video-wrapper { height: 600px; overflow: hidden; text-align: center; }
#background-video { position: relative; z-index: -1; width: 102%; }
#background-video-wrapper-home { margin-top: -3px; padding-top: 122px; overflow: hidden; text-align: center; }
#background-video-home { z-index: -1; width: 100%; }

@media only screen and (max-width: 940px) {
    #background-video-wrapper { height: unset; margin-top: 90px; overflow: hidden; text-align: center; }
    #background-video { position: relative; z-index: -1; width: 200%; top: -50%; right: 50%; }
    #background-video-wrapper-home { padding-top: 90px; text-align: center; }
    #background-video-home { position: relative; z-index: -1; width: 100%; }
    h1, .h1 { font-size: 32px; margin: 8px; }
}

body { overflow-x: hidden; }

#h1-headline {
    margin-top: -3px;
}

#mmenujs { z-index: 2147483647; }

#footer-socialmedia .sm-icons {
    margin-right: 10px;
}

#mmenujs {
    transition: opacity 0.5s;
    opacity: 0;
    display: none;
}

#video-alternative-container {
    transition: opacity 0.5s;
    opacity: 0;
    display: none;
}

/* SF 2024-08-28 Hack, damit das Overlay des Inhalts bei offenem Menü bis zum untereen Rand des Viewports reicht */
.mm-wrapper__blocker { height: 100%; }

/* SF 2024-08-28 wozu dienen die Werte für article::before in style.layout.css Zeile 190? */
article::before {
    margin-top: 0 !important;
    height: 0 !important;
}
/* SF 2024-08-28 Bild statt Video auf Seite Medien */
.headerImage {
    float: left;
    margin: 120px 20px 0 20px;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 32vw;
    background-color: rgb(222, 222, 222);
    background-size: cover;
    background-position: center;
}

@media only screen and (max-width: 940px) {
    #video-alternative-container {
        transition: opacity 0.5s;
        opacity: 1;
        display: block;
    }
    #background-video-wrapper, #background-video-wrapper-home {
        display: block;
    }
    .parallax { background-image: none !important; min-height: 100% !important; }
    .parallax img { width: 100% !important; display: block !important; }
    #img-video-alternative { width: 100%; }
    iframe { width: 100%; }
    main.space-bottom { padding-bottom: 20px; }
    footer { padding-left: 0; }
    h2 { line-height: 36px; }
    h3 { line-height: 30px; }
    .headerImage { margin-top: 90px; }
}

#callback-button { display: none; }

.mm-wrapper__blocker.mm-blocker.mm-slideout {
    /* height: 99999px;
    z-index: 9999; */
}

ol, ul { font-size: 1em; }
ul li { line-height: 2rem; margin: 0 0 4px 32px; }

/* LEXIKON */

html {
    scroll-behavior: smooth; /* Sanftes Scrollen */
}
:target {
    scroll-margin-top: 400px; /* 100px Abstand nach oben */
}

.centered-div {
    width: 100%; /* Optional: Breite definieren */
    /* padding: 20px; */
    background: rgba(240, 240, 240, 0.95);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    text-align: center;
    position: sticky;
    top: 140px; /* Ab wann es oben fixiert bleibt */
    height: 240px; /* war 200px */
    margin-top: 10px;
}

.lexIndex { padding: 20px;}

.lexIndex ul li {
    margin: 0 0 4px 28px !important;
}

.lexIndex ul li a {
    font-weight: bold !important;
}

.mediadirSearchForm {
    padding-top: 10px;
}

.h2-lexikon {
    font-size: 26px;
    margin-top: 20px !important;
}

.h3-lexikon {
    font-size: 20px;
    margin: 0 !important;
}

.a-lexikon {
    display: inline-block;
    padding: 5px 25px;
    background-color: #ddd; /* Blaue Farbe, kannst du anpassen */
    color: black; /* Textfarbe */
    text-decoration: none; /* Entfernt den Unterstrich */
    border-radius: 15px; /* Runde Ecken */
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    transition: background-color 1s ease;
    transition: color 0.3s ease;
}

.a-lexikon:hover {
    background-color: #e5352b; /* rote Farbe, kannst du anpassen */
    transition: background-color 1s ease;
    color: #eee; /* Textfarbe */
    transition: color 0.3s ease;
}

@media ( max-width: 768px) {
    .centered-div {
        height: 300px;
    }
}


/* end LEXIKON */