/* ==========================================================================
   goodvantage.ch — Design System v2 foundation
   Contract: WEBSITE_DESIGN.md (tokens, type, layout, components).
   Order: tokens · fonts · reset · type · layout · buttons · cards · header ·
   hero · bands · pricing · FAQ · video window · forms ·
   footer · legacy aliases · motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    --navy: #191633;
    --navy-700: #2A2650;
    --blue: #0064A2;
    --blue-700: #004E80;
    --peach: #F7AE83;
    --peach-100: #FDE9DC;
    --paper: #F7F3EC;
    --paper-200: #EDE6DA;
    --blush: #FEF0E7;      /* hero surface */
    --lavender: #EAEEF9;   /* alternate band */
    --rose: #FEF2F4;       /* references band */
    --white: #FFFFFF;
    --ink: #191633;
    --ink-2: #4D4A66;
    --ink-3: #6A6780;
    --line: rgba(25, 22, 51, .10);
    --ok: #2C9A5F;

    --radius-s: 8px;
    --radius-m: 14px;
    --radius-l: 22px;
    --radius-pill: 999px;

    --shadow-1: 0 1px 2px rgba(25, 22, 51, .06), 0 8px 24px rgba(25, 22, 51, .06);
    --shadow-2: 0 2px 4px rgba(25, 22, 51, .08), 0 24px 48px rgba(25, 22, 51, .12);

    --content: 1120px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --space-section: clamp(4rem, 8vw, 6.5rem);
    --header-h: 3.5rem;

    /* Legacy aliases — keep until every page is migrated, then delete.
       Lavender, rose and blush are live surfaces again (2026-09-06). */
    --brand-peach: var(--peach);
    --brand-blue: var(--blue);
    --brand-navy: var(--navy);
    --text-primary: var(--ink);
    --text-secondary: var(--ink-2);
    --text-inverse: var(--white);
    --bg-page: var(--lavender);
    --bg-surface: var(--white);
    --bg-surface-alt: var(--blush);
    --bg-surface-dark: var(--lavender);
    --bg-surface-rose: var(--rose);
    --bg-input-field: var(--white);
    --header-color: var(--navy);
    --header-text-color: var(--white);
    --background-color: var(--lavender);
    --button-background-color: var(--blue);
    --button-text-color: var(--white);
    --customers-background-color: var(--blush);
    --cost-background-color: var(--lavender);
    --cost-foreground-color: var(--blue);
    --advantages-background-color: var(--lavender);
    --shadow: var(--shadow-1);
}

/* --------------------------------------------------------------------------
   2. Fonts — Sora only. Static woff2 per weight; the variable TTF is the
   last-resort fallback for engines without woff2.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Sora";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url(/css/Sora/Sora-Regular.woff2) format("woff2"),
         url(/css/Sora/Sora-VariableFont_wght.ttf) format("truetype");
}
@font-face {
    font-family: "Sora";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url(/css/Sora/Sora-Medium.woff2) format("woff2"),
         url(/css/Sora/Sora-VariableFont_wght.ttf) format("truetype");
}
@font-face {
    font-family: "Sora";
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url(/css/Sora/Sora-SemiBold.woff2) format("woff2"),
         url(/css/Sora/Sora-VariableFont_wght.ttf) format("truetype");
}
@font-face {
    font-family: "Sora";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url(/css/Sora/Sora-Bold.woff2) format("woff2"),
         url(/css/Sora/Sora-VariableFont_wght.ttf) format("truetype");
}
@font-face {
    font-family: "Sora";
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    src: url(/css/Sora/Sora-ExtraBold.woff2) format("woff2"),
         url(/css/Sora/Sora-VariableFont_wght.ttf) format("truetype");
}

/* --------------------------------------------------------------------------
   3. Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

main {
    display: block;
}

img,
svg,
video {
    max-width: 100%;
    vertical-align: middle;
}

img,
video {
    /* width/height attributes reserve space; CSS keeps the ratio. */
    height: auto;
}

p,
ul,
ol,
blockquote,
figure {
    margin: 0 0 1rem;
}

p:last-child,
ul:last-child,
ol:last-child,
blockquote:last-child {
    margin-bottom: 0;
}

a {
    color: var(--blue);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

a:hover {
    color: var(--blue-700);
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

:focus-visible {
    outline: 3px solid var(--navy);
    outline-offset: 2px;
}

/* Focus ring (WCAG 1.4.11, 3:1): navy on the light surfaces (white, blush,
   lavender, rose: 15-17:1), peach on navy chrome and bands (9.4:1), where a
   navy ring would vanish. Add any new navy surface to this list. */
:is(.header, .footer, .section--navy, .band--navy, .home-pricing, .card--navy, .product-card--cost, .product-subnav) :focus-visible,
.skip-link:focus-visible {
    outline-color: var(--peach);
}

::selection {
    background: var(--peach-100);
    color: var(--navy);
}

em {
    font-weight: 700;
    font-style: normal;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   4. Type scale
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
    margin: 0 0 .75rem;
    color: var(--ink);
    overflow-wrap: break-word;
    hyphens: none;
}

h1,
.display {
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.025em;
}

h2,
.section-title {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
}

h3 {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
}

h4 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Headings and button labels balance their lines, so none ends on a lone
   short word ("E-Payment für / NPOs", "Termin mit Benedikt / buchen"). */
h1,
h2,
h3,
h4,
.btn {
    text-wrap: balance;
}

/* No hyphenation anywhere (Benedikt, 2026-09-28): long German compounds
   such as "Mitgliederverwaltung" must fit on their own. On phones the big
   headings scale with the viewport instead, sized so the longest words on the
   site ("Datenschutzerklärung", "Mitgliederversammlung") fit at 320 px. */
@media (max-width: 480px) {
    h1,
    .display {
        font-size: clamp(1.35rem, 6.8vw, 2.5rem);
    }

    h2,
    .section-title {
        font-size: clamp(1.35rem, 6.8vw, 2rem);
    }

    h3 {
        font-size: clamp(1.05rem, 5.2vw, 1.2rem);
    }
}

.lede,
.section-subtitle {
    font-size: clamp(1.125rem, 1.6vw, 1.3rem);
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 62ch;
}

.small,
.meta {
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--ink-3);
}

.eyebrow {
    display: block;
    margin: 0 0 .75rem;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blue);
}

.price,
.tabular {
    font-variant-numeric: tabular-nums;
}

