/*!
 * Viewnamic Site — layout, header, footer and page-specific styles.
 * Builds on viewnamic-ui (tokens + components).
 */

/* ---------- Document ---------- */
.vn-root { min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }
.vn-main { flex: 1 0 auto; outline: none; }
.vn-spacer { height: clamp(2.5rem, 2rem + 2vw, 4rem); }
.vn-fineprint { margin-top: 1.25rem; font-size: var(--vnm-fs-xs); color: var(--vnm-text-muted); text-align: center; }
.vn-section--tight-top { padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.vn-section--state { min-height: 62vh; display: flex; align-items: center; }
.vn-section--state > .vn-container { width: 100%; }

/* Headings inside site-rendered content (not the application pages, which bring their own CSS). */
.vn-main:not(.vn-main--app) :is(h1, h2, h3, h4, h5, h6) { font-family: var(--vnm-font-heading); font-weight: 700; letter-spacing: -.02em; }
.vn-main:not(.vn-main--app) :is(p, li, dd, td, th, blockquote, figcaption) { font-family: var(--vnm-font-body); }

/* ---------- Header ---------- */
.vn-header {
    position: sticky; top: 0; z-index: 900;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.admin-bar .vn-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .vn-header { top: 0; } }
.vn-header.is-scrolled { border-bottom-color: var(--vnm-border); box-shadow: 0 6px 24px rgba(0, 61, 61, .06); background: rgba(255, 255, 255, .94); }
.vn-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--vnm-header-height); }
.vn-header__brand { display: inline-flex; flex: none; border-radius: 8px; }
.vn-header__brand img { width: auto; height: 34px; }
.vn-header__actions { margin-left: auto; }
.vn-header__toggle {
    margin-left: auto; display: none;
    width: 44px; height: 44px; border: 1px solid var(--vnm-border); border-radius: 12px;
    background: #fff; color: var(--vnm-secondary); cursor: pointer; place-items: center;
}
.vn-header__toggle-close { display: none; }
.vn-header.is-open .vn-header__toggle-open { display: none; }
.vn-header.is-open .vn-header__toggle-close { display: inline; }

.vn-nav { flex: 1; display: flex; align-items: center; gap: 1rem; }
.vn-nav__list { list-style: none; margin: 0 auto; padding: 0; display: flex; align-items: center; gap: .25rem; }
.vn-nav__list--app { margin-left: 1rem; margin-right: auto; }
.vn-nav__item { position: relative; }
.vn-nav__link {
    display: inline-flex; align-items: center; gap: .3rem; min-height: 44px;
    padding: .55rem .85rem; border: 0; border-radius: 10px; background: none; cursor: pointer;
    font-family: var(--vnm-font-heading); font-size: .96875rem; font-weight: 600;
    color: var(--vnm-text-strong) !important; text-decoration: none !important;
    transition: background .15s, color .15s;
}
.vn-nav__link:hover { background: var(--vnm-bg-secondary); color: var(--vnm-secondary) !important; }
.vn-nav__link.is-current { color: var(--vnm-secondary) !important; text-decoration: underline 2px var(--vnm-primary) !important; text-underline-offset: .45em; }

/* Dropdown trigger: the label links to the hub page, the chevron button opens the panel. */
.vn-nav__split { display: flex; align-items: center; border-radius: 10px; transition: background .15s; }
.vn-nav__split .vn-nav__link { padding-right: .3rem; border-radius: 10px 0 0 10px; }
.vn-nav__split .vn-nav__link:hover { background: none; }
.vn-nav__item--has-children:hover > .vn-nav__split,
.vn-nav__item--has-children.is-open > .vn-nav__split { background: var(--vnm-bg-secondary); }
.vn-nav__item--has-children:hover > .vn-nav__split .vn-nav__link,
.vn-nav__item--has-children.is-open > .vn-nav__split .vn-nav__link { color: var(--vnm-secondary) !important; }
.vn-nav__item--has-children.is-current > .vn-nav__split .vn-nav__link { color: var(--vnm-secondary) !important; }
.vn-nav__chevron {
    display: inline-grid; place-items: center; width: 32px; min-height: 44px; margin: 0; padding: 0 .35rem 0 0;
    border: 0; border-radius: 0 10px 10px 0; background: none; cursor: pointer; color: var(--vnm-text-muted);
}
.vn-nav__chevron:hover { color: var(--vnm-secondary); }
.vn-nav__chevron[aria-expanded="true"] { color: var(--vnm-secondary); }
.vn-nav__chevron[aria-expanded="true"] .vn-icon { transform: rotate(180deg); }

