/* Google Fonts Lokal */

/* open-sans-300 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/open-sans-v44-latin-300.eot');
    /* IE9 Compat Modes */
    src: url('../fonts/open-sans-v44-latin-300.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/open-sans-v44-latin-300.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('../fonts/open-sans-v44-latin-300.woff') format('woff'),
        /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
        url('../fonts/open-sans-v44-latin-300.ttf') format('truetype'),
        /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
        url('../fonts/open-sans-v44-latin-300.svg#OpenSans') format('svg');
    /* Legacy iOS */
}

/* open-sans-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/open-sans-v44-latin-regular.eot');
    /* IE9 Compat Modes */
    src: url('../fonts/open-sans-v44-latin-regular.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/open-sans-v44-latin-regular.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('../fonts/open-sans-v44-latin-regular.woff') format('woff'),
        /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
        url('../fonts/open-sans-v44-latin-regular.ttf') format('truetype'),
        /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
        url('../fonts/open-sans-v44-latin-regular.svg#OpenSans') format('svg');
    /* Legacy iOS */
}

/* open-sans-500 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/open-sans-v44-latin-500.eot');
    /* IE9 Compat Modes */
    src: url('../fonts/open-sans-v44-latin-500.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/open-sans-v44-latin-500.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('../fonts/open-sans-v44-latin-500.woff') format('woff'),
        /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
        url('../fonts/open-sans-v44-latin-500.ttf') format('truetype'),
        /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
        url('../fonts/open-sans-v44-latin-500.svg#OpenSans') format('svg');
    /* Legacy iOS */
}

/* open-sans-600 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/open-sans-v44-latin-600.eot');
    /* IE9 Compat Modes */
    src: url('../fonts/open-sans-v44-latin-600.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/open-sans-v44-latin-600.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('../fonts/open-sans-v44-latin-600.woff') format('woff'),
        /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
        url('../fonts/open-sans-v44-latin-600.ttf') format('truetype'),
        /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
        url('../fonts/open-sans-v44-latin-600.svg#OpenSans') format('svg');
    /* Legacy iOS */
}

/* material-icons-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/material-icons-v145-latin-regular.eot');
    /* IE9 Compat Modes */
    src: url('../fonts/material-icons-v145-latin-regular.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/material-icons-v145-latin-regular.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('../fonts/material-icons-v145-latin-regular.woff') format('woff'),
        /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
        url('../fonts/material-icons-v145-latin-regular.ttf') format('truetype'),
        /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
        url('../fonts/material-icons-v145-latin-regular.svg#MaterialIcons') format('svg');
    /* Legacy iOS */
}

/* Ende Google Fonts Lokal */


body {
    margin: 0 auto !important;
    height: 100.01% !important;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px !important;
    font-weight: 400 !important;
    text-align: left !important;
    line-height: 170% !important;
    color: #2b2d2f !important;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: none;
    background-color: #fff !important;
    overflow-x: hidden !important;

}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Open Sans', sans-serif;
    color: #333752 !important;
    /* text-transform: uppercase; */
}

h1 {
    font-size: 28px !important;
    font-weight: 400 !important;
}


h1.start {

    font-weight: 500 !important;
}

h2 {
    font-size: 25px !important;
    font-weight: 400 !important;
}

.bord h2::after,
.bord h3::after {
    content: "";
    display: inline-block;
    width: 65px;
    border-bottom: 3px solid #3e5b93;
    margin-left: 10px;
}

h2.card-title {
    color: #333752 !important;
}

h3 {
    font-size: 22px !important;
    font-weight: 400 !important;
}

h3 a:link {
    font-size: 18px !important;
    line-height: 170%;
}


h3.card-title {
    color: #333752 !important;
}

h3.portal-digital {
    display: none;
}


.nowrap {
    hyphens: none;
}

.noWrap {
    white-space: nowrap;
}


img {
    max-width: 100%;
}

.logo {
    width: 360px;
}

.wrapper {
    max-width: 85% !important;
    margin: 0 auto;
}

.wrapper.huette-reveal {
    margin-bottom: 2% !important;
}

.container-fluid.full {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.cta h3.cta,
.cta p.cta {
    color: #3e5b93 !important;
}

span.small {
    font-size: 10px;
}


/* --- TOPBAR --- */

/* --- ENDE TOPBAR --- */

/* +++ NAVIGATION +++ */

header {
    height: 12vh;
}

.navbar {
    padding: 30px 0 !important;
    transition: all 0.5s ease;
    min-height: 130px;
    /* 140px*/
    background-color: #f2f0f1;
}



/* --- STICKY NAVBAR LOGO SIZE CHANGE --- */

.navbar-brand img.lrg-logo {
    width: auto;
    display: block;
    transition: all 0.5s ease;
    position: relative;
    padding-bottom: 14px;
}

.sml-logo {
    /*    position: absolute;*/
    /*   z-index: 9999; */
    /* margin-top: -3.1%;
    margin-left: 5px;*/
    width: 84%;
    height: auto;
    opacity: 1;
}

.lrg-logo {
    display: block;
    width: 24vw;
    padding-top: 2% !important;
    /*Anpassung Max-Width*/
    max-width: 80%;
}

.sml-logo {
    display: none;
}

.navbar.navbar-scrolled .lrg-logo {
    display: none;
}

.navbar.navbar-scrolled .sml-logo {
    display: block;
}

.navbar-collapse.show {
    /*    transition: all 0.5s;*/
    background-color: rgba(255, 255, 255, .9);
}

/* --- END STICKY NAVBAR LOGO SIZE CHANGE --- */

.navbar-scrolled {
    background-color: rgba(242, 240, 241, .8) !important;
    padding: 0;
}


.navbar-brand {
    padding-bottom: 0 !important;
}

.offcanvas {
    background-color: #3e5b93;
}


.offcanvas-body {
    flex-grow: 1;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;

}

.offcanvas-title {
    color: #fff !important;
}

.btn-close {
    background: transparent url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e) center / 1em auto no-repeat;
    border-radius: 0;
    opacity: 1;
}


