/* Datei: belegverwaltung/static/css/belegverwaltung.css */

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat/Montserrat-VariableFont_wght.ttf") format("truetype-variations");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --bs-font-sans-serif: "Montserrat", sans-serif;
    --bs-primary: #074437;
    --bs-primary-rgb: 7, 68, 55;
    --bs-secondary: #bee0d6;
    --bs-secondary-rgb: 190, 224, 214;
    --bs-body-color: #3f4a47;
    --bs-body-color-rgb: 63, 74, 71;
    --bs-heading-color: #122521;
    --bs-emphasis-color: #122521;
    --bs-emphasis-color-rgb: 18, 37, 33;
    --bs-secondary-color: #6f7d79;
    --bs-link-color: #074437;
    --bs-link-hover-color: #122521;
    --bs-body-font-size: clamp(0.9375rem, 0.25vw + 0.875rem, 1rem);
    --project-font-size-h1: clamp(1.875rem, 3vw + 0.875rem, 2.75rem);
    --project-font-size-h2: clamp(1.625rem, 2vw + 0.875rem, 2.25rem);
    --project-font-size-h3: clamp(1.375rem, 1.5vw + 0.875rem, 1.75rem);
    --project-font-size-h4: clamp(1.125rem, 1vw + 0.875rem, 1.375rem);
    --project-font-size-h5: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
    --project-font-size-h6: 1rem;
    --project-primary-light: #eff7f4;
    --project-accent: #e8c99b;
    --project-white: #ffffff;
    --project-header-shadow: rgba(18, 37, 33, 0.15);
    --project-footer-background: var(--bs-heading-color);
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1,
.h1 {
    font-size: var(--project-font-size-h1);
}

h2,
.h2 {
    font-size: var(--project-font-size-h2);
}

h3,
.h3 {
    font-size: var(--project-font-size-h3);
}

h4,
.h4 {
    font-size: var(--project-font-size-h4);
}

h5,
.h5 {
    font-size: var(--project-font-size-h5);
}

h6,
.h6 {
    font-size: var(--project-font-size-h6);
}

.site-header {
    color: var(--bs-heading-color);
}

.site-header .navbar {
    --bs-navbar-color: var(--bs-heading-color);
    --bs-navbar-hover-color: var(--bs-primary);
    --bs-navbar-active-color: var(--bs-primary);
    --bs-navbar-brand-color: var(--bs-heading-color);
    --bs-navbar-brand-hover-color: var(--bs-primary);
    --bs-navbar-toggler-border-color: var(--project-white);
}

/* >>> GEÄNDERT: Header und Logo werden lesbar und passend für die mobile Navigation dargestellt. */
.site-header__container {
    min-height: 5.5rem;
}

.site-header__logo {
    width: auto;
    max-height: 3.5rem;
}

.site-header .navbar-toggler {
    color: var(--bs-primary);
}

.site-header .navbar-toggler:focus,
.site-header .nav-link:focus-visible,
.site-header__mega-menu-link:focus-visible {
    box-shadow: 0 0 0 0.25rem var(--bs-secondary);
    outline: 0;
}

.site-header__mega-menu {
    width: min(72rem, calc(100vw - 2rem));
    padding: 2rem;
    border-color: var(--project-white);
    border-radius: 0.75rem;
    box-shadow: 0 0.75rem 2rem var(--project-header-shadow);
}

.site-header__mega-menu-heading {
    color: var(--bs-heading-color);
}

.site-header__mega-menu-heading > svg {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0.375rem;
    border-radius: 50%;
    background: var(--bs-primary);
    color: var(--project-white);
}

.site-header__mega-menu-link {
    color: var(--bs-heading-color);
}

.site-header__mega-menu-link:hover,
.site-header__mega-menu-link:hover strong,
.site-header__mega-menu-link:hover small {
    color: var(--bs-primary);
}

.site-header__mega-menu-link small {
    color: var(--bs-secondary-color);
}

