@charset "UTF-8";
/*!
 * KmH:         v1.0.0 (https://www.tierarzt-seuzach.ch/)
 * Copyright:   2024 Kleintierpraxis mit Herz GmbH
 * Author:      Niklaus Winterberger
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root {
    --bs-kmh-red: #7C0201;
    --bs-kmh-orange: #E67E31;
    --bs-kmh-yellow: #F8CE1F;
    --bs-kmh-blue: #0000FE;
    --bs-kmh-black: #6C757D;
    --bs-kmh-white: #FFFFFF;
    --bs-kmh-shadow: 124, 2, 1; /* #7C0201 */

    --bs-body-bg: #FFFFFF;
    --bs-body-color: #6C757D;
    --bs-body-font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-h-color: #7C0201;
    --bs-body-h-font-family: Roboto Slab, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --bs-body-h-font-weight: 700;

    --bs-nav-a-hover: #F8CE1F;
    --bs-nav-bg: #7C0201;
    --bs-nav-color: #FFFFFF;
    --bs-nav-font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --bs-nav-font-size: 0.95rem;
    --bs-nav-font-weight: 400;
    --bs-nav-toggler-bg: transparent;
    --bs-nav-toggler-color: #FFFFFF;
    --bs-nav-toggler-font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --bs-nav-toggler-font-size: 0.75rem;
    --bs-nav-toggler-font-weight: 700;

    --bs-header-color: #FFFFFF;
    --bs-header-font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --bs-header-font-size: 2.25rem;
    --bs-header-font-weight: 700;
    --bs-header-img: url("../res/header-bg-768.webp");
    --bs-header-sub-font-family: Roboto Slab, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --bs-header-sub-font-size: 1.25rem;
    --bs-header-sub-font-weight: 400;

    --bs-page-color: #6C757D;
    --bs-page-font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --bs-page-font-size: 1rem;
    --bs-page-font-weight: 400;
    --bs-page-h2-color: #7C0201;
    --bs-page-h2-font-family: Roboto Slab, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --bs-page-h2-font-size: 2.5rem;
    --bs-page-h2-font-weight: 700;
    --bs-page-h3-color: #000000;
    --bs-page-h3-font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --bs-page-h3-font-size: 1rem;
    --bs-page-h3-font-weight: 400;
    --bs-page-h4-color: #7C0201;
    --bs-page-h4-font-family: Roboto Slab, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --bs-page-h4-font-size: 1.5rem;
    --bs-page-h4-font-weight: 700;

    --bs-team-h4-color: #7C0201;
    --bs-team-h4-font-family: Roboto Slab, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --bs-team-h4-font-size: 1.5rem;
    --bs-team-h4-font-weight: 400;
    --bs-team-img-border-color: transparent;

    --bs-footer-a-hover: #F8CE1F;
    --bs-footer-bg: #7C0201;
    --bs-footer-color: #FFFFFF;
    --bs-footer-font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --bs-footer-font-size: 0.8rem;
    --bs-footer-font-weight: 400;

    --bs-modal-bg: #FFFFFF;
    --bs-modal-close-img: url("../res/close-icon.svg");
    --bs-modal-font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --bs-modal-font-size: 1rem;
    --bs-modal-font-weight: 400;
    --bs-modal-h2-color: #7C0201;
    --bs-modal-h2-font-family: Roboto Slab, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --bs-modal-h2-font-size: 2.5rem;
    --bs-modal-h2-font-weight: 700;
    --bs-modal-intro-color: #6C757D;
    --bs-modal-intro-font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --bs-modal-intro-font-size: 1rem;
    --bs-modal-intro-font-weight: 400;

    --bs-btn-bg: #F8CE1F;
    --bs-btn-font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;

    --bs-text-muted-font-weight: 400;
}
@media (min-width: 992px) {
    :root {
        --bs-nav-a-hover: #F8CE1F;
        --bs-nav-bg: rgba(255, 255, 255, 0.2);
        --bs-nav-color: #FFFFFF;
        --bs-nav-font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
        --bs-nav-font-size: 0.95rem;
        --bs-nav-font-weight: 400;
        --bs-nav-shrink-bg: #7C0201;
        --bs-nav-shrink-color: #FFFFFF;
    }
}
@media (min-width: 768px) {
    :root {
        --bs-header-color: #FFFFFF;
        --bs-header-font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
        --bs-header-font-size: 3.25rem;
        --bs-header-font-weight: 700;
        --bs-header-img: url("../res/header-bg.webp");
        --bs-header-sub-font-family: Roboto Slab, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
        --bs-header-sub-font-size: 2rem;
        --bs-header-sub-font-weight: 400;
    }
}
.btn-primary {
    --bs-btn-active-bg: #7C0201;
    --bs-btn-active-border-color: #7C0201;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-bg: #F8CE1F;
    --bs-btn-border-color: #F8CE1F;
    --bs-btn-color: #FFFFFF;
    --bs-btn-font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 500;
    --bs-btn-hover-bg: #E67E31;
    --bs-btn-hover-border-color: #E67E31;
    --bs-btn-hover-color: #FFFFFF;
}
.btn-noline-primary {
    --bs-btn-active-bg: #7C0201;
    --bs-btn-active-border-color: #7C0201;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-border-color: transparent;
    --bs-btn-color: #E67E31;
    --bs-btn-font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 500;
    --bs-btn-hover-bg: #E67E31;
    --bs-btn-hover-border-color: #E67E31;
    --bs-btn-hover-color: #FFFFFF;
    --bs-gradient: none;
}
.btn-outline-primary {
    --bs-btn-active-bg: #7C0201;
    --bs-btn-active-border-color: #7C0201;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-border-color: #F8CE1F;
    --bs-btn-color: #E67E31;
    --bs-btn-font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 500;
    --bs-btn-hover-bg: #E67E31;
    --bs-btn-hover-border-color: #E67E31;
    --bs-btn-hover-color: #FFFFFF;
    --bs-gradient: none;
}
.modal {
    --bs-modal-color: #000000;
}



