/*
 * Sections and building blocks. Everything is expressed through the design
 * tokens of the theme (CSS custom properties); the fallbacks only apply if a
 * theme has not defined its tokens yet.
 */
:root {
    --ve-color-primary: #f47c00;
    --ve-color-on-primary: #fff;
    --ve-color-light: #f3f4f6;
    --ve-color-dark: #1f3349;
    --ve-color-on-dark: #fff;
    --ve-radius: 8px;
    --ve-space-unit: 2rem;
    /* --ve-color-text and --ve-color-link have no default: the theme's text
       and link colors stay as they are unless the theme sets these tokens */
}

/*
 * Sections (= articles). Only articles with section options carry these
 * classes (and .ve-section), all other articles keep the theme's styles.
 *
 * Theme contract (see THEME-CONTRACT.md and theme-contract.json): every
 * section sets the --ve-section-* variables below and carries the scheme
 * class ve-scheme--light or ve-scheme--dark. Theme components read the
 * variables with their own fallback, e.g. color: var(--ve-section-link, #06c).
 * A variable that refers to an unset token is invalid, so the fallback of
 * the theme applies (e.g. links in light sections without veColorLink).
 */
.ve-section {
    --ve-section-text: var(--ve-color-text);
    --ve-section-heading: var(--ve-color-text);
    --ve-section-link: var(--ve-color-link);
    --ve-section-muted: color-mix(in srgb, var(--ve-color-text) 70%, transparent);
    --ve-section-accent: var(--ve-color-primary);
    --ve-section-on-accent: var(--ve-color-on-primary);
    --ve-section-focus: var(--ve-color-link, var(--ve-color-primary));
}

.ve-bg--light {
    --ve-section-bg: var(--ve-color-light);
}

.ve-bg--primary {
    --ve-section-bg: var(--ve-color-primary);
    --ve-section-text: var(--ve-color-on-primary);
    --ve-section-heading: var(--ve-color-on-primary);
    --ve-section-link: var(--ve-color-on-primary);
    --ve-section-muted: color-mix(in srgb, var(--ve-color-on-primary) 70%, transparent);
    --ve-section-accent: var(--ve-color-on-primary);
    --ve-section-on-accent: var(--ve-color-primary);
    --ve-section-focus: var(--ve-color-on-primary);
}

.ve-bg--dark {
    --ve-section-bg: var(--ve-color-dark);
    --ve-section-text: var(--ve-color-on-dark);
    --ve-section-heading: var(--ve-color-on-dark);
    --ve-section-link: var(--ve-color-on-dark);
    --ve-section-muted: color-mix(in srgb, var(--ve-color-on-dark) 70%, transparent);
    --ve-section-accent: var(--ve-color-primary);
    --ve-section-on-accent: var(--ve-color-on-primary);
    --ve-section-focus: var(--ve-color-on-dark);
}

.ve-bg--light,
.ve-bg--primary,
.ve-bg--dark {
    position: relative;
    /* Full bleed background while the content stays in the layout column */
    box-shadow: 0 0 0 100vmax var(--ve-section-bg);
    clip-path: inset(0 -100vmax);
    background: var(--ve-section-bg);
}

/*
 * Primary and dark backgrounds set the text, heading and link colors (as
 * before the contract). In sections without background or with the light one
 * only the text token applies, with zero specificity: every rule of the theme
 * wins, and without the token the declaration is invalid and the color is
 * inherited as before. Links there keep the theme's colors; the theme reads
 * --ve-section-link itself (a bundle rule would replace the browser's default
 * link color of themes without the token).
 */
:where(.ve-section:not(.ve-bg--primary, .ve-bg--dark)) {
    color: var(--ve-section-text);
}

.ve-bg--primary,
.ve-bg--dark {
    color: var(--ve-section-text);
}

.ve-bg--primary :is(h1, h2, h3, h4),
.ve-bg--dark :is(h1, h2, h3, h4) {
    color: var(--ve-section-heading);
}

.ve-bg--primary a:not(.ve-button),
.ve-bg--dark a:not(.ve-button) {
    color: var(--ve-section-link);
}

.ve-space--s { padding-block: calc(var(--ve-space-unit) * 1); }
.ve-space--m { padding-block: calc(var(--ve-space-unit) * 2); }
.ve-space--l { padding-block: calc(var(--ve-space-unit) * 3); }