.nav-link.no-link {
    cursor: default !important;
}

.nav-link,
.navbar-brand {
    color: #fff;
    cursor: pointer !important;
}

a.nav-link {
    margin: 0 auto !important;
    color: #fff !important;
    padding: 5px 25px;
    font-family: 'Open-Sans', sans-serif !important;
    font-weight: 400;
}


a.nav-link:hover {
    color: #333752 !important;
    background-color: #f2f0f1 !important;
}


a.nav-link.active {
    color: #f2f0f1 !important;
    background-color: #333752 !important;

}

.nav-item {
    font-size: 18px !important;
    font-family: 'Open-Sans', sans-serif !important;
}

li.nav-item {
    list-style: none !important;
}


.navbar-collapse {
    justify-content: flex-end;
    padding-left: 10px;
    padding-bottom: 20px;
}

/*
.navbar-collapse {
    justify-content: flex-end;
        padding-left: 10px;
    padding-bottom: 20px;
    background-color: rgb(255, 255, 255);
}
*/

button.navbar-toggler {
    background-color: transparent;
}

.navbar-toggler {
    /*  z-index: 99999; */
    display: block;
    /*  margin: 0 auto; */
    border: none !important;

}


.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(51, 55, 82)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-toggler-icon {
    width: 2.3em;
    height: 2.3em;
}


.navbar-toggler:focus {
    box-shadow: none;
}

.dropdown-menu {
    font-size: 16px;
    font-family: 'Open-Sans', sans-serif !important;
    color: #36454F !important;
    background-color: #fff !important;
    border: 0px solid rgba(0, 0, 0, .15) !important;
    border-radius: 0 !important;
}

.dropdown-menu.show li {
    list-style: none !important;
}

.dropdown-item {
    color: #36454F !important;
    text-decoration: none;
}

.dropdown-item:hover {
    color: #fff !important;
    text-decoration: none;
    background-color: #3e5b93 !important;
}

.dropdown-item.active,
.dropdown-item:active {
    color: #fff !important;
    text-decoration: none;
    background-color: #3e5b93 !important;
}

.dropdown-item a:link {
    color: #3e5b93 !important;
    text-decoration: none !important;
    font-family: 'Open-Sans', sans-serif !important;
}

.nav-link.dropdown-item.active {
    background-color: #3e5b93 !important;
}

/* +++ Ende NAVIGATION +++ */

/* +++ Button +++ */

.btn-outline-dark {
    color: #fff !important;
    border-color: #fff !important;
    background-color: #333752 !important;
    border-radius: 5px !important;
    padding: 10px;
}

.btn-outline-dark:hover {
    color: #333752 !important;
    background-color: #fff !important;
    border-color: #333752 !important;
}

.btn-outline-dark.fa-thin {
    color: #fff !important;
}

.btn-outline-dark.fa-thin:hover {
    color: #333752 !important;
}

.bG-green .btn-outline-dark {
    color: #333752 !important;
    border-color: #333752 !important;
    background-color: #fff !important;
    border-radius: 5px !important;
    padding: 10px;
}

.bG-green .btn-outline-dark:hover {
    color: #fff !important;
    background-color: #333752 !important;
    border-color: #fff !important;
}

.bG-green .btn-outline-dark.fa-thin:hover {
    color: #fff !important;
}

/*
a:link .btn {
    font-size: 15px !important;
}
*/

/* #### BUTTON H ####*/

.btn {
    border-radius: 0 !important;
}

.btn-huette,
.wgbr-button,
.wgbr__card__btn,
.wsi-btn,
.dh-btn-primary {
    --primary: #455E9E;
    --dark: #343654;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.95rem 2rem !important;
    border: 0;
    /*            border-radius: 999px;*/

    background: linear-gradient(135deg,
            var(--dark),
            var(--primary));

    color: #fff !important;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    text-transform: uppercase;

    overflow: hidden;
    isolation: isolate;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

    box-shadow:
        0 8px 20px rgba(52, 54, 84, .18);
}

.btn-huette a:link,
.wgbr-button a:link,
.wgbr__card__btn a:link,
.wsi-btn a:link,
.btn-huette a:hover,
.wgbr-button a:hover,
.wgbr__card__btn a:hover,
.wsi-btn a:hover,
.btn-huette a:visited,
.wgbr-button a:visited,
.wgbr__card__btn a:visited,
.wsi-btn a:visited,
.btn-huette a:focus,
.wgbr-button a:focus,
.wgbr__card__btn a:focus,
.wsi-btn a:focus,
.btn-huette a:active,
.wgbr-button a:active,
.wgbr__card__btn a:active,
.wsi-btn a:active,
.dh-btn-primary {
    color: #fff !important;
}

/* Schweif */
.btn-huette::before,
.wgbr-button::before,
.wgbr__card__btn::before,
.wsi-btn::before,
.dh-btn-primary::before {
    content: "";

    position: absolute;
    left: -20%;
    bottom: 18%;

    width: 140%;
    height: 70px;

    border-top: 4px solid rgba(255, 255, 255, .45);

    /*            border-radius: 100% 100% 0 0;*/

    transform: rotate(-4deg) translateX(-30%);
    transition: transform .8s cubic-bezier(.22, 1, .36, 1);

    pointer-events: none;
}

/* Lichtreflex */
.btn-huette::after,
.wgbr-button::after,
.wgbr__card__btn::after,
.wsi-btn::after,
.dh-btn-primary::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(110deg,
            transparent 30%,
            rgba(255, 255, 255, .18) 50%,
            transparent 70%);

    transform: translateX(-150%);
    transition: transform .8s ease;
}

/* Hover */
.btn-huette:hover,
.wgbr-button:hover,
.wgbr__card__btn:hover,
.wsi-btn:hover,
.dh-btn-primary:hover {
    color: #fff;
    transform: translateY(-2px);

    box-shadow:
        0 14px 30px rgba(52, 54, 84, .25);
}

