/* Public website: layout and components of the pages under layouts/website.html. */
/* One vertical gap between all sections (site-section blocks and guide sections) */
.website-root {
    --section-gap: 6rem;
}

@media (max-width: 767.98px) {
    .website-root {
        --section-gap: 4rem;
    }

}

/* Public website density: the theme's utility sizes are tuned for the app and read "zoomed in" on the
   marketing pages (13px root, so fs-3 = 17.5px body text, fs-2x = 26px lead, 23px navigation). */
.website-root .fs-1 {
    font-size: 1.45rem !important;
}

.website-root .fs-2 {
    font-size: 1.3rem !important;
}

.website-root .fs-3 {
    font-size: 1.2rem !important;
}

.website-root .fs-4 {
    font-size: 1.15rem !important;
}

.website-root .fs-2x {
    font-size: 1.55rem !important;
}

.website-root .fs-2hx {
    font-size: 2.1rem !important;
}

.website-root .fs-2tx {
    font-size: 2.3rem !important;
}

.website-root .fs-3hx {
    font-size: 3rem !important;
}

.website-root #gw_app_header .nav-link,
.website-root header .navbar .nav-link {
    font-size: 1.2rem;
}

.website-root #gw_app_claim {
    font-size: 1.1rem !important;
}

.faq-item summary {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem 0;
    cursor: pointer;
    list-style: none;
}

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

.faq-item summary:focus-visible {
    outline: 3px solid #036666;
    outline-offset: 2px;
}

.faq-question {
    order: 2;
    margin: 0;
    font-size: 1.1rem !important;
    font-weight: 700;
    line-height: 1.4;
    color: #4b5675;
}

.faq-item[open] .faq-question {
    color: #036666;
}

.faq-icon {
    order: 1;
    position: relative;
    flex: none;
    width: 1.3rem;
    height: 1.3rem;
    margin-top: 0.1rem;
    border: 2px solid #99a1b7;
    border-radius: 0.3rem;
}

.faq-item[open] .faq-icon {
    border-color: #036666;
}

.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.6rem;
    height: 2px;
    background: #99a1b7;
    transform: translate(-50%, -50%);
}

.faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] .faq-icon::before {
    background: #036666;
}

.faq-item[open] .faq-icon::after {
    display: none;
}

.faq-answer {
    padding: 0 0 1rem 2.3rem;
    color: #5e6278;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.65;
}

.website-root #gw_app_content_container> :last-child,
.website-root #gw_app_content_container> :last-child> :last-child,
.website-root #gw_app_content_container> :last-child> :last-child> :last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.website-root .page-guide {
    padding-bottom: 0 !important;
}

/* Functions page: tighter sections, headings start level with their screenshot */
.functions-page .functions-shot {
    align-self: flex-start;
}

/* Header: the call to action stays on one line on laptops */
.website-root header .navbar .nav-item.me-lg-8 {
    margin-right: 1.5rem !important;
}

/* Header between 1200 and 1400px: the desktop menu has to fit next to logo and login */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .website-root header .navbar .nav-item.me-lg-8 {
        margin-right: 0.9rem !important;
    }

    .website-root #gw_app_header .nav-link,
    .website-root header .navbar .nav-link {
        font-size: 1.05rem;
    }

    .website-root header .app-header-logo.me-10 {
        margin-right: 1.25rem !important;
    }

}

/* The theme's section spacing (py-lg-10 + mb-10 stacked) leaves 100px+ gaps on the marketing pages */
@media (min-width: 992px) {
    .website-root .py-lg-10 {
        padding-top: 1.75rem !important;
        padding-bottom: 1.75rem !important;
    }

    .website-root .pt-lg-10 {
        padding-top: 1.75rem !important;
    }

    .website-root .pb-lg-10 {
        padding-bottom: 1.75rem !important;
    }

}

.website-root #gw_app_content_container .mb-10 {
    margin-bottom: 1.75rem !important;
}