.ve-width--narrow > * { max-width: 46rem; margin-inline: auto; }

/* Building blocks */
.ve-block {
    margin-block: 0 calc(var(--ve-space-unit) * 1);
}

.ve-block img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ve-radius);
}

.ve-block figure {
    margin: 0;
}

.ve-button {
    display: inline-block;
    padding: .8em 1.6em;
    border-radius: var(--ve-radius);
    background: var(--ve-section-accent, var(--ve-color-primary));
    color: var(--ve-section-on-accent, var(--ve-color-on-primary));
    font-weight: 600;
    text-decoration: none;
}

.ve-button:hover {
    filter: brightness(.92);
}

.ve-button:focus-visible {
    outline: 2px solid var(--ve-section-focus, var(--ve-color-primary));
    outline-offset: 2px;
}

.ve-hero,
.ve-text-image {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--ve-space-unit) * 1.5);
    align-items: center;
}

.ve-hero--image-left .ve-hero__media,
.ve-text-image--image-left .ve-text-image__media {
    order: -1;
}

.ve-hero__title {
    margin: 0 0 .5em;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.1;
}

.ve-hero__lead {
    margin: 0 0 1.5em;
    font-size: 1.2rem;
}

.ve-features__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: calc(var(--ve-space-unit) * .75);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ve-card {
    padding: calc(var(--ve-space-unit) * .75);
    border-radius: var(--ve-radius);
    /* A card is always light, also in dark sections: it sets the light
       values of the section variables for its content */
    --ve-section-text: var(--ve-color-text, #1f2937);
    --ve-section-heading: var(--ve-color-text, #1f2937);
    --ve-section-link: var(--ve-color-link, var(--ve-color-primary));
    --ve-section-muted: color-mix(in srgb, var(--ve-color-text, #1f2937) 70%, transparent);
    --ve-section-accent: var(--ve-color-primary);
    --ve-section-on-accent: var(--ve-color-on-primary);
    --ve-section-focus: var(--ve-color-link, var(--ve-color-primary));
    background: #fff;
    color: var(--ve-section-text);
    box-shadow: 0 1px 3px rgb(0 0 0 / .08), 0 8px 24px rgb(0 0 0 / .06);
}

.ve-card h3 {
    margin: 0 0 .4em;
    color: inherit;
}

.ve-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--ve-space-unit) * 1);
    border-radius: var(--ve-radius);
}

.ve-cta h2 { margin: 0 0 .25em; color: inherit; }
.ve-cta p { margin: 0; }
.ve-cta--primary { --ve-section-accent: var(--ve-color-on-primary); --ve-section-on-accent: var(--ve-color-primary); background: var(--ve-color-primary); color: var(--ve-color-on-primary); }
.ve-cta--dark { --ve-section-accent: var(--ve-color-primary); --ve-section-on-accent: var(--ve-color-on-primary); background: var(--ve-color-dark); color: var(--ve-color-on-dark); }
.ve-cta--light { --ve-section-accent: var(--ve-color-primary); --ve-section-on-accent: var(--ve-color-on-primary); background: var(--ve-color-light); }

.ve-quote {
    padding-left: 1.5rem;
    border-left: 4px solid var(--ve-section-accent, var(--ve-color-primary));
}

.ve-quote__text {
    margin: 0 0 1rem;
    font-size: 1.35rem;
    font-style: italic;
}

.ve-quote__text p { margin: 0; }

.ve-quote__author {
    display: flex;
    gap: .75rem;
    align-items: center;
}

.ve-quote__author img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

@media (max-width: 767px) {
    .ve-hero,
    .ve-text-image {
        grid-template-columns: 1fr;
    }

    .ve-hero--image-left .ve-hero__media,
    .ve-text-image--image-left .ve-text-image__media {
        order: 0;
    }
}

/*
 * Column layouts ("Spalten"). A grid of 12 tracks: every column spans its
 * width (--ve-column-span), a column that no longer fits into the row starts
 * the next one. Columns without an own width get theirs from the preset of
 * the Spalten element (by position), an own width is a class
 * (ve-column--span-N, WI 258930). The breakpoints are container queries on
 * the Spalten element, not viewport media queries: four columns in a narrow
 * section become 2 × 2 even on a desktop. The gap comes from the theme's
 * spacing token (agencies can override it with --ve-column-gap).
 */
.ve-columns {
    container-type: inline-size;
}

.ve-columns__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--ve-column-gap, calc(var(--ve-space-unit) * 1.5));
    align-items: start;
}

