#cost .cost-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1200px) {
    #cost .cost-options {
        grid-template-columns: repeat(2, minmax(18rem, 1fr));
    }
}

.goodnpo-how {
    background: var(--bg-surface-alt);
}

.goodnpo-how-header {
    max-width: 760px;
    margin: 0;
    text-align: left;
}

.goodnpo-eyebrow {
    margin: 0 0 0.75rem;
    color: var(--button-background-color);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.goodnpo-how-header .section-title {
    margin: 0;
    text-align: left;
}

.goodnpo-how-header p:not(.goodnpo-eyebrow) {
    max-width: 720px;
    margin: 1.25rem 0 0;
    color: var(--text-primary);
    font-size: 1.06rem;
    line-height: 1.72;
}

.goodnpo-how-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.125rem;
    margin-top: 2.625rem;
}

.goodnpo-how-card {
    min-width: 0;
    padding: 1.5rem;
    border: 1px solid rgba(25, 22, 51, 0.1);
    border-radius: 1rem;
    background: var(--bg-surface);
    box-shadow: 0 18px 50px rgba(25, 22, 51, 0.07);
}

.goodnpo-how-card h3 {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 0 0.625rem;
    color: var(--text-primary);
    font-size: 1.12rem;
    line-height: 1.22;
}

.goodnpo-how-card p {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.62;
}

.goodnpo-how-icon {
    display: inline-flex;
    width: 2.125rem;
    height: 2.125rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--brand-peach);
    color: var(--brand-navy);
}

.goodnpo-how-icon svg {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
}

.product-story-section {
    background: var(--bg-surface-alt);
}

.product-story-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.35fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    background: var(--bg-surface);
    border-radius: 1rem;
    box-shadow: var(--shadow);
    padding: clamp(1.5rem, 4vw, 3rem);
}

.product-story-copy {
    max-width: 44rem;
}

.product-story-copy p {
    line-height: 1.7;
}

.product-story-copy blockquote {
    margin: 2rem 0;
    border-left: 4px solid var(--button-background-color);
    padding: 0.75rem 0 0.75rem 1.25rem;
    color: var(--button-background-color);
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-style: italic;
    line-height: 1.35;
}

.product-story-product {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--text-primary);
    font-weight: 700;
    text-align: center;
}

/* The app icons are finished tiles with their own corners and background, so
   they need no frame; the old padded white box read as a border around them. */
.product-story-product img {
    width: min(7rem, 50vw);
    height: min(7rem, 50vw);
    display: block;
}


@media (max-width: 768px) {
    #cost .cost-options {
        grid-template-columns: 1fr;
    }

    .goodnpo-how-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-story-card {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .product-story-product {
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    #cost .cost-options {
        grid-template-columns: 1fr;
    }

    .goodnpo-how-grid {
        grid-template-columns: 1fr;
        gap: 0.875rem;
        margin-top: 1.875rem;
    }

    .goodnpo-how-card {
        padding: 1.25rem;
    }
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

/* FAQ accordion: native details/summary keeps all answers in the HTML
   (crawlable, matches the FAQPage JSON-LD) without a wall of text. */
.faq-item {
    border-bottom: 1px solid rgba(25, 22, 51, 0.12);
    padding: 1.1rem 0;
}

.faq-item summary {
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 2.25rem;
}

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

.faq-item summary::after {
    content: "";
    position: absolute;
    right: 0.35rem;
    top: 0.45rem;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2.5px solid var(--button-background-color);
    border-bottom: 2.5px solid var(--button-background-color);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
    transform: rotate(225deg);
}

.faq-item summary:hover h3 {
    color: var(--button-background-color);
}

.faq-item p {
    margin-top: 0.9rem;
}


.product-faq > .content > .section-title {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.faq-item h3 {
    margin-bottom: 0.75rem;
    color: var(--text-primary);
    font-size: clamp(1.2rem, 2vw, 1.4rem);
}

.faq-item p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Cross-link out of a detail card to that module's own page. */
.module-detail-link {
    margin: 0.75rem 0 0 !important;
}

.module-detail-link a {
    color: #0064a2;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.module-detail-link a:hover {
    text-decoration: underline;
}

/* ===== Hero ===== */
.product-hero--overview h1,
.product-hero--overview .product-subtitle,
.product-hero--overview .product-description {
    hyphens: none;
}

/* The intro carries a lot of copy, so the calls to action get clear air above
   them rather than sitting tight under the last line. */
.product-hero--overview .cta-button-row {
    margin-top: 3rem;
}

/* Cue that the detail pane is directly below. */
.scroll-cue {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin: 2.25rem auto 0;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    width: fit-content;
}

.scroll-cue svg {
    width: 1.6rem;
    height: 1.6rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: scroll-cue-bob 1.8s ease-in-out infinite;
}

.scroll-cue:hover svg {
    color: var(--brand-navy);
}

@keyframes scroll-cue-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(0.3rem); }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-cue svg { animation: none; }
}