html {
    scroll-padding-top: 4.5rem;
}
body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    position: relative;
}
h1 {
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px  1px 0 black, 1px  1px 0 black;
}
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    color: var(--bs-body-h-color);
    font-family: var(--bs-body-h-font-family);
    font-weight: var(--bs-body-h-font-weight);
}
p, div {
    line-height: 1.75;
}


nav.navbar {
    background-color: var(--bs-nav-bg);
    color: var(--bs-nav-color);
    font-family: var(--bs-nav-font-family);
    font-size: var(--bs-nav-font-size);
    font-weight: var(--bs-nav-font-weight);
    padding-bottom: 1rem;
    padding-top: 1rem;
}
nav.navbar .navbar-toggler {
    border-color: var(--bs-nav-toggler-color);
    color: var(--bs-nav-toggler-color);
    font-size: var(--bs-nav-toggler-font-size);
    font-weight: var(--bs-nav-toggler-font-weight);
    padding: 0.75rem;
    text-transform: uppercase;
}
nav.navbar .navbar-brand {
    letter-spacing: 0.0625em;
    text-transform: uppercase;
}
nav.navbar .navbar-brand img {
    height: 2.5rem;
}
nav.navbar .navbar-nav .nav-item .nav-link {
    color: var(--bs-nav-color);
    font-family: var(--bs-nav-font-family);
    font-size: var(--bs-nav-font-size);
    font-weight: var(--bs-nav-font-weight);
    letter-spacing: 0.0625em;
}
nav.navbar .navbar-nav .nav-item .nav-link.active,
nav.navbar .navbar-nav .nav-item .nav-link:hover {
    color: var(--bs-nav-a-hover);
}
@media (min-width: 992px) {
    nav.navbar {
        background-color: var(--bs-nav-bg);
        border: none;
        color: var(--bs-nav-color);
        font-family: var(--bs-nav-font-family);
        font-size: var(--bs-nav-font-size);
        font-weight: var(--bs-nav-font-weight);
        padding-bottom: 0.5rem;
        padding-top: 0.5rem;
        transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
    }
    nav.navbar .navbar-brand {
        color: var(--bs-nav-color);
        font-family: var(--bs-nav-font-family);
        font-size: var(--bs-nav-font-size);
        font-weight: var(--bs-nav-font-weight);
        transition: font-size 0.3s ease-in-out;
    }
    nav.navbar .navbar-brand img {
        height: 2rem;
        transition: height 0.3s ease-in-out;
    }
    nav.navbar .navbar-nav .nav-item {
        margin-right: 1rem;
    }
    nav.navbar .navbar-nav .nav-item:last-child {
        margin-right: 0;
    }
    nav.navbar .navbar-nav .nav-item .nav-link {
        color: var(--bs-nav-color);
        font-family: var(--bs-nav-font-family);
        font-size: var(--bs-nav-font-size);
        font-weight: var(--bs-nav-font-weight);
    }
    nav.navbar.navbar-shrink {
        background-color: var(--bs-nav-shrink-bg);
        color: var(--bs-nav-shrink-color);
        font-family: var(--bs-nav-font-family);
        font-size: var(--bs-nav-font-size);
        font-weight: var(--bs-nav-font-weight);
        padding-bottom: 1rem;
        padding-top: 1rem;
    }
    nav.navbar.navbar-shrink .navbar-brand {
        color: var(--bs-nav-shrink-color);
        font-family: var(--bs-nav-font-family);
        font-size: var(--bs-nav-font-size);
        font-weight: var(--bs-nav-font-weight);
    }
    nav.navbar.navbar-shrink .navbar-brand img {
        height: 1.8rem;
    }
    nav.navbar.navbar-shrink .nav-item .nav-link {
        color: var(--bs-nav-shrink-color);
        font-family: var(--bs-nav-font-family);
        font-size: var(--bs-nav-font-size);
        font-weight: var(--bs-nav-font-weight);
    }
}