.measure {
    max-width: 62ch;
}

/* Section heading block: title + optional subtitle above a grid. */
.section-title {
    margin: 0 0 1rem;
}

.section-subtitle {
    margin: 0 0 2.5rem;
}

.section-note {
    margin: 1.5rem 0 0;
    font-size: .95rem;
}

.section-note a {
    padding-block: .3rem; /* ~29px tap target (WCAG 2.5.8), no layout shift */
    font-weight: 600;
    text-decoration: none;
}

.section-note a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */
.content {
    box-sizing: content-box;
    width: auto;
    max-width: var(--content);
    padding-inline: var(--gutter);
    margin-inline: auto;
}

.section {
    padding-block: var(--space-section);
    background: var(--white);
}

.section--paper {
    background: var(--paper);
}

.section--lavender {
    background: var(--lavender);
}

.section--rose {
    background: var(--rose);
}

.section--blush {
    background: var(--blush);
}

.section--navy {
    background: var(--navy);
    color: var(--white);
}

.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy p,
.section--navy .lede,
.section--navy .section-subtitle {
    color: var(--white);
}

.section--navy .eyebrow {
    color: var(--peach);
}

.section--navy a {
    color: var(--white);
}

/* Adjacent sections with the same background: the second drops its top pad. */
.section:not([class*="section--"]) + .section:not([class*="section--"]),
.section--paper + .section--paper,
.section--lavender + .section--lavender {
    padding-top: 0;
}

.section--tight {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* Grids always span the container. 3 on ≥1024, 2 on ≥640, 1 below.
   .grid--2 stays at two columns (four items → 2×2). */
.grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    width: 100%;
    margin: 0;
}

@media (min-width: 640px) {
    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .9rem 1.6rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    white-space: normal;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.btn--primary {
    background: var(--blue);
    color: var(--white);
}

.btn--primary:hover,
.btn--primary:focus-visible {
    background: var(--blue-700);
    color: var(--white);
}

.btn--secondary {
    background: var(--white);
    color: var(--navy);
    border-color: var(--line);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
    color: var(--navy);
    border-color: var(--navy);
}

.btn--photo {
    padding-left: .55rem;
}

.btn--photo img {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.btn:active {
    transform: translateY(1px);
}

/* Row of CTAs. Left-aligned by default; .btn-row--center for closing CTAs. */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.btn-row--center {
    justify-content: center;
}

/* --------------------------------------------------------------------------
   7. Cards + icon chips
   -------------------------------------------------------------------------- */
.card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    padding: 1.5rem;
    color: var(--ink);
    text-align: left;
    text-decoration: none;
    box-shadow: var(--shadow-1);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

a.card:hover,
a.card:focus-visible,
.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    color: var(--ink);
}

.card h3 {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin: 0 0 .625rem;
}

/* The icon sits beside the title. A card too narrow for the longest title
   word beside the icon ("Mitgliederversammlung" needs about 17.3rem inside
   the card's padding) puts it above the title instead. The cards of a grid row share one
   width, so the whole row switches together and never mixes the two shapes
   (flex-wrap did: it dropped every title longer than one line). Only
   cards with an icon title are containers: size containment would shrink
   the content-sized quote cards. */
:is(.card, .product-card, .product-advantage-card):has(> h3 .card-icon) {
    container-type: inline-size;
}

@container (max-width: 17.25rem) {
    :is(.card, .product-card, .product-advantage-card) > h3 {
        flex-direction: column;
    }
}

.card p {
    margin: 0;
    color: var(--ink-2);
}

.card p + p {
    margin-top: .75rem;
}

.card__link {
    display: inline-block;
    margin-top: auto;
    padding-top: 1rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--blue);
}

a.card:hover .card__link {
    text-decoration: underline;
}

.card--navy {
    background: var(--navy);
    border-color: transparent;
    color: var(--white);
}

.card--navy h3,
.card--navy p,
.card--navy strong {
    color: var(--white);
}

.card--navy .card-icon {
    background: rgba(255, 255, 255, .14);
    color: var(--white);
}

/* Icon chip: 2.125rem circle with a Lucide glyph. Peach-100 and navy by
   default; a product page's <main> area class tints it in its area colour
   (the app icon families, §2 of WEBSITE_DESIGN.md). The glyph keeps at
   least 3.7:1 against its chip. Navy cards set their own chip. */
.card-icon {
    display: inline-flex;
    width: 2.125rem;
    height: 2.125rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--chip-bg, var(--peach-100));
    color: var(--chip-fg, var(--navy));
    vertical-align: middle;
    margin-top: -.15rem;
}

.area-verein {
    --chip-fg: #B5653A;                    /* rust */
}

.area-hilfswerk {
    --chip-bg: rgba(249, 198, 210, .45);   /* rose_300 */
    --chip-fg: #C8134F;                    /* pink_700 */
}

.area-dachverband {
    --chip-bg: var(--lavender);
    --chip-fg: var(--blue-700);
}

.area-garuda {
    --chip-bg: rgba(201, 223, 210, .6);    /* haze_far */
    --chip-fg: #1F5E3A;                    /* green_700 */
}

.area-goodpay {
    --chip-bg: rgba(207, 232, 210, .6);    /* green_100 */
    --chip-fg: #2C7A4B;                    /* green_600 */
}

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

/* Chip that carries a real app icon instead of a glyph. */
.card-icon--app {
    background: none;
    border-radius: .55rem;
    overflow: hidden;
}

.card-icon--app img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Real Goodvantage app icons (SVGs the apps ship): no extra tile. */
.app-icon {
    --app-icon-size: 4.75rem;
    display: block;
    width: var(--app-icon-size);
    height: var(--app-icon-size);
    flex: 0 0 auto;
}

.app-icon--small {
    --app-icon-size: 3.25rem;
}

.app-icon--large {
    --app-icon-size: 5.25rem;
    margin-bottom: 1.25rem;
}

.app-icon--inline {
    --app-icon-size: 2.125rem;
}

/* Navy tile around a monochrome Lucide glyph (modules without an app icon). */
.frappe-app-logo {
    --frappe-app-logo-size: 4.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--frappe-app-logo-size);
    height: var(--frappe-app-logo-size);
    border-radius: 1.2rem;
    background: var(--navy);
    color: var(--white);
    flex: 0 0 auto;
}