.btn-huette:hover::before,
.wgbr-button:hover::before,
.wgbr__card__btn:hover::before,
.wsi-btn:hover::before,
.dh-btn-primary:hover::before {
    transform: rotate(-4deg) translateX(8%);
}

.btn-huette:hover::after,
.wgbr-button:hover::after,
.wgbr__card__btn:hover::after,
.wsi-btn:hover::after,
.dh-btn-primary:hover::after {
    transform: translateX(150%);
}

/* Tastatur-Navigation */
.btn-huette:focus-visible,
.wgbr-button:focus-visible,
.wgbr__card__btn:focus-visible,
.wsi-btn:focus-visible,
.dh-btn-primary:focus-visible {
    outline: 3px solid rgba(69, 94, 158, .4);
    outline-offset: 4px;
}



/*####  END BUTTON H #####*/

/* +++ Ende Button +++ */

/* --- Quickbutton Menu --- */

.quickbutton-container {
    position: fixed;
    right: 0;
    top: 30%;
    z-index: 9999;
}

.quickbutton {
    position: relative;
    width: 200px;
    height: 60px;
    background: #333752;
    /* margin-bottom: 5px; */
    right: -150px !important;
    padding-top: 14px;
    padding-left: 10px;
    font-size: 15px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.quickbutton:hover,
.quickbutton:focus {
    right: 0 !important;
    background-color: #333752;
}

/* .quickbutton-container a:link,
.quickbutton-container a:visited,
.quickbutton-container a:hover,
.quickbutton-container a:focus,
.quickbutton-container a:active {
    font-size: 15px;
    color: #fff;
    text-decoration: none;
} */

.quickbutton a:link,
.quickbutton a:visited,
.quickbutton a:hover,
.quickbutton a:focus,
.quickbutton a:active {
    font-size: 15px;
    color: #D0D0D0;
    text-decoration: none;
}

.quickbutton.numbertwo a:link,
.quickbutton.numbertwo a:visited,
.quickbutton.numbertwo a:hover,
.quickbutton.numbertwo a:focus,
.quickbutton.numbertwo a:active {
    font-size: 15px;
    color: #333752;
    text-decoration: none;
}

.quickbutton i {
    margin-top: 2px;
    margin-right: 4px;
    vertical-align: -3px;
    color: #D0D0D0;
}

.quickbutton:hover i,
.quickbutton:focus i {
    color: #D0D0D0;
}

.quickbutton.numbertwo {
    background-color: #D0D0D0;
}

.quickbutton.numbertwo i {
    margin-top: 2px;
    margin-right: 4px;
    vertical-align: -3px;
    color: #333752;
}

.quickbutton.numbertwo:hover i,
.quickbutton.numbertwo:focus i {
    color: #333752;
}

/*######### Fab-Container ##########*/


.fab-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    user-select: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 3;
}

.fab-container:hover,
.fab-container:focus-within {
    height: 100%;
}

.fab-container:hover .sub-button:nth-child(2),
.fab-container:focus-within .sub-button:nth-child(2) {
    transform: translateY(-80px);
}

.fab-container:hover .sub-button:nth-child(3),
.fab-container:focus-within .sub-button:nth-child(3) {
    transform: translateY(-140px);
}

.fab-container:hover .sub-button:nth-child(4),
.fab-container:focus-within .sub-button:nth-child(4) {
    transform: translateY(-200px);
}

.fab-container:hover .sub-button:nth-child(5),
.fab-container:focus-within .sub-button:nth-child(5) {
    transform: translateY(-260px);
}

.fab-container:hover .sub-button:nth-child(6),
.fab-container:focus-within .sub-button:nth-child(6) {
    transform: translateY(-320px);
}


.fab-container .fab {
    position: relative;
    height: 70px;
    width: 70px;
    background-color: #3e5b93;
    border-radius: 50%;
    z-index: 2;
}

.fab-container .fab::before {
    /*
    font-family: 'Font Awesome 7 Pro';
    content: '\f05a';
*/
    content: '';
    position: absolute;
    color: #fff;
    top: 0;
    left: 0;
    height: 35px;
    width: 35px;
    background-color: inherit;
    border-radius: 0 0 10px 0;
    z-index: -1;
}

.fab-container .fab .fab-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    border-radius: 50%;
}

/*
.fab-container .fab .fab-content .font-awesome-7-pro {
    color: white;
    font-size: 43px;
}
*/


