.wip-info {
    background-color: #AE0F30;
    color: #fff;
    padding: var(--pill-gap);
}

main {
    overflow: visible;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    height: auto; /* override base.css height:100% — lets page grow and viewport scroll */
    overflow-x: hidden; 
}

body {
    height: auto; /* override base.css height:100% */
    overflow: visible; /* override base.css overflow:hidden — viewport scrolls, not body */
    max-width: 100vw;
}

/****************************************************************************************
    HERO
*/

.hero {
    background-color: var(--white-bg);
    border: 1px solid var(--text-color);
    padding: var(--medium-gap);
    margin: var(--medium-gap) 0;
}

.hero_inner {
    position: relative;
    overflow: hidden;
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    padding: var(--large-gap);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    gap: calc(2 * var(--d-large-gap));
}

.hero_inner::after {
    content: '';
    position: absolute;
    inset: -50%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='10' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero_inner > div {
    position: relative;
    z-index: 2;
    /* align-items: start makes these flex items shrink-to-fit, so without a
       cap they take their max-content width and run off the side on a phone
       - and nothing ever forces the headline to wrap. */
    max-width: 100%;
}

    /* The inner column is a flex container too, so its children shrink-wrap
       as well and need the same cap. */
    .hero_inner > div > * {
        max-width: 100%;
    }

    .hero_inner > div:nth-child(1){
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: calc(2*var(--pill-gap));
    }

    .hero_inner h1 {
        margin: 0;
        font-size: 5.2rem;
        font-weight: 800;
        /* An explicit width (rather than shrink-to-fit) is what actually makes
           the headline wrap; max-width keeps the desktop measure. */
        width: 100%;
        max-width: 600px;
    }

    /* German compounds ("Mitgliederverwaltung", "Buchungssystem") are wider
       than a phone screen at 5.2rem, so without help they just run off the
       side. The document is lang="de", so hyphens: auto lets the browser
       break them at real syllable boundaries; overflow-wrap is the fallback
       for anything it has no dictionary entry for. */
    .hero_inner h1,
    .hero_inner p,
    .hero_inner span {
        -webkit-hyphens: auto;
        hyphens: auto;
        overflow-wrap: break-word;
    }
    .hero_inner h1 > span{
        line-height: 1.5 !important;
    }


    .hero_inner p, .hero_inner span {
        margin: 0;
        background-color: var(--white-bg);
        display: inline; /* background only where text*/
        padding: var(--pill-gap);
        padding-right: var(--large-gap);
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
        line-height: 2;
    }

.hero-subtext {
    margin: var(--large-gap) var(--medium-gap);
}

@media (max-width: 1400px) {
    .hero {
        margin: var(--medium-gap) var(--pill-gap);
    }

    .hero-subtext {
        margin: calc(var(--medium-gap) +  var(--pill-gap));
        margin-top: var(--large-gap);
    }
}

@media (max-width: 700px) {
    .hero {
        padding: var(--pill-gap);
        margin: var(--pill-gap);
    }

    .hero_inner {
        padding: calc(var(--pill-gap) * 1.5) var(--pill-gap);
        gap: var(--d-large-gap);
    }

    .hero-subtext {
        margin: var(--medium-gap);
        margin-top: var(--large-gap);
    }
}

/**************************************************************************
    DIVIDER
*/

.divider {
    width: 100vw;
    overflow: hidden;
    background-color: var(--text-color);
}

.divider-track {
    display: flex;
    justify-content: center;
    gap: calc(5 * var(--large-gap));
    width: max-content; /* overflows parent */
    position: relative;
    left: 50%; /* center it within parent */
    transform: translateX(-50%);
}

.divider-track > span {
    white-space: nowrap;
    flex-shrink: 0;
    color: var(--gray-bg);
}

/**************************************************************************
    Alignment
*/

.aligned-main-content {
    margin: var(--medium-gap);
    margin-top: var(--large-gap);
}

@media (max-width: 1400px) {
    .aligned-main-content {
        margin: calc(var(--medium-gap) + var(--pill-gap));
        margin-top: var(--large-gap);
    }
}

@media (max-width: 700px) {
    .aligned-main-content {
        margin: var(--medium-gap);
        margin-top: var(--large-gap);
    }
}

/* section 4 */

.section-4-card, .section-4-card-1st {
    width: 400px;
    max-width: 80vw;
    aspect-ratio: 2/3;
    background-color: var(--white-bg);
    border-radius: 5rem;
    border: 1px solid var(--text-color);
    display: grid;
    margin: var(--pill-gap) 0;
    flex-shrink: 0;
}

    .section-4-card > img {
        width: 400px;
        max-width: 100%;
        aspect-ratio: 2/3;
        grid-row: 1;
        grid-column: 1;
    }

.section-4-card-content {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: var(--large-gap);
    margin-top: auto;
    background: #FFFFFF;
    background: linear-gradient(0deg,rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%);
    border-radius: 0 0 5rem 5rem;
}

    .section-4-card-content > img {
        width: 400px;
        max-width: 100%;
        grid-row: 1;
        grid-column: 1;
    }

.section-4-booking-legends {
    display: flex;
    gap: var(--pill-gap);
    flex-direction: column;
    padding-top: calc(2*var(--large-gap));
}

.section-4-booking-legend {
    display: flex;
    gap: var(--pill-gap);
    align-items: center;
}

.section-4-booking-icon {
    width: 2.4rem;
    aspect-ratio: 1;
    border-radius: 50%;
}

    .section-4-booking-icon.icon-1 {
        background-color: var(--dark-gray-bg);
    }

    .section-4-booking-icon.icon-2 {
        background: #FF8B00;
        background: linear-gradient(135deg,rgba(255, 139, 0, 1) 0%, rgba(255, 68, 0, 1) 100%);
    }

    .section-4-booking-icon.icon-3 {
        background: #3FD2AA;
        background: linear-gradient(135deg,rgba(63, 210, 170, 1) 0%, rgba(56, 196, 182, 1) 100%);
    }

.section-4-card-last {
    aspect-ratio: auto;
    padding: var(--large-gap);
    grid-row: 1;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: var(--medium-gap);
}

.section-4-safety-heading {
    display: flex;
    gap: var(--pill-gap);
}

    .section-4-safety-heading > div {
        width: var(--pill-h);
        aspect-ratio: 1;
        border-radius: 2px;
        background-color: var(--gray-bg);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .section-4-safety-heading > h3 {
        padding: 0;
        margin: 0;
    }

/* STEPS LIST (index_v3.html) */

.steps-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--medium-gap);
    justify-content: space-between;
    padding-top: var(--medium-gap);
}

