/* ============================================
   MEDIVITAL - KOMPONENTEN CSS
   Nur tatsächlich verwendete Klassen
   ============================================ */

/* ----------------------------------------
   TYPOGRAPHY
---------------------------------------- */
body {
    font-family: 'DM Sans', sans-serif;
    color: #142E42;
}

.font-heading {
    font-family: 'Cormorant Garamond', serif;
}

.overline {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.hover\:no-underline:hover {
    text-decoration-line: none;
}

/* ----------------------------------------
   SMOOTH SCROLL
---------------------------------------- */
html {
    scroll-behavior: smooth;
}

/* Offset for sticky header when scrolling to anchors */
[id] {
    scroll-margin-top: 7rem;
}

/* ----------------------------------------
   NAVIGATION
---------------------------------------- */
.nav-link {
    position: relative;
    padding-bottom: 4px;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: transparent;
    transition: background-color 0.2s;
}

.nav-link.active::after,
.nav-link:hover::after {
    background-color: #567d8e;
}

.nav-link.active {
    color: #567d8e;
}

/* ----------------------------------------
   MEGAMENU
---------------------------------------- */
.megamenu-trigger:hover .megamenu {
    display: block;
}

.megamenu {
    display: none;
}

/* ----------------------------------------
   FAQ AKKORDEON
---------------------------------------- */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

/* ----------------------------------------
   ARTICLE CONTENT STYLES
---------------------------------------- */
.article-content h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.875rem;
    font-weight: 500;
    color: #142E42;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    padding-top: 2rem;
    border-top: 1px solid #d6e3ea;
}

.article-content h2:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.article-content h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.375rem;
    font-weight: 500;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.article-content p {
    margin-bottom: 1.25rem;
    line-height: 1.8;
}

.article-content ul, .article-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.article-content li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
}

.article-content ul li {
    list-style-type: disc;
}

.article-content ol li {
    list-style-type: decimal;
}

/* ----------------------------------------
   NOTCH SYSTEM - Flexora Style
---------------------------------------- */

/* Wrapper für absolute Positionierung */
.notch-container {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 20;
    pointer-events: none;
}

.notch-container > * {
    pointer-events: auto;
}

/* Das Notch-Element - Desktop (84px Höhe) */
.notch {
    width: 100%;
    max-width: 550px;
    height: 83px;
    -webkit-clip-path: polygon(
        calc(100% - 84.844px) 32.8977px,
        calc(100% - 84.844px) 32.8977px,
        calc(100% - 87.33921px) 27.1769256px,
        calc(100% - 90.47348px) 21.8917248px,
        calc(100% - 94.19077px) 17.0813412px,
        calc(100% - 98.43504px) 12.7850184px,
        calc(100% - 103.15025px) 9.042px,
        calc(100% - 108.28036px) 5.8915296px,
        calc(100% - 113.76933px) 3.3728508px,
        calc(100% - 119.56112px) 1.5252072px,
        calc(100% - 125.59969px) .3878424px,
        calc(100% - 131.829px) 0,
        132.628px 0,
        132.628px 0,
        126.3683177px .3916515px,
        120.3020976px 1.53996px,
        114.4860799px 3.4049565px,
        108.9770048px 5.946672px,
        103.8316125px 9.1251375px,
        99.1066432px 12.900384px,
        94.8588371px 17.2324425px,
        91.1449344px 22.081344px,
        88.0216753px 27.4071195px,
        85.5458px 33.1698px,
        84.1544px 37.0623px,
        84.1544px 37.0623px,
        80.6881776px 45.130057px,
        76.3156408px 52.586144px,
        71.1162152px 59.374605px,
        65.1693264px 65.439484px,
        58.5544px 70.724825px,
        51.3508616px 75.174672px,
        43.6381368px 78.733069px,
        35.4956512px 81.34406px,
        27.0028304px 82.951689px,
        18.2391px 83.5px,
        0 83.5px,
        0 100%,
        100% 100%,
        100% 83.5px,
        calc(100% - 18.891px) 83.5px,
        calc(100% - 18.891px) 83.5px,
        calc(100% - 27.468736px) 82.8020193px,
        calc(100% - 35.773208px) 81.0591944px,
        calc(100% - 43.729812px) 78.3324511px,
        calc(100% - 51.263944px) 74.6827152px,
        calc(100% - 58.301px) 70.1709125px,
        calc(100% - 64.766376px) 64.8579688px,
        calc(100% - 70.585468px) 58.8048099px,
        calc(100% - 75.683672px) 52.0723616px,
        calc(100% - 79.986384px) 44.7215497px,
        calc(100% - 83.419px) 36.8133px,
        calc(100% - 84.844px) 32.8977px
    );
    clip-path: polygon(
        calc(100% - 84.844px) 32.8977px,
        calc(100% - 84.844px) 32.8977px,
        calc(100% - 87.33921px) 27.1769256px,
        calc(100% - 90.47348px) 21.8917248px,
        calc(100% - 94.19077px) 17.0813412px,
        calc(100% - 98.43504px) 12.7850184px,
        calc(100% - 103.15025px) 9.042px,
        calc(100% - 108.28036px) 5.8915296px,
        calc(100% - 113.76933px) 3.3728508px,
        calc(100% - 119.56112px) 1.5252072px,
        calc(100% - 125.59969px) .3878424px,
        calc(100% - 131.829px) 0,
        132.628px 0,
        132.628px 0,
        126.3683177px .3916515px,
        120.3020976px 1.53996px,
        114.4860799px 3.4049565px,
        108.9770048px 5.946672px,
        103.8316125px 9.1251375px,
        99.1066432px 12.900384px,
        94.8588371px 17.2324425px,
        91.1449344px 22.081344px,
        88.0216753px 27.4071195px,
        85.5458px 33.1698px,
        84.1544px 37.0623px,
        84.1544px 37.0623px,
        80.6881776px 45.130057px,
        76.3156408px 52.586144px,
        71.1162152px 59.374605px,
        65.1693264px 65.439484px,
        58.5544px 70.724825px,
        51.3508616px 75.174672px,
        43.6381368px 78.733069px,
        35.4956512px 81.34406px,
        27.0028304px 82.951689px,
        18.2391px 83.5px,
        0 83.5px,
        0 100%,
        100% 100%,
        100% 83.5px,
        calc(100% - 18.891px) 83.5px,
        calc(100% - 18.891px) 83.5px,
        calc(100% - 27.468736px) 82.8020193px,
        calc(100% - 35.773208px) 81.0591944px,
        calc(100% - 43.729812px) 78.3324511px,
        calc(100% - 51.263944px) 74.6827152px,
        calc(100% - 58.301px) 70.1709125px,
        calc(100% - 64.766376px) 64.8579688px,
        calc(100% - 70.585468px) 58.8048099px,
        calc(100% - 75.683672px) 52.0723616px,
        calc(100% - 79.986384px) 44.7215497px,
        calc(100% - 83.419px) 36.8133px,
        calc(100% - 84.844px) 32.8977px
    );
}

/* Notch Content */
.notch-content {
    padding: 15px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    height: 100%;
    box-sizing: border-box;
}

/* Farbvarianten */
.notch-white {
    background-color: #FFFFFF;
}

.notch-silver {
    background-color: #f3f3f9;
}

.notch-dark {
    background-color: #142E42;
}

/* Section mit Notch */
.section-with-notch {
    position: relative;
    padding-bottom: 60px;
}
/* Fix for grid items to respect container width */
.min-w-0 {
    min-width: 0;
}
.min-w-max {
    min-width: max-content;
}