/* Panel entries (desktop mega menu and mobile accordion). */
.vn-nav__sublist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; align-content: start; }
.vn-nav__sublink {
    display: flex; gap: .85rem; align-items: flex-start; min-height: 44px; padding: .75rem .8rem; border-radius: 14px;
    color: var(--vnm-text) !important; text-decoration: none !important; transition: background .15s;
}
.vn-nav__sublink:hover, .vn-nav__sublink[aria-current] { background: var(--vnm-bg-tint); }
.vn-nav__subicon {
    flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
    background: var(--vnm-bg-secondary); color: var(--vnm-secondary); transition: background .15s, color .15s;
}
.vn-nav__sublink:hover .vn-nav__subicon, .vn-nav__sublink[aria-current] .vn-nav__subicon { background: var(--vnm-secondary); color: #fff; }
.vn-nav__subtext { display: grid; gap: .15rem; min-width: 0; }
.vn-nav__subtext strong { font-family: var(--vnm-font-heading); font-size: .9375rem; font-weight: 700; line-height: 1.35; color: var(--vnm-text-strong); }
.vn-nav__sublink:hover strong, .vn-nav__sublink[aria-current] strong { color: var(--vnm-secondary); }
/* Descriptions wrap in full (no line clamp): German copy needs 3–4 lines and must not end mid-sentence. */
.vn-nav__subtext small { font-size: .8125rem; line-height: 1.45; color: var(--vnm-text-muted); text-wrap: pretty; }

/* Panels with titled columns (Solutions: main use cases | main industries). */
.vn-mega__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; align-content: start; }
.vn-mega__col { display: flex; flex-direction: column; min-width: 0; }
.vn-mega__col-title {
    margin: .35rem .8rem .3rem; font-family: var(--vnm-font-heading); font-size: .75rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--vnm-text-muted);
}
.vn-nav__sublist--col { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
.vn-nav__sublist--col .vn-nav__sublink { align-items: center; gap: .7rem; padding: .45rem .8rem; }
.vn-nav__sublist--col .vn-nav__subicon { width: 32px; height: 32px; border-radius: 10px; }
.vn-nav__sublist--col .vn-nav__subtext strong { font-size: .9375rem; }
.vn-mega__col-all {
    display: inline-flex; align-self: flex-start; align-items: center; gap: .4rem; min-height: 44px; margin-top: .15rem; padding: .4rem .8rem;
    border-radius: 10px; font-family: var(--vnm-font-heading); font-size: .875rem; font-weight: 700;
    color: var(--vnm-secondary) !important; text-decoration: none !important; transition: background .15s;
}
.vn-mega__col-all:hover, .vn-mega__col-all[aria-current] { background: var(--vnm-bg-secondary); }
.vn-mega__col-all .vn-icon { transition: transform .2s var(--vnm-ease); }
.vn-mega__col-all:hover .vn-icon { transform: translateX(3px); }

/* Highlight card and footer link of a panel. */
.vn-mega__card {
    position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.1rem 1rem;
    border-radius: 16px; background: linear-gradient(160deg, var(--vnm-bg-secondary) 0%, #E2EFEA 100%);
    color: var(--vnm-text) !important; text-decoration: none !important; transition: box-shadow .2s, transform .2s;
}
.vn-mega__card:hover { box-shadow: var(--vnm-shadow-md); }
.vn-mega__card-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: .4rem; border-radius: 12px; background: #fff; color: var(--vnm-primary-strong); box-shadow: var(--vnm-shadow-sm); }
.vn-mega__card-title { font-family: var(--vnm-font-heading); font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--vnm-secondary); }
.vn-mega__card-text { font-size: .8125rem; line-height: 1.5; color: var(--vnm-text-muted); }
.vn-mega__card-arrow { margin-top: auto; padding-top: .5rem; color: var(--vnm-secondary); }
.vn-mega__card-arrow .vn-icon { transition: transform .2s var(--vnm-ease); }
.vn-mega__card:hover .vn-mega__card-arrow .vn-icon { transform: translateX(3px); }
.vn-mega__foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem;
    margin: .5rem -.75rem -.75rem; padding: .6rem 1.1rem .6rem .75rem;
    border-top: 1px solid var(--vnm-border); border-radius: 0 0 var(--vnm-radius-lg) var(--vnm-radius-lg); background: var(--vnm-bg-tint);
}
.vn-mega__all {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .4rem .8rem; border-radius: 10px;
    font-family: var(--vnm-font-heading); font-size: .9375rem; font-weight: 700;
    color: var(--vnm-secondary) !important; text-decoration: none !important; transition: background .15s, color .15s;
}
.vn-mega__all:hover, .vn-mega__all[aria-current] { background: var(--vnm-bg-secondary); color: var(--vnm-secondary) !important; }
.vn-mega__all .vn-icon { transition: transform .2s var(--vnm-ease); }
.vn-mega__all:hover .vn-icon { transform: translateX(3px); }
.vn-mega__foot-text { margin: 0; font-size: .8125rem; color: var(--vnm-text-muted); }
/* Further footer links (e.g. "Examples" next to "All solutions"): the text moves to the right. */
.vn-mega__all--more { font-weight: 600; }
.vn-mega__all--more + .vn-mega__foot-text, .vn-mega__all--more ~ .vn-mega__foot-text { margin-left: auto; }