header.masthead {
    background-attachment: scroll;
    background-image: var(--bs-header-img);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--bs-header-color);
    font-family: var(--bs-header-font-family);
    font-size: var(--bs-header-font-size);
    font-weight: var(--bs-header-font-weight);
    padding-bottom: 6rem;
    padding-top: 10.5rem;
    text-align: center;
}
header.masthead .masthead-heading {
    color: var(--bs-header-color);
    font-family: var(--bs-header-font-family);
    font-size: var(--bs-header-font-size);
    font-weight: var(--bs-header-font-weight);
    line-height: var(--bs-header-font-size);
    margin-bottom: 2rem;
}
header.masthead .masthead-subheading {
    color: var(--bs-header-color);
    font-family: var(--bs-header-sub-font-family);
    font-size: var(--bs-header-sub-font-size);
    font-weight: var(--bs-header-sub-font-weight);
    font-style: italic;
    line-height: var(--bs-header-sub-font-size);
    margin-bottom: 25px;
}
@media (min-width: 768px) {
    header.masthead {
        padding-top: 17rem;
        padding-bottom: 12.5rem;
    }
    header.masthead .masthead-heading {
        font-size: var(--bs-header-font-size);
        font-weight: var(--bs-header-font-weight);
        line-height: var(--bs-header-font-size);
        margin-bottom: 4rem;
    }
    header.masthead .masthead-subheading {
        font-family: var(--bs-header-sub-font-family);
        font-size: var(--bs-header-sub-font-size);
        font-weight: var(--bs-header-sub-font-weight);
        font-style: italic;
        line-height: var(--bs-header-sub-font-size);
        margin-bottom: 2rem;
    }
}

section.page-section {
    padding: 6rem 0;
}
section.page-section h2.section-heading,
section.page-section .section-heading.h2 {
    font-size: var(--bs-page-h2-font-size);
    margin-top: 0;
    margin-bottom: 1rem;
}
section.page-section h3.section-subheading,
section.page-section .section-subheading.h3 {
    font-size: var(--bs-page-h3-font-size);
    font-style: italic;
    margin-bottom: 4rem;
}
@media (min-width: 768px) {
    section {
        padding: 9rem 0;
    }
}


#tierarzt .team-member {
    margin-bottom: 3rem;
    text-align: center;
}
#tierarzt .team-member img {
    width: 14rem;
    height: 14rem;
    border: 0.5rem solid var(--bs-team-img-border-color);
}
#tierarzt .team-member h4,
#tierarzt .team-member .h4 {
    margin-bottom: 0;
    margin-top: 1.5rem;
}


#reviews .es-review-background-container {
    text-align: left;
}


.map {
    height: 30rem;
}
.map iframe {
    pointer-events: auto;
    height: 100%;
    width: 100%;
    border: 0;
}
@media (max-width: 992px) {
    .map {
        height: 20rem;
    }
}


footer.footer {
    background-color: var(--bs-footer-bg);
    color: var(--bs-footer-color);
    font-family: var(--bs-footer-font-family);
    font-size: var(--bs-footer-font-size);
    font-weight: var(--bs-footer-font-weight);
    text-align: center;
}
footer.footer a {
    color: var(--bs-footer-color);
}
footer.footer a:hover {
    color: var(--bs-footer-a-hover);
}


