/* ==========================================================================
   goodvantage.ch — Design System v2 foundation
   Contract: WEBSITE_DESIGN.md (tokens, type, layout, components).
   Order: tokens · fonts · reset · type · layout · buttons · cards · header ·
   hero · Persona-Karte · 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: #7B7890;
    --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(--peach);
    outline-offset: 2px;
}

::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: manual;
}

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

@media (max-width: 480px) {
    h1,
    h2,
    .display,
    .section-title {
        hyphens: auto;
    }
}

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

.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, peach-100, navy Lucide glyph. */
.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(--peach-100);
    color: var(--navy);
    vertical-align: middle;
    margin-top: -.15rem;
}

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

@media (max-width: 899px) {
    .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;
    }
}

/* --------------------------------------------------------------------------
   10. Persona-Karte — the one illustration on the site.
   Full card: contact head, role chips, module tiles; chips and their tile
   light up in sequence (8 s loop). Mini: chips only plus the one tile that
   matches data-highlight, no animation.
   -------------------------------------------------------------------------- */
.persona-card {
    --pc-step: 1.6s;
    position: relative;
    display: grid;
    gap: 1.25rem;
    width: 100%;
    max-width: 30rem;
    padding: 1.5rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-2);
    color: var(--ink);
    text-align: left;
}

.persona-card__head {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.persona-card__avatar {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--navy);
    color: var(--white);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.persona-card__who {
    min-width: 0;
}

.persona-card__name {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
}

.persona-card__meta {
    display: block;
    margin-top: .15rem;
    font-size: .9rem;
    font-weight: 500;
    color: var(--ink-3);
}

.persona-card__badge {
    margin-left: auto;
    flex: 0 0 auto;
    padding: .35rem .65rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
}

.persona-card__roles {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.persona-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .42rem .85rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--paper);
    color: var(--ink);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}

.persona-chip::before {
    content: "";
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--ink-3);
    transition: background-color .35s ease;
}

.persona-card__modules {
    display: grid;
    gap: .35rem;
    margin: 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--line);
    list-style: none;
}

.persona-module {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .65rem;
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    transition: background-color .35s ease, border-color .35s ease;
}

.persona-module img {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: .45rem;
}

.persona-module__text {
    min-width: 0;
    line-height: 1.25;
}

.persona-module__name {
    display: block;
    font-size: .95rem;
    font-weight: 600;
}

.persona-module__meta {
    display: block;
    margin-top: .1rem;
    font-size: .82rem;
    font-weight: 500;
    color: var(--ink-3);
}

/* Static "on" state (mini highlight, reduced motion, hover). */
.persona-chip.is-on,
.persona-card--mini[data-highlight="mitglied"] .persona-chip[data-role="mitglied"],
.persona-card--mini[data-highlight="spende"] .persona-chip[data-role="spende"],
.persona-card--mini[data-highlight="event"] .persona-chip[data-role="event"],
.persona-card--mini[data-highlight="newsletter"] .persona-chip[data-role="newsletter"],
.persona-card--mini[data-highlight="portal"] .persona-chip[data-role="portal"] {
    background: var(--peach-100);
    border-color: var(--peach);
    color: var(--navy);
}

.persona-chip.is-on::before,
.persona-card--mini[data-highlight="mitglied"] .persona-chip[data-role="mitglied"]::before,
.persona-card--mini[data-highlight="spende"] .persona-chip[data-role="spende"]::before,
.persona-card--mini[data-highlight="event"] .persona-chip[data-role="event"]::before,
.persona-card--mini[data-highlight="newsletter"] .persona-chip[data-role="newsletter"]::before,
.persona-card--mini[data-highlight="portal"] .persona-chip[data-role="portal"]::before {
    background: var(--peach);
}

.persona-module.is-on {
    background: var(--peach-100);
    border-color: rgba(247, 174, 131, .55);
}

/* Loop: each role is on for ~1.3 s, one after the other, 8 s total. */
.persona-card--animate .persona-chip {
    animation: persona-chip-on 8s ease-in-out infinite;
}

.persona-card--animate .persona-chip::before {
    animation: persona-dot-on 8s ease-in-out infinite;
}

.persona-card--animate .persona-module {
    animation: persona-module-on 8s ease-in-out infinite;
}

.persona-card--animate [data-role="mitglied"],
.persona-card--animate [data-role="mitglied"]::before { animation-delay: 0s; }
.persona-card--animate [data-role="spende"],
.persona-card--animate [data-role="spende"]::before { animation-delay: calc(var(--pc-step) * 1); }
.persona-card--animate [data-role="event"],
.persona-card--animate [data-role="event"]::before { animation-delay: calc(var(--pc-step) * 2); }
.persona-card--animate [data-role="newsletter"],
.persona-card--animate [data-role="newsletter"]::before { animation-delay: calc(var(--pc-step) * 3); }
.persona-card--animate [data-role="portal"],
.persona-card--animate [data-role="portal"]::before { animation-delay: calc(var(--pc-step) * 4); }

@keyframes persona-chip-on {
    0%, 21%, 100% {
        background-color: var(--paper);
        border-color: transparent;
        color: var(--ink);
    }
    3%, 17% {
        background-color: var(--peach-100);
        border-color: var(--peach);
        color: var(--navy);
    }
}

@keyframes persona-dot-on {
    0%, 21%, 100% { background-color: var(--ink-3); }
    3%, 17% { background-color: var(--peach); }
}

