:root {

    --transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);

    --clr-primary-100: #0986EC;
    --clr-primary-200: #087BD9;
    --clr-primary-300: #076FC5;
    --clr-primary-400: #0661AD;
    --clr-primary-500: #06599D;
    --clr-primary-600: #054E8A;
    --clr-primary-700: #044376;
    --clr-primary-800: #043862;
    
    --clr-secondary: #544741;
    
    --clr-primary-rgb: 6, 97, 173;
 
    --clr-text-on-primary: #FFF;
    --clr-text-on-primary-hover: hsl(0, 0%, 90%);

    --clr-accent-100: #E3B878;
    --clr-accent-200: #E0AF67;
    --clr-accent-300: #DCA656;
    --clr-accent-400: #f18628;
    --clr-accent-500: #D59534;
    --clr-accent-600: #CB8B2A;
    --clr-accent-700: #BA7F26;
    --clr-accent-800: #A97323;

    --clr-text-on-accent: #FFF;
    --clr-text-on-accent-hover: #FFF;

    --clr-accent-rgb: 233, 145, 22;

    --clr-cta-100: hsl(0, 100%, 60%);
    --clr-cta-200: var(--clr-accent-200);
    --clr-cta-300: var(--clr-accent-300);
    --clr-cta-400: var(--clr-accent-400);
    --clr-cta-500: var(--clr-accent-500);
    --clr-cta-600: var(--clr-accent-600);
    --clr-cta-700: var(--clr-accent-700);

    --clr-text-on-cta: #FFF;
    --clr-text-on-cta-hover: var(--clr-neutral-200);
    
    --clr-neutral-5: #F2F2F2;
    --clr-neutral-10: #E6E6E6;
    --clr-neutral-20: #D9D9D9;
    --clr-neutral-50: #CCCCCC;
    --clr-neutral-100: hsl(0, 0%, 40%);
    --clr-neutral-200: #404040;
    --clr-neutral-300: #171717;
    --clr-neutral-400: #181818; /* Standard-Text */
    --clr-neutral-500: #080808;
    --clr-neutral-900: #000000;
    
    --clr-header-nav: var(--clr-neutral-400);
    --clr-header-nav-hover: var(--clr-primary-400);

    --ff-primary: 'Ubuntu', sans-serif;
    --ff-accent: 'Ubuntu', sans-serif;

    --fw-thin: 100;
    --fw-normal: 300;
    --fw-bold: 500;
    --fw-bolder: 900;

    --fs-100: 0.7125rem;
    --fs-200: 0.875rem;
    --fs-300: 0.9125rem;
    --fs-400: 1rem;
    --fs-500: 1.125rem;
    --fs-600: 1.25rem;
    --fs-700: 1.5rem;
    --fs-800: 1.75rem;
    --fs-900: 2rem;
}

::selection {
    color: #000;
    background-color: rgb(252 214 0 / 60%);
}


h1,h2,h3,h4,p, body, ul, ol { margin: 0; }