/* Long German compounds in page titles break with a hyphen instead of mid-word */
.website-root h1,
.website-root h2 {
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Platform main menu: icon and label stay on one line (the label used to wrap below the icon) */
#gw_app_header_menu .menu-title {
    white-space: nowrap;
}

/* ---- Design system of the public website: one type scale, one button, one card ---- */
/* Headings: page title 30px, section 27px, card/subsection 18px, all in weight 700 and the theme's dark */
.website-root #gw_app_content_container h1:not(.audience-hero h1) {
    font-size: 2.3rem !important;
    font-weight: 700 !important;
    color: #181c32;
}

/* Buttons: one radius and one weight */
.website-root #gw_app_content_container .btn:not(.btn-sm):not(.price-button),
.website-root .audience-hero .btn,
.website-root .register-now .btn {
    border-radius: 0.6rem;
    font-weight: 700;
}

.website-root .input-group>.btn {
    border-radius: 0 0.6rem 0.6rem 0;
}

.website-root .btn.text-on-gold {
    font-weight: 700 !important;
}

.website-root #gw_app_content_container .card {
    border-color: #e6eae8;
}

.website-root .index-header {
    min-height: 0 !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
    margin-bottom: 0 !important;
}

.website-root .index-header h1 {
    font-size: clamp(2.3rem, 3.6vw, 3.2rem) !important;
    line-height: 1.1;
}

.website-root .index-header p.fs-2x {
    font-size: 1.45rem !important;
    margin-bottom: 1.75rem !important;
}

.website-root .index-header .text-left.mb-18 {
    margin-bottom: 0 !important;
}

.website-root .index-header img[src*="screenshot_4"] {
    padding: 1rem !important;
    margin-top: 0 !important;
}

/* Phones: no gold wedge in the hero, so the founders line stays readable */
@media (max-width: 991.98px) {
    .website-root .index-header.unternehmenswegweiser-background {
        background-image: linear-gradient(90deg, #036666 30%, #4f9494);
    }

}

/* ==== Public website layout: one content width, one section rhythm ==== */
/* Content, hero text, closing block and footer share one column: max 1280px including 1.5rem side padding */
.website-root #gw_app_content_container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.website-root #gw_app_content_container .app-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none;
}

.site-section>h2,
.audience-guide .page-guide h2 {
    margin: 0 0 1.25rem;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.2;
    color: #181c32;
}

.website-root #gw_app_content {
    padding-top: 0 !important;
}

/* Guides and FAQ sit in the same column as the sections above */
.audience-guide .page-guide {
    margin: 0 !important;
    padding: 3rem 0 0 !important;
}