/* Auto-hyphenation splits product names ("ER-PNext"). Headings are short
   enough to wrap on word boundaries instead. */
.goodnpo-how-header h2,
.goodnpo-how-card h3 {
    hyphens: none;
}

/* Section index as part of the fixed navbar: first element of <main>, navy like
   the header, stuck directly beneath it on scroll. Chips centered; the row
   scrolls horizontally on small screens (safe center keeps the first chip
   reachable when overflowing). */
.product-subnav {
    position: sticky;
    top: 3.5rem;
    z-index: 1000;
    margin-top: 3.5rem; /* clears the fixed header at page top */
    background: var(--header-color);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 8px rgba(25, 22, 51, 0.12);
}

.product-subnav-inner {
    display: flex;
    justify-content: safe center;
    gap: 0.5rem;
    overflow-x: auto;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.product-subnav a {
    white-space: nowrap;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--header-text-color);
    font-weight: 600;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.product-subnav a:hover,
.product-subnav a:focus-visible {
    background: var(--brand-peach);
    border-color: var(--brand-peach);
    color: var(--brand-navy);
}

/* Scroll-spy: chip of the section currently in view. */
.product-subnav a.is-active {
    background: var(--brand-peach);
    border-color: var(--brand-peach);
    color: var(--brand-navy);
}

/* Anchors must clear header + subnav (≈6.1rem) on this page. */
html:has(.product-subnav) {
    scroll-padding-top: 7rem;
}

/* Module grid: five priority modules first, the remaining seven behind a
   "Mehr Module" toggle card in the sixth cell. All cards stay in the HTML
   (crawlable); without JS the grid simply shows everything and no toggle. */
.module-more {
    display: contents;
}

.module-more-card {
    display: none;
}

html.js .module-more {
    display: none;
}

html.js .module-more.is-open {
    display: contents;
}

html.js .module-more-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    font: inherit;
    color: var(--text-primary);
    text-align: center;
    background: transparent;
    border: 2px dashed rgba(25, 22, 51, 0.25);
    box-shadow: none;
    /* Fill the grid cell like the article cards: the global button rule centers
       buttons with auto margins and shrink-wraps them. */
    margin: 0;
    width: 100%;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* Once expanded the toggle has done its job — remove it from the grid. */
html.js .goodnpo-how-grid.modules-expanded .module-more-card {
    display: none;
}

html.js .module-more-card:hover,
html.js .module-more-card:focus-visible {
    border-color: var(--button-background-color);
    transform: translateY(-2px);
}

.module-more-icon {
    display: inline-flex;
    width: 2.125rem;
    height: 2.125rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--bg-surface-dark);
    color: var(--brand-navy);
}

.module-more-icon svg {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
}

.module-more-count {
    font-weight: 700;
}

.module-more-label {
    color: var(--button-background-color);
    font-weight: 600;
}

/* Fade/slide-in for the extra cards when expanding. */
html.js .module-more.is-open > .goodnpo-how-card {
    animation: module-card-in 0.35s ease-out both;
}

html.js .module-more.is-open > .goodnpo-how-card:nth-child(2) { animation-delay: 0.05s; }
html.js .module-more.is-open > .goodnpo-how-card:nth-child(3) { animation-delay: 0.1s; }
html.js .module-more.is-open > .goodnpo-how-card:nth-child(4) { animation-delay: 0.15s; }
html.js .module-more.is-open > .goodnpo-how-card:nth-child(5) { animation-delay: 0.2s; }
html.js .module-more.is-open > .goodnpo-how-card:nth-child(6) { animation-delay: 0.25s; }
html.js .module-more.is-open > .goodnpo-how-card:nth-child(7) { animation-delay: 0.3s; }

