:root {
    --bs-font-serif: 'Montserrat', serif;
    --bs-font-sans-serif: 'Montserrat', sans-serif;
    
    --bs-box-shadow-md: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    
    --bs-body-font-size-sm: .75rem;
    --bs-body-font-size: .825rem;
    --bs-body-font-weight: 500;
    --bs-body-line-height: 1.5;
    --bs-letter-spacing: 1%;
    
    --md-sys-color-primary: #026970;
    --md-sys-color-secondary: #56612b;
    --md-sys-color-tertiary: #a0383a;
    --md-sys-color-background: #f7fafa;
    --md-sys-color-on-background: #181c1d;

    --md-sys-color-on-primary: rgb(255 255 255);
    --md-sys-color-inverse-primary: rgb(133, 211, 218);
    --md-sys-color-primary-fixed: rgb(161 239 247);
    --md-sys-color-on-primary-fixed: rgb(0 32 34);
    --md-sys-color-primary-fixed-dim: rgb(133 211 218);
    --md-sys-color-on-primary-fixed-variant: rgb(0 79 84);
    --md-sys-color-primary-container: #66b4bb;
    --md-sys-color-on-primary-container: rgb(0 68 73);

    --md-sys-color-on-secondary: rgb(255 255 255);
    --md-sys-color-secondary-container: rgb(110 122 65);
    --md-sys-color-on-secondary-container: rgb(252 255 226);
    --md-sys-color-secondary-fixed: rgb(220 233 165);
    --md-sys-color-on-secondary-fixed: rgb(24 30 0);
    --md-sys-color-secondary-fixed-dim: rgb(192 205 139);
    --md-sys-color-on-secondary-fixed-variant: rgb(65 75 24);

    --md-sys-color-on-tertiary: rgb(255 255 255);
    --md-sys-color-tertiary-container: rgb(192 80 81);
    --md-sys-color-on-tertiary-container: rgb(255 251 255);
    --md-sys-color-tertiary-fixed: rgb(255 218 216);
    --md-sys-color-on-tertiary-fixed: rgb(65 0 6);
    --md-sys-color-tertiary-fixed-dim: rgb(255 179 176);
    --md-sys-color-on-tertiary-fixed-variant: rgb(132 35 39);

    --md-sys-color-error: rgb(186 26 26);
    --md-sys-color-on-error: rgb(255 255 255);
    --md-sys-color-error-container: rgb(255 218 214);
    --md-sys-color-on-error-container: rgb(147 0 10);
    
    --md-sys-color-surface: rgb(252 248 248);
    --md-sys-color-on-surface: rgb(28, 27, 27);
    --md-sys-color-surface-variant: rgb(224 227 227);
    --md-sys-color-on-surface-variant: rgb(68 71 72);
    --md-sys-color-outline: rgb(116 120 120);
    --md-sys-color-outline-variant: rgb(196 199 200);
    --md-sys-color-shadow: rgb(0 0 0);
    --md-sys-color-scrim: rgb(0 0 0);
    --md-sys-color-inverse-surface: rgb(49 48 48);
    --md-sys-color-inverse-on-surface: rgb(244 240 239);
    --md-sys-color-surface-dim: rgb(221 217 217);
    --md-sys-color-surface-bright: rgb(252 248 248);
    --md-sys-color-surface-container-lowest: rgb(255 255 255);
    --md-sys-color-surface-container-low: rgb(246 243 242);
    --md-sys-color-surface-container: rgb(241 237 236);
    --md-sys-color-surface-container-high: rgb(235 231 231);
    --md-sys-color-surface-container-highest: rgb(229 226 225);
    --md-sys-color-surface-tint: rgb(2 105 112);
    
    --primary-100: #66B4BB;
    --primary-75: #8CC7CC;
    --primary-50: #B2D9DD;
    --primary-25: #D9ECEE;
    
    --secondary-100: #8A965A;
    --secondary-75: #A7B083;
    --secondary-50: #C4CAAC;
    --secondary-25: #E2E5D6;

    --tertiary-125: #a0383a;
    --tertiary-100: #C55454;
    --tertiary-75: #D47F7F;
    --tertiary-50: #E2A9A9;
    --tertiary-25: #F0D4D4;

    --wa-light: #25D366;
    --wa-dark: #128C7E;
    --slogan-text-shadow: rgba(0, 0, 0, 0.251);
}

