:root {
    --primary-50: #fbf8ff;
    --primary-100: #e0cffc;
    --primary-200: #c29ffa;
    --primary-300: #a370f7;
    --primary-400: #8540f5;
    --primary-500: #6610f2;
    --primary-600: #520dc2;
    --primary-700: #3d0a91;
    --primary-800: #290661;
    --primary-900: #140330;
    --primary: var(--primary-600);
    --bs-modal-margin: 2rem !important;
    --bs-danger-rgb: 223, 32, 32;
    --bs-success-rgb: 15, 122, 51;
    --bs-secondary: #68727b;
    --bs-secondary-rgb: 104, 114, 123;
}

html {
    scroll-padding-top: 140px; /* Offset for sticky navigation */
}

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}


.custom-tooltip {
  --bs-tooltip-bg: var(--primary);
  --bs-tooltip-color: var(--bs-white);
}

.container {
    --bs-gutter-x: 2rem;
}

.main-title {
    font-size: calc(1.375rem + 1.5vw) !important;
    margin-bottom: 0 !important;
}

.page-title {
    color: var(--primary);
    margin-bottom: 3rem;
}

h1, .h1 {
    font-size: calc(1.325rem + .9vw) !important;
}

h2, .h2 {
    font-size: calc(1.275rem + .3vw) !important;
}

h3, .h3 {
    font-size: 1.25rem !important;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: var(--primary);
    font-weight: 500 !important;

    &:hover {
        color: var(--primary-700);
    }
}

.fw-bold, strong, b, th {
    font-weight: 500 !important;
}

.modal-close-btn {
    position: absolute;
    top: -19px;
    right: -19px;
    display: flex;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    z-index: 4;
}

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

.accordion {
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--primary-200);
    --bs-accordion-active-bg: var(--bs-white);
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 .25rem var(--primary-100);
}

.plan-name {
    font-weight: 500;
    text-align: center;
    color: var(--bs-secondary);
    font-size: 2rem;
}

.price-container {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 2rem;

    & p {
        margin-bottom: 0;
    }
}

.bg-primary {
    background-color: var(--primary) !important;
}

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

.bg-orange {
    background-color: var(--bs-orange) !important;
}

.text-bg-orange {
    background-color: var(--bs-orange) !important;
}

.btn {
    border-radius: 50rem !important;
}

.btn-primary {
    background-color: var(--primary) !important;
    color: white !important;
    border: 1px solid var(--primary-700) !important;

    &:hover {
        background-color: var(--primary-700) !important;
        border: 1px solid var(--primary-800) !important;
    }
}

.btn-outline-primary {
    background-color: var(--primary-100) !important;
    color: var(--primary) !important;
    border: 1px solid var(--primary) !important;

    &:hover {
        background-color: var(--primary-200) !important;
        color: var(--primary-800) !important;
        border: 1px solid var(--primary-700) !important;
    }
}

.btn-lang {
    display: inline-block;
    border-radius: var(--bs-border-radius);
    padding: .35rem;
    border: 1px solid var(--primary-100);
    color: white;
    font-weight: 600;
    font-size: small;
    line-height: 1;

    &:hover {
        color: var(--primary);
        background-color: var(--primary-100);
    }

    &:active {
        background-color: var(--primary-200) !important;
        color: var(--primary-800) !important;
        border-color: var(--primary-700);
    }
}

section {
    padding: 3rem 0;
}

.header {
    position: sticky;
    top: 0;
    z-index: 3;
    border-bottom: 1px solid var(--primary);
    box-shadow: none;
    transition: all .3s linear;

    &.show-border {
        border-color: var(--primary-700);
        box-shadow: var(--bs-box-shadow);
    }

    .navbar {
        display: flex;
        align-items: center;
        height: 80px;
        background-color: var(--primary);
        color: white;
    }

    .offcanvas {
        background-color: var(--bs-dark);
    }

    .navbar-toggler {
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 0 0 1rem;
        font-size: 2rem;
    }

    .navbar-close {
        padding: 0 1rem;
        margin-right: -1rem;
        font-size: 2rem;
    }
}

.header-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: white;
}

.wave-content {
    margin-top: -10px;
}

.month-year-switch {
    align-self: center;
    background-color: var(--bs-light);
    border-radius: 50rem;
    width: 320px;

    .nav-link {
        color: var(--primary);
        background-color: transparent;
    }

    .nav-link.active {
        color: white;
        background-color: var(--primary);
    }
}

.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: white;
    box-shadow: var(--bs-box-shadow);
    border-radius: 1rem;
    padding: 1.5rem;

    &.primary {
        background-color: var(--primary);
        color: white !important;
    }
}

.plan-card ul {
    list-style-type: none;
    padding-left: 0;
    margin-left: 2rem;

    & li {
        position: relative;
        margin-bottom: .75rem;

        & span.bi {
            left: -2rem;
            position: absolute;
            text-align: center;
            width: 2rem;
            line-height: inherit;
            display: list-item;
            color: var(--primary);
        }
    }
}

/* Sammelzeile (E-Rechnungsformate): Unterliste eingerückt, kleiner */
.plan-card ul.feature-sublist {
    margin: .5rem 0 0 1.25rem;
    font-size: .85em;

    & li {
        margin-bottom: .3rem;

        & span.bi {
            left: -1.25rem;
            width: 1.25rem;
            font-size: .8em;
            top: .2em;
        }
    }
}

