/* CSS Document --------------------------------------------------------- */
/* mobile first */ 

/* fonts.google.com local */
@font-face {
    /* font-display: swap;  */
    font-family: 'Source Sans 3';
    src: url('../fonts/sourcesans.woff2') format('woff2');
    font-weight: 400 800;
    font-style: normal;
}

@font-face {
    /* font-display: swap;  */
    font-family: 'Material Symbols Outlined';
    src: url('../fonts/materialsymbolsoutlined.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

body {
    font-family: 'Source Sans 3', arial, helvetica, sans-serif;
    font-weight: 400;
    color: #4B4B55;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
}

/* Font Stuff */
h1,
h2,
.as-logo {
    font-weight: 800 !important;
}

h1,
h2,
.h1,
.h2,
.h6 {
    color: #1E1E28;
}

.as-logo {
    letter-spacing: -3px;
    line-height: 0.9;
    transition: color 0.5s;
}
.sv-logo {
    letter-spacing: 4px;
    transition: color 0.5s;
}

#toggle-navi:checked ~ * p.as-logo, #toggle-navi:checked ~ * p.sv-logo {
    color: white!important;
}

/*
h4, h5, h6 {font-weight: 400; margin-bottom: 0;}
*/

/* Links */
/* a{color:#555; text-decoration: underline; transition: color 0.8s;}
a:hover {color:#0d6efd;}
.material-symbols-outlined {color:#555 ; background-color: #fff; transition:background-color 0.8s, color 0.8s;}
.material-symbols-outlined:hover { color: #fff; background-color: #0d6efd !important;}
*/


/* Navi Container */
#navibg {
    height:0px;
    width:100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.85);
    transition: height 0.5s;
}

/* Navi Container open */
#toggle-navi:checked ~ #navibg {
    height: 100%!important;
}

/* Status Navi Container */
#toggle-navi {
    position:absolute;
    appearance:none;
    left:-100%;
    top:-100%;
}
/* Hamburger Icon Frame*/
#navi-icon {
    transition: color 0.5s;
    cursor: pointer;
    top: calc(0.3rem + 1.5vw);
    left: calc(0.3rem + 1.5vw);
}
#toggle-navi:checked + label {
color:#fff;
}
/* Hamburger Icon */
#navi-icon::before {
    font-size: 1.75rem;
    color: #555;
    font-family: 'Material Symbols Outlined';
    content: 'menu';
    line-height: 1;
    cursor: pointer;
    transition: color 0.5s;
    vertical-align: middle;
}
/* Hamburger Icon Hover */
#navi-icon:hover:before {
    color: #0d6efd;
}
/* Hamburger Icon change to Close Icon */
#toggle-navi:checked + label:before {
    content: 'close';
    color:#7eec99;
}
#toggle-navi:hover:checked + label:before {
    color:#0d6efd;
}

/* Navi */
.navbar .nav-item a {
    color: white!important;
    font-size: calc(1.375rem + 1.5vw);
    text-transform: uppercase;
}
.navbar .nav-item a:hover {
    color: #0d6efd!important;
}
.navbar .nav-item a.active {
    color: white!important;
    font-variation-settings: "wght" 800;
}

.navbar-nav li, .sub-nav li {display: inline-block;}
.navbar-nav li a, .sub-nav li a {
    /* text-decoration: none;
    text-transform: uppercase;*/
    align-items: center;
    justify-content: center;
    display: inline-flex;
    flex-direction: column;
    color: #4B4B55;
    transition: color 0.8s, font-variation-settings 0.8s;
    font-variation-settings: "wght" 400;
    /* text-shadow: 2px 2px 5px #333; */
}
/* .sub-nav li:nth-child(-n + 2){ */
.sub-nav  li:first-child{
    border-right: 1px solid #dddddd;
    margin-right: 0.5rem;
    padding-right: 0.5rem;
}
.navbar-nav li a:hover, .sub-nav li a:hover {
    color: #0d6efd;
    font-variation-settings: "wght" 800;
}
.navbar-nav li a::after, .sub-nav li a::after { content:attr(data-text); font-weight:800; font-variation-settings: "wght" 800; height: 0px; visibility: hidden; overflow: hidden; user-select: none; pointer-events: none;} 