.frappe-app-logo svg {
    display: block;
    width: 58%;
    height: 58%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.15;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.frappe-app-logo use {
    fill: none;
    stroke: currentColor;
}

.frappe-app-logo--small {
    --frappe-app-logo-size: 3.25rem;
    border-radius: .85rem;
}

.frappe-app-logo--inline {
    --frappe-app-logo-size: 2.125rem;
    border-radius: .6rem;
}

.frappe-app-logo--large {
    --frappe-app-logo-size: 5.25rem;
    margin-bottom: 1.25rem;
}

/* --------------------------------------------------------------------------
   8. Header, skip link, mobile nav
   -------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 10000;
    padding: .75rem 1rem;
    border-radius: var(--radius-s);
    background: var(--peach);
    color: var(--navy);
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

.header {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-h);
    background: var(--navy);
    color: var(--white);
}

.header .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: var(--header-h);
}

.header-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border-radius: var(--radius-s);
}

.header-logo {
    display: block;
    height: 1.9rem;
    width: auto;
}

.nav {
    display: flex;
    align-items: center;
    gap: .125rem;
}

.nav a,
.nav a:visited {
    display: inline-block;
    padding: .5rem .85rem;
    border-radius: var(--radius-pill);
    color: var(--white);
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.nav a:hover {
    background: rgba(255, 255, 255, .1);
    color: var(--white);
}

.nav a.nav-active,
.nav a.nav-active:visited {
    color: var(--white);
    text-decoration: underline;
    text-decoration-color: var(--peach);
    text-decoration-thickness: 3px;
    text-underline-offset: .4em;
}

.nav a.nav-demo-link,
.nav a.nav-demo-link:visited {
    margin-left: .5rem;
    border: 1px solid rgba(255, 255, 255, .7);
}

.nav a.nav-demo-link:hover {
    border-color: var(--white);
    background: rgba(255, 255, 255, .12);
}

.mobile-menu-toggle {
    display: none;
    width: 2.5rem;
    height: 2.5rem;
    padding: .5rem;
    margin: 0;
    border: 0;
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--white);
    line-height: 0;
    cursor: pointer;
}

.mobile-menu-toggle:hover {
    background: rgba(255, 255, 255, .1);
}

.mobile-menu-toggle svg {
    display: block;
}

.mobile-menu-toggle .close-icon,
.mobile-menu-toggle[aria-expanded="true"] .hamburger-icon {
    display: none;
}

.mobile-menu-toggle[aria-expanded="true"] .close-icon {
    display: block;
}

/* The full menu needs about 1055px on one row, so the hamburger applies up to
   1079px (keep in step with the matchMedia in app.js). */
@media (max-width: 1079px) {
    .mobile-menu-toggle {
        display: block;
    }

    .nav {
        display: none;
        position: fixed;
        top: var(--header-h);
        right: 0;
        bottom: 0;
        left: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .25rem;
        padding: 2rem var(--gutter);
        background: var(--navy);
        overflow-y: auto;
        animation: nav-overlay-in .25s ease-out both;
    }

    .nav.open {
        display: flex;
    }

    .nav a,
    .nav a:visited {
        padding: .75rem 1rem;
        font-size: clamp(1.5rem, 6vw, 2rem);
        font-weight: 700;
        text-align: center;
    }

    .nav a.nav-active,
    .nav a.nav-active:visited {
        text-underline-offset: .25em;
    }

    .nav a.nav-demo-link,
    .nav a.nav-demo-link:visited {
        margin: 1rem 0 0;
        padding: .8rem 1.5rem;
        font-size: 1.1rem;
        border-width: 2px;
    }

    body.nav-open {
        overflow: hidden;
    }
}

@keyframes nav-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --------------------------------------------------------------------------
   9. Hero (all pages)
   -------------------------------------------------------------------------- */
.hero {
    padding-top: calc(var(--header-h) + clamp(3rem, 6vw, 5rem));
    padding-bottom: var(--space-section);
    background: var(--white);
}

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

@media (min-width: 900px) {
    .hero__grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: clamp(2rem, 5vw, 4.5rem);
    }
}

.hero__copy {
    min-width: 0;
}

.hero__copy h1 {
    margin: 0 0 1.25rem;
}

.hero__copy h1 span {
    display: block;
}

.hero__copy .lede {
    margin: 0 0 1.75rem;
}

.hero__visual {
    display: flex;
    justify-content: center;
    min-width: 0;
}

@media (min-width: 900px) {
    .hero__visual {
        justify-content: flex-end;
    }
}

/* Page-load stagger: JS adds .is-in to the hero; each [data-stagger] child
   fades in 140 ms after the previous one. Without JS everything is visible. */
html.js :is(.hero, [data-hero]) [data-stagger] {
    opacity: 0;
    transform: translateY(10px);
}

html.js :is(.hero, [data-hero]).is-in [data-stagger] {
    animation: hero-in .4s ease-out forwards;
    animation-delay: calc(var(--stagger-i, 0) * 140ms);
}