.font-awesome-7-pro {
    font-family: 'Font Awesome 7 Pro';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    color: #fff;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: 300;
    font-style: normal;
    font-size: 2px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.fab-container .fab .fab-content .material-icons {
    color: white;
    font-size: 48px;
}


.fab-container .sub-button {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 10px;
    right: 10px;
    height: 50px;
    width: 50px;
    background-color: #3e5b93;
    border-radius: 50%;
    transition: all 0.3s ease;
}


.fab-container .sub-button:hover {
    cursor: pointer;
}

.material-icons {
    color: white;
    padding-top: 6px;
}


/*######### End Fab-Container #########*/

/* --- Ende Quickbutton Menu --- */


/* ---- Liste ---- */

ol {}

ul {
    margin-bottom: 20px !important;
}

ul {
    list-style-type: disc !important;
    padding-left: 20px;
    font-weight: 400;
    /* line-height: 140%; */
}



li.nav-item {
    list-style: none !important;
}

li {}

.list-unstyled {
    list-style: disc !important;
}

/* ---- Ende Liste ---- */



/* ---- Font Awesome Icons ---- */



/* ---- Ende Font Awesome Icons ---- */


/*--- Links ---*/

a:link {
    color: #333752;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
}

a:visited {
    color: #333752;
    text-decoration: none;
}

a:focus {
    color: #2b2d2f;
    text-decoration: none;
}

a:hover {
    color: #333752;
    text-decoration: none;
}

a:active {
    color: #2b2d2f;
    text-decoration: none;
}

a.unterstrich {
    text-decoration: underline;
}


/*--- End Links ---*/


/*--- Margins & Paddings ---*/

.mt-2 {
    margin-top: 2% !important;
}

.mt-3 {
    margin-top: 3% !important;
}

.mt-4 {
    margin-top: 4% !important;
}

.mt-5 {
    margin-top: 5% !important;
}

.mt-6 {
    margin-top: 6% !important;
}

.mt-7 {
    margin-top: 7% !important;
}

.mt-8 {
    margin-top: 8% !important;
}

.mt-9 {
    margin-top: 9% !important;
}

.mt-10 {
    margin-top: 10% !important;
}

.mt-11 {
    margin-top: 11% !important;
}

.mt-12 {
    margin-top: 12% !important;
}

.mt-16 {
    margin-top: 16% !important;
}

.mb-2 {
    margin-bottom: 2% !important;
}

.mb-3 {
    margin-bottom: 3% !important;
}

.mb-4 {
    margin-bottom: 4% !important;
}

.mb-5 {
    margin-bottom: 5% !important;
}

.mb-6 {
    margin-bottom: 6% !important;
}

.mb-7 {
    margin-bottom: 7% !important;
}

.mb-8 {
    margin-bottom: 8% !important;
}

.mb-9 {
    margin-bottom: 9% !important;
}

.mb-10 {
    margin-bottom: 10% !important;
}

.pt-1 {
    padding-top: 1% !important;
}

.pt-2 {
    padding-top: 2% !important;
}

.pt-3 {
    padding-top: 3% !important;
}

.pt-4 {
    padding-top: 4% !important;
}

.pt-5 {
    padding-top: 5% !important;
}

.pt-6 {
    padding-top: 6% !important;
}

.pt-7 {
    padding-top: 7% !important;
}

.pt-8 {
    padding-top: 8% !important;
}

.pt-9 {
    padding-top: 9% !important;
}

.pt-10 {
    padding-top: 10% !important;
}

.pb-2 {
    padding-bottom: 2% !important;
}

.pb-3 {
    padding-bottom: 3% !important;
}

.pb-4 {
    padding-bottom: 4% !important;
}

.pb-5 {
    padding-bottom: 5% !important;
}

.pb-6 {
    padding-bottom: 6% !important;
}

.pb-7 {
    padding-bottom: 7% !important;
}

.pb-8 {
    padding-bottom: 8% !important;
}

.pb-9 {
    padding-bottom: 9% !important;
}

.pb-10 {
    padding-bottom: 10% !important;
}

/*--- End Margins & Paddings ---*/



/*--- Carousel ---*/

.carousel-indicators [data-bs-target] {
    background-color: #333752 !important;
}

.carousel-indicators {
    bottom: -10px;
}

/*--- End Carousel ---*/

/*--- Card ---*/

.card {
    border-radius: 0 !important;
    border-color: transparent !important;
    padding: 15px !important;
}

.card-footer {

    background-color: transparent !important;
    border-top: none !important;
}

.card-body.service {
    background-color: #f2f0f1;
    padding: 10px;
}

.card-body.service h3 {
    font-size: 23px !important;
}


/*--- End Card ---*/


/*##### FORMULAR SERVICE ###### */

.wgbr-label {
    font-weight: 400 !important;
    color: #fff !important;
    font-size: 17px !important;
}

.bewerbung .wgbr-label {
    color: #374151 !important;
}

.form-control {
    border-radius: 0 !important;
}

.wgbr-form,
.wgbr-form p {
    color: #fff !important;
}

.bewerbung .wgbr-form,
.bewerbung .wgbr-form p {
    color: #374151 !important;
}

.wgbr-form-check-label a:link {
    color: #fff !important;
    text-decoration: underline !important;
}

.bewerbung .wgbr-form-check-label a:link {
    color: #333752 !important;
    text-decoration: underline !important;
}

/* ---- Formular ---- */
/* ##### KURZBEWERBUNG ##### */

.dh-form-wrapper {
    font-family: 'Open Sans', sans-serif;
    color: #2b2d2f !important;
    padding: 1.5rem;
    width: 100%;
    max-width: 900px;
    margin: auto;
}

.dh-form-wrapper input {
    border: 1px solid #acacac;
    /*    background-color: #f2f0f1;*/
}

form {
    display: block;
    margin-top: 0em;
}

.dh-form-group {
    margin-bottom: 1rem;
}

.dh-form label {
    display: inline-block;
    margin-bottom: .5rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
}

.dh-form label sup {
    color: #ff0000;
}

.dh-form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.5;
    /*    background-color: #f2f0f1;*/
    background-clip: padding-box;
    border: 1px solid #acacac;
    font-family: 'Open Sans', sans-serif;
}

dh .dh-form-check {
    position: relative;
    display: block;
    padding-left: 1.25rem;
}

.dh-form-check-input {
    position: absolute;
    margin-top: .3rem;
    /*margin-left: -1.25rem;*/
    font-family: 'Open Sans', sans-serif;
}

.dh-form-check-label {
    margin-bottom: 0;
    font-family: 'Open Sans', sans-serif;
}

.dh-form-check-consent {
    padding: 20px !important;
}

.dh-form-check-label-indent {
    margin-left: 25px;
}

/*
.dh-btn {
    font-family: 'Open Sans', sans-serif;
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    padding: .375rem .75rem;
    font-size: 15px;
    line-height: 1.5;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.dh-btn-primary {
    color: #fff;
    background-color: #333752;
    border-color: #333752;
}

.dh-btn-primary:hover {
    color: #333752;
    background-color: #fff;
    border-color: #333752;
}
*/

.dh-alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0;
}

.dh-alert-success {
    margin-top: 2%;
    color: #fff;
    background-color: #333752;
    border-color: #fff;
}


/* ---- Ende Formular ---- */



/* --- Infotainment-Blog --- */

.slick-slide {
    margin: 10px
}

.wsi-card {

    border: 1px solid #333752 !important;
    border-radius: 5px !important;
}

.wsi-main-section ul.list-unstyled {
    padding-left: 20px !important;
}



/* --- Ende Infotainment-Blog --- */

/*--- Offset-Column Textbox ---*/


/*--- End Offset-Column Textbox ---*/