.review-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
    justify-content: start;
    padding: 2rem;
    background-color: white;
    transition: all .3s ease-in;

    &:hover {
        box-shadow: var(--bs-box-shadow-lg) !important;
    }
}
.review-card-sm {
    padding: 1.25rem;
    font-size: 0.85rem;
}
.review-card-sm span {
    font-size: 0.8rem;
    text-align: center;
}
.review-card-sm .review-quote {
    font-size: 0.75rem;
}
.review-card-sm .d-flex {
    margin-top: auto;
    padding-top: 0.75rem;
    height: 45px;
    align-items: flex-end;
    width: 100%;
}
.review-card-sm .d-flex img {
    max-height: 45px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}
.review-quote {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 0.85rem;
    color: #6c757d;
    text-align: center;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.compatibility-table tr td, .compatibility-table tr th {
    white-space: nowrap;
}

.compatibility-table tr td:first-child, .compatibility-table tr th:first-child {
    position: sticky;
    left: -1px;
    box-shadow: 5px 0 6px -6px #00000030;
}

.footer {
    margin-top: auto;
    padding: 2rem 0;
    background-color: var(--primary);
}

.time-line {
    .nav {
        margin-right: 3rem;

        .vertical-line {
            position: absolute;
            width: 1px;
            height: calc(100% - 12px);
            top: 6px;
            background-color: var(--bs-gray-300);
            z-index: -1;
            left: 4px;
        }

        & a {
            display: flex;
            align-items: center;
            color: var(--bs-secondary);
            font-size: .8rem;
            margin-bottom: 1.5rem;
            transition: all .3s linear;

            .time-circle {
                display: inline-flex;
                width: 9px;
                height: 9px;
                background-color: white;
                border-radius: 50rem;
                border: 2px solid var(--bs-gray-300);
                margin-right: .5rem;
                transition: all .3s linear;
            }

            &:hover {
                color: var(--primary);

                .time-circle {
                    border-color: var(--primary);
                }
            }

            &.active {
                color: var(--primary);
                font-weight: 500;

                .time-circle {
                    border-color: var(--primary);
                    background-color: var(--primary);
                    animation: pulse-animation 2s infinite;
                }
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0 var(--primary-300);
    }
    100% {
        box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
    }
}

@keyframes button-pulse {
    0%, 5% {
        transform: scale(1);
    }
    2.5% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.download-button {
    animation: button-pulse 20s ease-in-out infinite;
}

/* lg */
@media (max-width: 991.98px) {
    .offcanvas-body {
        font-size: 1.5rem;

        .nav-item {
            margin-bottom: .75rem;
        }
    }

    .btn-lang {
        font-size: 1.25rem;
    }
    
    /* Dark language dropdown menu only in mobile hamburger menu */
    .offcanvas .dropdown-menu {
        background-color: #212529 !important;
        color: #ffffff !important;
    }
    
    .offcanvas .dropdown-item {
        color: #ffffff !important;
    }
    
    .offcanvas .dropdown-item:hover,
    .offcanvas .dropdown-item:focus {
        background-color: #495057 !important;
        color: #ffffff !important;
    }
}


/* sm */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 1.3rem;
    }

    .offcanvas {
        --bs-offcanvas-width: 100%;
        --bs-offcanvas-border-color: var(--bs-dark);
    }

    .what-abo-link {
        font-size: 1rem !important;
    }

    .time-line {
        .nav {
            margin: 0 1rem;
        }

        .vertical-line {
            width: 2px !important;
            left: 8px !important;
        }

        .time-line-nav-txt {
            display: none;
        }

        .time-circle {
            width: 18px !important;
            height: 18px !important;
        }
    }
}

/* Make iframes inherit rounded corners from their parent container */
.ratio.rounded-2 iframe,
.rounded-2.ratio iframe {
    border-radius: var(--bs-border-radius) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    overflow: hidden;
}
/* Werbeleiste für Tools und Posts (Assets/php/components/ctaBar.php), nur Mac.
   .cta-bar: Satz und Knopf, position:sticky — klebt beim Lesen am unteren Bildrand.
   Direkt darunter .cta-full, der Zusatztext. Am Ende des Artikels löst sich die Zeile
   vom Bildrand, scrollt nach oben weg und zieht den Zusatztext hinter sich ins Bild.
   Satz und Knopf stehen damit nur einmal und behalten ihre Anordnung. */
.cta-bar { position: sticky; bottom: 0; z-index: 1010; padding: .9rem 0; }
/* Der Schatten nur, solange die Zeile über dem Text schwebt (JS setzt die Klasse):
   aufgesetzt grenzt sie an den Zusatztext, dort wäre er eine Naht mitten im Abschnitt. */
.cta-bar-float { box-shadow: 0 -2px 12px rgba(0,0,0,.08); }
.cta-bar-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.cta-bar-row .btn { flex-shrink: 0; }
.cta-bar-text { font-weight: 600; font-size: 1.05rem; }
/* Flagge vor dem Satz, wenn Land der URL und Land der Seite übereinstimmen. Höhe in em,
   damit sie der Zeile auf dem Telefon mitschrumpft. */
.cta-bar-flag { height: .85em; width: auto; margin-right: .45em; vertical-align: -0.02em; }
/* Die Marke über der Zeile meldet dem Beobachter, ob die Zeile noch schwebt. 1px hoch:
   ein Element ohne Höhe gilt nicht überall als sichtbar. */
.cta-bar-mark { height: 1px; }
.cta-full { padding: 1rem 0 2rem; }
.cta-full-more { font-size: 1.1rem; margin: 0; max-width: 42rem; }
@media (max-width: 576px) { .cta-bar { padding: .7rem 0; } .cta-bar-text { font-size: .95rem; } }

/* Phrasen-Link auf die Länderseite (productCta.php): Textzeile unter dem Artikel */
.product-cta-line { margin-top: -1.5rem; padding-bottom: 2.5rem; }