.vn-nav__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.vn-nav__list + .vn-nav__actions { margin-left: 0; }
.vn-nav__login .vn-icon { display: none; }

/* Language switch */
.vn-lang-switch {
    display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: .4rem .6rem;
    border-radius: 10px; color: var(--vnm-text-strong) !important; text-decoration: none !important;
    font-family: var(--vnm-font-heading); font-size: .875rem; font-weight: 700; letter-spacing: .04em;
}
.vn-lang-switch:hover { background: var(--vnm-bg-secondary); color: var(--vnm-secondary) !important; }
.vn-lang-switch .vn-icon { color: var(--vnm-text-muted); }
.vn-footer__langs ul { list-style: none; display: flex; gap: .25rem 1rem; margin: 0; padding: 0; }
.vn-footer__langs a[aria-current] { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.vn-footer--slim .vn-footer__langs a[aria-current] { color: var(--vnm-secondary); }

/* Account menu */
.vn-account { position: relative; }
.vn-account__button {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
    padding: .3rem .6rem .3rem .3rem; border: 1px solid var(--vnm-border); border-radius: var(--vnm-radius-pill);
    background: #fff; color: var(--vnm-text-strong); cursor: pointer; font-family: var(--vnm-font-heading); font-weight: 600; font-size: .9375rem;
}
.vn-account__button:hover { border-color: var(--vnm-border-strong); }
.vn-account__avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--vnm-primary), var(--vnm-secondary)); color: #fff; font-size: .8125rem; font-weight: 700; letter-spacing: .02em; }
.vn-account__name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vn-account__menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 10; min-width: 240px; padding: .4rem;
    background: #fff; border: 1px solid var(--vnm-border); border-radius: var(--vnm-radius-md); box-shadow: var(--vnm-shadow-lg);
}
.vn-account__menu ul { list-style: none; margin: 0; padding: 0; }
.vn-account__menu a { display: flex; align-items: center; gap: .65rem; padding: .6rem .75rem; border-radius: 10px; color: var(--vnm-text-strong) !important; text-decoration: none !important; font-size: .9375rem; }
.vn-account__menu a:hover { background: var(--vnm-bg-tint); color: var(--vnm-secondary) !important; }
.vn-account__menu .vn-icon { color: var(--vnm-text-muted); }
.vn-account__sep { margin-top: .3rem; padding-top: .3rem; border-top: 1px solid var(--vnm-border); }