.scroll-top.mst { opacity: 0; transition: opacity .5s ease;  position: fixed; bottom: 2rem; right: 2rem; width: 2.5rem; height: 2.5rem; background-color: var(--clr-primary-400); border-radius: 100%; border: 0.2rem solid var(--clr-primary-500); }
.scroll-top.mst::after { content: " "; position: absolute; border: 0.2rem solid #FFF; top: 50%; left: 50%; width: 0.75rem; height: 0.75rem; transform: translate(-50%, -50%) rotate(45deg); border-bottom: none; border-right: none; margin-top: 0.2rem; }
.scroll-top.mst:hover { background-color: var(--clr-primary-300); }
.scroll-top.mst.show { opacity: 1; transition: opacity .5s ease; }


*, ::after, ::before { box-sizing: border-box; }

html {
    font-family: var(--ff-primary);
    font-size: 16px;
    word-break: break-word;
}

@media(min-width: 3000px){
    html { font-size: 30px; }
}
@media(max-width: 3000px){
    html { font-size: 29px; }
}
@media(max-width: 2800px){
    html { font-size: 27px; }
}
@media(max-width: 2600px){
    html { font-size: 25px; }
}
@media(max-width: 2400px){
    html { font-size: 20px; }
}
@media(max-width: 1920px){
    html { font-size: 16px; }
}
@media(max-width: 992px){
    html { font-size: 15px; }
}
@media(max-width: 512px){
    html { font-size: 14px; }
}
@media(max-width: 350px){
    html { font-size: 13px; }
}

body {

}



p { 
    font-size: var(--fs-400); 
    color: var(--clr-neutral-400); 
    margin-bottom: 1em;
    display: block;
    text-align: left;
    line-height: 1.5em;
    font-weight: var(--fw-normal);
}
p::selection,
p::-moz-selection { background-color: var(--clr-primary-400); color: #FFF; }

h1,h2,h3,h4,
.h1,.h2,.h3,.h4 {
    margin-bottom: 1em;
    text-align: left;
    display: block;
    line-height: 1.25em;
    font-weight: var(--fw-normal);
    color: var(--clr-neutral-400);
}



h1, .h1 {
    font-size: 2.75rem;
}
h2, .h2 {
    font-size: 2.5rem;
}
h3, .h3 {
    font-size: 1.75rem;
}
h4, .h4 {
    font-size: 1.7rem;
}
h5, .h5 {
    font-size: 1.25rem; 
}



ul,ol { padding-left: 1.5rem; margin: 1rem 0rem; }
li { 
    font-size: var(--fs-400); 
    color: var(--clr-neutral-400);
    line-height: 1.5em;
}



div {
    background-position: center;
    background-size: cover;
    line-height: 1.25em;
}




/*************************
 *        SECTIONS
 *************************/
section,
.section {
    padding: 3rem 0rem;
    background-color: #FFF;
}
section.section-lg,
.section.section-lg {
    padding: 5rem 0rem;
}
section.section-xl,
.section.section-xl {
    padding: 7.5rem 0rem;
}
section.section-xxl,
.section.section-xxl {
    padding: 10rem 0rem;
}










/*************************
 *        IMAGES
 *************************/
img {
    width: 100%;
}
.image { 
    border-radius: 0.25rem; 
    box-shadow: 0em 0.5em 0.5em -0.5em rgb(0 0 0 / 80%); 
}










/*************************
 *        LINKS
 *************************/
a,
button {
    text-decoration: none;
    transition: all .25s ease;
    color: var(--clr-neutral-400);
    height: fit-content;
}
a {
    font-size: inherit;
    color: var(--clr-primary-400);
}
button { 
    font-size: var(--fs-400); 
}
a:hover,
button:hover {
    color: var(--clr-primary-400);
    transition: all .25s ease;
    cursor: pointer;
}

a::after,
a:hover::after,
a::before,
a:hover::before,
button::after,
button:hover::after,
button::before,
button:hover::before { transition: all .25s ease; }





/*************************
 *        COLORS
 *************************/

table { width: 100%; display: table; border: none; }
table td { display: inline-table; border-spacing: 0; }









/*************************
 *        BUTTONS
 ************************
.btn { position: relative; font-size: var(--fs-400); padding: 0.75em 1.75em; border: 0.125em solid; border-radius: 0.125rem; font-weight: 700; box-shadow: 0em 0.5em 0.5em -0.5em rgb(0 0 0 / 30%); display: inline-block; margin-top: 1rem;  }
.btn:hover { box-shadow: 0em 0.5em 0.3em -0.4em rgb(0 0 0 / 40%); }*/

.btn { 
    margin-top: 2rem; 
    display: block; 
    width: -moz-fit-content;
    width: fit-content;
    font-size: var(--fs-400);
    position: relative;
    z-index: 5; 
    padding: 0.75em 1.75em;
    color: var(--clr-primary-700);
    font-weight: var(--fw-bold);
    border: 0.2rem solid;
}
.btn:hover { 
    color: var(--clr-text-on-accent); 
}


/* Button Größe */
.btn.btn-xs { font-size: var(--fs-200); }
.btn.btn-sm { font-size: var(--fs-300); padding: 0.5em 1.75em; }
.btn.btn-lg { font-size: var(--fs-500); }
.btn.btn-xl { font-size: var(--fs-600); }


/* OUTLINE */
.btn-outline { background-color: transparent !important; }


/* Primary */
.btn-primary {
    background-color: var(--clr-primary-400); /*#825e50*/
    border-color: var(--clr-primary-600);
    color: var(--clr-text-on-primary); 
}
.btn-primary:hover { 
    background-color: var(--clr-primary-300);
    color: var(--clr-text-on-primary-hover);
    border-color: var(--clr-primary-400);
}

.btn-primary.btn-outline {  color: var(--clr-primary-400); border-color: var(--clr-primary-400); }
.btn-primary.btn-outline:hover { color: var(--clr-text-on-primary); background-color: var(--clr-primary-400) !important; }





/* Accent */
.btn-accent {
    background-color: var(--clr-accent-400);
    border-color: var(--clr-accent-500);
    color: var(--clr-text-on-accent); 
}
.btn-accent:hover { 
    background-color: var(--clr-accent-300);
    color: var(--clr-text-on-accent-hover);
    border-color: var(--clr-accent-400);
}

.btn-accent.btn-outline {  color: var(--clr-accent-400); border-color: var(--clr-accent-400); }
.btn-accent.btn-outline:hover { color: var(--clr-text-on-accent); background-color: var(--clr-accent-400) !important; }



/* CTA */
.btn-cta { color: var(--clr-accent-400); background-color: transparent; }
.btn-cta:hover { color: var(--clr-text-on-cta); background-color: var(--clr-accent-400); border-color: var(--clr-accent-600); }
.btn-cta.btn-filled { background-color: var(--clr-accent-400); color: var(--clr-text-on-cta); border-color: var(--clr-accent-600); }
.btn-cta.btn-filled:hover { background-color: var(--clr-accent-300); }



/* White */
.btn-white {
    background-color: #FFF;
    color: var(--clr-neutral-400);
    border-color: #eee;
}
.btn-white:hover {
    background-color: #eaeaea;
    color: var(--clr-neutral-500);
}
.btn-white.btn-outline { border-color: #FFF; color: #FFF; }
.btn-white.btn-outline:hover { background-color: rgb(255 255 255 / 5%) !important; }

/* Link */
.btn-link { 
    border: none;
    padding: 0;
    box-shadow: none;
    position: relative;
    color: var(--clr-primary-400);
}
.btn-link:hover { color: var(--clr-primary-500); }
.btn-link::after { content: " \203A"; font-size: 1.25em; }
.btn-link::before { border-bottom: 0.1rem solid var(--clr-primary-400); content: " "; position: absolute; bottom: 0; left: 0; width: 0; }
.btn-link:hover { box-shadow: none; }
.btn-link:hover::before { width: 100%; }









/*************************
 *       Container
 *************************/
.container { 
    margin-left: auto;
    margin-right: auto;
    width: min(90%, 80rem);
}
.container-lg {
    width: min(90%, 90rem);
}
.container-xl {
    width: min(90%, 100rem);
}
.container-md {
    width: min(90%, 65rem);
}

.container-sm {
    width: min(90%, 50rem);
}









/*************************
 *      BACKGROUNDS
 *************************/

/* Primary */
.bg-primary { background-color: var(--clr-primary-400); }
.bg-primary .clr-primary { color: var(--clr-text-on-primary); }
.bg-primary p,
.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-primary li,
.bg-primary a,
.bg-primary h4 { color: var(--clr-text-on-primary); }

.bg-primary.bg-300 { background-color: var(--clr-primary-300); }
.bg-primary.bg-500 { background-color: var(--clr-primary-500); }



/* Neutral */
.bg-neutral { background-color: var(--clr-neutral-400); }
.bg-neutral.bg-20 { background-color: var(--clr-neutral-20); }
.bg-neutral.bg-100 { background-color: var(--clr-neutral-100); }
.bg-neutral.bg-200 { background-color: var(--clr-neutral-200); }
.bg-neutral.bg-300 { background-color: var(--clr-neutral-300); }
.bg-neutral.bg-500 { background-color: var(--clr-neutral-500); }
.bg-neutral.bg-600 { background-color: var(--clr-neutral-600); }
.bg-neutral.bg-700 { background-color: var(--clr-neutral-700); }
.bg-neutral.bg-800 { background-color: var(--clr-neutral-800); }
.bg-neutral.bg-900 { background-color: var(--clr-neutral-900); }

.bg-neutral p { color: #FFF; }
.bg-neutral.bg-100 p { color: var(--clr-neutral-400); }
.bg-neutral.bg-200 p { color: var(--clr-neutral-400); }









/*************************
 *        COLORS
 *************************/

/* Primary */
.clr-primary { color: var(--clr-primary-400); }
.clr-cta { color: var(--clr-cta-400); }
.clr-accent { color: var(--clr-accent-400); }

.clr-neutral-300 { color: var(--clr-neutral-300); }


/*************************
 *        HELPER
 *************************/

/* Text-Align */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Margin */
.mb-0 { margin-bottom: 0 !important; }
.m-a { margin: auto !important; }

.mt-05 { margin-top: 0.5rem !important; }
.mt-1 { margin-top: 1rem !important; }
.mt-15 { margin-top: 1.5rem !important; }
.mt-2 { margin-top: 2rem !important; }
.mt-25 { margin-top: 2.5rem !important; }

.mb-05 { margin-bottom: 0.5rem !important; }
.mb-1 { margin-bottom: 1rem !important; }
.mb-15 { margin-bottom: 1.5rem !important; }
.mb-2 { margin-bottom: 2rem !important; }
.mb-25 { margin-bottom: 2.5rem !important; }


/* Font Size */
div.text-big p,         /* Wenn DIV, dann alle P's. Wenn P, dann nur P*/
ul.text-big li,         
p.text-big { font-size: 1.25rem !important; }








/* Splits */
.split { display: flex; flex-direction: row; }
.split > * { flex-basis: 100%; padding-left: 0.75rem; padding-right: 0.75rem; flex-grow: 1; }

.split.split-2 { flex-wrap: wrap;  }
.split.split-2 > * { flex-basis: 50%; }

.split.split-3 { flex-wrap: wrap; }
.split.split-3 > * { flex-basis: 33.33333%; }

.split.split-4 { flex-wrap: wrap; }
.split.split-4 > * { flex-basis: 25%; }

.split.split-5 { flex-wrap: wrap; }
.split.split-5 > * { flex-basis: 20%; }

.split.split-6 { flex-wrap: wrap; }
.split.split-6 > * { flex-basis: 16.6666%; }

.split.split-7 { flex-wrap: wrap; }
.split.split-7 > * { flex-basis: 14.285714285714%; }

.split.split-8 { flex-wrap: wrap; }
.split.split-8 > * { flex-basis: 12.5%; }

.split.split-9 { flex-wrap: wrap; }
.split.split-9 > * { flex-basis: 11.111111%; }

.split.split-10 { flex-wrap: wrap; }
.split.split-10 > * { flex-basis: 10%; }

.split.split-11 { flex-wrap: wrap; }
.split.split-11 > * { flex-basis: 9.090909090909%; }

.split.split-12 { flex-wrap: wrap; }
.split.split-12 > * { flex-basis: 8.3333333%; }

.container > .split { margin-left: -0.75rem; margin-right: -0.75rem; }




div.ff-accent { display: inherit; font-family: var(--ff-accent); }



input:not([type="checkbox"]),
optgroup,
select,
textarea {
    font-family: var(--ff-primary);
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 1rem;
    border-radius: 0;
    font-family: inherit;
    font-size: var(--fs-400);
    font-weight: 400;
    line-height: var(--fs-500);
    color: #232635;
    transition: box-shadow .5s,border-color .25s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.5rem;
    background-color: #fefefe;
    border: 1px solid #ccc;
    box-shadow: none;
    min-height: 3rem;
    padding: 1rem;
}

input:not([type="checkbox"]),
optgroup,
select {
    
    height: 2.5375rem;
}

input:focus,
optgroup:focus,
select:focus,
textarea:focus {
    border: 2px solid #232635;
    box-shadow: none;
    background-color: #fefefe;
    outline: 0;
}





/**********************************************
*   HEADER 
***********************************************/

/* Generals */
header { border-bottom: none; z-index: 1000; }
header nav li { list-style: none; }
header nav ul { padding: 0; margin: 0; }
header nav { width: 100%; margin: auto; }
header > * { position: relative; }


/* Topbar*/
header .header-topbar { background-color: var(--clr-neutral-100); padding: 0.5rem 1rem; border-bottom: 0.1rem solid var(--clr-neutral-200); font-size: var(--fs-200); }

header .header-inner { display: flex;  position: relative; }

/* Toggler */
header .nav-toggler { width: 3rem; height: 3rem; display: none; margin: auto; margin-right: 0; position: relative; background-color: #45c2be; border: none; }
header .nav-toggler::after { content: " "; position: absolute; bottom: 25%; width: 60%; border-bottom: 0.25rem solid #ffffff; left: 50%; transform: translateX(-50%); border-top: 0.25rem solid #ffffff; height: 30%; transition: all .25s ease;  }
header .nav-toggler::before { content: " "; position: absolute; top: 25%; width: 60%; border-top: 0.25rem solid #ffffff; left: 50%; transform: translateX(-50%); transition: all .25s ease;  }
header .nav-toggler.open::before { transform: translateX(-50%) rotate(-45deg); top: 50%; margin-top: -0.1rem; transition: all .25s ease;  }
header .nav-toggler.open::after { border-bottom: none; transform: translateX(-50%) rotate(45deg); top: 50%; height: 0; margin-top: -0.1rem; transition: all .25s ease; }

/* Branding */
header .brand { width: 12.5rem; padding: 1rem 0rem; margin: auto; }

header .nav-inner { margin-left: auto; flex-grow: 1; margin-right: 0; display: flex; flex-wrap: wrap; }

/* Topbar (Nav) */
header .nav-topbar { width: 100%; display: flex; font-size: var(--fs-300); color: var(--clr-neutral-300); justify-content: flex-end; padding: 0.5rem 1rem; }
header .nav-topbar > * { padding-right: 0.5rem; padding-left: 0.5rem; }
header .nav-topbar > *:first-child { padding-left: 0; }
header .nav-topbar > *:last-child { padding-right: 0; }

/* Level-0 Navigation */
header nav > ul { display: flex; justify-content: flex-end; }
header nav > ul > * { padding: 0rem 0.75rem; }
header nav > ul > li { margin: auto 0; }
header nav > ul > li > a { color: var(--clr-header-nav); padding-top: 1.25rem; padding-bottom: 1.25rem; font-weight: 400; font-size: var(--fs-500); }
header nav > ul > li > a:hover { color: var(--clr-header-nav-hover);  }
header nav > ul > li.active > a { color: var(--clr-header-nav-hover); }


/* Level-1 Navigation */
header nav > ul > li.with-sub { height: 100%; display: flex; position: relative; }
header nav > ul > li.with-sub > a { position: relative; padding-right: 1.25rem; margin: auto;}
header nav > ul > li.with-sub > ul { z-index: 10000; display: none; position: absolute; transition: all .25s ease; top: 80%; background-color: #FFF; opacity: 0; padding: 0.5rem 1rem; margin: 0; min-width: 20rem; }
header nav > ul > li.with-sub > ul > li.active > a { color: var(--clr-header-nav-hover); }

/* Dropdown Arrows */
header nav > ul > li.with-sub > a::after { content: " "; position: absolute; margin-top: -0.125rem; top: 50%; right: 0; border: 0.125rem solid var(--clr-header-nav); border-left: none; border-top: none; width: 0.5rem; height: 0.5rem; transform: translate(-50%, -50%) rotate( 45deg );   }
header nav > ul > li.with-sub.hov > a::after { border-color: var(--clr-header-nav-hover); transform: translate(-50%, -50%) rotate( 225deg ); margin-top: 0.125rem; }
header nav > ul > li.with-sub.active > a::after { border-color: var(--clr-header-nav-hover); }

/* Dropdown Hover */
header nav > ul > li.with-sub.hov > a { color: var(--clr-header-nav-hover); }
header nav > ul > li.with-sub.hov > ul { opacity: 1; top: 100%; position: absolute; transition: all .25s ease;  }


/* Fixed Header */
body.fixed-header header { position: fixed; width: 100%; background-color: transparent; }
body.fixed-header main { padding-top: 135px; }
body.fixed-header header.is-scrolling .rm-on-scroll { display: none; }


@media(max-width: 992px){
    header .nav-topbar { display: none; }
    header nav { display: none; position: absolute; opacity: 0; top: 80%; width: 100%; background-color: #FFF; transition: all .25s ease; left: 0; }
    header nav > ul { display: block; }
    header nav > ul > li { display: flex; }
    header nav > ul > li > a { width: 100%; }
    header nav > ul > li.with-sub { flex-wrap: wrap; }
    header nav > ul > li.with-sub > * { flex-basis: 100%; }
    header nav > ul > li.with-sub > ul { display: none !important; position: relative !important; }
    header nav > ul > li.with-sub.hov > ul { display: block !important; opacity: 1; top: 100%; }

    

    header .nav-toggler { display: block; }

    header.nav-open nav { transition: all .25s ease; top: 100%; opacity: 1; }

}
@media(max-width: 512px){
    header .container { width: 100%; }
    header .header-inner { padding: 0rem 1rem; }
}





.read-more { position: relative; overflow-y: hidden; }
.read-more::after { content: " "; position: absolute; bottom: 0; left: 0; width: 100%; box-shadow: 0rem 0rem 3.5rem 5rem #FFF; }
.read-more.open::after { content: ""; display: none; }
.read-more .read-more-btn { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 100;}
.read-more.open .read-more-btn { position: absolute; bottom: unset; top: 100%;}
.read-more.open { max-height: unset !important; overflow-y: visible; margin-bottom: 3.5rem; }



.breadcrumb { display: flex; overflow-X: auto; }
.breadcrumb ul { margin: 0; display: flex; padding: 0;  }
.breadcrumb li { list-style: none; }
.breadcrumb a { display: block; opacity: 0.75; padding: 0.25em 0; position: relative; font-size: var(--fs-100); margin-right: 1em; padding-right: 1em; white-space: nowrap;  }
.breadcrumb li:last-of-type a { opacity: 1; color: var(--clr-primary-400);  margin-right: 0; padding-right: 0; }
.breadcrumb a::after { opacity: 0.75; width: 0.5em; height: 0.5em; content: " "; position: absolute; right: 0%; top: 50%; border: 0.125em solid var(--clr-neutral-300); border-bottom: none; border-left: none; transform: translate(50%, -50%) rotate(45deg); }
.breadcrumb li:last-of-type a::after { content: ""; display: none; }
.breadcrumb a:hover { opacity: 1; }

.breadcrumb .link { margin: auto; margin-right: 1.5rem; padding-right: 0; padding-left: 1em; }
.breadcrumb .link::after { transform: translate(-50%, -50%) rotate(225deg); left: 0; right: unset; }

@media(max-width: 550px){
    .breadcrumb .link { display: none; }
}