@media (prefers-color-scheme: dark) {
    :root {   
        --md-sys-color-primary: #c2faff;
        --md-sys-color-secondary: #eaf7b1;
        --md-sys-color-tertiary: #ffecea;
        --md-sys-color-background: #101414;
        --md-sys-color-on-background: #e0e3e3;

        --md-sys-color-on-primary: rgb(0 0 0);
        --md-sys-color-inverse-primary: rgb(0 80 86);
        --md-sys-color-primary-fixed: rgb(161 239 247);
        --md-sys-color-on-primary-fixed: rgb(0 0 0);
        --md-sys-color-primary-fixed-dim: rgb(133 211 218);
        --md-sys-color-on-primary-fixed-variant: rgb(0 20 22);
        --md-sys-color-primary-container: #81cfd6;
        --md-sys-color-on-primary-container: rgb(0 14 15);

        --md-sys-color-on-secondary: rgb(0 0 0);
        --md-sys-color-secondary-container: rgb(188 201 136);
        --md-sys-color-on-secondary-container: rgb(9 13 0);
        --md-sys-color-secondary-fixed: rgb(220 233 165);
        --md-sys-color-on-secondary-fixed: rgb(0 0 0);
        --md-sys-color-secondary-fixed-dim: rgb(192 205 139);
        --md-sys-color-on-secondary-fixed-variant: rgb(14 19 0);

        --md-sys-color-on-tertiary: rgb(0 0 0);
        --md-sys-color-tertiary-container: rgb(255 173 170);
        --md-sys-color-on-tertiary-container: rgb(28 0 1);
        --md-sys-color-tertiary-fixed: rgb(255 218 216);
        --md-sys-color-on-tertiary-fixed: rgb(0 0 0);
        --md-sys-color-tertiary-fixed-dim: rgb(255 179 176);
        --md-sys-color-on-tertiary-fixed-variant: rgb(45 0 3);

        --md-sys-color-error: rgb(255 236 233);
        --md-sys-color-on-error: rgb(0 0 0);
        --md-sys-color-error-container: rgb(255 174 164);
        --md-sys-color-on-error-container: rgb(34 0 1);
        
        --md-sys-color-surface: rgb(20 19 19);
        --md-sys-color-on-surface: rgb(255 255 255);
        --md-sys-color-surface-variant: rgb(68 71 72);
        --md-sys-color-on-surface-variant: rgb(255 255 255);
        --md-sys-color-outline: rgb(238 240 241);
        --md-sys-color-outline-variant: rgb(192 195 196);
        --md-sys-color-shadow: rgb(0 0 0);
        --md-sys-color-scrim: rgb(0 0 0);
        --md-sys-color-inverse-surface: rgb(229 226 225);
        --md-sys-color-inverse-on-surface: rgb(0 0 0);
        --md-sys-color-surface-dim: rgb(20 19 19);
        --md-sys-color-surface-bright: rgb(81 80 79);
        --md-sys-color-surface-container-lowest: rgb(0 0 0);
        --md-sys-color-surface-container-low: rgb(32 31 31);
        --md-sys-color-surface-container: rgb(49 48 48);
        --md-sys-color-surface-container-high: rgb(60 59 59);
        --md-sys-color-surface-container-highest: rgb(71 70 70);
        --md-sys-color-surface-tint: rgb(133 211 218);

        --primary-100: #66B4BB;
        --primary-75: #4C878C;
        --primary-50: #4C878C;
        --primary-25: #4C878C;
        /* --primary-50: #335A5E;
        --primary-25: #335A5E; */
    
        --secondary-100: #8A965A;
        --secondary-75: #677043;
        --secondary-50: #454B2D;
        --secondary-25: #232617;

        --tertiary-125: #C55454;
        --tertiary-100: #a0383a;
        --tertiary-75: #943F3F;
        --tertiary-50: #632A2A;
        --tertiary-25: #311515;

        --wa-light: #128C7E;
        --wa-dark: #25D366;
        --slogan-text-shadow: #000000;
        --insta: #F58529;
        --insta: #DD2A7B;
        --insta: #8134AF;
        --insta: #515BD4;
    }
}