/* Desktop: mega menu panels, positioned below the whole header bar (no layout shift). */
@media (min-width: 961px) {
    .vn-header__inner { position: relative; }
    .vn-nav__item--has-children { position: static; }
    .vn-nav__panel {
        position: absolute; z-index: 10; top: calc(100% - 6px); left: 50%; transform: translateX(-50%);
        width: min(900px, calc(100vw - 2 * var(--vnm-gutter))); padding: .75rem;
        background: #fff; border: 1px solid var(--vnm-border); border-radius: var(--vnm-radius-lg);
        box-shadow: var(--vnm-shadow-lg);
    }
    /* Invisible bridge so the pointer can travel from the menu label to the panel. */
    .vn-nav__panel::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
    .vn-mega__body { display: grid; gap: .75rem; }
    .vn-mega--has-aside .vn-mega__body { grid-template-columns: minmax(0, 1fr) 210px; }
    /* No JavaScript: open the panel on hover or when keyboard focus is inside the menu item. */
    .vn-header:not(.is-enhanced) .vn-nav__item--has-children:is(:hover, :focus-within) > .vn-nav__panel[hidden] { display: block; }
}
@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
    .vn-nav__panel:not([hidden]) { animation: vn-mega-in .18s var(--vnm-ease); }
    .vn-nav__chevron .vn-icon { transition: transform .2s var(--vnm-ease); }
}
@keyframes vn-mega-in {
    from { opacity: 0; transform: translate(-50%, -6px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
/* Narrow desktops: tighter spacing, icon-only "Log in" and avatar-only account button. */
@media (min-width: 961px) and (max-width: 1180px) {
    .vn-header__inner { gap: 1rem; }
    .vn-header__brand img { height: 30px; }
    .vn-nav { gap: .5rem; }
    .vn-nav__list { gap: .1rem; }
    .vn-nav__link { padding-inline: .6rem; font-size: .9375rem; }
    .vn-nav__split .vn-nav__link { padding-right: .2rem; }
    .vn-nav__chevron { width: 28px; padding-right: .25rem; }
    .vn-nav__actions { gap: .35rem; }
    .vn-nav__login { min-width: 44px; min-height: 44px; padding-inline: .6rem; }
    .vn-nav__login .vn-icon { display: inline-block; }
    .vn-nav__login > span:not(.vn-sr-only) {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    .vn-account__name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
@media (max-width: 1080px) {
    .vn-nav__call { display: none; }
}

/* Mobile navigation: slide-in menu, dropdowns become an accordion. */
@media (max-width: 960px) {
    .vn-header__toggle { display: inline-grid; }
    /* backdrop-filter would make the header the containing block of the fixed menu. */
    .vn-header.is-open { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .vn-nav {
        position: fixed; inset: var(--vnm-header-height) 0 0 0; z-index: 899;
        display: none; flex-direction: column; align-items: stretch; gap: 1.5rem;
        padding: 1.25rem var(--vnm-gutter) 2rem; overflow-y: auto; overscroll-behavior: contain;
        background: #fff; border-top: 1px solid var(--vnm-border);
    }
    .admin-bar .vn-nav { top: calc(var(--vnm-header-height) + 46px); }
    .vn-header.is-open .vn-nav { display: flex; }
    .vn-nav__list { flex-direction: column; align-items: stretch; margin: 0; gap: .15rem; }
    .vn-nav__list--app { margin: 0; }
    .vn-nav__link { width: 100%; justify-content: space-between; min-height: 48px; padding: .75rem; font-size: 1.0625rem; }
    .vn-nav__split .vn-nav__link { flex: 1; padding-right: .75rem; }
    .vn-nav__chevron { flex: none; width: 48px; min-height: 48px; padding: 0; border-left: 1px solid var(--vnm-border); border-radius: 0 10px 10px 0; }
    .vn-nav__item--has-children:hover > .vn-nav__split { background: none; }
    .vn-nav__item--has-children.is-open > .vn-nav__split { background: var(--vnm-bg-secondary); }
    .vn-nav__panel { margin: .25rem 0 .75rem; padding: .35rem; border-radius: var(--vnm-radius-md); background: var(--vnm-bg-tint); }
    .vn-nav__sublist { grid-template-columns: 1fr; gap: .1rem; }
    .vn-mega__cols { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
    .vn-mega__col-title { margin: .45rem .6rem .2rem; }
    .vn-mega__col-all { padding-inline: .6rem; }
    .vn-nav__sublink { padding: .65rem .6rem; }
    .vn-nav__sublink:hover, .vn-nav__sublink[aria-current] { background: #fff; }
    .vn-nav__subicon { width: 34px; height: 34px; border-radius: 10px; }
    .vn-mega__card { display: none; }
    .vn-mega__foot { margin: .25rem -.35rem -.35rem; padding: .25rem .35rem; border-radius: 0 0 var(--vnm-radius-md) var(--vnm-radius-md); background: transparent; }
    .vn-mega__foot-text { display: none; }
    .vn-mega__all { width: 100%; justify-content: space-between; padding-inline: .6rem; }
    .vn-nav__actions { flex-direction: column; align-items: stretch; margin: 0; padding-top: 1rem; border-top: 1px solid var(--vnm-border); }
    .vn-nav__actions .vn-btn { width: 100%; min-height: 48px; }
    .vn-nav__call { display: inline-flex; }
    .vn-account__button { width: 100%; border-radius: var(--vnm-radius-md); }
    .vn-account__menu { position: static; box-shadow: none; margin-top: .5rem; }
    .vn-nav-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
    .vn-header, .vn-nav__link, .vn-nav__split, .vn-nav__sublink, .vn-nav__subicon, .vn-mega__card, .vn-mega__all, .vn-mega__all .vn-icon, .vn-mega__card-arrow .vn-icon, .vn-mega__col-all, .vn-mega__col-all .vn-icon { transition: none; }
}

/* ---------- Hero ---------- */
.vn-hero { position: relative; padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(3rem, 2rem + 4vw, 6rem); overflow: hidden; isolation: isolate; }
.vn-hero--sm { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(1.5rem, 1rem + 2vw, 3rem); }
/* First section of a page: a calm brand-mint panel with rounded corners, inset from the window edges. */
.vn-hero--panel,
.vn-page-header__panel {
    margin: .75rem clamp(.5rem, 1.5vw, 1.25rem) 0;
    border-radius: clamp(20px, 1rem + 1vw, var(--vnm-radius-xl));
    background: var(--vnm-bg-secondary);
}
/* On mint, small teal text needs the darker teal (WCAG AA 4.5:1); mint-on-mint parts get white. */
:is(.vn-hero--panel, .vn-page-header__panel) .vn-eyebrow { color: var(--vnm-secondary); }
:is(.vn-hero--panel, .vn-page-header__panel) .vn-badge--soft { background: #fff; }
:is(.vn-hero--panel, .vn-page-header__panel) .vn-btn--secondary { --vn-btn-bg: #fff; }
:is(.vn-hero--panel, .vn-page-header__panel) .vn-btn--secondary:hover { --vn-btn-bg: var(--vnm-bg-tint); }
/* minmax(0, 1fr): a long word in the title (German compounds) wraps instead of widening the column. */
.vn-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); align-items: center; }
@media (min-width: 980px) { .vn-hero--with-media .vn-hero__grid { grid-template-columns: minmax(0, 11fr) minmax(0, 12fr); } }
.vn-hero--center .vn-hero__text { text-align: center; margin-inline: auto; max-width: 52rem; }
.vn-hero--center .vn-lead { margin-inline: auto; }
.vn-hero--center .vn-eyebrow { justify-content: center; }
.vn-hero--center .vn-back-link { text-align: center; }
.vn-hero__title { margin-bottom: .45em; overflow-wrap: break-word; hyphens: auto; }
.vn-hero--sm .vn-hero__title { font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); }
.vn-hero__lead { font-size: clamp(1.125rem, 1.05rem + .45vw, 1.375rem); }
.vn-hero__note { display: flex; align-items: flex-start; gap: .4rem; margin: 1.25rem 0 0; font-size: var(--vnm-fs-sm); color: var(--vnm-text-muted); }
.vn-hero--center .vn-hero__note { justify-content: center; }
.vn-hero__note .vn-icon { flex: none; margin-top: .2em; color: var(--vnm-primary-strong); }
.vn-hero__notes { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 1.25rem 0 0; padding: 0; font-size: var(--vnm-fs-sm); color: var(--vnm-text-muted); }
.vn-hero--center .vn-hero__notes { justify-content: center; }
.vn-hero__notes li { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.vn-hero__notes .vn-icon { flex: none; color: var(--vnm-primary-strong); }
.vn-hero__media { position: relative; }

/* ---------- Chips ---------- */
.vn-chips ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.vn-chips--center ul, .vn-chips ul { justify-content: center; }
.vn-chip {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .45rem 1rem;
    border: 1px solid var(--vnm-border-strong); border-radius: var(--vnm-radius-pill); background: #fff;
    font-family: var(--vnm-font-heading); font-size: .9375rem; font-weight: 600;
    color: var(--vnm-secondary) !important; text-decoration: none !important; transition: background .15s, border-color .15s;
}
.vn-chip:hover { background: var(--vnm-bg-secondary); border-color: var(--vnm-secondary); }
.vn-chip[aria-current] { background: var(--vnm-secondary); border-color: var(--vnm-secondary); color: #fff !important; }
.vn-section--flush .vn-chips { padding-block: 1.5rem .5rem; }

/* ---------- Home: two ways ---------- */
.vn-duo { display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .vn-duo { grid-template-columns: 1fr 1fr; } }
.vn-duo__card { position: relative; padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); border-radius: var(--vnm-radius-xl); background: #fff; border: 1px solid var(--vnm-border); box-shadow: var(--vnm-shadow-md); display: flex; flex-direction: column; }
.vn-duo__card--accent { background: linear-gradient(160deg, #fff 0%, #F1FAF8 100%); border-color: rgba(0, 161, 146, .35); }
.vn-duo__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 1.25rem; border-radius: 16px; background: var(--vnm-bg-secondary); color: var(--vnm-secondary); }
.vn-duo__card--accent .vn-duo__icon { background: linear-gradient(135deg, var(--vnm-primary), var(--vnm-secondary)); color: #fff; }
.vn-duo__card > p { color: var(--vnm-text-muted); }
.vn-duo__link { margin-top: auto; padding-top: 1.5rem; display: inline-flex; align-items: center; gap: .35rem; font-family: var(--vnm-font-heading); font-weight: 600; text-decoration: none !important; }

/* ---------- Use case: problem / solution ---------- */
.vn-problem-solution { display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .vn-problem-solution { grid-template-columns: 1fr 1fr; } }
.vn-ps { padding: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); border-radius: var(--vnm-radius-xl); background: #fff; border: 1px solid var(--vnm-border); }
.vn-ps--solution { border-color: rgba(0, 161, 146, .4); box-shadow: var(--vnm-shadow-md); }
.vn-ps__label { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .75rem; font-family: var(--vnm-font-heading); font-size: var(--vnm-fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.vn-ps--problem .vn-ps__label { color: var(--vnm-danger); }
.vn-ps--solution .vn-ps__label { color: var(--vnm-primary-strong); }
.vn-ps > p:not(.vn-ps__label) { color: var(--vnm-text-muted); }

/* ---------- Pricing extras ---------- */
.vn-enterprise {
    display: grid; gap: 2rem; align-items: center;
    padding: clamp(2rem, 1.25rem + 3vw, 3.5rem); border-radius: var(--vnm-radius-xl);
    background: radial-gradient(80% 120% at 100% 0%, rgba(0, 161, 146, .35) 0%, transparent 55%), var(--vnm-bg-dark);
    color: var(--vnm-text-on-dark);
}
@media (min-width: 900px) { .vn-enterprise { grid-template-columns: 1.1fr 1fr; } }
.vn-enterprise .vn-h2 { color: #fff; }
.vn-enterprise .vn-eyebrow { color: #7FD8CE; }
.vn-enterprise__text > p { color: rgba(233, 244, 242, .85); font-size: var(--vnm-fs-lg); }
.vn-enterprise__list { list-style: none; margin: 0; padding: 1.5rem; display: grid; gap: .65rem; border-radius: var(--vnm-radius-lg); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.vn-enterprise__list li { display: flex; gap: .6rem; }
.vn-enterprise__list .vn-icon { margin-top: .2em; color: #7FD8CE; }
.vn-enterprise__audience { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; padding: 0; }
.vn-enterprise__audience li { padding: .35rem .85rem; border: 1px solid rgba(255, 255, 255, .24); border-radius: var(--vnm-radius-pill); background: rgba(255, 255, 255, .07); color: #fff; font-size: var(--vnm-fs-sm); font-weight: 600; line-height: 1.3; }

/* ---------- Panels / contact ---------- */
.vn-panel { padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); border-radius: var(--vnm-radius-lg); background: #fff; border: 1px solid var(--vnm-border); box-shadow: var(--vnm-shadow-sm); }
.vn-panel > :last-child { margin-bottom: 0; }
.vn-panel--brand { background: linear-gradient(135deg, var(--vnm-secondary), #007f78 60%, var(--vnm-primary)); color: #fff; border: 0; }
.vn-panel--brand .vn-h4 { color: #fff; }
.vn-panel--brand p { color: rgba(255, 255, 255, .9); }
.vn-contact { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 960px) { .vn-contact { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.vn-contact__aside { display: grid; gap: 1.25rem; }
.vn-contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.vn-contact__list li { display: flex; gap: .75rem; align-items: flex-start; }
.vn-contact__list .vn-icon { color: var(--vnm-primary-strong); margin-top: .15rem; }
.vn-contact__list address { font-style: normal; }

/* ---------- Newsletter ---------- */
.vn-newsletter__card { display: grid; gap: 2rem; align-items: center; padding: clamp(1.75rem, 1.25rem + 2vw, 3rem); border-radius: var(--vnm-radius-xl); background: var(--vnm-bg-secondary); border: 1px solid var(--vnm-border); }
@media (min-width: 960px) { .vn-newsletter__card { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); } }
.vn-newsletter__intro .vn-h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); }
.vn-newsletter__intro p:last-child { margin: 0; }
.vn-newsletter-form__fields { display: grid; gap: .75rem; align-items: end; }
@media (min-width: 640px) { .vn-newsletter-form__fields { grid-template-columns: 1fr 1.3fr auto; } }
.vn-newsletter-form__submit .vn-btn { min-height: 48px; width: 100%; }

/* ---------- Articles & pages ---------- */
.vn-page-header__panel { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.vn-page-header__title { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem); margin-bottom: .35em; }
.vn-article__cat { margin: 0 0 1rem; }
.vn-article__cat a { text-decoration: none !important; }
.vn-article__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; color: var(--vnm-text-muted); font-size: var(--vnm-fs-sm); }
.vn-article__hero { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); max-width: calc(1000px + 2 * var(--vnm-gutter)); }
.vn-article__image { width: 100%; height: auto; border-radius: var(--vnm-radius-xl); box-shadow: var(--vnm-shadow-lg); aspect-ratio: 16 / 9; object-fit: cover; }
.vn-prose--article, .vn-prose--page { max-width: none; font-size: 1.125rem; line-height: 1.75; }
.vn-prose--page { font-size: 1.0625rem; }
.vn-prose--article :where(p, li) { color: #3A4747; }
.vn-prose :where(.wp-block-image img) { height: auto; }
.vn-prose :where(.wp-block-button__link) { background: var(--vnm-primary-strong); color: #fff; border-radius: var(--vnm-radius-btn); padding: .75rem 1.25rem; text-decoration: none; font-family: var(--vnm-font-heading); font-weight: 600; }
.vn-prose :where(.alignwide) { margin-inline: min(-4rem, calc((44rem - 100vw) / 2 + var(--vnm-gutter))); }
.vn-prose :where(.aligncenter) { margin-inline: auto; }
.vn-prose :where(.vn-legal-box) { padding: 1rem 1.25rem; border: 1px solid var(--vnm-border); border-radius: var(--vnm-radius-md); background: var(--vnm-bg-secondary); }
.vn-article--legal .vn-prose :where(h2) { font-size: clamp(1.375rem, 1.2rem + .75vw, 1.75rem); }
/* The DPA's sub-processor table fits phone widths instead of hiding its last column behind a scroll (the legal pages are English, so hyphens work). */
@media (max-width: 480px) {
    .vn-article--legal .vn-prose :where(table) { font-size: .8125rem; }
    .vn-article--legal .vn-prose :where(th, td) { padding-inline: .3rem; hyphens: auto; }
}
.vn-page-updated { text-align: left; margin-top: 3rem; }
.vn-article__tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 2.5rem 0 0; }
.vn-author { display: flex; gap: 1.1rem; align-items: center; margin: 3rem 0; padding: 1.5rem; border-radius: var(--vnm-radius-lg); background: var(--vnm-bg-tint); border: 1px solid var(--vnm-border); }
.vn-author__avatar { border-radius: 50%; flex: none; }
.vn-author__name { margin: 0; font-family: var(--vnm-font-heading); font-weight: 700; color: var(--vnm-text-strong); }
.vn-author__bio { margin: .2rem 0 0; font-size: var(--vnm-fs-sm); color: var(--vnm-text-muted); }
.vn-cta--article { margin-block: 2.5rem; }
.vn-cta--article .vn-cta__title { font-size: var(--vnm-fs-h3); }
.vn-post-nav { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 700px) { .vn-post-nav { grid-template-columns: 1fr 1fr; } }
.vn-post-nav__link { display: grid; gap: .25rem; padding: 1.1rem 1.25rem; border: 1px solid var(--vnm-border); border-radius: var(--vnm-radius-md); text-decoration: none !important; color: var(--vnm-text-strong) !important; transition: border-color .2s, box-shadow .2s; }
.vn-post-nav__link:hover { border-color: var(--vnm-border-strong); box-shadow: var(--vnm-shadow-md); }
.vn-post-nav__link strong { font-family: var(--vnm-font-heading); font-weight: 600; line-height: 1.35; }
.vn-post-nav__link span { font-size: var(--vnm-fs-xs); color: var(--vnm-text-muted); text-transform: uppercase; letter-spacing: .08em; }
.vn-post-nav__link--next { text-align: right; }
.vn-post-grid { margin-top: 2rem; }
.vn-pagination { margin-top: 3rem; }
.vn-pagination ul { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.vn-pagination :is(a, span) { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .75rem; border-radius: 12px; border: 1px solid var(--vnm-border); text-decoration: none !important; color: var(--vnm-secondary) !important; font-family: var(--vnm-font-heading); font-weight: 600; }
.vn-pagination a:hover { background: var(--vnm-bg-secondary); }
.vn-pagination .current { background: var(--vnm-secondary); border-color: var(--vnm-secondary); color: #fff !important; }
.vn-pagination .dots { border: 0; }
.vn-page-links { margin-top: 2rem; display: flex; gap: .5rem; }

/* ---------- About ---------- */
.vn-about-team .vn-prose { font-size: var(--vnm-fs-lg); }

/* ---------- App shell ---------- */
.vn-context-app .vn-header { position: sticky; }
.vn-main--app { background: var(--vnm-bg); }
.vn-app { width: 100%; }
.vn-app__content { max-width: calc(var(--vnm-wide-width) + 2 * var(--vnm-gutter)); margin-inline: auto; padding: clamp(1rem, .75rem + 1vw, 2rem) var(--vnm-gutter) clamp(2rem, 1.5rem + 2vw, 3rem); }
.vn-template-app.vn-chrome-minimal .vn-app__content { max-width: none; padding: 0; }

/* ---------- Footer ---------- */
.vn-footer { margin-top: auto; padding-block: clamp(3rem, 2.5rem + 3vw, 5rem) 2rem; background: var(--vnm-bg-dark); color: rgba(233, 244, 242, .78); font-size: var(--vnm-fs-sm); }
.vn-footer a { color: rgba(233, 244, 242, .88); text-decoration: none; }
.vn-footer a:hover { color: #fff; text-decoration: underline; }
/* Columns: Product, Use cases, Company, Legal, then "Follow us" on the right (as narrow as its labels). */
.vn-footer__top { display: grid; gap: 2.5rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .vn-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .vn-footer__top { grid-template-columns: repeat(4, minmax(0, 1fr)) max-content; gap: 2.5rem 2rem; } }
@media (min-width: 1200px) { .vn-footer__top { grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr)) max-content; } }
.vn-footer__brand { grid-column: 1 / -1; }
@media (min-width: 1200px) { .vn-footer__brand { grid-column: auto; padding-right: 1.5rem; } }
.vn-footer__logo img { width: auto; height: 36px; filter: brightness(0) invert(1); }
.vn-footer__claim { margin: 1.1rem 0 1.25rem; max-width: 22rem; line-height: 1.6; }
.vn-footer__title { margin: 0 0 1rem; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; hyphens: auto; overflow-wrap: anywhere; }
@media (max-width: 380px) { .vn-footer__title { letter-spacing: .04em; } }
.vn-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.vn-footer__col a { display: inline-block; padding-block: .3rem; line-height: 1.4; hyphens: auto; overflow-wrap: anywhere; }
.vn-footer__col a[aria-current] { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.vn-footer__col .vn-footer__overview { color: #fff; font-weight: 600; }
.vn-footer__social a { display: inline-flex; align-items: center; gap: .65rem; padding-block: .2rem; }
.vn-footer__social-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .08); color: #fff; transition: background .2s; }
.vn-footer__social a:hover .vn-footer__social-icon { background: var(--vnm-primary-strong); }
.vn-footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.vn-footer__bottom p { margin: 0; }
.vn-footer--slim { padding-block: 1.25rem; background: var(--vnm-bg-tint); color: var(--vnm-text-muted); border-top: 1px solid var(--vnm-border); }
.vn-footer--slim .vn-footer__bottom { margin: 0; padding: 0 var(--vnm-gutter); border: 0; }
.vn-footer--slim a { color: var(--vnm-text-muted); }
.vn-footer--slim a:hover { color: var(--vnm-secondary); }
.vn-footer--slim ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.vn-footer :focus-visible { box-shadow: 0 0 0 3px var(--vnm-bg-dark), 0 0 0 5px #7FD8CE; }

/* Links to a text in another language, e.g. the English legal texts on German pages: a small "EN" tag
   (VNM_Site_Nav::lang_hint(); screen readers hear "(auf Englisch)" instead). */
.vn-lang-hint { display: inline-block; margin-inline-start: .45em; padding: 0 .3em; border: 1px solid var(--vnm-border); border-radius: 4px; color: var(--vnm-text-muted); font-size: .6875rem; font-weight: 600; letter-spacing: .04em; line-height: 1.45; white-space: nowrap; vertical-align: .1em; }
.vn-footer .vn-lang-hint { color: rgba(233, 244, 242, .7); border-color: rgba(233, 244, 242, .3); }
.vn-footer--slim .vn-lang-hint { color: var(--vnm-text-muted); border-color: var(--vnm-border); }

/* ---------- Print ---------- */
@media print {
    .vn-header, .vn-footer, .vn-newsletter, .vn-cta, .vn-skip-link { display: none !important; }
    .vn-section { padding-block: 1rem; }
}

/* ---------- Privacy & hosting in Germany (trust) ---------- */
.vn-trust__more { margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }
.vn-footer__trust { margin: 1rem 0 0; font-size: var(--vnm-fs-sm); }
.vn-footer__trust a { display: inline-flex; align-items: center; gap: .65rem; padding: .55rem .9rem .55rem .7rem; border: 1px solid rgba(233, 244, 242, .25); border-radius: var(--vnm-radius-md); color: rgba(233, 244, 242, .85); line-height: 1.3; text-decoration: none; }
.vn-footer__trust span { display: grid; }
.vn-footer__trust strong { color: #fff; font-weight: 600; }
.vn-footer__trust a:hover { border-color: rgba(233, 244, 242, .6); color: #fff; text-decoration: none; }
.vn-footer__trust .vn-icon { color: #7FD8CE; }
.vn-trust-tables { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
@media (min-width: 980px) { .vn-trust-tables { grid-template-columns: 1.15fr 1fr; align-items: start; } }
.vn-trust-table h3 { margin: 0 0 .85rem; }
.vn-data-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--vnm-border); border-radius: var(--vnm-radius-lg); background: #fff; font-size: var(--vnm-fs-sm); }
.vn-data-table :is(th, td) { padding: .8rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--vnm-border); }
.vn-data-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.vn-data-table thead th { background: var(--vnm-bg-secondary); color: var(--vnm-secondary); font-size: var(--vnm-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.vn-data-table tbody th { color: var(--vnm-text-strong); font-weight: 600; }
.vn-data-table__place { display: inline-flex; align-items: flex-start; gap: .35rem; font-weight: 600; color: var(--vnm-secondary); }
.vn-data-table__place .vn-icon { flex: none; margin-top: .15em; color: var(--vnm-primary-strong); }
@media (max-width: 560px) {
    .vn-data-table :is(th, td) { padding: .65rem .7rem; }
}
.vn-trust-note { margin-top: 1.25rem; }
.vn-trust-note a { white-space: nowrap; } /* keeps the "EN" hint next to "Datenschutzerklärung" */
.vn-trust-columns { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .vn-trust-columns { grid-template-columns: 1fr 1fr; } }
.vn-trust-column { padding: clamp(1.5rem, 1rem + 1.5vw, 2rem); border: 1px solid var(--vnm-border); border-radius: var(--vnm-radius-lg); background: #fff; box-shadow: var(--vnm-shadow-sm); }
.vn-trust-column__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 1rem; border-radius: 14px; background: var(--vnm-bg-secondary); color: var(--vnm-primary-strong); }
.vn-trust-column h3 { margin: 0 0 .5rem; }
.vn-trust-column > p { margin: 0; color: var(--vnm-text-muted); }
.vn-trust-rights { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
@media (min-width: 900px) { .vn-trust-rights { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.vn-trust-docs { padding: 1.25rem 1.5rem; border: 1px solid var(--vnm-border); border-radius: var(--vnm-radius-lg); background: #fff; }
.vn-trust-docs h3 { margin: 0 0 .75rem; }
.vn-trust-docs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.vn-trust-docs a { display: flex; align-items: center; gap: .55rem; min-height: 40px; color: var(--vnm-secondary); font-weight: 600; text-decoration: none; }
.vn-trust-docs a:hover { text-decoration: underline; text-underline-offset: .2em; }
.vn-trust-docs .vn-icon { flex: none; color: var(--vnm-primary-strong); }