@keyframes hero-in {
    to {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   11. Bands (navy pricing band, shared by home and product pages)
   -------------------------------------------------------------------------- */
.band {
    padding-block: clamp(3rem, 6vw, 4.5rem);
}

.band--navy,
.home-pricing {
    background: var(--navy);
    color: var(--white);
}

.band__inner {
    display: grid;
    gap: 1.5rem;
    align-items: center;
}

@media (min-width: 900px) {
    .band__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 3rem;
    }
}

.band--navy h2,
.band--navy p,
.band--navy .lede,
.home-pricing h2,
.home-pricing p,
.home-pricing-title,
.home-pricing-text {
    color: var(--white);
}

.band--navy .eyebrow {
    color: var(--peach);
}

/* Buttons on navy (contract §5b): the blue pill is only 2.78:1 against navy
   and lost to a white secondary, so the hierarchy flips to white. Primary =
   white fill, navy text; secondary = white outline. A lone button is the
   primary. */
:is(.section--navy, .band--navy, .home-pricing, .card--navy, .product-card--cost) .btn--primary,
.home-pricing .contact-button.button {
    background: var(--white);
    color: var(--navy);
    border-color: transparent;
}

:is(.section--navy, .band--navy, .home-pricing, .card--navy, .product-card--cost) .btn--primary:hover,
:is(.section--navy, .band--navy, .home-pricing, .card--navy, .product-card--cost) .btn--primary:focus-visible,
.home-pricing .contact-button.button:hover,
.home-pricing .link-button:hover .contact-button {
    background: var(--peach-100);
    color: var(--navy);
}

:is(.section--navy, .band--navy, .home-pricing, .card--navy, .product-card--cost) .btn--secondary {
    background: transparent;
    color: var(--white);
    border-color: var(--white);
}

:is(.section--navy, .band--navy, .home-pricing, .card--navy, .product-card--cost) .btn--secondary:hover,
:is(.section--navy, .band--navy, .home-pricing, .card--navy, .product-card--cost) .btn--secondary:focus-visible {
    background: rgba(255, 255, 255, .12);
    color: var(--white);
    border-color: var(--white);
}

.band__price {
    display: block;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.band__price small {
    display: block;
    margin-top: .3rem;
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: 0;
    color: rgba(255, 255, 255, .78);
}

.band__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 3rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}

/* Legacy pricing band (goodnpo) */
.home-pricing {
    padding-block: clamp(3rem, 6vw, 4.5rem);
    text-align: left;
    margin: 0;
}

.home-pricing-title {
    margin: 0 0 .75rem;
}

.home-pricing-text {
    margin: 0 0 1.75rem;
    max-width: 62ch;
    font-size: clamp(1.125rem, 1.6vw, 1.3rem);
    font-weight: 500;
    line-height: 1.5;
}

.home-pricing-text strong {
    font-variant-numeric: tabular-nums;
}

.home-pricing .cta-button-row {
    justify-content: flex-start;
}

.home-pricing-inner > .link-button {
    display: inline-block;
}

/* --------------------------------------------------------------------------
   12. Pricing cards (.cost-option family, /preise/)
   -------------------------------------------------------------------------- */
.cost-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    width: 100%;
    margin: 0 0 1rem;
}

@media (min-width: 900px) {
    .cost-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.cost-option {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
    padding: 0 0 1.5rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-1);
    color: var(--ink);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.cost-option:hover,
.cost-option:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    color: var(--ink);
}

.cost-option h2,
.cost-option h3,
.cost-option p,
.cost-option li {
    color: inherit;
}

.cost-banner {
    display: flex;
    align-items: center;
    min-height: 0;
    padding: .8rem 1.5rem;
    background: var(--navy);
    color: var(--white);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-align: left;
}

.cost-banner p {
    margin: 0;
    color: var(--white);
}

/* Column so the price block can sit on the card's bottom edge: the cards
   stretch to one height, so every price lands on the same line however long
   the text above it is. */
.cost-text-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.5rem 1.5rem 0;
}

.cost-text-content h2 {
    margin: 0 0 .6rem;
    font-size: 1.2rem;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.cost-text-content > p {
    color: var(--ink-2);
}

.cost-per-person {
    font-size: .85rem;
    font-weight: 500;
    color: var(--ink-3);
}

.cost-price {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    /* Flex margins do not collapse: the paragraph above keeps its 1rem, so
       .25rem more restores the old 1.25rem minimum gap. */
    margin-top: auto;
    padding-top: .25rem;
}

.cost-price-text {
    margin: 0;
    line-height: 1.2;
}

.cost-chf {
    margin: 0;
    font-weight: 700;
}

.cost-price-text .cost-per-person {
    margin: 0;
}

.cost-price-value {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.cost-option .cost-button {
    margin: 1.5rem 1.5rem 0;
    align-self: flex-start;
    max-width: none;
    max-height: none;
}

/* --------------------------------------------------------------------------
   13. FAQ accordion (details/summary)
   -------------------------------------------------------------------------- */
.faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    text-align: left;
}

.faq-item {
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line);
}

.faq-item:first-child {
    border-top: 1px solid var(--line);
}

.faq-item summary {
    position: relative;
    padding-right: 2.25rem;
    list-style: none;
    cursor: pointer;
    border-radius: var(--radius-s);
}

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

.faq-item summary::after {
    content: "";
    position: absolute;
    right: .5rem;
    top: .5rem;
    width: .55rem;
    height: .55rem;
    border-right: 2px solid var(--blue);
    border-bottom: 2px solid var(--blue);
    transform: rotate(45deg);
    transition: transform .2s ease;
}

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

.faq-item summary h3 {
    display: inline;
    margin: 0;
    font-size: 1.1rem;
}

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

.faq-item p {
    margin: .9rem 0 0;
    max-width: 62ch;
    color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   14. Video / browser window (.mac-window family)
   -------------------------------------------------------------------------- */
.mac-window {
    width: 100%;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-2);
}

.mac-header {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}

.mac-header .dot {
    width: 11px;
    height: 11px;
    margin-right: 7px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .12);
}

.mac-header .dot.bg-red { background: #ff5f56; }
.mac-header .dot.bg-yellow { background: #ffbd2e; }
.mac-header .dot.bg-green { background: #27c93f; }

.mac-title {
    flex: 1;
    margin-right: 54px;
    font-size: .8rem;
    font-weight: 500;
    color: var(--ink-3);
    text-align: center;
}

.mac-body {
    position: relative;
    height: 300px;
    overflow: hidden;
    background: #fdfdfd;
}

.mac-body--video {
    height: auto;
    aspect-ratio: 16 / 9;
    background: var(--paper);
}

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

/* Pause/play toggle for anything that moves on its own for more than 5 s
   (WCAG 2.2.2): the looping clips (injected by app.js) and the /fuer-wen/
   extras (fuer-wen.js). aria-pressed="true" = paused, so it shows "play". */
.pause-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 2px solid var(--white);
    border-radius: var(--radius-pill);
    background: var(--navy);
    color: var(--white);
    box-shadow: var(--shadow-1);
    transition: background-color .2s ease;
}

.pause-toggle:hover {
    background: var(--navy-700);
}

.pause-toggle svg {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    fill: currentColor;
}

.pause-toggle[aria-pressed="true"] .pause-toggle__pause,
.pause-toggle:not([aria-pressed="true"]) .pause-toggle__play {
    display: none;
}

.mac-body--video .pause-toggle {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
}

/* Native controls (a slider clip clicked for sound) bring their own pause. */
.mac-body--video video[controls] + .pause-toggle {
    display: none;
}

/* Square clip on small screens: add .mac-body--square-mobile, give the
   <video> a 1:1 <source media="(max-width: 640px)"> first, and its posters as
   data-poster / data-poster-square (app.js and goodnpo.js pick one). Two
   classes, because goodnpo.css sets .mac-body--video to 16:9 again. */
@media (max-width: 640px) {
    .mac-body--video.mac-body--square-mobile {
        aspect-ratio: 1 / 1;
    }
}

/* --------------------------------------------------------------------------
   15. Forms
   -------------------------------------------------------------------------- */
.form-row,
.contact-form-row {
    margin-bottom: 1.1rem;
}

.form-row label,
.contact-form label {
    display: block;
    margin-bottom: .35rem;
    font-size: .9rem;
    font-weight: 600;
}

.form-row input:not([type="hidden"]),
.form-row textarea,
.contact-form input:not([type="hidden"]),
.contact-form textarea {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    padding: .6rem .8rem;
    margin: 0;
    border: 1px solid rgba(25, 22, 51, .5); /* 3.4:1 on white (1.4.11) */
    border-radius: var(--radius-s);
    background: var(--white);
    color: var(--ink);
    line-height: 1.4;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.form-row textarea,
.contact-form textarea {
    min-height: 9rem;
    resize: vertical;
}

.form-row input:focus-visible,
.form-row textarea:focus-visible,
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
    border-color: var(--blue);
    outline: 3px solid var(--navy);
    outline-offset: 1px;
}

.contact-form input[type="hidden"] {
    display: none;
}

.contact-form button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .9rem 1.6rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--blue);
    color: var(--white);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    cursor: pointer;
    margin: 0;
    transition: background-color .2s ease;
}