html {
    filter: brightness(1.1);
    color-scheme: only light;
    text-rendering: geometricPrecision;
}

* {
    filter: none !important;
    backdrop-filter: none !important;
    mix-blend-mode: normal !important;
    background-blend-mode: normal !important;
    -webkit-tap-highlight-color: transparent;
    --bs-body-bg: var(--md-sys-color-background);
    --bs-body-color: var(--md-sys-color-on-background);
    --bs-btn-close-color: var(--md-sys-color-on-background);
}

.text-dark {
    color: var(--md-sys-color-on-background) !important;
}

.bg-primary-100 {
    background: var(--primary-100);
}

.bg-primary-75 {
    background: var(--primary-75);
}

.bg-primary-50 {
    background: var(--primary-50);
}

.bg-primary-25 {
    background: var(--primary-25);
}

.text-primary {
    color: var(--md-sys-color-primary) !important;
}

.bg-secondary {
    background-color: var(--md-sys-color-surface-container-highest) !important;
}

.bg-secondary-100 {
    background: var(--secondary-100);
}

.bg-secondary-75 {
    background: var(--secondary-75);
}

.bg-secondary-50 {
    background: var(--secondary-50);
}

.bg-secondary-25 {
    background: var(--secondary-25);
}

.text-secondary {
    color: var(--md-sys-color-secondary)
}

.border-on-secondary {
    border-color: var(--md-sys-color-on-secondary-container) !important;
}

.bg-tertiary-100 {
    background: var(--tertiary-100);
}

.bg-tertiary-75 {
    background: var(--tertiary-75);
}

.bg-tertiary-50 {
    background: var(--tertiary-50);
}

.bg-tertiary-25 {
    background: var(--tertiary-25);
}

.text-tertiary {
    color: var(--md-sys-color-tertiary)
}

.text-wa {
    color: var(--wa-dark);
}

.text-envelope {
    color: #2563EB;
}

.bg-light {
    background: var(--md-sys-color-surface-container) !important;
}

.btn-tertiary {
    color: #FFFFFF;
    background: var(--tertiary-100);
    border-color: var(--tertiary-100);
}

.btn-tertiary:hover {
    color: #FFFFFF;
    background: var(--tertiary-125);
    border-color: var(--tertiary-125);
}

.cls-1 {
    fill: #fff;
}

.cls-2 {
    fill: var(--secondary-100);
}

.cls-3 {
    fill: var(--md-sys-color-on-background);
}

.cls-4 {
    fill: var(--primary-100);
}

.border-secondary {
    border-color: var(--secondary-100) !important;
}

.border-tertiary {
    border-color: var(--tertiary-25) !important;
}

.text-on-secondary {
    border-color: var(--md-sys-color-on-secondary) !important;
}

.text-insta {
    background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block !important;
    color: transparent !important;
}

#logo {
    height: 34px;
}

.small, small {
    font-size: .875em !important;
}

.text-brand {
    font-size: .875rem;
    letter-spacing: .25vw !important;
}

.h-fit-content {
    height: fit-content !important;
}

.ls-5 {
    letter-spacing: 5%;
}

.lh-4 {
    line-height: 1.5;
}

.bg-main {
    height: calc(100vw * 0.667);
    background: url('../images/main.jpg');
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: right top;
}

.outline-0 {
    outline: none !important;
}

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

#primary_navbar .navbar-collapse {
    position: fixed;
    top: 45px;
    background: var(--bs-light);
    width: 100%;
    margin-left: -1rem;
    padding-left: 3rem;
    letter-spacing: 6%;
}