/*--- Slick ---*/

.slick-dots li.slick-active button:before {

    color: #333752 !important;
}

.slick-dots {
    bottom: -35px !important;
}

/*--- End Slick ---*/

/* ---- Background ---- */


.bg-start {
    background-image: url('../img/background-start.jpg');
    background-size: cover;
    /*    background-position: center right;*/
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    /*    z-index: 9999;*/
}

.bg-ueber-uns {
    background-image: url('../img/background-ueber-uns.jpg');
    background-size: cover;
    /*    background-position: center right;*/
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    /*    z-index: 9999;*/
}

.bg-unternehmen background-image: url('../img/bg-unternehmen.jpg');
background-size: cover;
/*    background-position: center right;*/
position: relative;
overflow: hidden;
background-repeat: no-repeat;
/*    z-index: 9999;*/
}

.bg-privatpersonen {
    background-image: url('../img/background-privatpersonen.jpg');
    background-size: cover;
    /*    background-position: center right;*/
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    /*    z-index: 9999;*/
}

.bg-handwerk {
    background-image: url('../img/bg-handwerk.jpg');
    background-size: cover;
    /*    background-position: center right;*/
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    /*    z-index: 9999;*/
}

.bg-betriebswirtschaft {
    background-image: url('../img/bg-betriebswirtschaft.jpg');
    background-size: cover;
    /*    background-position: center right;*/
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    /*    z-index: 9999;*/
}

.bg-digital {
    background-image: url('../img/background-digital.jpg');
    background-size: cover;
    /*    background-position: center right;*/
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    /*    z-index: 9999;*/
}

.bg-karriere {
    background-image: url('../img/background-karriere.jpg');
    background-size: cover;
    /*    background-position: center right;*/
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    /*    z-index: 9999;*/
}

.bg-kontakt {
    background-image: url('../img/background-kontakt.jpg');
    background-size: cover;
    /*    background-position: center right;*/
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    /*    z-index: 9999;*/
}

.content-column {
    /* Verlauf von Weiß (links) zu Transparent (rechts) */
    background: linear-gradient(to right,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.9) 30%,
            /* vorher 50%*/
            rgba(255, 255, 255, 0) 50%);
    height: 100%;
}


.bg-beige {
    background-color: #c2b1a9;
    padding: 30px 10px;
}

.abschnitt-grau {
    background-color: #f2f0f1;
    width: 100%;
    height: 350px;
    background-image: none;
    margin-top: -650px;
    position: absolute;
    z-index: -1;
}

.bg-grey {
    background-color: #f2f0f1;
}

.bg-grey h2 {
    color: #3e5b93 !important;
}

/*#### Abschnitt Grau Scroll Transition ####*/

.abschnitt-grau {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity .7s ease,
        transform .7s ease;
}

.abschnitt-grau.hero-hide {
    opacity: 0;
    transform: translateY(-40px);
    pointer-events: none;
}

/*#### Ende Abschnitt Grau Scroll Transition ####*/

.bg-blue {
    background-color: #3e5b93;
    padding: 30px 10px;
}



/* ---- Ende Background ---- */

/* ###### MASONRY ###### */

.card-img-top {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.card.ueber {
    border-radius: 0 !important;
    border-color: transparent !important;
}

.card-img-overlay {
    position: absolute;
    top: 10%;
    bottom: 0;
    left: 15%;
    right: 0;
    height: 70%;
    width: 70%;
    opacity: 1;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    margin: 20px 20px;
    border-radius: 0 !important;
}

.card-img-overlay.zwei {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    border-radius: 0 !important;
}


.card-image {
    position: relative;
}


/* ###### END MASONRY ###### */

/*--- Infocenter & Accordions ---*/

.PortalName {
    font-weight: 300;
    font-size: 15px;
    color: #B7B7B7;
    margin: 2% 0 2% 0;

}

.PortalBeschreibung {
    font-size: 13px;
    font-weight: normal;
    padding-left: 0px;
}

.PortalBeschreibung h2 {
    margin-top: 4% !important;
}

.PortalKategorie {
    padding-top: 20px;
    font-weight: normal;
    font-size: 12px;
    color: #2b2d2f;
}

.PortalKategorieBeschreibung {
    color: #676767;
    margin: 2% 0 1% 0;
}

.PortalUL {
    margin-top: 3%;
    margin-bottom: 5%;
    padding-left: 0 !important;
}

.PortalLI {
    margin-left: 35px;
    padding-left: 5px;
}

.trigger,
.PortalRubriken {
    cursor: pointer;
    margin-bottom: 0 !important;
    padding: 7px 10px;
    margin-top: -1px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    background-color: #3e5b93;
    color: #fff !important;
}

h3.trigger,
a:link.PortalTrigger,
.trigger a {
    color: #fff !important;
    text-decoration: none;
    font-weight: 300 !important;
    font-size: 18px !important;
}

h3.trigger.omega {}

/*.trigger::before {
    content: '\f078';
    font-family: 'Font Awesome';
    font-weight: 300;
    color: #fff;
    margin-right: 15px;
} */

.trigger_active {
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

/*.trigger_active::before {
    content: '\f077';
} */

.trigger::after {
    content: '\f175';
    font-family: 'Font Awesome 7 Pro';
    font-weight: 300;
    vertical-align: middle;
    float: right !important;
    color: #2b2d2f;
    margin-left: 20px;
    display: block;
}

.trigger,
h6.trigger,
h5.rubrik {
    background-color: #3e5b93 !important;
    border: 4px solid #fff;
    border-radius: 5px;
    box-shadow: 1px 1px 2px #e6e6e6;
    padding: 10px 15px;

}

#BriefRubriken {
    font-size: 24px;
    margin-top: 2%;
    color: #333;
}

.trigger_active::after {
    content: '\f176';
}

#infocenter h3,
.PortalKategorie,
.PortalTrigger {
    /*    font-size: 1.2em;*/
    font-weight: 400 !important;
    color: #333;
    margin: 0.6em 0;
    text-transform: none;
}

.PortalTrigger,
.trigger a,
.PortalRubriken a:link,
.PortalRubriken a:hover,
.PortalRubriken a:active,
.PortalRubriken a:focus,
.PortalRubriken a:visited,
h3.trigger {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 300 !important;
    color: #fff !important;
}

#infocenter .trigger,
#infocenter .trigger a {
    font-weight: 300 !important;
    color: #fff !important;
}