.audience-guide .page-guide>[class*="col"] {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.audience-guide .page-guide section:last-child {
    margin-bottom: 0 !important;
}

/* Closing call to action aligned with the content column */
.register-now {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.register-now>div {
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* Screenshot next to text (homepage intro) */
.site-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 3rem;
}

@media (max-width: 767.98px) {
    .site-split {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

}

/* Three plain text columns ("Kennst du das?") */
.site-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}

.site-columns h3 {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.35;
    color: #181c32;
}

.site-columns p {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.6;
    color: #5e6278;
}

/* Steps: numbered text columns, no boxes */
.site-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.site-steps li {
    counter-increment: step;
}

.site-steps h3 {
    margin: 0 0 0.4rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: #181c32;
}

.site-steps p {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.6;
    color: #5e6278;
}

/* Audience group headings on the homepage */
/* Feature showcase: titles left, screenshot with its description right */
.feature-showcase {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 3rem;
}

.feature-list {
    flex: 1 1 300px;
    min-width: 0;
    border-top: 1px solid #e6eae8;
}

.feature-item {
    border-bottom: 1px solid #e6eae8;
}

.feature-item h3 {
    margin: 0;
}

.feature-tab {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    width: 100%;
    padding: 1rem 0.25rem;
    border: 0;
    background: transparent;
    color: #5e6278;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.feature-tab:hover .feature-tab-title {
    color: #181c32;
}

.feature-tab:focus-visible {
    outline: 3px solid #036666;
    outline-offset: 2px;
}

.feature-tab-number {
    flex: none;
    width: 1.5rem;
    color: #a1a5b7;
    font-weight: 700;
}

.feature-tab-title {
    font-size: 1.25rem;
    font-weight: 600;
}

.feature-item.is-active .feature-tab-number,
.feature-item.is-active .feature-tab-title {
    color: #036666;
    font-weight: 700;
}

.feature-panels {
    display: grid;
    flex: 1.7 1 520px;
    min-width: 0;
}

.feature-panel {
    grid-area: 1 / 1;
    visibility: hidden;
}

.feature-panel.is-active {
    visibility: visible;
}

.feature-panel img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;
}

.feature-detail {
    margin-top: 1.25rem;
}

.feature-tab-text {
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
    line-height: 1.6;
    color: #3f4254;
}

.feature-points {
    margin: 0 0 0.75rem;
    padding-left: 1.2rem;
    color: #5e6278;
    font-size: 1.07rem;
    line-height: 1.6;
}

.feature-link {
    font-weight: 700;
    color: #036666;
}

/* Phones and tablets: each feature as title, screenshot and description one below the other */
@media (max-width: 991.98px) {
    .feature-showcase {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0;
    }

    .feature-list,
    .feature-panels {
        display: contents;
    }

    .feature-item {
        border: 0;
    }

    .feature-tab {
        padding: 1.5rem 0 0.75rem;
        cursor: default;
    }

    .feature-item .feature-tab-number,
    .feature-item .feature-tab-title {
        color: #181c32;
        font-weight: 700;
    }

    .feature-panel {
        visibility: visible;
    }

    .feature-list> :nth-child(1) {
        order: 1;
    }

    .feature-panels> :nth-child(1) {
        order: 2;
    }

    .feature-list> :nth-child(2) {
        order: 3;
    }

    .feature-panels> :nth-child(2) {
        order: 4;
    }

    .feature-list> :nth-child(3) {
        order: 5;
    }

    .feature-panels> :nth-child(3) {
        order: 6;
    }

    .feature-list> :nth-child(4) {
        order: 7;
    }

    .feature-panels> :nth-child(4) {
        order: 8;
    }

    .feature-list> :nth-child(5) {
        order: 9;
    }

    .feature-panels> :nth-child(5) {
        order: 10;
    }

    .feature-list> :nth-child(6) {
        order: 11;
    }

    .feature-panels> :nth-child(6) {
        order: 12;
    }

}

/* Screenshot panels used in the closing block and the visitor sidebar */
.feature-shot {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    margin-bottom: 1.5rem;
    border-radius: 1rem;
}

.sidebar-cta .feature-shot {
    border-radius: 0.5rem;
}

/* Functions page and guides: headings, copy and cards in the shared scale */
.website-root .functions-page h2,
.website-root .audience-hero h1 {
    overflow-wrap: break-word;
    hyphens: auto;
}

.website-root .functions-page h2 {
    font-size: 2.1rem !important;
    font-weight: 700 !important;
}

.website-root .audience-checklist {
    border-radius: 0.9rem;
    border-color: #e6eae8;
}

/* FAQ: two independent columns */
.faq-list {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 3rem;
}

@media (min-width: 768px) {
    .faq-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

/* Footer: same column as the content, with links into the site */
.site-footer {
    background: #fff;
    border-top: 1px solid #e6eae8;
}

.site-footer-inner {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 3rem 1.5rem 1.5rem;
}

.site-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(4, 1fr);
    gap: 2rem;
}

@media (max-width: 991.98px) {
    .site-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer-brand {
        grid-column: 1 / -1;
    }

}

.site-footer-brand p {
    max-width: 22rem;
    margin: 1rem 0 0;
    color: #5e6278;
    font-size: 1.05rem;
    line-height: 1.6;
}

.site-footer-title {
    margin: 0 0 0.75rem;
    color: #181c32;
    font-size: 1.05rem;
    font-weight: 700;
}

.site-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer li {
    margin-bottom: 0.5rem;
}

.site-footer a {
    color: #5e6278;
    font-size: 1.05rem;
}

.site-footer a:hover {
    color: #036666;
}

.site-footer-bottom {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e6eae8;
    color: #a1a5b7;
    font-size: 1rem;
}

.site-footer-bottom a {
    font-size: 1rem;
}

/* Audience tiles on the homepage: no extra bottom padding, so every section gap is the same */
/* Guides: use the full width of their card or column (the col-xxl-10 left a gap on the right) */
.page-guide>.col-xxl-10 {
    width: 100%;
}

/* Guide tables: framed, with a tinted header row, matching the cards of the site */
.page-guide .table-responsive {
    margin-bottom: 1rem;
    border: 1px solid #e6eae8;
    border-radius: 0.9rem;
    background: #fff;
}

.page-guide table.table {
    width: 100%;
    margin: 0;
    font-size: 1.1rem !important;
}

.page-guide table.table thead th,
.page-guide table.table thead tr {
    background: #f3f7f6;
    color: #181c32;
    font-weight: 700;
}

.page-guide table.table th,
.page-guide table.table td {
    padding: 0.85rem 1.1rem !important;
    border-bottom: 1px solid #eef1f0;
    vertical-align: top;
}

.page-guide table.table tbody tr:last-child td {
    border-bottom: 0;
}

.page-guide table.table tbody td:first-child {
    color: #181c32;
    font-weight: 600;
}

.page-guide table.table td {
    color: #3f4254;
}

/* ==== Page-by-page fixes (design review 2026-10) ==== */
/* Headings never hyphenate; very long words still wrap instead of overflowing */
.website-root h1,
.website-root h2,
.website-root h3,
.website-root .functions-page h2,
.website-root .audience-hero h1 {
    hyphens: manual;
    overflow-wrap: break-word;
}

/* Section rhythm: more air above every real section heading */
.site-section {
    padding-top: var(--section-gap);
}

.audience-guide .page-guide {
    padding-top: var(--section-gap) !important;
}

.audience-guide .page-guide section {
    margin-bottom: var(--section-gap) !important;
}

.site-lead {
    max-width: 62rem;
    margin: 0 0 1.5rem;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #3f4254;
}

.site-note {
    margin: 1.25rem 0 0;
    font-size: 1.15rem;
    line-height: 1.6;
    color: #5e6278;
}

.site-group-heading {
    margin: 3rem 0 1.25rem;
    font-size: 1.45rem;
    font-weight: 700;
    color: #181c32;
}

/* Steps: numbered circles on a thin line */
.site-steps li {
    position: relative;
}

.site-steps li::before {
    content: counter(step);
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: #036666;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
}

@media (min-width: 768px) {
    .site-steps:not(.site-steps-stacked) li:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 1.3rem;
        left: 3.6rem;
        right: -1rem;
        height: 2px;
        background: #d5e3e1;
    }

}