.bg-main-gradient {
    background: linear-gradient(to top, var(--primary-50) 17%, transparent 89%);
}

#about p {
    line-height: 1.75;
    letter-spacing: 2% !important;
}

.card-body p, 
#impressum p, 
#datenschutz p {
    line-height: 1.75;
    letter-spacing: 6% !important;
}

#about p:not(.fw-600) {
    letter-spacing: 4% !important;
}

html {
  scroll-behavior: smooth;
}

.serif {
    font-family: 'Montserrat', serif !important;
}

body {
    letter-spacing: var(--bs-letter-spacing);
}

.fw-600, .fw-600 .bi::before, .fw-600::before {
    --bs-body-font-weight: 600;
    font-weight: var(--bs-body-font-weight) !important;
}

.shadow-md {
    box-shadow: var(--bs-box-shadow-md) !important;
}

.slogan-1 {
    text-shadow: .075rem .075rem .3rem var(--slogan-text-shadow);
    font-size: calc(1.125rem + 1.35vw);
    letter-spacing: 4%;
}

.slogan-2 {
    text-shadow: .075rem .075rem .3rem var(--slogan-text-shadow);
    font-size: 1.125rem;
    letter-spacing: 2%;
}

.mw-93 {
    max-width: 93%;
}

@media (orientation: portrait) {
    #main {
        height: calc(100vh * 0.667);
    }

    #main_content {
        margin-top: auto !important;
        margin-bottom: -6rem;
    }
}
        
#about {
    scroll-margin-top: 70px;
}

#services {
    scroll-margin-top: 185px;
}

@media (min-width: 350px) {
    .navbar-expand-sm .navbar-brand span.d-none {
        display: inline !important;
    }
}

@media (min-width: 360px) {
    .slogan-1 {
        font-size: calc(1.175rem + 1.35vw);
        letter-spacing: 5%;
    }

    .slogan-2 {
        font-size: 1.175rem;
        letter-spacing: 3%;
    }
}

@media (orientation: portrait) and (min-width: 390px) {
    #main {
        height: calc(100vh * 0.55);
    }
    .slogan-1 {
        font-size: calc(1.325rem + 1.5vw);
        letter-spacing: 5%;
    }
    .slogan-2 {
        font-size: 1.325rem;
        letter-spacing: 4%;
    }

    #about {
        scroll-margin-top: 230px;
    }

    #services {
        scroll-margin-top: 330px;
    }
}

@media (orientation: landscape) and (min-width: 568px) {
    #main_content {
        margin-top: 13% !important;
        margin-bottom: 0;
        padding-left: 3rem;
    }

    .bg-main-gradient {
        background: linear-gradient(to right, var(--primary-50) 8%, transparent 89%);
    }
}

@media (min-width: 576px) {
    .text-brand {
        font-size: 1rem;
    }

    .navbar-expand-sm .navbar-brand span {
        display: none !important;
    }

    #logo_full {
        height: 70px;
    }

    #primary_navbar .navbar-collapse {
        position: relative;
        top: inherit;
        background: inherit;
        width: inherit;
        margin-left: inherit;
        padding-left: inherit;
        letter-spacing: inherit;
    }
        
    #about {
        scroll-margin-top: 70px;
    }
    
    #services {
        scroll-margin-top: 185px;
    }

    .rounded-start-sm-pill {
        border-bottom-left-radius: var(--bs-border-radius-pill) !important;
        border-top-left-radius: var(--bs-border-radius-pill) !important;
    }

    .rounded-end-sm-pill {
        border-bottom-right-radius: var(--bs-border-radius-pill) !important;
        border-top-right-radius: var(--bs-border-radius-pill) !important;
    }
}

@media (orientation: landscape) and (min-width: 640px) {
    #main_content {
        margin-top: 8% !important;
    }
    #me {
        padding-right: 5rem;
    }
}

@media (orientation: landscape) and (min-width: 667px) {
    #me {
        padding-right: 7rem;
    }
}

