@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,900;1,900&display=swap');

:root {
    --wave-page-bg: #cfeff7;
    --wave-surface: #ffffff;
    --wave-soft-surface: #f5f5f5;
    --wave-border: #e5e5e5;
    --wave-border-strong: #d8d8d8;
    --wave-text: #333333;
    --wave-muted: #777777;
    --wave-primary: #009ec0;
    --wave-primary-hover: #007f9a;
    --wave-secondary: #fc6621;
    --wave-secondary-hover: #f34f03;
    --wave-dark: #333333;
    --wave-container: 1170px;
    --wave-shadow: 0 0 18px rgba(0, 0, 0, .08);
    --bs-primary: var(--wave-primary);
    --bs-primary-rgb: 0, 158, 192;
    --bs-highlight: var(--wave-primary);
    --bs-highlight-rgb: 0, 158, 192;
    --bs-body-color: var(--wave-text);
    --bs-body-bg: var(--wave-page-bg);
    --bs-link-color: var(--wave-dark);
    --bs-link-hover-color: var(--wave-primary);
    --bs-border-radius: .25rem;
    --bs-border-radius-sm: .2rem;
    --bs-border-radius-lg: .3rem;
    --bs-body-font-family: Raleway, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body.wave-compat {
    overflow-x: hidden;
}

body.wave-compat .gallery .thumbnails {
    z-index: 0;
}

body.wave-compat .has-subs .nav-link-1 {
    position: relative;
    padding-right: 15px;
    overflow: visible;
    white-space: nowrap;
}

body.wave-compat .has-subs .nav-link-1::before {
    content: ">";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-family: "Source Code Pro", monospace;
    font-weight: 900;
}

body.wave-compat .me-auto,
body.wave-compat .mx-auto {
    color: white;
    background: var(--wave-primary);
    border-color: var(--wave-primary);
    z-index: 2;
}

body.wave-compat #wrapper > main > div:nth-child(8) > div > div > div > div > div > div > div > div > div > span {
    position: absolute;
}

body.wave-compat .btn-secondary:hover {
    background: var(--wave-primary-hover);
    border-color: var(--wave-primary-hover);
}

body.wave-compat #wrapper > main > div:nth-child(11) > div:nth-child(2) > div > div > div > div > div > div.col-lg-6.order-lg-1 > div > span {
    margin-top: 15px;
    position: relative;
    z-index: 2;
}

body.wave-compat #wrapper > main > div:nth-child(11) > div:nth-child(1) > div > div > div > div > div > div.col-lg-5 > div > span {
    margin-top: 15px;
    position: relative;
    z-index: 2;
}

/* Der ist nur dafür da, weil der link über dem Button drüber war... musst ambesten denn link direkt auf denn span packen oder mit window.open */
body.wave-compat .stretched-link {
    display: none;
}

body.cl-user #wrapper .col-xxl-6,
body.cl-payment #wrapper .col-xxl-6,
body.cl-order #wrapper .col-xxl-6 {
    width: 100%;
}

@media (max-width: 991px) {
    body.wave-compat .header .logo-img {
        height: 40px; !important;
        max-height: 40px; !important;
    }
    body.wave-compat > header > div > div > div > div > div > div > section {
        padding-top: 20px;
    }
    body.wave-compat > header > div > div > div > div > div > div {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 352px) {
    body.wave-compat > header > div > div > div > div > div > div > section {
        width: 100%;
    }
    body.wave-compat .steps .step {
        padding: 40px 10px 0;
    }
}

@media (max-width: 292px) {
    body.wave-compat > header > div > div > div > div > div > div > section {
        width: 100%;
    }
    body.wave-compat .steps .step:before, .steps .step:after {
        display: none;
    }
    body.wave-compat .steps .step {
        padding: 40px 6px 0;
    }
}

@media (min-width: 1700px) {
    body.wave-compat > header > div > div > div > div > div > div > section {
        width: calc(100% + 50px);
    }
}

body.wave-compat #wrapper > main > div:nth-child(9) > div > div > div {
    display: flex;
    justify-content: center;
}

/*
 * Das OXID Logo funktioniert Jetzt perfekt mit der Leiste :)
 */