@keyframes module-card-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html.js .module-more.is-open > .goodnpo-how-card {
        animation: none;
    }
}

/* Module cards are whole-card links: demo pages for Good NPO / Good Event,
   the product page for Good Pay, contact for the rest. */
#module-detail a.goodnpo-how-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#module-detail a.goodnpo-how-card:hover,
#module-detail .module-card--video:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 50px rgba(25, 22, 51, 0.14);
    border-color: var(--button-background-color);
}

#module-detail a.goodnpo-how-card:focus-visible,
#module-detail .module-card--video:focus-visible {
    outline: 3px solid var(--button-background-color);
    outline-offset: 2px;
}

/* Cards that open a video in the "Apps in Aktion" slider. */
#module-detail .module-card--video {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.module-card-cta-play {
    margin-right: 0.15rem;
}

/* Small secondary link inside a video card (e.g. to the live demo). */
.module-card-cta-link {
    display: inline-block;
    margin-top: 0.5rem;
    color: var(--button-background-color);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.module-card-cta-link:hover {
    text-decoration: underline;
}


/* Breathing room between the module/Warum grids and their call-to-action rows. */
#module-detail .cta-button-row,
#how-it-works .cta-button-row {
    margin-top: 2.75rem;
}

/* With the subnav clearing the fixed header, the hero no longer needs its
   header-sized top padding (8rem) — halve it so no dead gap opens up. */
.product-subnav ~ .product-hero {
    padding-top: 4rem;
}

/* Persistent affordance for the clickable module cards (hover alone doesn't
   show it): blue link line with an arrow, same language as the old
   "Mehr zu Good Pay" text link. */
.module-card-cta {
    display: block;
    margin-top: 0.9rem;
    color: var(--button-background-color);
    font-size: 0.95rem;
    font-weight: 600;
}

.module-card-cta-arrow {
    display: inline-block;
    margin-left: 0.3rem;
    transition: transform 0.2s ease;
}

#module-detail a.goodnpo-how-card:hover .module-card-cta-arrow,
#module-detail a.goodnpo-how-card:focus-visible .module-card-cta-arrow {
    transform: translateX(4px);
}

/* ===== Apps in Aktion — video slider in the shared browser-window chrome ===== */

.goodnpo-videos {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.video-slider {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(0.5rem, 2vw, 1.5rem);
    margin-top: 2.5rem;
}

.video-slider-window {
    overflow: hidden;
    border-radius: 12px;
}

.video-slider-track {
    display: flex;
    transition: transform 0.45s ease;
}

.video-slide {
    flex: 0 0 100%;
    min-width: 0;
    margin: 0;
    padding: 0.25rem;
    box-sizing: border-box;
}

.video-slide .mac-window {
    width: 100%;
}

.mac-body--video {
    height: auto;
    aspect-ratio: 16 / 9;
    background: #0f0d1e;
}

.mac-body--video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.mac-body--video video[controls] {
    cursor: default;
}

.video-slide-caption {
    margin-top: 1rem;
    text-align: center;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
}

.video-slider-nav {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--button-background-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5rem;
    padding: 0.75rem;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.video-slider-nav:hover,
.video-slider-nav:focus-visible {
    transform: translateY(-2px);
}

.video-slider-nav-icon {
    display: block;
    width: 1.8rem;
    height: 2.8rem;
    color: currentColor;
}

.video-slider-nav-icon path {
    fill: none;
    stroke: currentColor;
    stroke-width: 4.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.video-slider-counter {
    text-align: center;
    margin: 1rem 0 0;
    color: var(--text-primary);
    opacity: 0.65;
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .video-slider {
        grid-template-columns: 1fr 1fr;
    }

    .video-slider-window {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .video-slider-prev {
        grid-column: 1;
        grid-row: 2;
        justify-self: end;
    }

    .video-slider-next {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
    }

    .video-slider-nav {
        min-height: 3.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .video-slider-track {
        transition: none;
    }
}

/* No box-shadow on video windows (it read as a grey haze around the video);
   the 1px border keeps the frame defined. */
.video-slide .mac-window {
    box-shadow: none;
    border-color: rgba(25, 22, 51, 0.16);
}

/* #cost pulls its content up 3rem (legacy wave-straddle rule shared with the
   homepage). Anchor jumps must land 2.5rem lower so the Angebote title is not
   hidden behind header + subnav. */
#cost {
    scroll-margin-top: 4rem;
}