.site-steps-4 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-bottom: 0;
}

.page-guide .site-steps h3 {
    font-size: 1.35rem !important;
}

/* Homepage audiences: plain columns, link at the bottom */
.audience-list {
    display: grid;
    gap: 2rem 3rem;
}

.audience-list-2 {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.audience-list-3 {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.audience-list>div {
    display: flex;
    flex-direction: column;
    padding-top: 1.5rem;
    border-top: 1px solid #e6eae8;
}

.audience-list h4 {
    margin: 0 0 0.6rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: #181c32;
}

.audience-list p {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    line-height: 1.6;
    color: #5e6278;
}

.audience-list .feature-link {
    margin-top: auto;
}

/* Homepage: tools next to a screenshot */
.site-split-tools {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
}

.site-split-tools h2 {
    margin: 0 0 1.25rem;
    font-size: 2.1rem;
    font-weight: 700;
    color: #181c32;
}

@media (max-width: 767.98px) {
    .site-split-tools {
        grid-template-columns: 1fr;
    }

}

.site-shot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;
}

.tool-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #e6eae8;
}

.tool-list li {
    padding: 0.8rem 0;
    border-bottom: 1px solid #e6eae8;
    font-size: 1.15rem;
    line-height: 1.5;
    color: #5e6278;
}