.contact-form button[type="submit"]:hover {
    background: var(--blue-700);
}

.contact-form .contact-form-row:last-child {
    margin-bottom: 0;
    text-align: left;
}

.email-sent {
    display: block;
    margin: 1.25rem auto;
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.footer {
    padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem;
    background: var(--navy);
    color: var(--white);
}

.footer * {
    color: var(--white);
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem 2rem;
    align-items: start;
}

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

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

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
    }

    .footer-brand {
        grid-column: auto;
    }
}

/* Between 1024 and 1199 px the five columns leave too little room for the
   longest links ("Mitgliederverwaltung"): narrower brand column and gap. */
@media (min-width: 1024px) and (max-width: 1199px) {
    .footer-grid {
        grid-template-columns: 1.1fr repeat(4, minmax(0, 1fr));
        column-gap: 1.25rem;
    }
}

.footer-brand > a {
    display: inline-block;
    border-radius: var(--radius-s);
}

.footer-logo {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
}

.footer-claim {
    margin: 1.25rem 0 0;
    font-size: .95rem;
    line-height: 1.5;
    opacity: .8;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    font-style: normal;
}

.footer-heading {
    margin: 0 0 .35rem;
    padding: 0;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--peach);
}

.footer-col a,
.footer-col span {
    padding-block: .2rem; /* ≥ 24 px tap target */
    font-size: .95rem;
    line-height: 1.4;
    text-decoration: none;
    opacity: .9;
}

.footer-col a:hover {
    opacity: 1;
    text-decoration: underline;
    text-decoration-color: var(--peach);
    text-underline-offset: .25em;
}

/* --------------------------------------------------------------------------
   17. Legacy aliases — classes the not-yet-migrated pages still use, mapped
   onto the v2 look. Delete each block once its pages are on the new classes.
   -------------------------------------------------------------------------- */

/* Sections */
.product-section,
.product-section--plain,
.product-advantages,
.product-cta,
.product-faq {
    margin: 0;
    padding-block: var(--space-section);
}

.product-section--plain + .product-section--plain,
.product-section:not(.product-section--plain) + .product-section--plain {
    padding-top: 0;
}

/* The hero CTA (or a scene hero, which holds its CTA row), plain product
   sections and the closing CTAs all sit on the page white, so the second of
   each such pair drops its top pad as well.
   Sections with their own surface keep both pads: the blush FAQ band
   (.section--blush), the navy .home-pricing band, the lavender
   .goodpay-functions band. */
:is(.product-hero-cta, .product-hero--scene) + .product-section:not(.section--blush):not(.section--lavender):not(.home-pricing):not(.goodpay-functions),
.product-section:not(.section--blush):not(.section--lavender):not(.home-pricing):not(.goodpay-functions) + :is(.product-section, .product-cta, .product-cta-end):not(.section--blush):not(.section--lavender):not(.home-pricing):not(.goodpay-functions) {
    padding-top: 0;
}

.product-advantages {
    background: var(--paper);
}

/* Surface modifiers on the legacy sections (they replaced inline
   style="background: …" on 2026-09-27). Paired with the legacy class so
   they beat .product-advantages above and page rules such as .goodnpo-how. */
:is(.product-section, .product-advantages).section--blush {
    background: var(--blush);
}

:is(.product-section, .product-advantages).section--lavender {
    background: var(--lavender);
}

.product-advantages h2 {
    margin-bottom: 2.5rem;
}

/* Hero of the old product pages: left aligned, no wave, header cleared. */
.product-hero {
    padding: calc(var(--header-h) + clamp(3rem, 6vw, 5rem)) 0 0;
    background: var(--white);
    text-align: left;
}

.product-hero .product-logo {
    display: block;
    width: 100%;
    max-width: 240px;
    margin: 0 0 1.5rem;
}

.product-hero .product-logo.app-icon {
    --app-icon-size: 4rem;
    max-width: none;
    width: var(--app-icon-size);
    height: var(--app-icon-size);
    margin: 0 0 1.5rem;
}

.product-hero h1 {
    margin: 0 0 1rem;
    max-width: 18ch;
}

.product-subtitle {
    margin: 0 0 1rem;
    font-size: clamp(1.125rem, 1.6vw, 1.3rem);
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 62ch;
}

.product-description {
    max-width: 62ch;
    margin: 0 0 1rem;
    line-height: 1.6;
    color: var(--ink);
}

.product-hero-cta {
    margin: 0;
    padding: 1.25rem 0 var(--space-section);
    text-align: left;
}

.product-hero-cta .cta-button-row {
    justify-content: flex-start;
    align-items: center;
}

.product-cta-end {
    margin: 0;
    padding: var(--space-section) 0;
    text-align: center;
}

.product-cta-end .cta-button-row {
    justify-content: center;
}

.product-cta {
    text-align: center;
}

.product-cta h2 {
    margin-bottom: 2rem;
}

.product-cta-wrapper {
    max-width: var(--content);
}

.product-cta p,
.product-cta-end .section-subtitle {
    max-width: 62ch;
    margin-inline: auto;
}