div.general-modal .modal-dialog {
    margin: 1rem;
    max-width: 100vw;
}
div.general-modal .modal-content {
    color: var(--bs-modal-color);
    font-family: var(--bs-modal-font-family);
    font-size: var(--bs-modal-font-size);
    font-weight: var(--bs-modal-font-weight);
    padding-bottom: 6rem;
    padding-top: 6rem;
}
div.general-modal .modal-content h2,
div.general-modal .modal-content .h2 {
    font-size: var(--bs-modal-h2-font-size);
    line-height: var(--bs-modal-h2-font-size);
    text-align: center;
}
div.general-modal .modal-content p,
div.general-modal .modal-content ul.list-inline {
    margin-bottom: 2rem;
}
div.general-modal .modal-content p.item-intro {
    color: var(--bs-modal-intro-color);
    font-family: var(--bs-modal-intro-font-family);
    font-size: var(--bs-modal-intro-font-size);
    font-style: italic;
    font-weight: var(--bs-page-h3-font-weight);
    margin-bottom: 2rem;
    text-align: center;
}
div.general-modal .close-modal {
    background-color: var(--bs-modal-close-img);
    cursor: pointer;
    height: 3rem;
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    width: 3rem;
}
div.general-modal .close-modal:hover {
    opacity: 0.3;
}


.btn-xl {
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    padding: 1.25rem 2.5rem;
}
.btn.disabled {
    display: none;
}
.btn-list-group .btn {
    margin-bottom: 0.2rem;
}
.card {
    text-decoration: none;
}
.card svg,
.card i {
    padding-right: 0.5rem;
}
.card .btn-noline-primary {
    --bs-btn-font-weight: 400;
}
.shadow {
    box-shadow: 0 .5rem 1rem rgba(var(--bs-kmh-shadow), .15) !important;
}
.shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(var(--bs-kmh-shadow), .075) !important;
}
.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(var(--bs-kmh-shadow), .175) !important;
}
.shadow-inset {
    box-shadow: inset 0 1px 2px rgba(var(--bs-kmh-shadow), .075) !important;
}
.text-bg-graeub-primary {
    color: #FFFFFF !important;
    background-color: #9e1f12 !important;
}
.text-bg-graeub-secondary {
    color: #000000;
    background-color: #cbc7ac !important;
}
.text-muted {
    font-weight: var(--bs-text-muted-font-weight);
}
/* rtl:end:remove */
.text-primary {
    color: var(--bs-btn-bg) !important;
}
/* rtl:end:remove */
.text-secondary {
    color: var(--bs-kmh-red) !important;
}
.text-smaller {
    font-size: 80%;
}


#leistung .card {
    margin-bottom: 1rem;
}
#leistung .card .card-img-overlay span {
    background-color: var(--bs-kmh-white);
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}
#leistung .card .card-footer {
    padding: 0;
}
#leistung .card .card-img-top {
    width: 100%;
    height: 30vw;
    object-fit: cover;
    object-position: center top;
}
@media (min-width: 992px) {
    #leistung .card .card-img-top {
        width: 100%;
        height: 15vw;
        object-fit: cover;
        object-position: center top;
    }
}


ol.listheading {
    padding-left: 0;
}
.listheading ul {
    padding-bottom: 0.5rem;
}
.listheading ul li {
    list-style-type: disc;
}
.listheading h1, .listheading h2, .listheading h3, .listheading h4, .listheading h5, .listheading h6 {
    display: inline;
}
.listheading ol {
    counter-reset: item;
    padding-left: 0;
}
.listheading > li {
    counter-increment: item;
    list-style-type: none;
}
.listheading > li::before {
    content: counters(item, ".") ". ";
    color: var(--bs-body-h-color);
    font-family: var(--bs-body-h-font-family);
    font-weight: var(--bs-body-h-font-weight);
    font-size: calc(1.3rem + .6vw);
}
.listheading > li > ol > li {
    counter-increment: item;
    list-style-type: none;
}
.listheading > li > ol > li::before {
    content: counters(item, ".") " ";
    color: var(--bs-body-h-color);
    font-family: var(--bs-body-h-font-family);
    font-weight: var(--bs-body-h-font-weight);
    font-size: calc(1.275rem + .3vw);
}
.listheading > li > ol > li > ol {
    counter-reset: sub-item;
}
.listheading > li > ol > li > ol > li {
    counter-increment: sub-item;
    list-style-type: none;
}
.listheading > li > ol > li > ol > li::before {
    content: counter(sub-item, lower-alpha) ". ";
    color: var(--bs-body-h-color);
    font-family: var(--bs-body-h-font-family);
    font-weight: var(--bs-body-h-font-weight);
    font-size: 1.25rem;
}