.site-header__mega-menu-link-arrow {
    width: 1.25rem;
    color: var(--bs-primary);
    opacity: 0;
    transform: translateX(-0.25rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.site-header__mega-menu-link:hover .site-header__mega-menu-link-arrow {
    opacity: 1;
    transform: translateX(0);
}

@media (min-width: 62rem) {
    .site-header .navbar {
        position: relative;
    }

    .site-header .navbar-collapse {
        position: absolute;
        top: 50%;
        left: 50%;
        width: auto;
        transform: translate(-50%, -50%);
    }

    .site-header__mega-menu {
        position: fixed !important;
        top: 3.5rem !important;
        right: auto;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

@media (max-width: 61.999rem) {
    .site-header .navbar-collapse {
        padding-bottom: 1rem;
    }

    .site-header__mega-menu {
        position: static;
        width: 100%;
        margin: 0;
        padding: 0.5rem 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

.hero-block__subline {
    color: var(--bs-primary);
    line-height: 1.2;
}

.hero-block__headline {
    color: var(--bs-heading-color);
    line-height: 1.05;
}

.hero-block__text {
    color: var(--bs-body-color);
    line-height: 1.55;
}

.hero-block__text p:last-child {
    margin-bottom: 0;
}

/* >>> NEU: Geteilter Seiten-Hero mit Bild links und Bootstrap-Grau rechts. */
.hero-block--width-limit,
.page-hero-block--width-limit {
    max-width: 120rem;
    margin-right: auto;
    margin-left: auto;
}

.page-hero-block__media {
    height: 20rem;
}

.page-hero-block__image {
    object-position: center;
}

.page-hero-block__content {
    max-width: 42rem;
}

.page-hero-block__subline {
    background: var(--project-primary-light);
}

.page-hero-block__subline svg {
    width: 1.25rem;
    height: 1.25rem;
}

.page-hero-block__text p:last-child {
    margin-bottom: 0;
}

@media (min-width: 62rem) {
    .page-hero-block__media,
    .page-hero-block__content {
        min-height: 32rem;
    }

    .page-hero-block__media {
        height: auto;
    }
}

.btn-primary {
    --bs-btn-color: var(--project-white);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--project-white);
    --bs-btn-hover-bg: var(--bs-heading-color);
    --bs-btn-hover-border-color: var(--bs-heading-color);
    --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
    --bs-btn-active-color: var(--project-white);
    --bs-btn-active-bg: var(--bs-heading-color);
    --bs-btn-active-border-color: var(--bs-heading-color);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--bs-btn-hover-bg);
    color: var(--bs-btn-hover-color);
}

.btn-primary:focus-visible {
    box-shadow: 0 0 0 0.25rem var(--bs-secondary);
    outline: 0;
}

/* >>> NEU: Der Ablehnen-Button im Cookie-Banner verwendet die grüne Primärfarbe. */
[data-cookie-banner] .btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--project-white);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: var(--project-white);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
}

.hero-block .richtext-color-primary {
    color: var(--bs-primary);
}

.hero-block .richtext-color-primary-light {
    color: var(--project-primary-light);
}

.hero-block .richtext-color-secondary {
    color: var(--bs-secondary);
}

.hero-block .richtext-color-accent {
    color: var(--project-accent);
}

.hero-block .richtext-color-heading {
    color: var(--bs-heading-color);
}

.hero-block .richtext-color-text {
    color: var(--bs-body-color);
}

.hero-block .richtext-color-text-muted {
    color: var(--bs-secondary-color);
}

.hero-block .richtext-color-white {
    color: var(--project-white);
}

.video-block__media {
    background: var(--bs-heading-color);
}

.jumbotron-cta-block__content {
    position: relative;
    overflow: hidden;
}

.jumbotron-cta-block__background-image {
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.2;
}

.jumbotron-cta-block__content > :not(.jumbotron-cta-block__background-image) {
    position: relative;
}

.jumbotron-cta-block--primary {
    background-color: var(--bs-primary);
    color: var(--project-white);
}

.jumbotron-cta-block--primary-light,
.jumbotron-cta-block--secondary,
.jumbotron-cta-block--accent,
.jumbotron-cta-block--text-muted,
.jumbotron-cta-block--white {
    color: var(--bs-heading-color);
}

.jumbotron-cta-block--primary-light {
    background-color: var(--project-primary-light);
}

.jumbotron-cta-block--secondary {
    background-color: var(--bs-secondary);
}

.jumbotron-cta-block--accent {
    background-color: var(--project-accent);
}

.jumbotron-cta-block--heading {
    background-color: var(--bs-heading-color);
    color: var(--project-white);
}

.jumbotron-cta-block--text {
    background-color: var(--bs-body-color);
    color: var(--project-white);
}

.jumbotron-cta-block--text-muted {
    background-color: var(--bs-secondary-color);
}

.jumbotron-cta-block--white {
    background-color: var(--project-white);
}

.site-footer {
    background: var(--project-footer-background);
    color: var(--project-white);
}

/* >>> GEÄNDERT: Das Footer-Logo wird leicht größer dargestellt. */
.site-footer__logo {
    width: auto;
    max-height: 3rem;
}

.site-footer__heading {
    color: var(--project-white);
}

.site-footer__heading > svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--bs-secondary);
}