.tool-list a {
    font-weight: 700;
    color: #036666;
}

/* Closing block: call to action, on advisor pages with the contact person next to it */
.register-now-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
}

.register-now-person {
    display: flex;
    gap: 1.5rem;
    max-width: 34rem;
    padding: 1.5rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.register-now-person img {
    flex: none;
    width: 112px;
    height: 112px;
    border-radius: 0.9rem;
    object-fit: cover;
}

.register-now-person p {
    margin: 0;
}

.register-now-person-label {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.75);
}

.register-now-person-name {
    font-size: 1.35rem;
    font-weight: 700;
}

.register-now-person-role {
    margin-bottom: 0.6rem !important;
    color: rgba(255, 255, 255, 0.85);
}

.register-now-person-text {
    margin-bottom: 0.6rem !important;
    font-size: 1.05rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}

.register-now-person-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.register-now-person-links a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 575.98px) {
    .register-now-person {
        flex-direction: column;
    }

}

/* Functions page: plain jump list, columns without boxes, the rest as a list */
.functions-toc ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.functions-toc li {
    border-bottom: 1px solid #e6eae8;
}

.functions-toc a {
    padding: 0.8rem 0.25rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: #036666;
}

@media (max-width: 575.98px) {
    .functions-toc ul {
        grid-template-columns: 1fr;
    }

}

/* Price page: both plans share one row grid, so prices, buttons and lists line up */
.price-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-template-rows: repeat(5, auto);
    gap: 0 1.5rem;
}

.price-plan {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 1rem;
    padding: 2.25rem 2rem;
    border: 1px solid #e6eae8;
    border-radius: 0.9rem;
    background: #fff;
}

.price-plan h2 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: #b8860b;
}

.price-plan-text {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.6;
    color: #3f4254;
}

.price-plan-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    color: #5e6278;
}

.price-plan-amount {
    font-size: 2.6rem;
    font-weight: 700;
    color: #036666;
}

.price-plan-note {
    flex-basis: 100%;
    font-size: 1rem;
}

.price-plan .btn {
    justify-self: start;
}

.price-plan-features {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
    font-size: 1.15rem;
    line-height: 1.6;
    color: #3f4254;
}

.price-plan-features li + li {
    margin-top: 0.5rem;
}

@media (max-width: 767.98px) {
    .price-plan {
        grid-row: auto;
        grid-template-rows: none;
        margin-bottom: 1.5rem;
    }

}

/* FAQ page: topic groups and a plain contact line */
.faq-group + .faq-group {
    margin-top: 2.5rem;
}

.faq-group>h2 {
    margin: 0 0 0.5rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: #181c32;
}

/* About us: name and role below the photo */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}

.team-member img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-bottom: 1rem;
    border-radius: 0.9rem;
    object-fit: cover;
}

.team-member p {
    margin: 0;
}

.team-member-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: #181c32;
}

.team-member-role {
    margin-bottom: 0.4rem !important;
    font-size: 1.1rem;
    color: #5e6278;
}

.team-member a {
    font-weight: 700;
    color: #036666;
}

/* Sign-up: form next to the three steps */
.auth-layout {
    display: flex;
    justify-content: center;
}

.auth-card .card-body {
    padding-bottom: 2.5rem !important;
}

.auth-aside {
    display: none;
}

@media (min-width: 992px) {
    .auth-aside {
        display: block;
    }

}

