html {
    scroll-behavior: smooth;
}

:root {
    --space-none: 0;
    --space-xs: 0.5rem;
    --space-s: 1rem;
    --space-m: 2rem;
    --space-l: 4rem;
    --space-xl: 6rem;
}

.h1,
.h2,
.h3,
h1,
h2,
h3 {
    margin-top: 0;
}

.auda-padding-x-small {
    padding-right: var(--space-s);
    padding-left: var(--space-s);
}

.auda-padding-y-small {
    padding-top: var(--space-s);
    padding-bottom: var(--space-s);
}

.auda-padding-y-medium {
    padding-top: var(--space-m);
    padding-bottom: var(--space-m);
}

.auda-padding-x-medium {
    padding-left: var(--space-m);
    padding-right: var(--space-m);
}

.auda-cr-center {
    align-items: center;
    justify-content: center;
}

.auda-hv-center {
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.auda-h-100 {
    height: 100%;
}

.auda-bg {
    position: relative;
    background: url('/website/themes/autoservice-baden.de/dynamic/fe/audaris/kopfgrafik/sonstiges20.jpg') no-repeat center fixed;
    padding: 50px 0;
    z-index: 1;
}

.auda-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgb(76 144 205 / 60%);
}

#auda-perfomance,
#auda-about,
#auda-service,
#auda-contact {
    padding-top: 60px;
    margin-top: -60px;
}

.btn {
    border-radius: 3px;
    font-size: 16px;
    text-transform: initial;
    padding: 8px 32px;
}

.btn-default {
    background-color: #072b31;
    color: #fff;
    border-color: #072b31;
}

#wrapper #header,
.header-menu-fixed #wrapper #header {
    box-shadow: none;
    background: #4c90cd;
}

.header-menu-fixed #wrapper #header #logo-primary-box .logo-link img {
    max-height: 34px;
}

#header .top-area .container-fluid {
    display: flex;
    justify-content: end;
    padding-top: 6px;
}

.nav-area-lines .navbar-nav > li > a {
    text-transform: uppercase;
}

.btn-link {
    position: relative;
    padding-left: 30px;
    color: #1b1b1b;
}

.btn-link::before {
    content: '\f178';
    font-family: FontAwesome;
    position: absolute;
    left: 10px;
}

.btn.btn-link::after {
    content: '';
    position: absolute;
    background: #74a9d8;
    height: 2px;
    width: 100%;
    bottom: 0;
    left: 0;
    transition: 0.3s ease-in;
}

.btn.btn-link:hover::after {
    width: 50%;
}

.btn-link:hover {
    text-decoration: none;
}

/**************  Formulare   *****************************/

.fieldsBoxWrapper .fieldsBox {
    background: #f5f5f5;
    border: none !important;
}

label {
    font-weight: 400;
}

.form-control {
    border-width: 0 0 2px;
    border-style: solid;
    border-color: #74a9d8;
    background: #fbfbfb;
}

.checkbox-toggle-container,
.wrap-all-fields {
    border: none !important;
    background: #f4f4f4;
}

/**************   END Formulare   *****************************/

h1,
h1 .headline-h1 {
    font-size: 23px;
}

h2,
h2 .headline-h2 {
    font-size: 18px;
}

h3,
h3 .headline-h3 {
    font-size: 16px;
}

@media (min-width: 768px) {
    .navbar-left {
        float: inherit;
    }

    h1,
    h1 .headline-h1 {
        font-size: 40px;
    }

    h2,
    h2 .headline-h2 {
        font-size: 32px;
    }

    h3,
    h3 .headline-h3 {
        font-size: 28px;
    }
}

@media (min-width: 1200px) {
    body:not(.site-home, .no_header) :not(.location-landingpage) .breadcrumb_area {
        position: relative;
        margin-top: -70px;
        padding: 25px 0;
        z-index: 99;
        background: none;
        border-bottom: none;
        top: -55px;
    }

    .breadcrumb li,
    .breadcrumb a {
        color: #fff;
    }

    #site-content [data-position='1'] > .container > .row:first-child {
        margin-top: -113px;
        padding: 30px;
        border-radius: 6px;
        position: relative;
        z-index: 9;
        background: #fff;
        box-shadow: 0 0 10px -4px rgb(0 0 0 / 40%);
    }
}

@media (max-width: 1379px) {
    #header .top-area {
        display: none;
    }
}

@media (min-width: 1380px) {
    body:not(.header-menu-fixed) #wrapper #header #logo-primary-box {
        top: -95px;
    }

    #wrapper #header #logo-primary-box .logo-link img {
        max-width: 150px;
    }

    #wrapper #header {
        background: rgb(0 0 0);
        background: linear-gradient(180deg, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 0%) 100%);
    }

    #wrapper #header #optional-header-icons a {
        color: #fff;
    }

    #wrapper #header .top-area {
        height: 75px;
    }
}

.auda-panel .ge-content {
    background: #f5f5f5;
}

.auda-panel .panel {
    background: transparent;
}

.auda-panel .nav {
    box-shadow: 0 12px 38px -22px #575757;
    background: #fff;
}

.auda-panel .tab-content,
.auda-panel .panel-body {
    padding: 20px 0;
}

.auda-panel .nav-tabs > li {
    border-bottom: none;
}

.auda-panel .nav-tabs > li > a {
    background: transparent;
    text-transform: uppercase;
}

.auda-panel .nav-tabs > li > a:hover,
.auda-panel .nav-tabs > li.active > a,
.auda-panel .nav-tabs > li.active > a:hover,
.auda-panel .nav-tabs > li.active > a:focus {
    background: #000;
    border-radius: 3px;
}

@media (min-width: 768px) {
    .auda-panel .nav {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .auda-panel .tab-content {
        margin: 0 auto;
        max-width: 1580px;
    }

    .auda-panel .panel-body {
        display: flex;
        align-items: center;
    }

    .auda-panel .panel-body div {
        min-width: 50%;
    }

    .auda-panel .panel-heading {
        display: none;
    }

    .auda-panel .panel {
        border: none;
        box-shadow: none;
    }

    .auda-panel .panel-collapse {
        height: auto;
    }

    .auda-panel .panel-collapse.collapse {
        display: block;
    }
}

@media (max-width: 767px) {
    .auda-panel .tab-content .tab-pane {
        display: block;
    }

    .auda-panel .nav-tabs {
        display: none;
    }

    .auda-panel .panel-title a {
        display: block;
    }

    .auda-panel .panel {
        margin: -2px 0 0;
        box-shadow: none;
        border-radius: 0;
    }

    .auda-panel .tab-pane:first-child .panel {
        border-radius: 5px 5px 0 0;
    }

    .auda-panel .tab-pane:last-child .panel {
        border-radius: 0 0 5px 5px;
    }
}

.shadow-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgb(0 0 0 / 15%);
    padding: 24px;
}