h3.trigger_active,
.trigger_active a:link.PortalTrigger,
.trigger_active a {
    text-decoration: none;
    margin: 0.6em 0;
}

/*.toggle_container {
    padding: 30px 15px;
}*/

h3.trigger_active::after,
.trigger_active::after,
.trigger::after,
h3.trigger::after {
    /* position: absolute; */
    font-family: 'Font Awesome 7 Pro';
    font-size: 20px;
    content: "\f0d7";
    padding-left: 15px;
    color: #fff !important;
}

#PortalName {
    display: none;
}

.PortalRubriken {
    font-weight: normal;
    text-transform: none;
    font-size: 1em;
}

.PortalRubriken a {
    color: #232323;
}

.PortalRubrikenBeschreibung {
    padding-left: 20px;
}

#LinkBeschreibung {}

.BriefRubrikenWrapper,
.BriefStartbild,
.ArchivWrapper {
    max-width: 100%;
}

.BriefName {
    font-weight: normal;
    color: #232323;
    text-align: left;
    padding: 0;
}

.BriefStartbild {
    width: 100%;
    max-width: 600px;
    height: auto;
    text-align: left;
}

.BriefStartbild img {
    max-width: 100%;
    height: auto;
    text-align: left;
}

.BriefRubriken {
    font-family: 'Roboto', 'sans-serif';
    font-size: 2 em;
    font-weight: 400;
    text-transform: normal;
    color: #232323;
    margin: 20px 0 0.6em 0;
    line-height: 100%;
}

.BriefArtikelHeadline {
    font-weight: normal;
    font-size: 1em;
    color: #232323;
}

.trigger.BriefArtikelHeadline,
.trigger.BriefArtikelHeadline a:link {
    color: #232323 !important;
}

.BriefArtikelInhalt {
    padding-left: 20px;
    text-align: justify;
}

.ArchivWrapper {}

.ArchivArtikelInhalt {
    line-height: 18px;
    margin-top: 2%;
    margin-bottom: 5%;
}

.ArchivArtikelHeadline {
    padding-left: 20px;
    font-weight: normal;
}

.ArchivArtikelHeadline a:link {
    color: #fff !important;
}

/*--- end Infocenter & Accordions ---*/


/* +++ Animation links und rechts +++ */


/* +++ Ende Animation links und rechts +++ */

/* +++ Videos +++ */

.iframe-container {
    position: relative;
    padding-bottom: 57%;
    height: 0;
    overflow: hidden;
    width: 100%;
    height: auto;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* +++ Ende Videos +++ */


/*###############################*/

/* +++ INFOPORTAL +++ */


/* +++ ENDE INFOPORTAL +++ */

/* ############################## */

/*--- Footer ---*/

footer {
    margin-top: 12%;
    padding-top: 2%;
    padding-bottom: 2%;
    color: #333752;
    background-color: #f2f0f1;
}

footer a:link,
footer a:hover,
footer a:active,
footer a:visited {
    color: #333752 !important;
    font-weight: 400;

}

footer p {
    color: #333752;
    font-weight: 400;

}

.footer-section {
    position: relative;
}

/* Rechtliche Pflichtlinks im Footer (Impressum, Datenschutz,
   Barrierefreiheitserklärung) – siehe tech-stack.md „Impressum & Datenschutz". */
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(51, 55, 82, .15);
    font-size: .9rem;
}

.footer-legal a {
    color: #333752;
}

.bildmarke {
    position: absolute;

    /* horizontal mittig */
    left: 50%;

    /* vertikal mittig auf der oberen Footer-Kante */
    top: 0;

    /* exakte Zentrierung */
    transform: translate(-50%, -50%);

    /* responsive */
    width: clamp(80px, 12vw, 150px);
    height: auto;

    z-index: 10;
    pointer-events: none;
}

/*--- End Footer ---*/

/* ---- Miscellaneous ---- */



.row-flex {
    display: flex;
    flex-wrap: wrap;
}

.mx-auto {
    margin-right: auto !important;
    margin-left: auto !important;
}

.custom-tooltip {
    --bs-tooltip-bg: #333752 !important;
}

/* ---- End Miscellaneous ---- */

/*hero */


.hero {
    position: relative;
}

/* Headerbild: liegt als eigene, über die volle Höhe des Textblocks reichende
   Ebene hinter dem Text und wird mit background-size: contain eingepasst.
   Dadurch wird das Bild nie beschnitten, unabhängig von der Texthöhe – auch
   wenn der Text mehr Platz braucht als das Bild im Originalformat (2499 x 941
   px) vorgibt, bleibt es vollständig sichtbar statt angeschnitten zu werden. */
.hero .wrapper[class*="bg-"] {
    position: relative;
    overflow: hidden;
    background-color: #f2f0f1;
    background-image: none;
    min-height: calc(85vw * 941 / 2499);
}

.hero .wrapper.bg-start::before {
    background-image: url('../img/background-start.jpg');
}

.hero .wrapper.bg-team::before {
    background-image: url('../img/background-team.jpg');
}

.hero .wrapper.bg-ueber-uns::before {
    background-image: url('../img/background-ueber-uns.jpg');
}

.hero .wrapper.bg-unternehmen::before {
    background-image: url('../img/bg-unternehmen.jpg');
}

.hero .wrapper.bg-privatpersonen::before {
    background-image: url('../img/background-privatpersonen.jpg');
}

.hero .wrapper.bg-handwerk::before {
    background-image: url('../img/bg-handwerk.jpg');
}

.hero .wrapper.bg-betriebswirtschaft::before {
    background-image: url('../img/bg-betriebswirtschaft.jpg');
}