.auth-aside-heading {
    margin: 0 0 1.5rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: #181c32;
}

.site-steps-stacked {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.site-steps-stacked li {
    padding-left: 3.6rem;
}

.site-steps-stacked li::before {
    position: absolute;
    left: 0;
    top: 0;
}

.site-steps-stacked h2 {
    margin: 0.3rem 0 0.3rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #181c32;
}

/* Formation checklist (tools page and founder page): compact steps */
.checklist-task {
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
    border: 1px dashed #d8dde0;
    border-radius: 0.75rem;
}

.checklist-task-name {
    margin: 0 0 0.35rem;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #181c32;
}

.checklist-task-text {
    margin-bottom: 0.35rem;
    color: #3f4254;
}

.checklist-task-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.5rem;
    margin-top: 0.5rem;
    color: #5e6278;
}

.checklist-task-meta .badge {
    margin-left: 0.25rem;
}

/* Legal form finder: all four steps in one row, the explanation below in normal size */
@media (min-width: 992px) {
    #legalform_stepper .stepper-nav {
        flex-wrap: nowrap !important;
    }

    #legalform_stepper .stepper-item {
        margin-left: 1.25rem !important;
        margin-right: 1.25rem !important;
    }

}

.finder-about {
    max-width: 62rem;
    padding-top: 2.5rem;
    font-size: 1.15rem;
    line-height: 1.6;
    color: #3f4254;
}

.finder-about h2 {
    margin: 0 0 1rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: #181c32;
}

.finder-about h3 {
    margin: 1.5rem 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #181c32;
}

.finder-about ul {
    padding-left: 1.2rem;
}

/* Municipality page: long postcode lists fold away */
.zip-list summary {
    cursor: pointer;
    color: #036666;
    font-weight: 600;
}

.zip-list[open] summary {
    margin-bottom: 0.4rem;
}

/* Functions page: screenshots use the full column; the guide starts on the same edge as the sections */
.website-root .functions-page .functions-shot {
    padding: 0 !important;
}

/* Guides inside a tool card start on the card's content edge */
.website-root .app-container>.card>.page-guide {
    padding: 2rem 1.5rem 2rem !important;
}

.feature-panel img {
    aspect-ratio: 2 / 1;
}

/* Feature showcase on wide screens: the titles as tabs in a row, the screenshot with its description beside it */
@media (min-width: 992px) {
    .feature-showcase {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 2rem;
    }

    .feature-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 2rem;
        flex: none;
        border-top: 0;
    }

    .feature-item {
        border-top: 3px solid #e6eae8;
        border-bottom: 0;
    }

    .feature-item.is-active {
        border-top-color: #036666;
    }

    .feature-tab {
        padding: 0.9rem 0 1rem;
    }

    .feature-panels {
        flex: none;
    }

    .feature-panel {
        display: grid;
        grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
        align-items: center;
        gap: 3rem;
    }

    .feature-detail {
        margin-top: 0;
    }

}

/* Homepage audiences: one line icon above every title */
.audience-list .audience-icon {
    display: block;
    margin-bottom: 0.9rem;
    font-size: 2.1rem !important;
    line-height: 1;
    color: #036666;
}

/* Homepage hero: the text block sits slightly above the vertical middle of the picture */
@media (min-width: 992px) {
    .website-root .index-header>.col-lg-6:first-child {
        padding-bottom: 2rem;
    }

}

/* Header: the sign-up button sits right next to the login button */
.website-root header .app-navbar .btn-gold {
    white-space: nowrap;
}

/* Header menus: an entry never wraps below its icon */
/* Functions page: screenshot and text keep the same gap on both sides and start at the same height */
/* Founder page: picker and text left, checklist preview right */
.checklist-preview {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: 3rem;
}

.checklist-preview-intro h2 {
    margin: 0 0 1.25rem;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.2;
    color: #181c32;
}

