:root {
    --control-color: #058196;
    --control-background-color: transparent;
    --control-color-active: black;
    /* Border */
    --border-color: #058196;
    --border-width: 2px;
    --border-radius: 8px;
    /* Mindestbreite für ein div */
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size-base: 16px;
    --font-size-large: calc(var(--font-size-base) * 1.25);
    /*    from bootstrap*/
    /*    --bs-btn-focus-shadow-rgb: 49, 132, 253;*/
    --bs-btn-focus-shadow-rgb: rgba(46, 204, 113, 0.5);
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
}

.img-fluid-otto {
    height: 50px;
}

.img-logo-otto {
    height: 100px;
    width: 280px;
}

.img-fluid-otto-wappen {
    height: 59px;
}

.col-footer-otto {
    width: auto;
}
.col-footer-otto-text-end {
    flex-grow: 1;
}
.row-footer-otto {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 10px;
    margin-bottom: 2px;
}

header #logo span {
    display: block;
    width: 406px;
    height: 59px;
    background-image: url(/img/sprite.png);
    background-repeat: no-repeat;
    background-size: 600px 600px;
    background-position: 0px 0px;
}
#human {
    margin-top: auto;
    margin-left: 10px;
}
#navigationwizard{
    margin-top:50px;
}
#aussendiv {
    display: flex;
}

.innendiv {
    width: 50%;
}

.container1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 0px;
    /*border: var(--border-width) solid var(--border-color);*/
    /*border-radius: var(--border-radius);*/
}

    .container1 div {
        /*flex: 1;*/
        /*min-width: 300px;*/ /* Mindestbreite für ein div */
        box-sizing: border-box;
    }

@media (max-width: 600px) {
    .container1 {
        flex-direction: column;
    }

        .container1 div {
            min-width: 100%; /* Volle Breite auf kleineren Bildschirmen */
        }
}
/*Style für die Dienstleistungsauswahl*/
#dlbox {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 5px;
}

#IndexForeward {
    /*width: 12.5em;*/
    height: 3em;
}

#RefreshCaptchaButton {
    width: 14.5em;
    height: 2em;
}

#CaptchaReadOutButton {
    width: 14.5em;
    height: 2em;
}

#DownloadAudioFileButton {
    width: 14.5em;
    height: 2em;
}

#enteredCaptcha {
    /*width: 22em;*/
    height: 2em;
    font-size: 24px;
}

#buttonforeward {
    width: 200px;
}

#buttonbackward {
    width: 200px;
}

#catpchacontrol {
    /*width: 33em !important;*/
    height: 9.5em !important;
}
/* Basis-Button-Stile */
button {
    background-color: var(--control-background-color) !important;
    color: var(--control-color) !important;
    border: var(--border-width) solid var(--border-color) !important;
    border-radius: var(--border-radius) !important;
    font-size: 24px !important;
    cursor: pointer;
    margin: 2px !important;
    padding: 1px !important;
}

    /* Fokuszustand für Tastaturzugänglichkeit */
    button:focus {
        background-color: var(--control-color) !important;
        color: var(--control-color-active) !important;
        outline: none;
    }

    /* Hover-Effekt */
    button:hover {
        background-color: var(--control-color);
        color: var(--control-color-active);
    }

    /* Aktiver Zustand */
    button:active {
        background-color: var(--control-color);
        color: var(--control-color-active);
    }

    /* Deaktivierter Zustand */
    button:disabled {
        background-color: #e0e0e0; /* Hellgrau */
        color: #a0a0a0; /* Hellgrau für Text */
        border: 2px solid #a0a0a0; /* Rahmen in Hellgrau */
        cursor: not-allowed;
    }

.KalenderNavigationLink {
    /*background-color: var(--control-color);*/
    border: var(--border-width) solid var(--border-color);
    color: var(--control-color);
    text-decoration: none;
    padding: 5px;
}

    .KalenderNavigationLink:hover {
        background-color: #f0f0f0; /* Leichtes Grau beim Hover */
        color: black;
        font-size: 115%;
    }

    .KalenderNavigationLink:active {
        background-color: lightgreen;
        color: black;
    }