/* Material Symbols outlined */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 1.5rem; /* Preferred icon size 24px */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

.material-symbols-outlined.md-18 {
    font-size: 18px;
}

.material-symbols-outlined.md-24 {
    font-size: 24px;
}

.material-symbols-outlined.md-36 {
    font-size: 36px;
}

.material-symbols-outlined.md-48 {
    font-size: 48px;
}

.material-symbols-outlined.md-60 {
    font-size: 60px;
}

/* Circle Background*/
.material-symbols-outlined.md-circle,
.material-symbols-outlined.md-18.md-circle{
    background-color: #0d6efd;
    border: 1px solid #0d6efd;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    text-align: center;
    line-height: 1rem;
    vertical-align: middle;
    padding: 0.65rem;
}


.material-symbols-outlined.md-24.md-circle {
    background-color: #0d6efd;
    border: 1px solid #0d6efd;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    text-align: center;
    line-height: 1.875rem;
    vertical-align: middle;
    padding: 0.9375rem;
}

.material-symbols-outlined.md-36.md-circle {
    background-color: #0d6efd;
    border: 1px solid #0d6efd;
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 50%;
    text-align: center;
    line-height: 3.75rem;
    vertical-align: middle;
    padding: 1.875rem;
}

.material-symbols-outlined.md-48.md-circle,
.material-symbols-outlined.md-60.md-circle {
    background-color: #0d6efd;
    border: 1px solid #0d6efd;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    text-align: center;
    line-height: 5rem;
    vertical-align: middle;
    padding: 2.5rem;
}

.material-text {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    top: 5rem;
}
/* ende Material Symbols outlined */