.site-footer__link {
    color: var(--project-white);
}

.site-footer__link small {
    color: var(--bs-secondary);
}

/* >>> NEU: Projektfarben und Strich-Pagination für den lokalen Demo-Termin-Swiper. */
.demo-appointment-block .btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--project-white);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: var(--project-white);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
}

/* >>> NEU: Datenschutzlink im Demo-Modal verwendet ebenfalls die Website-Farben. */
.demo-appointment-block a {
    color: var(--bs-primary);
}

.demo-appointment-block a:hover,
.demo-appointment-block a:focus {
    color: var(--bs-heading-color);
}

/* >>> NEU: Aktive Formulareingaben verwenden die grünen Website-Farben. */
.demo-appointment-block .form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-secondary-rgb), 0.55);
}

.demo-appointment-block__date-slider .swiper-pagination-bullet {
    flex: 1 1 0;
    width: auto;
    height: 0.25rem;
    margin: 0 !important;
    border-radius: 999px;
    background: var(--bs-secondary);
    opacity: 1;
}

.demo-appointment-block__date-slider .swiper-pagination-bullet-active {
    background: var(--bs-primary);
}

/* >>> NEU: Darstellung und Bedienung des responsiven Bild-Text-Sliders. */
.slider-block__number {
    background: var(--project-primary-light);
}

.slider-block__navigation {
    width: 3rem;
    height: 3rem;
    border-color: rgba(var(--bs-body-color-rgb), 0.12);
    background: var(--project-white);
    color: var(--bs-primary);
}

.slider-block__navigation:hover,
.slider-block__navigation:focus {
    border-color: var(--bs-secondary);
    background: var(--project-primary-light);
    color: var(--bs-heading-color);
}

.slider-block__navigation:focus-visible {
    box-shadow: 0 0 0 0.25rem var(--bs-secondary) !important;
}

.slider-block__navigation.swiper-button-disabled {
    opacity: 0.4;
}

.slider-block__pagination .swiper-pagination-bullet {
    width: 0.625rem;
    height: 0.625rem;
    margin: 0 0.35rem !important;
    background: var(--bs-secondary-color);
    opacity: 0.35;
}

.slider-block__pagination .swiper-pagination-bullet-active {
    background: var(--bs-primary);
    opacity: 1;
}

@media (max-width: 767.98px) {
    .slider-block__image {
        aspect-ratio: 4 / 3;
    }
}

.site-footer__link:hover,
.site-footer__link:focus {
    color: var(--bs-secondary);
}

.site-footer__link:focus-visible {
    box-shadow: 0 0 0 0.25rem var(--bs-secondary);
    outline: 0;
}

.site-footer__bottom {
    --bs-border-color: rgba(var(--bs-white-rgb), 0.2);
}

/* >>> NEU: Nur die projektspezifischen Farben und Maße der Kontaktseite. */
.contact-page__icon {
    width: 4rem;
    height: 4rem;
    background: var(--project-primary-light);
    color: var(--bs-primary);
}

.contact-page__spam {
    background: var(--project-primary-light);
}

.contact-page .form-control:focus,
.contact-page .form-check-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-secondary-rgb), 0.55);
}

.contact-page .form-check-input:checked {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
}