@media (min-width: 768px) {
    #logo {
        height: 37px;
    }

    .text-brand {
        font-size: 1.25rem;
    }

    :root {
        --bs-body-font-size-sm: .825rem;
        --bs-body-font-size: 1rem;
        --bs-body-font-weight: 500;
        --bs-body-line-height: 1.5;
        --bs-letter-spacing: 3%;
    }
    
    #main {
        height: auto;
        margin-top: 5rem !important;
    }

    #main_content {
        margin-top: 13% !important;
        margin-bottom: 0;
        padding-left: 3rem;
    }

    #me {
        padding-right: 3rem;
    }

    .w-lg-75 {
        width: 75%;
    }

    .rounded-end-md-pill {
        border-top-right-radius: 50rem !important;
        border-bottom-right-radius: 50rem !important;
    }

    .rounded-start-md-pill {
        border-top-left-radius: 50rem !important;
        border-bottom-left-radius: 50rem !important;
    }
        
    #about {
        scroll-margin-top: 70px;
    }
    
    #services {
        scroll-margin-top: 185px;
    }
}

@media (orientation: landscape) and (min-width: 840px) {
    #main_content {
        margin-top: 1.5% !important;
    }
    .slogan-1 {
        font-size: calc(1.5rem + 1.5vw);
        letter-spacing: 6%;
    }
    .slogan-2 {
        font-size: 1.5rem;
        letter-spacing: 5%;
    }
    #me {
        padding-right: 8rem;
    }
}

@media (orientation: landscape) and (min-width: 896px) {
    #main_content {
        margin-top: 3% !important;
    }

    .bg-main {
        height: calc(100vw * 0.55);
        background-size: cover;
    }

    #me {
        padding-right: 10rem;
    }
}

@media (orientation: landscape) and (min-width: 932px) {
    #main_content {
        margin-top: 5% !important;
    }

    #me {
        padding-right: 12rem;
    }
}

@media (min-width: 992px) {
    #logo {
        height: 83px;
    }

    .text-brand {
        font-size: 1.5rem;
    }

    #logo_full {
        height: 100px;
    }

    .slogan-1 {
        font-size: calc(1.5rem + 1.5vw);
        letter-spacing: 7%;
    }

    .slogan-2 {
        font-size: 1.5rem;
        letter-spacing: 6%;
    }

    #me {
        padding-right: 1rem !important;
    }

    .flex-grow-lg-0 {
        flex-grow: 0 !important;
    }
        
    #about {
        scroll-margin-top: 155px;
    }
    
    #services {
        scroll-margin-top: 270px;
    }
}

@media (orientation: landscape) and (min-width: 1024px) {
    .bg-main {
        height: calc(100vw * 0.55);
        background-size: cover;
    }
    #main_content {
        margin-top: 16% !important;
    }

    * {
        letter-spacing: 9% !important;
    }
}

@media (min-width: 1200px) {
    #logo {
        height: 96px;
    }

    .text-brand {
        font-size: 1.75rem;
    }

    #logo_full {
        height: 90px;
    }

    #left_pill_text {
        padding-left: 5rem !important;
    }

    #right_pill_text {
        padding-right: 5rem !important;
    }
        
    #about {
        scroll-margin-top: 170px;
    }
    
    #services {
        scroll-margin-top: 285px;
    }
}

@media (min-width: 1400px) {
    #logo {
        height: 99px;
    }

    .text-brand {
        font-size: 2rem;
    }

    #logo_full {
        height: 110px;
    }
        
    .container, 
    .container-lg, 
    .container-md, 
    .container-sm, 
    .container-xl, 
    .container-xxl {
        max-width: 76%;
    }

    .bg-main {
        height: calc(100vw * 0.5);
        background-size: cover;
    }

    #left_pill_text {
        padding-left: 21% !important;
    }

    #right_pill_text {
        padding-right: 21% !important;
    }
        
    #about {
        scroll-margin-top: 170px;
    }
    
    #services {
        scroll-margin-top: 285px;
    }
}

.hover-underline:hover {
    text-decoration: underline !important;
}

.card-shadow {
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
}