.hero .wrapper.bg-digital::before {
    background-image: url('../img/background-digital.jpg');
}

.hero .wrapper.bg-karriere::before {
    background-image: url('../img/background-kontakt.jpg');
}

.hero .wrapper.bg-karriere-uebersicht::before {
    background-image: url('../img/background-karriere-uebersicht.jpg');
}

.hero .wrapper.bg-karriere-steuerfach::before {
    background-image: url('../img/bg-steuerfach.jpg');
}

.hero .wrapper.bg-karriere-ausbildung::before {
    background-image: url('../img/bg-karriere-ausbildung.jpg');
}

.hero .wrapper.bg-kontakt::before {
    background-image: url('../img/background-karriere-uebersicht.jpg');
}

.hero .wrapper[class*="bg-"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    z-index: 0;
}

.hero .content-column {
    position: relative;
    z-index: 2;
    height: auto;
    background: none;
}

.hero .wrapper[class*="bg-"] .row {
    height: auto;
}


.hero .abschnitt-grau {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    height: calc(85vw * 941 / 2499 / 3);
    margin: 0;
    background-color: #f2f0f1;

}


.hero .content-column .col-xl-4 {
    background-color:
        rgba(255, 255, 255, 0.8);
}

/* Mobil/Tablet (< 992px): Headerbild löst sich vom Text und steht als
   eigener, vollständig sichtbarer Block unter dem Text statt dahinter –
   der Text bleibt so uneingeschränkt lesbar. */
.hero-mobile-image {
    display: none;
}

@media (max-width: 991.98px) {
    .hero .wrapper[class*="bg-"]::before {
        display: none;
    }

    .hero-mobile-image {
        display: block;
        width: 100%;
        aspect-ratio: 2499 / 941;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        margin-top: 2rem;
    }
}

/* Hero-Seiten mit Bootstrap-Bild (.hero-inline-image) statt Desktop-
   Hintergrund bis 1199.98px; die Box überlappt mit der ersten H1-Zeile
   das Bild. Betrifft aktuell: leistungen-unternehmen, leistungen-privat-
   personen, leistungen-handwerksbetriebe, betriebswirtschaft, digital,
   index, kontakt und die Karriere-Unterseiten. */
@media (max-width: 1199.98px) {
    .hero-inline-image .wrapper[class*="bg-"]::before {
        display: none;
    }

    .hero-inline-image .wrapper[class*="bg-"] {
        min-height: 0;
        background-color: transparent;
    }

    .hero-header-image {
        margin-bottom: -2.6rem;
    }

    .hero-inline-image .abschnitt-grau {
        display: none;
    }

    .hero-inline-image {
        margin-bottom: 2.5rem;
    }
}

/*End hero */

/* Hütte Section */

.huette-page {
    overflow-x: hidden;
    overflow-y: auto;
}

.huette-section {
    padding: clamp(3rem, 6vw, 6rem) 0;
}

.huette-section-soft {
    background-color: #f2f0f1;
}

.huette-section-blue {
    background-color: #3e5b93;
    color: #fff;
}

.huette-section-blue .huette-feature-list li {
    background-color: #3e5b93;
}

.huette-section-blue h2,
.huette-section-blue h3,
.huette-section-blue p,
.huette-section-blue li {
    color: #fff !important;
}

.huette-eyebrow {
    color: #3e5b93 !important;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: .75rem;
    text-transform: uppercase;
}

.huette-lead {
    font-size: clamp(19px, 2vw, 23px);
    line-height: 1.65;
}

.huette-copy {
    max-width: 760px;
}

.huette-panel {
    /*    background-color: #fff;*/
    border-left: 4px solid #3e5b93;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    height: 100%;
}

.huette-panel.jobs {

    padding: 0;

}

.huette-panel-soft {
    background-color: #f2f0f1;
}

.huette-feature-list {
    display: grid;
    gap: .9rem;
    list-style: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
}

.huette-feature-list.white li {
    color: #2b2d2f !important;
}

.huette-feature-list li {
    align-items: flex-start;
    background-color: #fff;
    display: flex;
    gap: .85rem;
    line-height: 1.55;
    padding: 1rem 1.1rem;
}

.huette-section-soft .huette-feature-list li {
    background-color: #fff;
}

.huette-check-icon {
    align-items: center;
    background-color: #3e5b93;
    color: #fff;
    border: 1px solid #fff;
    display: inline-flex;
    flex: 0 0 32px;
    height: 32px;
    justify-content: center;
    margin-top: .1rem;
    width: 32px;
}