.ve-columns__grid > .ve-column {
    grid-column: span var(--ve-column-span, 6);
}

/* Width from the preset (columns without an own width) */
.ve-columns--1-1 > .ve-columns__grid > .ve-column { --ve-column-span: 6; }
.ve-columns--1-2 > .ve-columns__grid > .ve-column { --ve-column-span: 8; }
.ve-columns--1-2 > .ve-columns__grid > .ve-column:first-child { --ve-column-span: 4; }
.ve-columns--2-1 > .ve-columns__grid > .ve-column { --ve-column-span: 4; }
.ve-columns--2-1 > .ve-columns__grid > .ve-column:first-child { --ve-column-span: 8; }
.ve-columns--1-1-1 > .ve-columns__grid > .ve-column { --ve-column-span: 4; }
.ve-columns--1-1-1-1 > .ve-columns__grid > .ve-column { --ve-column-span: 3; }

/* Own width of a column: 0-4-0, so it wins over the preset rules (0-3-0, and
   0-4-0 for :first-child, which come earlier – later wins on a tie) */
.ve-columns > .ve-columns__grid > .ve-column.ve-column--span-3 { --ve-column-span: 3; }
.ve-columns > .ve-columns__grid > .ve-column.ve-column--span-4 { --ve-column-span: 4; }
.ve-columns > .ve-columns__grid > .ve-column.ve-column--span-6 { --ve-column-span: 6; }
.ve-columns > .ve-columns__grid > .ve-column.ve-column--span-8 { --ve-column-span: 8; }
.ve-columns > .ve-columns__grid > .ve-column.ve-column--span-9 { --ve-column-span: 9; }
.ve-columns > .ve-columns__grid > .ve-column.ve-column--span-12 { --ve-column-span: 12; }

.ve-columns--align-center > .ve-columns__grid {
    align-items: center;
}

/* Blocks in a column follow each other with the same rhythm as in a section */
.ve-column {
    display: flex;
    flex-direction: column;
    gap: calc(var(--ve-space-unit) * .75);
    min-width: 0;
}

.ve-column > * {
    margin-block: 0;
}

.ve-column img {
    max-width: 100%;
    height: auto;
}

/* "Button" (hyperlink element) inside columns */
.ve-column .content-hyperlink a {
    display: inline-block;
    padding: .8em 1.6em;
    border-radius: var(--ve-radius);
    background: var(--ve-section-accent, var(--ve-color-primary));
    color: var(--ve-section-on-accent, var(--ve-color-on-primary));
    font-weight: 600;
    text-decoration: none;
}

/* A new button without text is not shown as an empty pill on the website */
.ve-column .content-hyperlink a:empty {
    display: none;
}

.ve-column .content-hyperlink a:hover {
    filter: brightness(.92);
}

/* Narrow: quarter columns become halves (four columns → 2 × 2), a ¾ column
   takes the full width (a ¾ + ½ row would not fit) */
@container (max-width: 759px) {
    .ve-columns--1-1-1-1 > .ve-columns__grid > .ve-column,
    .ve-columns > .ve-columns__grid > .ve-column.ve-column--span-3 {
        --ve-column-span: 6;
    }

    .ve-columns > .ve-columns__grid > .ve-column.ve-column--span-9 {
        --ve-column-span: 12;
    }
}

/* Very narrow: every column takes the full width (stacked). The doubled
   .ve-column is deliberate: 0-4-0 like the narrow overrides of span-3/span-9
   above, so this later rule wins over them */
@container (max-width: 559px) {
    .ve-columns > .ve-columns__grid > .ve-column.ve-column {
        --ve-column-span: 12;
    }

    /* Empty columns take no space when the columns are stacked */
    .ve-columns > .ve-columns__grid > .ve-column:not(:has(*)) {
        display: none;
    }

    /* Two columns only: show the right column first */
    .ve-columns--mobile-reverse > .ve-columns__grid > .ve-column:first-child {
        order: 1;
    }
}