@media (max-width: 991.98px) {
    .checklist-preview {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

}

/* FAQ page: the contact tiles start on the text edge and keep space to the card bottom */
.website-root .contact-tiles {
    padding-bottom: 2.5rem !important;
}

@media (min-width: 992px) {
    .website-root .contact-tiles {
        padding-left: 5rem !important;
        padding-right: 5rem !important;
    }

    .website-root .contact-tiles>.col-md-4 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

}

/* FAQ: one column over the full content width */
.faq-list.faq-list-full {
    display: block;
    border-top: 1px solid #e6eae8;
}

.faq-list-full .faq-item {
    border-bottom: 1px solid #e6eae8;
}

/* Public website components (pages under layouts/website.html). */
/* ---- Header menus: one look for every dropdown ---- */
.site-menu {
    min-width: 17rem;
    padding: 0.5rem;
}

.site-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #3f4254;
    white-space: nowrap;
}

.site-menu .dropdown-item i {
    color: #a1a5b7;
}

.site-menu .dropdown-item:hover,
.site-menu .dropdown-item:focus {
    background: #f3f7f6;
    color: #036666;
}

.site-menu .dropdown-item:hover i,
.site-menu .dropdown-item:focus i {
    color: #036666;
}

/* ---- Check lists with an icon per entry ---- */
.check-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.check-list li {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    font-size: 1.15rem;
    line-height: 1.5;
    color: #3f4254;
}

.check-list li + li {
    margin-top: 0.6rem;
}

.check-list i {
    flex: none;
    color: #036666;
}

/* ---- Functions page ---- */
.functions-page {
    padding: 3rem 5rem;
}

.functions-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

.functions-intro h1 {
    margin: 0 0 1.25rem;
}

.functions-toc ul {
    border-top: 0;
}

.functions-toc li:first-child,
.functions-toc li:nth-child(2) {
    border-top: 1px solid #e6eae8;
}

.functions-toc a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.functions-toc a i {
    color: #a1a5b7;
}

.functions-toc a::after {
    content: none;
}

.functions-section {
    margin-top: 3.5rem;
    padding-top: 3.5rem;
    border-top: 1px solid #e6eae8;
}

.functions-section>h2,
.functions-text h2 {
    margin: 0 0 1rem;
    font-size: 2.1rem;
    font-weight: 700;
    color: #181c32;
}

.functions-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4rem;
    align-items: center;
}

.functions-split.is-image-first .functions-shot {
    order: -1;
}

.functions-text p {
    margin: 0 0 1rem;
    font-size: 1.2rem;
    line-height: 1.65;
    color: #3f4254;
}

.functions-text .feature-link {
    display: block;
    margin-top: 0.4rem;
}

.functions-shot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;
}

.functions-section .check-list {
    columns: 2 18rem;
    column-gap: 4rem;
    margin-top: 2.5rem;
}

.functions-section .check-list li {
    break-inside: avoid;
    margin: 0 0 0.6rem;
}

.functions-section .check-list-4 {
    columns: 4 12rem;
    margin-top: 0;
}

.functions-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 2rem 3rem;
    margin-top: 2.5rem;
}

.functions-details>div {
    padding-top: 1.25rem;
    border-top: 1px solid #e6eae8;
}

.functions-details h3 {
    margin: 0 0 0.5rem;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.35;
    color: #181c32;
}

.functions-details p {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.6;
    color: #5e6278;
}

.functions-more-heading {
    margin: 2.5rem 0 1rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: #181c32;
}

.functions-page .page-guide {
    margin: 0 !important;
    padding: 0 !important;
}

.functions-page .page-guide>[class*="col"] {
    width: 100%;
    padding: 0;
}

@media (max-width: 991.98px) {
    .functions-page {
        padding: 2rem 1.5rem;
    }

    .functions-intro,
    .functions-split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .functions-split.is-image-first .functions-shot {
        order: 0;
    }

}

/* ---- Price page: features first, the button at the bottom ---- */
.price-plan .price-plan-features li {
    font-size: 1.15rem;
}

