@charset "utf-8";

@font-face {
    font-family: "Quicksand";
    src: url("Quicksand-Regular.ttf");
}

@font-face {
    font-family: "Quicksand";
    src: url("Quicksand-Bold.ttf");
    font-weight: bold;
}

@font-face {
    font-family: "Quicksand";
    src: url("Quicksand-Light.ttf");
    font-weight: 100;
}


:root {
    --ptmain: #0A4458;
    --ptmain1: #ff6694;
    --ptmain2: #ff9ab8;
    --ptorange: #73B52D;
    --ptlightblue: #0D6E90;
    --tmegray: #353535;
    --tmelgray: #F2F2F2;
    --tmewhite: #FFFFFF;
    --tmeheroback: rgba(0, 0, 0, 0.4);
    --tmeherotext: #eeeeee;
    --tmefooter: #333333;
    --tmeimpr: #284B63;
    --tmeblink: #000000;
    --tmelightblue: #529bcc;
    --tmelighterblue: #99d6ff;
    --tmeblue: #00a7a2;
    --tmedarkblue: #3cafc5;
    --tmetemp1: #bf3030;
    --tmetemp2: #df5a18;
    --tmetemp3: #46cae4;
    --tmetemp4: #df5a18;
    --tmetemp5: #abed5d;
    --tmetemp6: #df5a18;
    --tmebtn: #17c3e5;
    --tmebtnactive: #80eaff;
    --tmewlink: #FFFFFF;
    --tmerequired: red;
    --tmeheadertext: black;
    --bs-body-font-size: 1.2rem;
    --bs-body-color: #000000;

    --tme-outer-border-radius: 0.6rem;
}

/* debug */
@media (min-width: 1111111px) {
    * {
        box-shadow: inset 0px 0px 5px #000 !important;
        color: #000 !important;
    }

    body>* {
        background-color: #fff !important;
    }

    body>*>* {
        background-color: #cff !important;
    }

    body>*>*>* {
        background-color: #9ff !important;
    }

    body>*>*>*>* {
        background-color: #6ff !important;
    }

    body>*>*>*>*>* {
        background-color: #3ff !important;
    }

    body>*>*>*>*>*>* {
        background-color: #0ff !important;
    }

    body>*>*>*>*>*>*>* {
        background-color: #ccf !important;
    }

    body>*>*>*>*>*>*>*>* {
        background-color: #99f !important;
    }

    body>*>*>*>*>*>*>*>*>* {
        background-color: #66f !important;
    }

    body>*>*>*>*>*>*>*>*>* {
        background-color: #33f !important;
    }

    body>*>*>*>*>*>*>*>*>*>* {
        background-color: #00f !important;
    }

    body>*>*>*>*>*>*>*>*>*>*>* {
        background-color: #fcc !important;
    }

    body>*>*>*>*>*>*>*>*>*>*>*>* {
        background-color: #f99 !important;
    }

    body>*>*>*>*>*>*>*>*>*>*>*>*>* {
        background-color: #f66 !important;
    }

    body>*>*>*>*>*>*>*>*>*>*>*>*>*>* {
        background-color: #f33 !important;
    }
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Quicksand", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
}

a:hover {
    text-decoration: underline;
}

.card {
    --bs-card-border-radius: 0.6rem;
}

.card-img {
    --bs-card-inner-border-radius: 0.6rem;
}

.btn {
    --bs-btn-border-radius: 0.3rem;
    background-color: var(--ptmain);
    border-color: var(--ptmain);
    box-shadow: none !important;
}

.btn:hover {
    background-color: var(--ptorange);
    border-color: var(--ptorange);
    text-decoration: none;
}

#btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 98;
    padding: 21px;
    background: url(../img/top-arrow.svg) no-repeat center 50%;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 0.25rem;
    transition: background-color .5s ease;
}

#btn-back-to-top:hover {
    background-color: rgba(0, 0, 0, .75);
}

.hidden {
    display: none;
}

h2 {
    font-size: inherit;
    font-weight: bold;
}

h3 {
    font-size: inherit;
}

#header1 {
    background-color: var(--tmegray);
    color: white;
    flex-wrap: wrap;
}

#header1 a {
    text-decoration: none;
    color: var(--tmewlink);
}

#header1 a:hover {
    text-decoration: underline;
}

.text-tel,
.text-mail {
    padding-left: .25em !important;
}

.pic-tel {
    width: 25px;
    height: 24px;
}

.pic-mail {
    width: 33px;
    height: 24px;
}

.header2 {
    background-color: var(--tmewhite);
}

.header2-logo {
    width: 180px;
    height: auto;
}

.header2-text {
    font-weight: bold;
    text-decoration: none;
    padding-left: 0.5rem;
}

#Hero {
    background-image: url(../img/praxis.jpg);
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--tmeherotext);
    padding: 50px 0px;
    min-height: 300px;
}

#HeroText {
    color: var(--tmeherotext);
    text-shadow: 1px 1px 1px black, 2px 2px 4px black, 3px 3px 6px black;
    padding-left: 6em;
}

#HeroButtons {
    padding-left: 6em;
    color: var(--tmeherotext);

}