h10, .h10, h9, .h9, h8, .h8, h7, .h7, h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}

h1, .h1 {
    font-size: calc(1.375rem + 1.5vw);
}

@media (min-width: 1200px) {
    h1, .h1 {
        font-size: 2.5rem;
    }
}

h2, .h2 {
    font-size: calc(1.325rem + 0.9vw);
}

@media (min-width: 1200px) {
    h2, .h2 {
        font-size: 2rem;
    }
}

h3, .h3 {
    font-size: calc(1.3rem + 0.6vw);
}

@media (min-width: 1200px) {
    h3, .h3 {
        font-size: 1.75rem;
    }
}

h4, .h4 {
    font-size: calc(1.275rem + 0.3vw);
}

@media (min-width: 1200px) {
    h4, .h4 {
        font-size: 1.5rem;
    }
}

h5, .h5 {
    font-size: 1.25rem;
}

h6, .h6 {
    font-size: 1rem;
}

h7, .h7 {
    font-size: 0.75rem;
}

h8, .h8 {
    font-size: 0.5rem;
}

h9, .h9 {
    font-size: 0.25rem;
}

h10, .h10 {
    font-size: 0.0rem;
}



.display-1 {
    font-size: calc(1.625rem + 4.5vw);
    font-weight: 300;
    line-height: 1.2;
}

@media (min-width: 1200px) {
    .display-1 {
        font-size: 5rem;
    }
}

.display-2 {
    font-size: calc(1.575rem + 3.9vw);
    font-weight: 300;
    line-height: 1.2;
}

@media (min-width: 1200px) {
    .display-2 {
        font-size: 4.5rem;
    }
}

.display-3 {
    font-size: calc(1.525rem + 3.3vw);
    font-weight: 300;
    line-height: 1.2;
}

@media (min-width: 1200px) {
    .display-3 {
        font-size: 4rem;
    }
}

.display-4 {
    font-size: calc(1.475rem + 2.7vw);
    font-weight: 300;
    line-height: 1.2;
}

@media (min-width: 1200px) {
    .display-4 {
        font-size: 3.5rem;
    }
}

.display-5 {
    font-size: calc(1.425rem + 2.1vw);
    font-weight: 300;
    line-height: 1.2;
}

@media (min-width: 1200px) {
    .display-5 {
        font-size: 3rem;
    }
}

.display-6 {
    font-size: calc(1.375rem + 1.5vw);
    font-weight: 300;
    line-height: 1.2;
}

@media (min-width: 1200px) {
    .display-6 {
        font-size: 2.5rem;
    }
}

.display-7 {
    font-size: calc(1.325rem + 0.9vw);
    font-weight: 300;
    line-height: 1.2;
}

@media (min-width: 1200px) {
    .display-7 {
        font-size: 2rem;
    }
}

.display-8 {
    font-size: calc(1.275rem + 0.3vw);
    font-weight: 300;
    line-height: 1.2;
}

@media (min-width: 1200px) {
    .display-8 {
        font-size: 1.5rem;
    }
}

.display-9 {
    font-size: calc(1.225rem + 0.3vw);
    font-weight: 300;
    line-height: 1.2;
}

@media (min-width: 1200px) {
    .display-9 {
        font-size: 1rem;
    }
}

.display-10 {
    font-size: calc(1.1275rem + 0.3vw);
    font-weight: 300;
    line-height: 1.2;
}

@media (min-width: 1200px) {
    .display-10 {
        font-size: 0.5rem;
    }
}

.KalenderNavigationButton {
    background-color: transparent;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
}

    .KalenderNavigationButton:focus {
        outline: none;
    }

.clndr-control-button {
    display: flex;
    justify-content: center;
    align-items: center;
}