.price-plan .btn {
    align-self: end;
}

/* ---- Sign-up: form and steps as two cards of the same height ---- */
.auth-layout {
    align-items: stretch;
    gap: 2rem;
}

.auth-aside {
    padding-top: 0;
    max-width: 34rem;
}

.auth-aside .card-body {
    padding: 2.5rem !important;
}

.auth-shots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.auth-shots img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
    border: 1px solid #e6eae8;
}

.auth-shots span {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #5e6278;
}

/* ---- Founder page: the preview fades out, the full checklist is one click away ---- */
.checklist-preview .audience-checklist {
    position: relative;
    max-height: 34rem;
    overflow: hidden;
}

.checklist-preview .audience-checklist::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 9rem;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%);
    pointer-events: none;
}

.checklist-preview-text {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    line-height: 1.6;
    color: #3f4254;
}

/* ---- Section rhythm details ---- */
.website-root #gw_app_content {
    padding-bottom: 4.5rem !important;
}

.page-guide .guide-disclaimer {
    margin-top: 2.5rem !important;
}

.auth-shots img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: left top;
}

/* Sign-up: the screenshot row fills the card bottom; captions stay on one line */
.auth-aside .card-body {
    display: flex;
    flex-direction: column;
}

.auth-shots {
    margin-top: auto;
    gap: 1rem;
}

.auth-shots span {
    white-space: nowrap;
    font-size: 1rem;
}

/* Functions page: detail columns always in threes on wide screens */
@media (min-width: 992px) {
    .functions-details {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---- Functions overview: one card per function ---- */
.function-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem 2rem;
    margin-top: 3.5rem;
}

.function-card {
    display: flex;
    flex-direction: column;
}

.function-card-image img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 1.25rem;
    border-radius: 0.9rem;
}

.function-card h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.6rem;
    font-size: 1.45rem;
    font-weight: 700;
}

.function-card h2 i {
    color: #036666;
}

.function-card h2 a {
    color: #181c32;
}

.function-card p {
    margin: 0 0 0.9rem;
    font-size: 1.15rem;
    line-height: 1.6;
    color: #5e6278;
}

.function-card .feature-link {
    margin-top: auto;
}

@media (max-width: 991.98px) {
    .function-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .function-cards {
        grid-template-columns: 1fr;
    }
}

/* ---- Page of a single function ---- */
.function-breadcrumb {
    margin-bottom: 2rem;
    font-size: 1.05rem;
    color: #7e8299;
}

.function-breadcrumb a {
    font-weight: 600;
    color: #036666;
}

.function-detail .functions-text h1 {
    margin: 0 0 1.25rem;
    font-size: 2.3rem !important;
    line-height: 1.2;
}

.function-subheading {
    margin: 3.5rem 0 1.5rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: #181c32;
}

.function-detail .check-list {
    margin-top: 0;
}

.function-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.5rem 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.function-links li {
    padding-top: 1rem;
    border-top: 1px solid #e6eae8;
}

.function-links a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #036666;
}

.function-links p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.55;
    color: #5e6278;
}

.functions-section .function-subheading {
    margin-top: 0;
}

/* ---- Call to action below a tool or on a function page ---- */
.tool-cta {
    border: 0;
    background: #036666;
    color: #fff;
}

.tool-cta-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 3rem;
    padding: 2rem 2.5rem;
}

.tool-cta-heading {
    margin: 0 0 0.4rem;
    font-size: 1.6rem !important;
    font-weight: 700;
    color: #fff !important;
}

.tool-cta-text {
    max-width: 44rem;
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
}

.tool-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
}

.tool-cta .feature-link {
    color: #fff;
}

/* Long German compounds in the function cards wrap instead of running into the next column */
.function-card h2 {
    font-size: 1.3rem;
}

.function-card h2 a {
    min-width: 0;
    overflow-wrap: anywhere;
}