#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 {
    display: flex;
    flex-direction: column;
    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;
}

/* Same look as the «…» quote cards (.quote blockquote in styles.css): Sora
   has no italic, and a third quote style (blue, slanted, rule) is gone. */
.product-story-copy blockquote {
    margin: 2rem 0;
    color: var(--navy);
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    font-weight: 600;
    line-height: 1.4;
}

.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;
    }

    .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 {
        gap: 0.875rem;
        margin-top: 1.875rem;
    }

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

/* The site grid (WEBSITE_DESIGN.md §5): 3 columns from 1024 px, 2 from
   640 px, 1 below. The narrower 3-column cards at 769-1023 px let words such
   as "Rechnungswesen" run out of the card. */
@media (max-width: 1023px) {
    .goodnpo-how-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 639px) {
    .goodnpo-how-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* "Warum Good NPO?" has ten cards, so in three columns the last would stand
   alone (§5: never 3+1). On a six-track grid the last four share two rows,
   two by two; with 9 or 12 cards every row simply holds three. */
@media (min-width: 1024px) {
    #how-it-works .goodnpo-how-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    #how-it-works .goodnpo-how-card {
        grid-column: span 2;
    }

    #how-it-works .goodnpo-how-card:nth-child(3n+1):nth-last-child(4),
    #how-it-works .goodnpo-how-card:nth-child(3n+1):nth-last-child(4) ~ .goodnpo-how-card {
        grid-column: span 3;
    }
}

/* 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;
}

/* 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;
}

/* In the hero grid the row gap already adds 1.25rem above the cue. */
.product-hero-split > .scroll-cue {
    margin-top: 1rem;
}

.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 open the module's clip in the "Apps in Aktion" slider below:
   the title is a <button>, and a click anywhere else on the card (except the
   footer link) does the same. */
#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);
}

/* 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;
}


/* 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;
}

/* Phones: the sub-nav already separates the hero from the header, and the
   long intro needs the room to keep the booking button in the first screen. */
@media (max-width: 480px) {
    .product-subnav ~ .product-hero {
        padding-top: 2rem;
    }
}

/* The title button is the video trigger. A play badge on the app icon is the
   persistent affordance — no repeated link line per card, so every card ends
   at the same height and the grid reads as one block. The button only
   resets its UA look; the h3 keeps the type. */
.module-card-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0;
    border: 0;
    border-radius: 0.25rem;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
}

.module-card-icon {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.module-card-play {
    position: absolute;
    right: -0.2rem;
    bottom: -0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: var(--button-background-color);
    box-shadow: 0 0 0 2px var(--bg-surface);
    transition: transform 0.2s ease;
}

.module-card-play svg {
    width: 0.75rem;
    height: 0.75rem;
    fill: #fff;
}

#module-detail .module-card--video:hover .module-card-play,
#module-detail .module-card-trigger:focus-visible .module-card-play {
    transform: scale(1.18);
}

@media (prefers-reduced-motion: reduce) {
    .module-card-play {
        transition: none;
    }

    #module-detail .module-card--video:hover .module-card-play,
    #module-detail .module-card-trigger:focus-visible .module-card-play {
        transform: none;
    }
}

/* Not every module has its own page, so the footer link exists on five of
   eleven cards. Pinning it to the card bottom keeps every footer that does
   exist on one baseline; the cards without one just carry the whitespace. */
/* Specificity: .goodnpo-how-card p (0,1,1) zeroes the margin, so the pin has
   to match it — .module-card-foot alone (0,1,0) silently loses. */
.goodnpo-how-card .module-card-foot {
    margin-top: auto;
    padding-top: 0.9rem;
    font-size: 0.95rem;
}

.module-card-foot a {
    padding-block: 0.3rem; /* ~29px tap target (WCAG 2.5.8), no layout shift */
    color: var(--button-background-color);
    font-weight: 600;
    text-decoration: none;
}

.module-card-foot a:hover,
.module-card-foot a:focus-visible {
    text-decoration: underline;
}

/* The module pages the cards used to link to now hang off the matching
   video slide, so the internal links survive without a nested link inside
   a card that is itself a button. */
.video-slide-links {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.95rem;
    font-weight: 500;
}

.video-slide-links a {
    color: var(--button-background-color);
    font-weight: 600;
    text-decoration: none;
}

.video-slide-links a:hover,
.video-slide-links a:focus-visible {
    text-decoration: underline;
}

/* ===== 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;
    }
}

/* Swipe (goodnpo.js): horizontal drags go to the slider, vertical ones stay
   the page's scroll. While the track follows the finger its transition is
   off, or it would lag behind. */
.video-slider-window {
    touch-action: pan-y pinch-zoom;
}

.video-slider-window.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.video-slider-window.is-dragging .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);
}

/* The extra scroll-margin here compensated for #cost pulling its content up
   3rem. That legacy wave-straddle rule is gone, so the global
   scroll-padding-top handles the anchor offset like it does for every other
   section. */

/* The slider counter used to float in ~15rem of white before Angebote:
   .goodnpo-videos padding + .product-section island margin. */
.goodnpo-videos + .product-section {
    margin-top: 0;
}