/* Text Highlight */
.highlight {
	position: relative;
	background-position: left;
    background-size: 0% 100%;
    background-image: linear-gradient( #7ed0ec, #7ed0ec);
	background-repeat: no-repeat;
    transition: background-size 1s;
	padding: 4px;
}

.in-view {
	background-size: 100% 100%;
}
/* end Text Highlight */


/* Header Background */
.gradient {
    background: #d1dae3;
    background: linear-gradient(319deg,rgba(233, 244, 245, 1) 0%, rgba(237, 248, 252, 1) 50%, rgba(230, 235, 240, 1) 100%);
    /* background: linear-gradient(319deg, rgba(0, 21, 125, 1) 0%, rgba(168, 220, 230, 1) 100%); */
    /* background: linear-gradient(319deg,rgba(244, 255, 207, 1) 0%, rgba(190, 210, 235, 1) 40%, rgba(190, 210, 235, 1) 60%, rgba(168, 220, 230, 1) 100%); */
    background-size: 200% 99%;
    background-repeat: no-repeat;
    animation: verticalSliding 10s ease infinite;
}

@keyframes verticalSliding {
    0% {
        background-position: 0% 0%;
    }

    25% {
        background-position: 45% 0%;
    }

    50% {
        background-position: 80% 0%;
    }

    75% {
        background-position: 35% 0%;
    }

    100% {
        background-position: 0% 0%;
    }
}
/* end Header Background */

/* Buttons mit MD-Icon*/
.lh-0 {
    line-height: 0;
}

/* List */
.list-left {
    margin-left: -1.1rem;
}

.list-read {
    font-size: 1.25rem;
}

/* Image Div Cover  */
.object-fit-cover-dlx {
    object-position: center;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

/* ToTopLink */
.totoplink {
    visibility: hidden;
    opacity: 0;
    /* position: fixed !important; */
    position: sticky!important;
    bottom: 1.5rem;
    /* right: 2.5rem; */
    transition: opacity 0.8s, visibility 0.8s;
    z-index: 9;
}

.totop-fade-in {
    visibility: visible;
    opacity: 1;
}

/* simple Parallax */
.parallax {
    height: 300px;
}

/* srcset für bg-img, bisschen drüber... ;-) */
.parallax-gericht { background: url("../images/gerichtsgutachten-480.jpg"); background-image: image-set(url("../images/gerichtsgutachten-480.avif") type("image/avif"), url("../images/gerichtsgutachten-480.webp") type("image/webp"), url("../images/gerichtsgutachten-480.jpg") type("image/jpeg")); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: auto auto; background-size: cover;}
@media (min-width: 768px) { .parallax-gericht { background-image: image-set(url("../images/gerichtsgutachten-768.avif") type("image/avif"), url("../images/gerichtsgutachten-768.webp") type("image/webp"), url("../images/gerichtsgutachten-768.jpg") type("image/jpeg")); } }
@media (min-width: 1200px) { .parallax-gericht { background-image: image-set(url("../images/gerichtsgutachten-1200.avif") type("image/avif"), url("../images/gerichtsgutachten-1200.webp") type("image/webp"), url("../images/gerichtsgutachten-1200.jpg") type("image/jpeg")); } }
@media (min-width: 1920px) { .parallax-gericht { background-image: image-set(url("../images/gerichtsgutachten-1920.avif") type("image/avif"), url("../images/gerichtsgutachten-1920.webp") type("image/webp"), url("../images/gerichtsgutachten-1920.jpg") type("image/jpeg")); } }
@media (min-width: 2560px) { .parallax-gericht { background-image: image-set(url("../images/gerichtsgutachten-2560.avif") type("image/avif"), url("../images/gerichtsgutachten-2560.webp") type("image/webp"), url("../images/gerichtsgutachten-2560.jpg") type("image/jpeg")); } }

.parallax-privat { background: url("../images/privatgutachten-480.jpg"); background-image: image-set(url("../images/privatgutachten-480.avif") type("image/avif"), url("../images/privatgutachten-480.webp") type("image/webp"), url("../images/privatgutachten-480.jpg") type("image/jpeg")); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: auto auto; background-size: cover;}
@media (min-width: 768px) { .parallax-privat { background-image: image-set(url("../images/privatgutachten-768.avif") type("image/avif"), url("../images/privatgutachten-768.webp") type("image/webp"), url("../images/privatgutachten-768.jpg") type("image/jpeg")); } }
@media (min-width: 1200px) { .parallax-privat { background-image: image-set(url("../images/privatgutachten-1200.avif") type("image/avif"), url("../images/privatgutachten-1200.webp") type("image/webp"), url("../images/privatgutachten-1200.jpg") type("image/jpeg")); } }
@media (min-width: 1920px) { .parallax-privat { background-image: image-set(url("../images/privatgutachten-1920.avif") type("image/avif"), url("../images/privatgutachten-1920.webp") type("image/webp"), url("../images/privatgutachten-1920.jpg") type("image/jpeg")); } }
@media (min-width: 2560px) { .parallax-privat { background-image: image-set(url("../images/privatgutachten-2560.avif") type("image/avif"), url("../images/privatgutachten-2560.webp") type("image/webp"), url("../images/privatgutachten-2560.jpg") type("image/jpeg")); } }

.parallax-schieds { background: url("../images/schiedsgutachten-480.jpg"); background-image: image-set(url("../images/schiedsgutachten-480.avif") type("image/avif"), url("../images/schiedsgutachten-480.webp") type("image/webp"), url("../images/schiedsgutachten-480.jpg") type("image/jpeg")); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: auto auto; background-size: cover;}
@media (min-width: 768px) { .parallax-schieds { background-image: image-set(url("../images/schiedsgutachten-768.avif") type("image/avif"), url("../images/schiedsgutachten-768.webp") type("image/webp"), url("../images/schiedsgutachten-768.jpg") type("image/jpeg")); } }
@media (min-width: 1200px) { .parallax-schieds { background-image: image-set(url("../images/schiedsgutachten-1200.avif") type("image/avif"), url("../images/schiedsgutachten-1200.webp") type("image/webp"), url("../images/schiedsgutachten-1200.jpg") type("image/jpeg")); } }
@media (min-width: 1920px) { .parallax-schieds { background-image: image-set(url("../images/schiedsgutachten-1920.avif") type("image/avif"), url("../images/schiedsgutachten-1920.webp") type("image/webp"), url("../images/schiedsgutachten-1920.jpg") type("image/jpeg")); } }
@media (min-width: 2560px) { .parallax-schieds { background-image: image-set(url("../images/schiedsgutachten-2560.avif") type("image/avif"), url("../images/schiedsgutachten-2560.webp") type("image/webp"), url("../images/schiedsgutachten-2560.jpg") type("image/jpeg")); } }

@media only screen and (max-device-width: 767px) {
    .parallax {
        background-attachment: scroll;
    }
}
/* end simple Parallax */


/* Accordion */
.accordion {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23555555'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23555555'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:focus {
    border: none;
}

.accordion-button:not(.collapsed) {
    background-color: #0d6efd;
    color: #fff;
    padding-left: 0.8rem;
    box-shadow: none !important;
}

.accordion-button::after {
    transition: transform 2.0s;
    transform: rotate(0deg);
}

.accordion-button:not(.collapsed)::after {
    transition: transform 2.0s;
    transform: rotate(180deg);
}

.accordion-button {
    font-weight: 600;
    font-size: 1.25rem;
}

.accordion-button {
    background-color: initial;
    padding-left: 0;
    transition: all .5s;
}

.accordion-button:hover {
    background-color: #0d6efd;
    color:#fff;
    padding-left: 0.8rem;
    transition: all .5s;
}
/* end Accordion */

/* --- Breakpoints --- */
@media (min-width: 576px) {
    #navi-icon {
        top: calc(3.1rem + 1.5vw);
        left: calc(3.1rem + 1.5vw);
    }
}

@media (min-width: 768px) {
    /* 
    h1{
        font-size: 3rem;
    } */
}


@media (min-width: 992px) {
    /* 
    h1{
        font-size: 3rem;
    } */
}

@media (min-width: 1200px) {
    /* Navi */
    .navbar .nav-item a {
        color: #4B4B55!important;
        font-size: 1rem;
        text-transform: none;
    }
    .navbar .nav-item a.active {
        color: #1E1E28!important;
        font-variation-settings: "wght" 800;
    }
    .navbar-nav li:nth-child(-n + 2){
        border-right: 1px solid #dddddd;
        margin-right: 0.5rem;
        padding-right: 0.5rem;
    }
}

@media (min-width: 1400px) {
    /* 
    h1{
        font-size: 3rem;
    } */
}

@media (min-width: 1600px) {
    /* 
    h1{
        font-size: 3rem;
    } */
}

@media (min-width: 2000px) {
    /* 
    h1{
        font-size: 3rem;
    } */
}
/* BS5 Breakpoints -------------------------------------------------- */
/* xs<575px - sm≥576px - md≥768px - lg≥992px - xl≥1200px - xxl≥1400px */

/* body::before { content: "XS <=575px"; color: aqua; font-size: 2rem; font-weight: 800; text-shadow: 2px 2px 5px #AAAAAA; position: fixed; z-index: 999; bottom: 1rem; right: 1rem;}
@media (min-width: 576px) { body::before {content: "SM 576px";}}
@media (min-width: 768px) { body::before {content: "MD 768px";}}
@media (min-width: 992px) { body::before {content: "LG 992px";}}
@media (min-width: 1200px) {body::before {content: "XL 1200px";}}
@media (min-width: 1400px) {body::before {content: "XXL 1400px";}}
@media (min-width: 1600px) {body::before {content: "XXL 1600px";}}
@media (min-width: 2000px) {body::before {content: "XXL 2000px";}} */


/*TEST END ---------------------------------------------------------------- */