@keyframes persona-module-on {
    0%, 21%, 100% {
        background-color: transparent;
        border-color: transparent;
    }
    3%, 17% {
        background-color: var(--peach-100);
        border-color: rgba(247, 174, 131, .55);
    }
}

/* Mini variant (capability-page heroes). */
.persona-card--mini {
    max-width: 26rem;
    padding: 1.25rem;
    gap: 1rem;
    box-shadow: var(--shadow-1);
}

.persona-card--mini .persona-card__avatar {
    width: 2.5rem;
    height: 2.5rem;
    font-size: .85rem;
}

.persona-card--mini .persona-card__name {
    font-size: 1rem;
}

.persona-card--mini .persona-chip {
    color: var(--ink-2);
}

.persona-card--mini .persona-module {
    display: none;
}

.persona-card--mini[data-highlight="mitglied"] .persona-module[data-role="mitglied"],
.persona-card--mini[data-highlight="spende"] .persona-module[data-role="spende"],
.persona-card--mini[data-highlight="event"] .persona-module[data-role="event"],
.persona-card--mini[data-highlight="newsletter"] .persona-module[data-role="newsletter"],
.persona-card--mini[data-highlight="portal"] .persona-module[data-role="portal"] {
    display: flex;
    background: var(--peach-100);
    border-color: rgba(247, 174, 131, .55);
}

.persona-card--mini .persona-card__modules {
    padding-top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .persona-card--animate .persona-chip,
    .persona-card--animate .persona-chip::before,
    .persona-card--animate .persona-module {
        animation: none;
    }

    .persona-card--animate .persona-chip {
        background: var(--peach-100);
        border-color: var(--peach);
        color: var(--navy);
    }

    .persona-card--animate .persona-chip::before {
        background: var(--peach);
    }
}

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

.band--navy .btn--secondary,
.home-pricing .btn--secondary,
.home-pricing .contact-button.button {
    background: var(--white);
    color: var(--navy);
    border-color: transparent;
}

.band--navy .btn--secondary:hover,
.home-pricing .contact-button.button:hover,
.home-pricing .link-button:hover .contact-button {
    background: var(--peach-100);
    color: var(--navy);
}

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

.cost-text-content {
    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;
    margin-top: 1.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;
}

/* Square clip on small screens: add .mac-body--square-mobile and give the
   <video> a 1:1 <source media="(max-width: 640px)"> first. */
@media (max-width: 640px) {
    .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, .18);
    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(--peach);
    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;
    }
}

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

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

.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 {
    max-width: 62ch;
    margin-inline: auto;
}

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

.product-cta .product-back-link,
.garuda-contact-content .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;
    }
}

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

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

.blog {
    padding: calc(var(--header-h) + 3rem) 0 4rem;
    max-width: 800px;
    margin-inline: auto;
}

.blog-page-title {
    margin: 0 0 1rem;
}

.blog-page-intro {
    margin-bottom: 3rem;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--ink-2);
}

.blog-post-title {
    margin: 3rem 0 .5rem;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.15;
}

.blog-card {
    display: block;
    overflow: hidden;
    margin: 0 0 2rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    color: var(--ink);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.blog-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-1);
    color: var(--ink);
}

.blog-card-image {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.blog-card-body {
    padding: 1.5rem;
}

.blog-card-body .blog-post-title {
    margin-top: 0;
}

.blog-card-summary {
    margin: 1rem 0 1.25rem;
    line-height: 1.6;
}

.blog-card-more {
    font-weight: 600;
    color: var(--blue);
}

@media (max-width: 768px) {
    .blog-card-image { height: 180px; }
}

.blog small {
    display: block;
    margin-bottom: 1rem;
    font-size: .9rem;
    color: var(--ink-3);
}

.blogtext {
    line-height: 1.7;
}

.blogtext img {
    max-width: 100%;
    border-radius: var(--radius-s);
}

.blogtext em {
    font-weight: normal;
    font-style: italic;
}

.blogtext h1,
.blogtext h2,
.blogtext h3 {
    margin: 2rem 0 .5rem;
}

.blogtext p {
    margin: 1rem 0;
}

.rssLink {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 2rem;
    text-decoration: none;
}

.rssLink img {
    width: 30px;
    height: 30px;
}

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, fire + device mockup 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;
}

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

.claim-right {
    position: relative;
    display: none;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

@media (min-width: 900px) {
    .claim-right {
        display: flex;
    }
}

img.empower {
    width: clamp(120px, 14vw, 200px);
    height: auto;
}

img.macbook-iphone {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    margin-top: -3.5rem;
}

/* Produkte: the Good NPO tile with its module chips. */
.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;
    }
}

.module-grid {
    flex: 1 1 55%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    width: 100%;
}

.module-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: 1rem .5rem;
    background: var(--lavender);
    border-radius: var(--radius-s);
    text-align: center;
}

.module-item img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.module-item span {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink);
}

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

/* Referenzen: one quiet logo strip, then a scroll-snap row of quotes. */
.logo-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 2.5rem;
    margin: 0 0 2.5rem;
    padding: 0;
    list-style: none;
}

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

.logo-strip img {
    display: block;
    width: auto;
    height: 100%;
    max-width: 11rem;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .9;
    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: 4rem;
        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;
}

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

.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-style: italic;
    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: 1.6rem; }
    .agb h2 { font-size: 1.3rem; }
    .agb h3 { font-size: 1.1rem; }
}

/* --------------------------------------------------------------------------
   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,
    .persona-chip,
    .persona-module,
    a {
        transition: none;
    }

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