.huette-service-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.huette-service-grid.jobs {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.huette-service-grid.betriebswirtschaft,
.huette-service-grid.stellenangebote,
.huette-service-grid.handwerk {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.huette-service-card {
    background-color: #fff;
    border-top: 3px solid #3e5b93;
    height: 100%;
    padding: clamp(1.25rem, 2.5vw, 2rem);
}

.huette-service-card i {
    color: #3e5b93;
    font-size: 28px;
    margin-bottom: 1rem;
}

.huette-image {
    display: block;
    object-fit: cover;
    width: 100%;
}

.huette-image-800x532 {
    aspect-ratio: 800 / 532;
}

.huette-image-600x600 {
    aspect-ratio: 600 / 600;
}

.huette-image-640x480 {
    aspect-ratio: 4 / 3;
}

.huette-image-520x640 {
    aspect-ratio: 13 / 16;
}

.huette-image-1200x520 {
    aspect-ratio: 1200 / 520;
}

.huette-media-frame {
    background-color: #f2f0f1;
    padding: .75rem;
}

.huette-cta {
    background-color: #333752;
    color: #fff;
    padding: clamp(2rem, 4vw, 3.5rem);
}

.huette-cta h2,
.huette-cta h3,
.huette-cta p {
    color: #fff !important;
}

.huette-mini-card {
    background-color: #fff;
    height: 100%;
    padding: 1.5rem;
}

.huette-mini-card h3 {
    margin-bottom: .75rem;
}

.huette-contact-box {
    background-color: #f2f0f1;
    padding: clamp(1.5rem, 3vw, 2.5rem);
}

.huette-reveal {
    opacity: 1;
    transform: none;

}

.js-reveal .huette-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .75s ease, transform .75s ease;
}

.js-reveal .huette-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.huette-reveal-delay-1 {
    transition-delay: .08s;
}

.huette-reveal-delay-2 {
    transition-delay: .16s;
}

.huette-reveal-delay-3 {
    transition-delay: .24s;
}

.huette-reveal-delay-4 {
    transition-delay: .32s;
}

.huette-reveal-delay-5 {
    transition-delay: .40s;
}

.huette-reveal-delay-6 {
    transition-delay: .48s;
}

.huette-reveal-delay-7 {
    transition-delay: .56s;
}

/* End Hütte Section*/


/* #### MOBILANSICHT #### */

@media (prefers-reduced-motion: reduce) {
    .js-reveal .huette-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (max-width: 1400px) {

    h1 {
        font-size: 24px !important;
    }

    h2 {
        font-size: 22px !important;
    }

    p {
        font-size: 16px !important;
    }

}

@media (max-width: 1275px) {
    .hero .content-column .col-xl-4.mt-6 {
        margin-top: 0.25rem !important;
    }

    .hero .content-column .col-xl-4.mb-6 {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 1199.98px) {
    .hero .content-column .col-xl-4 {
        background: rgba(255, 255, 255, 0.90);
    }
}

@media (max-width: 1199.98px) {

    .huette-service-grid,
    .huette-service-grid.jobs,
    .huette-service-grid.betriebswirtschaft,
    .huette-service-grid.stellenangebote,
    .huette-service-grid.handwerk {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media only screen and (max-width: 991.98px) {
    .content-column {
        background: none;
        height: auto;
        min-height: 0;
    }
}

@media (max-width: 767.98px) {
    .huette-section {
        padding: 3rem 0;
    }

    .huette-service-grid,
    .huette-service-grid.jobs,
    .huette-service-grid.betriebswirtschaft,
    .huette-service-grid.stellenangebote,
    .huette-service-grid.handwerk {
        grid-template-columns: 1fr;
    }

    .huette-panel,
    .huette-cta,
    .huette-contact-box {
        padding: 1.35rem;
    }
}

/* Mobile Optimierung */
@media (max-width: 576px) {

    .btn-huette,
    .wgbr-button,
    .wgbr__card__btn,
    .wsi-btn,
    .dh-btn-primary {
        width: 100%;
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }
}

/* #### END MOBILANSICHT #### */

/* ------------------------------------------------------------------------
   Consent-Overlay für externe Links (incl/consent-modal.php, js/consent-popup.js)
   Standard-Baustein für jedes Projekt – siehe tech-stack.md. Die vier
   --consent-*-Variablen sind die einzigen Stellen, die pro Projekt an die
   Kanzlei-CI angepasst werden müssen; der Rest des Blocks bleibt unverändert.
   ------------------------------------------------------------------------ */

:root {
    --consent-radius: 0;
    --consent-navy: #333752;
    --consent-text-muted: #6c757d;
    --consent-blue-accent: #3e5b93;
}

.consent-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 42, 89, .6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1080;
    padding: 1rem;
}

.consent-overlay.is-open {
    display: flex;
}

.consent-dialog {
    background: #fff;
    border-radius: var(--consent-radius);
    padding: 2rem;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 20px 48px rgba(10, 42, 89, .25);
}

.consent-dialog h2 {
    font-size: 1.3rem;
    color: var(--consent-navy);
    margin-bottom: 1rem;
}

.consent-privacy {
    font-size: .85rem;
    color: var(--consent-text-muted);
    margin-top: 1rem;
    margin-bottom: 0;
}

.consent-privacy a {
    color: var(--consent-blue-accent);
}

.consent-actions {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

@media (max-width: 399.98px) {
    .consent-actions {
        flex-direction: column-reverse;
    }

    .consent-actions .btn {
        width: 100%;
    }
}

/* #### END CONSENT-OVERLAY #### */

/* ------------------------------------------------------------------------
   Sprungmarken-Ausgleich für die fixierte Navbar (incl/nav.php, .navbar
   ist position:fixed und ca. 130–165 px hoch). Ohne diesen Ausgleich landet
   ein Anker-Ziel (Klick auf einen #anchor-Link oder Aufruf mit #anchor in
   der URL) exakt am Viewport-Rand und wird von der Navbar überdeckt.
   Standard-Baustein für jedes Projekt – siehe tech-stack.md.

   Verwendung: Klasse .scroll-anchor auf jedes Element setzen, das Ziel
   eines Sprunglinks ist (z. B. Zwischenüberschriften mit eigener id).
   Für die per file_get_contents() eingebundene Impressum-Vorlage
   (incl. „Barrierefreiheitserklärung") ist die ID bereits über
   #barrierefreiheitserklaerung fest vorgegeben und hier direkt mit
   eingebunden, da dort keine eigene Klasse gesetzt werden kann.
   ------------------------------------------------------------------------ */
.scroll-anchor,
#barrierefreiheitserklaerung,
.scroll-anchor,
#nachfolge {
    scroll-margin-top: 180px;
}

/* === Nachtrag Olaf, 01.10.2026: Logo mobil (iPhone) – bei Bedarf entfernen === */
/* Logo mobil */
@media (max-width: 991.98px) {
    .navbar {
        min-height: 0;
        padding: 14px 0 !important;
    }

    .navbar-scrolled {
        padding: 8px 0 !important;
    }

    .navbar-brand {
        padding-top: 0;
    }

    .navbar-brand div.lrg-logo,
    .navbar-brand div.sml-logo {
        width: auto;
        max-width: none;
        padding: 0 !important;
    }

    .navbar-brand img.lrg-logo {
        height: 72px;
        width: auto;
        max-width: none;
        padding-bottom: 0;
    }

    .navbar-brand img.sml-logo {
        height: 44px;
        width: auto;
    }
}

/* === Ende Nachtrag === */