.product-cta .btn {
    display: flex;
    width: fit-content;
    margin-inline: auto;
}

.product-cta .product-back-link {
    display: block;
    width: fit-content;
    margin-inline: auto;
}

.product-back-link {
    display: inline-block;
    margin-top: 2rem;
    font-weight: 600;
    text-decoration: none;
}

.product-back-link:hover {
    text-decoration: underline;
}

/* Grids */
.product-grid-3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    width: 100%;
    margin: 0;
}

@media (min-width: 640px) {
    .product-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

/* In two columns a group of three would leave its last card alone (2+1).
   It takes the whole row instead; its drawing panel keeps its neighbours'
   height and its text the 62ch measure. */
@media (min-width: 640px) and (max-width: 1023px) {
    .product-grid-3 > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .product-grid-3 > :last-child:nth-child(odd) .card-art {
        aspect-ratio: 640 / 150;
    }

    .product-grid-3 > :last-child:nth-child(odd) p {
        max-width: 62ch;
    }
}

@media (min-width: 1024px) {
    .product-grid-3:not(.product-grid--four) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Cards */
.product-card,
.product-advantage-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-1);
    padding: 1.5rem;
    color: var(--ink);
    text-align: left;
    transition: transform .2s ease, box-shadow .2s ease;
}

.product-card:hover,
.product-advantage-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
}

.product-card h3,
.product-advantage-card h3 {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin: 0 0 .625rem;
    font-size: 1.2rem;
    line-height: 1.25;
}

/* Phones: one step smaller, so "Mitgliederversammlung" fits a card at 320 px. */
@media (max-width: 480px) {
    .product-card h3,
    .product-advantage-card h3 {
        font-size: clamp(1.05rem, 5.2vw, 1.2rem);
    }
}

.product-card p,
.product-advantage-card p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink-2);
}

.product-card p + p {
    margin-top: .75rem;
}

.product-card img:not(.app-icon) {
    height: 3rem;
    width: auto;
    margin-bottom: 1rem;
}

.product-card .frappe-app-logo,
.product-card .app-icon {
    margin-bottom: 1rem;
}

.product-card.product-card--icon {
    padding: 1.5rem;
}

.product-card.product-card--icon .card-icon {
    margin-top: -.1rem;
}

.product-card.product-card--cost {
    background: var(--navy);
    border-color: transparent;
}

.product-card.product-card--cost h3,
.product-card.product-card--cost p,
.product-card.product-card--cost strong {
    color: var(--white);
}

.product-card.product-card--cost .card-icon {
    background: rgba(255, 255, 255, .14);
    color: var(--white);
}

a.product-card--link {
    display: flex;
    text-decoration: none;
    color: inherit;
}

a.product-card--link:hover {
    color: inherit;
}

.product-highlight {
    border: 2px solid var(--blue);
}

.product-highlight-link {
    display: inline-block;
    margin-top: 1rem;
    font-weight: 700;
    text-decoration: none;
}

/* Buttons */
/* A button row inherits the alignment of the block it sits under, not its
   button count: left under a left-aligned text column, centred under a card
   grid, a centred header or a closing CTA (.product-cta, .product-cta-end).
   Add .cta-button-row--center for the grid case. */
.cta-button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;
}

.product-cta .cta-button-row,
.product-cta-end .cta-button-row {
    justify-content: center;
}

.cta-button-row--center {
    justify-content: center;
}

.cta-button-row .link-button {
    display: inline-flex;
    width: auto;
    max-width: 100%;
}

.link-button {
    color: inherit;
    text-decoration: none;
}

.button,
.contact-button,
.cost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: .9rem 1.6rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--blue);
    color: var(--white);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.button:hover,
.contact-button:hover,
.cost-button:hover,
.link-button:hover .contact-button,
.link-button:hover .button,
.cost-option:hover .cost-button {
    background: var(--blue-700);
    color: var(--white);
}

.contact-button img {
    width: 2.25rem;
    height: 2.25rem;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
}

.contact-button:has(img) {
    padding-left: .55rem;
}

/* Contact section legacy hooks */
.contact-booking-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.arrow-up {
    display: none;
}

/* Blog, AGB, thank-you, misc — inherit type + container only. */
.agb {
    padding: calc(var(--header-h) + 3rem) 0 4rem;
}

/* Legal pages (/agb/, /datenschutz/): read closely, so the text runs about
   70 characters a line instead of 120 across the container. Sora's "0" is
   wide: the §4 maximum of 62ch is about 86 characters, 52ch about 70. The
   numbered sections are headings in the text, not page sections: the sizes
   the phone override below always used, with air above each one. The h1
   keeps the display size. */
.agb :is(p, ul) {
    max-width: 52ch;
}

.agb h1 {
    margin-bottom: 1.5rem;
}

.agb h2 {
    margin: 2.5rem 0 .75rem;
    font-size: 1.3rem;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.agb h3 {
    margin: 1.75rem 0 .5rem;
    font-size: 1.1rem;
}

body.thankyou {
    background: var(--navy);
}

body.thankyou .popup {
    width: min(90%, 32rem);
    margin: calc(var(--header-h) + 4rem) auto 0;
    padding: 2rem;
    background: var(--white);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-2);
    text-align: center;
}

body.thankyou .popup a {
    display: inline-block;
    padding: .9rem 1.6rem;
    border-radius: var(--radius-pill);
    background: var(--blue);
    color: var(--white);
    text-decoration: none;
}

.powered-by-dynamics {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 3rem;
}

.dynamics-365-logo {
    height: 3rem;
}

.payment {
    width: 100%;
}

/* --------------------------------------------------------------------------
   17b. Homepage — the 2026-09-05 structure on the v2 foundation
   -------------------------------------------------------------------------- */

/* Hero (.claim): copy left, the drawn fire + laptop right, blush surface. */
.claim {
    padding: calc(var(--header-h) + clamp(3rem, 6vw, 5rem)) 0 var(--space-section);
    background: var(--blush);
    color: var(--navy);
}

.claim .content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 900px) {
    .claim .content {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: clamp(2rem, 5vw, 4.5rem);
    }
}

.claim-left {
    min-width: 0;
}

.claim h1 {
    margin: 0 0 1.25rem;
}

/* Its words are short, so on phones it keeps a size clearly above the h2
   (the general phone scale is sized for 20-letter compounds). */
@media (max-width: 480px) {
    .claim h1 {
        font-size: clamp(1.9rem, 9vw, 2.5rem);
    }
}