#HeroButtons a {
    color: var(--tmeherotext);

}

#Praxis {
    background-color: var(--tmelgray);
}

#Leistungen, #Team {
    background-color: var(--tmelgray);
    padding-top: 0;
}

#Praxis h2, #Leistungen h2, #Team h2, #Kontakt h2 {
    color: var(--ptmain);
    padding-left: 1rem;
    margin-bottom: 1.2rem;
    font-size: 1.8rem;
}


#Leistungen h2 {
    padding-top: 0.5rem;

}

#Leistungen ul {
    padding-left: 0px;

}

#Leistungen ul li {
    padding-left: 30px;
    list-style: none;
    background-image: url(../img/checkmark2.png);
    background-repeat: no-repeat;
    background-position: left 0.3rem;
    background-size: 1rem 1rem;

}

.text_highlight {
    color: var(--ptmain);
    font-weight: bold;
}

.text_highlight2 {
    color: var(--ptmain);
}

#Fotos {
    background-color: var(--tmelgray);
}

#Fotos div {
    text-align: center;
}

#Unternehmen {
    background-color: var(--tmelgray);
}

#Kontakt {
    background-color: var(--tmelgray);
}

#Kontakt td {
    text-align: left;
    vertical-align: top;
    padding-right: 1rem;
}

.businesshours_col1 {
    float: left;
    padding-right: 1rem;
}

.businesshours_col2 {
    float: left;
}

section {
    padding-top: 3rem;
}

#Kontakt h3, #Leistungen h3 {
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 0;
}

#Kontakt a {
    text-decoration: none;
    color: var(--tmeblink);
}

#Kontakt a:hover {
    text-decoration: underline;
}


#Kontaktformular {
    background-color: var(--tmelgray);
}

#Kontaktformular .req {
    color: var(--tmerequired);
}

.button-success {
    box-shadow: none !important;
}

#anfahrt {
    background-color: var(--tmelgray);
    padding-top: 0;
    padding-bottom: 3rem;
}

#anfahrt h2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

#mymap {
    border: none;
    margin-bottom: 0.5rem;
    background-image: url(../img/karte-min.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    height: 450px;
}

#mapadds {
    position: absolute;
    width: 100%;
    bottom: 0px;
}

#mapbuttons {
    padding: 0 1rem;
}

#mapbuttons .col {
    padding-bottom: 0.5rem;
}

#mapbuttons .btn {
    padding-bottom: 0.5rem;
    color: #FFFFFF;
}

#mapcopyr {
    text-align: right;
    padding: 0.25rem 1rem;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 0px 0px var(--tme-outer-border-radius) var(--tme-outer-border-radius);
    font-size: 1rem;
}

#mapcopyr a {
    text-decoration: none;
    color: var(--tmeblink);
}

#Datenschutz {
    background-color: var(--tmefooter);
    color: var(--tmewhite);
}

#Datenschutz button {
    box-shadow: none !important;
}

#Datenschutz button:not(.collapsed) {
    xbackground-color: var(--tmewhite);
    xcolor: rgb(168, 122, 122);
}

#Datenschutz .accordion-button::after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path 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'/></svg>") !important;
}

#Datenschutz .accordion-button::after {
    margin-left: 10px;
    bbeeackground-image: var(--bs-accordion-btn-icon) !important;
}

#Datenschutz .accordion-body {
    padding: 0 0 1rem 0;
    font-size: 1rem;
}

#Datenschutz button:focus {
    ctext-decoration: underline;
}

#Datenschutz a {
    color: #000;
    text-decoration: none;
}

#Datenschutzbutton {
    background-color: var(--tmegray);
    color: #FFFFFF;
    padding-left: 0px;
    border-width: 0px;
    border-bottom-color: #00f;
}

#Datenschutz .accordion-item {
    border-width: 0px;
}

#Datenschutzbutton h2 {
    background-color: var(--tmegray);
    font-size: 1.2rem;
    margin: 0px;
}

#Datenschutz a:hover {
    color: #FFF;
}

#Impressum {
    background-color: var(--tmedarkblue);
    background-image: linear-gradient(45deg, var(--ptmain), var(--ptlightblue));
    color: var(--tmewhite);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

#Impressum h2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

#Impressum h3 {
    ffont-size: 1rem;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 0;
}

#Impressum a {
    text-decoration: none;
    color: var(--tmewlink);
}

#Impressum a:hover {
    text-decoration: underline;
}

#Footer {
    background-color: var(--tmefooter);
    color: var(--tmewhite);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 1rem;
}

#Footer a {
    text-decoration: none;
    color: var(--tmewhite);
}

#Footer a:hover {
    text-decoration: underline;
}

/* <= small */
@media (max-width: 767.98px) {
    #text_mail {
        display: none;
    }

    #text_tel {
        display: none;
    }

    .header2-logo {
        width: 90px;
    }


    #HeroText,
    #HeroButtons {
        padding-left: 2em;
    }

}

/* <= Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

    #HeroText,
    #HeroButtons {
        padding-left: 1em;
        padding-right: 1em;
    }

    .header2-text {
        padding-left: 0.5em;
    }
}