.step-item {
    flex: 1 1 20rem;
    max-width: 33rem;
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--pill-h);
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 140, 0, 1) 0%, rgba(255, 68, 0, 1) 100%);
    color: #fff;
    font-weight: 700;
    font-size: 1.4rem;
}

.step-item > h3 {
    padding-top: var(--pill-gap);
    font-size: 1.4rem;
}

.step-item > p {
    margin: 0;
}

/* FAQ LIST (index_v3.html, pricing.html) */

.faq-list {
    padding: 0 var(--large-gap);
}

.faq-item {
    border-bottom: 1px solid var(--dark-gray-bg);
}

    .faq-item > summary {
        padding: var(--medium-gap) 0 var(--pill-gap) 0;
        font-weight: 700;
        cursor: pointer;
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--pill-gap);
    }

        .faq-item > summary::after {
            content: "+";
            font-size: 1.6rem;
            flex-shrink: 0;
        }

    .faq-item[open] > summary::after {
        content: "−";
    }

    .faq-item > summary::-webkit-details-marker {
        display: none;
    }

    .faq-item > p {
        padding: 0 0 var(--medium-gap) 0;
        margin: 0;
        line-height: 1.7;
    }

@media (max-width: 700px) {
    .faq-list {
        padding: 0 var(--medium-gap);
    }
}