.claim h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    line-height: 1.3;
    letter-spacing: -.01em;
}

.claim p {
    max-width: 62ch;
    margin: 0 0 1rem;
}

.claim .btn-row {
    margin-top: 1.75rem;
}

/* Below 900 px the drawing follows the CTA row (Benedikt, 2026-09-28: show
   it on phones): the booking button already ends about 20 px above the fold
   at 390 x 800, so nothing fits above it. */
.claim-right {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

/* The drawn laptop with the brand fire (inc/scenes.php, key "hero"), the same
   drawing as on /fuer-wen/. Directly on the blush surface, no card. */
.hero-art {
    width: 100%;
}

@media (max-width: 899px) {
    .claim-right {
        align-items: flex-start;
    }

    .hero-art {
        max-width: 22rem;
    }
}

/* "Für wen": one card per audience with its drawing, right after the hero.
   The whole card is the link (the link's ::after covers it); js/scenes.js
   plays each drawing's entrance once when the card scrolls into view. */
.audience-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}

@media (min-width: 900px) {
    .audience-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.audience-card {
    position: relative;
    overflow: hidden;
    padding: 0;
}

.audience-card__art {
    border-bottom: 1px solid var(--line);
    background: var(--white);
}

.audience-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.25rem 1.5rem 1.5rem;
}

.audience-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.audience-card:focus-within {
    outline: 3px solid var(--navy);
    outline-offset: 2px;
}

.audience-card__link:focus-visible {
    outline: none;
}

/* Module cards (homepage "Bereiche", /products/goodnpo/): an illustration
   panel on a site tint, bleeding to the card's top edge (inc/scenes/modules/). */
.card-art {
    margin: -1.5rem -1.5rem 1.1rem;
    aspect-ratio: 320 / 150;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

/* A whole scene (inc/scenes.php) as card header: the drawing's own frame. */
.card-art--scene {
    aspect-ratio: 480 / 340;
}

.card-art--blush { background: var(--blush); }
.card-art--lavender { background: var(--lavender); }
.card-art--rose { background: var(--rose); }

.module-art-svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* "Aus der Praxis": one wide card per showcase (/praxis/…), drawing left,
   text right; the whole card is the link, like the audience cards. */
.praxis-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    margin-top: 2.5rem;
    padding: 0;
}

@media (min-width: 900px) {
    .praxis-card {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    }
}

.praxis-card__art {
    position: relative;
    min-height: 15rem;
    overflow: hidden;
    background: var(--peach-100);
}

.praxis-card__art svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.praxis-card__chat {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.praxis-card__msg {
    align-self: flex-start;
    max-width: 85%;
    padding: .45rem .7rem;
    border-radius: .9rem .9rem .9rem .25rem;
    background: var(--white);
    box-shadow: var(--shadow-1);
    font-size: .85rem;
    line-height: 1.35;
    color: var(--ink);
}

.praxis-card__msg--in {
    align-self: flex-end;
    border-radius: .9rem .9rem .25rem .9rem;
    background: var(--peach-100);
}

.praxis-card__body {
    display: flex;
    flex-direction: column;
    padding: 1.75rem 2rem 2rem;
}

.praxis-card__body h3 {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    line-height: 1.2;
}

.praxis-card__meta {
    margin-top: .75rem;
    font-size: .9rem;
    color: var(--ink-3);
}

.praxis-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.praxis-card:focus-within {
    outline: 3px solid var(--navy);
    outline-offset: 2px;
}

.praxis-card__link:focus-visible {
    outline: none;
}

/* Two white sections in a row: the second drops its top padding. */
.audience-section + #products {
    padding-top: 0;
}

/* Produkte: the Good NPO tile with its overview drawing. */
.products-hero {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 0 0 1.5rem;
    padding: 2rem 1.5rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-1);
    color: var(--ink);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.products-hero:hover,
.products-hero:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    color: var(--ink);
}

@media (min-width: 900px) {
    .products-hero {
        flex-direction: row;
        align-items: center;
        gap: 3rem;
        padding: 2.5rem;
    }
}

.products-hero-text {
    flex: 1 1 40%;
    min-width: 0;
}

.products-hero-text h2 {
    margin: 0 0 .75rem;
    font-size: clamp(1.5rem, 2.2vw, 1.8rem);
}

.products-hero-text p {
    margin: 0 0 1.5rem;
    color: var(--ink-2);
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    padding: .9rem 1.6rem;
    border-radius: var(--radius-pill);
    background: var(--blue);
    color: var(--white);
    font-weight: 600;
    line-height: 1.2;
    transition: background-color .2s ease;
}

.products-hero:hover .hero-cta {
    background: var(--blue-700);
}

.hero-cta-mobile {
    align-self: flex-start;
}

@media (min-width: 900px) {
    .hero-cta-mobile {
        display: none;
    }
}

@media (max-width: 899px) {
    .products-hero-text .hero-cta {
        display: none;
    }
}

/* The overview drawing (inc/scenes/hero/goodnpo.php): the laptop with the six
   areas around it, on a blush panel; js/scenes.js plays its entrance. */
.products-hero-art {
    flex: 1 1 55%;
    width: 100%;
    min-width: 0;
    padding: .5rem;
    background: var(--blush);
    border-radius: var(--radius-m);
}

/* Product cards carry the real app icon above the title. */
.card > .app-icon,
.card > img.card-logo {
    margin-bottom: 1rem;
}

.card-logo {
    display: block;
    width: auto;
    height: 3rem;
    /* .card is a column flex container; without this, align-items:stretch
       stretches the img box full-width and the SVG letterboxes itself
       centered inside it. */
    align-self: flex-start;
}

/* Referenzen: one quiet logo strip, then a scroll-snap row of quotes.
   The SVGs are cropped to their ink (they sat on padded 3:2 canvases, so
   DEZA or FLYER rendered as specks next to a full-height Villa Maria), and
   every logo fits one box: compact marks fill its height, wordmarks its
   width. The rows are centred, so the last one is not ragged. */
.logo-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem 2.75rem;
    margin: 0 0 2.5rem;
    padding: 0;
    list-style: none;
}

.logo-strip a {
    display: flex;
    align-items: center;
    height: 2.5rem;
    border-radius: var(--radius-s);
}

.logo-strip img {
    display: block;
    width: auto;
    height: 100%;
    max-width: 8.5rem;
    object-fit: contain;
    /* Grayscale alone left the pale marks (mediationskollektiv #B4CFB0,
       Zeitgut #C4C600) at 1.5-1.8:1 on rose. Darkening brings the lightest
       ink to 4.0:1 and the rest higher (filter math, sRGB). Stopgap until
       the SVGs are cropped and exported as navy monochrome. */
    filter: grayscale(1) brightness(.45);
    opacity: .8;
    transition: opacity .2s ease, filter .2s ease;
}

.logo-strip a:hover img,
.logo-strip a:focus-visible img {
    filter: none;
    opacity: 1;
}

/* Phones: fewer logos per line so each one stays legible. The logos sit on
   3:2 canvases with their own padding, so a 1.75rem row box left the artwork
   itself near 30px wide - unreadable for the wordier marks (DEZA, kibesuisse).
   A grid keeps the columns even instead of leaving a ragged last row. */
@media (max-width: 639px) {
    .logo-strip {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
        gap: 1.25rem 1rem;
        margin-bottom: 2rem;
    }

    .logo-strip a {
        height: 3rem;
        justify-content: center;
    }

    .logo-strip img {
        max-width: 100%;
    }
}

.quote-row {
    position: relative; /* contains the sr-only spans, else they widen the page */
    display: flex;
    gap: 1.25rem;
    /* overflow-x:auto also clips vertically, so leave room for the card
       shadow (24 px at rest, 48 px on hover) and pull it back with margin. */
    margin: -1rem 0 -2rem;
    padding: 1rem 0 3.5rem;
    /* Same trick sideways: with no inline padding the scroll box clipped the
       shadow flush against the first and last card. Bleeding into --gutter is
       the most room available without ever pushing past the page edge, since
       that is exactly the padding .content holds. */
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    scroll-padding-inline: var(--gutter);
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(25, 22, 51, .25) transparent;
}

/* Pull the whole shadow reserve back so the rose band's bottom gap matches
   its top. ul:last-child (0,1,1) zeroes the bottom margin above, so this
   needs the type selector to land; without it the band ended 56px deep. */
ul.quote-row {
    margin-bottom: -3.5rem;
}

.quote-row > li {
    display: flex;
    flex: 0 0 min(26rem, 85%);
    scroll-snap-align: start;
}

/* Two quotes, two slots (Benedikt, 2026-09-28): from 640 px they share the
   row half and half instead of leaving a third slot empty. A third quote
   would scroll in the same two slots. */
@media (min-width: 640px) {
    .quote-row > li {
        flex-basis: calc((100% - 1.25rem) / 2);
    }
}

.quote {
    width: 100%;
    gap: 1.25rem;
}

.quote blockquote {
    margin: 0;
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--navy);
}

.quote__meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: auto;
}

.quote__logo {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border-radius: .6rem;
    object-fit: contain;
}

.quote__who {
    line-height: 1.3;
}

.quote__name {
    display: block;
    font-weight: 700;
}

.quote .card__link {
    padding-top: 0;
}

/* Team: round portraits, two by two, closing quote. */
.team-photos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem 4rem;
}

@media (min-width: 640px) {
    .team-photos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.team-photo {
    text-align: center;
}

.team-photo img {
    display: block;
    width: min(60%, 14rem);
    height: auto;
    margin: 0 auto 1rem;
    border-radius: 50%;
}

.team-photo h3 {
    margin: 0;
}

.team-photo h4 {
    margin: 0 0 .5rem;
    color: var(--ink-2);
}

.team-photo p {
    margin: 0;
    text-align: left;
    color: var(--ink-2);
}

.team-closing {
    max-width: 800px;
    margin: 2.5rem auto 0;
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 600; /* Sora has no italic; a slanted face would be faked */
    line-height: 1.4;
    text-align: center;
    quotes: "\201E" "\201C";
}

.team-closing::before { content: open-quote; }
.team-closing::after { content: close-quote; }

/* Wir verstehen NPOs + SpendeDirekt box. */
#we-understand .content > p {
    max-width: 70ch;
}

.spendedirekt-box {
    display: block;
    margin-top: 2rem;
    padding: 2rem;
    background: var(--blue);
    border-radius: var(--radius-m);
    color: var(--white);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.spendedirekt-box:hover,
.spendedirekt-box:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    color: var(--white);
}

.spendedirekt-box p {
    max-width: 70ch;
    margin: 0 0 1.5rem;
    color: var(--white);
}

.spendedirekt-logo {
    display: block;
    width: 15rem;
    height: auto;
    margin-bottom: 1.25rem;
}

.spendedirekt-box .cost-button {
    background: var(--white);
    color: var(--blue);
}

.spendedirekt-box:hover .cost-button {
    background: var(--peach-100);
    color: var(--navy);
}

/* Kontakt: white form card, address column, booking button below. */
.contact-content {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}

@media (min-width: 900px) {
    .contact-content {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 3rem;
    }
}

.contact-form {
    padding: 2rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-1);
}

.contact-info p {
    margin: 0 0 1rem;
}

.contact-info a {
    font-weight: 600;
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}

#contact .contact-booking-wrapper {
    justify-content: center;
    margin-top: 3rem;
}

/* Legal pages: smaller headings on phones (folded in from responsive.css). */
@media (max-width: 500px) {
    .agb h1 { font-size: clamp(1.3rem, 6.6vw, 1.6rem); }
}

/* --------------------------------------------------------------------------
   18. Motion — reveal on scroll (progressive enhancement) + reduced motion
   -------------------------------------------------------------------------- */
html.js .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .4s ease-out, transform .4s ease-out;
}

html.js .reveal.active {
    opacity: 1;
    transform: none;
}

.reveal-children > *:nth-child(2) { transition-delay: .05s; }
.reveal-children > *:nth-child(3) { transition-delay: .1s; }
.reveal-children > *:nth-child(4) { transition-delay: .12s; }
.reveal-children > *:nth-child(5) { transition-delay: .15s; }
.reveal-children > *:nth-child(6) { transition-delay: .18s; }
.reveal-children > *:nth-child(7) { transition-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    html.js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    html.js :is(.hero, [data-hero]) [data-stagger] {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .nav {
        animation: none;
    }

    .card,
    .product-card,
    .cost-option,
    .blog-card,
    .btn,
    .button,
    .contact-button,
    a {
        transition: none;
    }

    .card:hover,
    .product-card:hover,
    .cost-option:hover,
    .blog-card:hover {
        transform: none;
    }
}