/* ==========================================================================
   levels-content — styles for the lvl/* LANDING PAGE blocks (work package L2)
   --------------------------------------------------------------------------
   Expected handle: levels-content-landing
   Loaded only on a page that actually contains a lvl/* page block. Never on a
   blog post — blocks.css owns those, and the two files share no selectors.

   What this file adds on top of blocks.css:
     .lvl-land                 the shared section layer: rhythm, prose width,
                               kicker, rule, buttons, review marker, tables
     .lvl-land--tone-*         which ground the section paints
     .lvl-land--toned          the full-bleed band (tone dark/light only)
     .lvl-land--accent-*       exactly one accent per section

   Colour values come from ~/dev/levels-organic/DESIGN-SYSTEM.md, which was
   extracted from the live Oxygen universal.css. Nothing here is invented.

   ⚠ The site's --text-color / --bg-color do NOT flip with dark mode (Oxygen
   switches the theme with a body.dark-mode rule while the custom properties
   keep their light values). Same rule as blocks.css therefore applies: a
   section on the INHERITED ground never sets a text colour. Only a section
   that paints its own fixed ground sets a fixed ink on it — which is exactly
   what .lvl-land--toned does.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Token layer — declared twice, once for each mode
   -------------------------------------------------------------------------- */

:root {
    /* Grounds and ink, from DESIGN-SYSTEM.md */
    --lvl-land-ink: #090920;
    --lvl-land-pale: #f3f5fc;
    --lvl-land-white: #ffffff;
    --lvl-land-muted: #8b8bc3;
    --lvl-land-slate: #434456;

    /*
     * Accents, two roles per hue — the same split blocks.css makes:
     *   --lvl-land-acc-<hue>    the MARK: rules, borders, big numbers.
     *                           Non-text, so SC 1.4.11 asks for 3:1.
     *   --lvl-land-acct-<hue>   accent as TEXT and as the focus ring.
     *                           7:1, WCAG AAA.
     *
     * Light mode values are the brand variants darkened against --ink until
     * they clear the threshold on #f3f5fc. Measured with the WCAG formula:
     *   mark   teal 4.01  violet 4.06  green 4.04  yellow 4.10  orange 4.09  rose 4.03
     *   text   teal 7.04  violet 7.02  green 7.15  yellow 7.02  orange 7.07  rose 7.03
     */
    --lvl-land-acc-teal: #4e8186;
    --lvl-land-acc-violet: #7371b4;
    --lvl-land-acc-green: #658053;
    --lvl-land-acc-yellow: #847742;
    --lvl-land-acc-orange: #a8674e;
    --lvl-land-acc-rose: #a76389;

    --lvl-land-acct-teal: #375863;
    --lvl-land-acct-violet: #4f4e82;
    --lvl-land-acct-green: #455742;
    --lvl-land-acct-yellow: #5c5337;
    --lvl-land-acct-orange: #73483e;
    --lvl-land-acct-rose: #714565;

    /*
     * Monochrome logos. Not plain grayscale(1): the media library holds both
     * black-on-transparent and white-on-transparent marks, and grayscale keeps
     * a black logo black — invisible on the dark ground, which is the site
     * default. brightness(0) flattens any mark to a silhouette first, then the
     * ground decides whether it is inked or knocked out. Hover drops the
     * filter entirely and the brand colour comes back.
     */
    --lvl-land-logo-filter: grayscale(1) brightness(0);

    /*
     * The ground a section is painted on. Only the table fade needs to know it
     * (a gradient cannot be "transparent to the ground"), so it is declared
     * once per tone and nowhere else.
     */
    --lvl-land-ground: #ffffff;

    /* Surfaces on the inherited (light) ground. */
    --lvl-land-dim: #434456;
    --lvl-land-line: rgba(9, 9, 32, 0.16);
    --lvl-land-line-soft: rgba(9, 9, 32, 0.08);
    /*
     * The secondary button's ring. SC 1.4.11 asks 3:1 for a control boundary
     * and --lvl-land-line (0.16) measured 1.5:1 — the M-package blocker.
     * rgba(9,9,32,.55) composites to #727383 on the pale band (4.29:1) and to
     * #787884 on white (4.36:1); both clear the threshold with room to spare.
     */
    --lvl-land-line-strong: rgba(9, 9, 32, 0.55);
    --lvl-land-surface: rgba(9, 9, 32, 0.045);

    /* Geometry. One radius for panels, the pill for buttons. */
    --lvl-land-radius: 0.75rem;
    /* Panels (ICP) get the mockup's 24px, not the 12px card radius. */
    --lvl-land-radius-lg: 1.5rem;
    --lvl-land-pill: 1.875rem;
    --lvl-land-gap: clamp(1.25rem, 3vw, 2.5rem);
    /*
     * Section rhythm. 64px measured against ~198px in the mockups (M1); the
     * clamp lands on 100px at 1440 and still leaves 64px on a phone.
     */
    --lvl-land-rhythm: clamp(4rem, 7vw, 6.25rem);
    --lvl-land-section-pad: clamp(2.5rem, 7vw, 5.5rem);
    /*
     * The reading column and its gutter.
     *
     * ⚠ Oxygen template 1322 (main-orphanpage), which every landing page uses,
     * wraps the Gutenberg body in a bare .ct-div-block: no max-width and no
     * padding, so the content runs from viewport edge to viewport edge. That
     * is why a landing section brings its OWN column instead of inheriting one
     * the way a blog post does from the 1000px single template — and why a
     * toned band needs no negative margin to bleed: the container is already
     * full width, so the band is full-bleed by construction and the column
     * lives one level in, on .lvl-land__inner. If the template is ever given a
     * max-width, the band simply ends at the column edge; nothing breaks, and
     * nothing overflows the viewport, which a negative margin could not
     * promise on a full-width container.
     */
    --lvl-land-column: 1000px;
    /*
     * Reading measure for running text. AT Aero's "0" is wide, so 1ch is more
     * than an average letter: 58ch measured 64 to 74 characters per line at
     * the 20px body, inside the 45 to 75 band (62ch reached 82).
     */
    --lvl-land-measure: 58ch;
    --lvl-land-gutter: clamp(1.25rem, 5vw, 3.75rem);
    --lvl-land-ease: cubic-bezier(0.84, 0.05, 0.31, 0.93);

    /*
     * Type. Relative to the inherited body size or pinned on vw — never on
     * cqw: the site's --h2-base / --base-xs are container-query clamps that
     * bottom out around 13px inside the 1000px column on a phone, which is the
     * trap REVIEW-NOTES logged for the blog blocks.
     */
    --lvl-land-text: 1em;
    --lvl-land-small: clamp(0.9375rem, 0.85rem + 0.4vw, 1.0625rem);
    --lvl-land-h1: clamp(2rem, 1.2rem + 3.6vw, 3.5rem);
    --lvl-land-h2: clamp(1.6rem, 1.1rem + 2.2vw, 2.5rem);
    /*
     * H3 at 24px/w300 on a wide screen. The max() floor is the mobile half of
     * the fix: the site's root font-size shrinks to ~14px at 390, so a pure rem
     * clamp lands at 17.5px under a 20px body — the inversion the design
     * critique measured. 1.15em is relative to the INHERITED body size, so the
     * item title is always at least 1.15x the text it sits over.
     */
    --lvl-land-h3: max(1.15em, clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem));
    --lvl-land-figure: clamp(1.75rem, 1.2rem + 2.5vw, 2.75rem);
}

body.dark-mode {
    /*
     * Dark is the site default. The bright accent set from DESIGN-SYSTEM.md
     * carries on #090920 with no darkening, so mark and text are the same
     * value — with one exception. Contrast on #090920:
     *   teal 16.25  green 15.58  yellow 18.54  orange 13.52  rose 8.48
     * Violet is the exception: the brand #9580ff reaches only 6.35, which is
     * AA but not AAA. It stays the MARK (SC 1.4.11 asks 3:1) and the accent
     * TEXT is the same hue lifted 8 % toward white, #9d8aff = 7.01.
     */
    --lvl-land-acc-teal: #80ffea;
    --lvl-land-acc-violet: #9580ff;
    --lvl-land-acc-green: #8aff80;
    --lvl-land-acc-yellow: #ffff80;
    --lvl-land-acc-orange: #ffcf80;
    --lvl-land-acc-rose: #ff80bf;

    --lvl-land-acct-teal: #80ffea;
    --lvl-land-acct-violet: #9d8aff;
    --lvl-land-acct-green: #8aff80;
    --lvl-land-acct-yellow: #ffff80;
    --lvl-land-acct-orange: #ffcf80;
    --lvl-land-acct-rose: #ff80bf;

    --lvl-land-logo-filter: grayscale(1) brightness(0) invert(1);
    --lvl-land-ground: #090920;

    /*
     * #8b8bc3 measured 6.14:1 on #090920 — AA, not AAA, and the QA flagged it
     * on .lvl-process__duration and the pricing footnote. #a5a5d8 is the same
     * hue lifted: 8.37:1 on the page ground and 7.50:1 on the lifted
     * tone-dark band (#17172d), so both grounds clear AAA.
     */
    --lvl-land-dim: #a5a5d8;
    --lvl-land-line: rgba(243, 245, 252, 0.18);
    --lvl-land-line-soft: rgba(243, 245, 252, 0.09);
    /* rgba(243,245,252,.55) → #8a8b99 on #090920 = 5.82:1. */
    --lvl-land-line-strong: rgba(243, 245, 252, 0.55);
    --lvl-land-surface: rgba(243, 245, 252, 0.06);
}

/* --------------------------------------------------------------------------
   Accent selection — one per section, never mixed inside one
   -------------------------------------------------------------------------- */

.lvl-land--accent-teal {
    --lvl-land-accent: var(--lvl-land-acc-teal);
    --lvl-land-accent-text: var(--lvl-land-acct-teal);
}
.lvl-land--accent-violet {
    --lvl-land-accent: var(--lvl-land-acc-violet);
    --lvl-land-accent-text: var(--lvl-land-acct-violet);
}
.lvl-land--accent-green {
    --lvl-land-accent: var(--lvl-land-acc-green);
    --lvl-land-accent-text: var(--lvl-land-acct-green);
}
.lvl-land--accent-yellow {
    --lvl-land-accent: var(--lvl-land-acc-yellow);
    --lvl-land-accent-text: var(--lvl-land-acct-yellow);
}
.lvl-land--accent-orange {
    --lvl-land-accent: var(--lvl-land-acc-orange);
    --lvl-land-accent-text: var(--lvl-land-acct-orange);
}
.lvl-land--accent-rose {
    --lvl-land-accent: var(--lvl-land-acc-rose);
    --lvl-land-accent-text: var(--lvl-land-acct-rose);
}

/* --------------------------------------------------------------------------
   Tone — a toned section paints its own ground, so it also fixes its own ink
   --------------------------------------------------------------------------
   The tone class sits on the section, the accent set sits on :root or
   body.dark-mode. The section is the nearer ancestor, so its values win for
   everything inside it: a dark band keeps the bright accents even when the
   visitor has switched the site to light mode, and the other way round.
   -------------------------------------------------------------------------- */

.lvl-land--tone-dark {
    --lvl-land-acc-teal: #80ffea;
    --lvl-land-acc-violet: #9580ff;
    --lvl-land-acc-green: #8aff80;
    --lvl-land-acc-yellow: #ffff80;
    --lvl-land-acc-orange: #ffcf80;
    --lvl-land-acc-rose: #ff80bf;
    --lvl-land-acct-teal: #80ffea;
    --lvl-land-acct-violet: #9d8aff;
    --lvl-land-acct-green: #8aff80;
    --lvl-land-acct-yellow: #ffff80;
    --lvl-land-acct-orange: #ffcf80;
    --lvl-land-acct-rose: #ff80bf;

    --lvl-land-logo-filter: grayscale(1) brightness(0) invert(1);
    --lvl-land-ground: #090920;

    --lvl-land-dim: #a5a5d8;
    --lvl-land-line: rgba(243, 245, 252, 0.18);
    --lvl-land-line-soft: rgba(243, 245, 252, 0.09);
    --lvl-land-line-strong: rgba(243, 245, 252, 0.55);
    --lvl-land-surface: rgba(243, 245, 252, 0.06);

    /* #ffffff on #090920 = 19.60, --dim #a5a5d8 on #090920 = 8.37. */
    background-color: var(--lvl-land-ink);
    color: var(--lvl-land-white);
}

.lvl-land--tone-light {
    --lvl-land-acc-teal: #4e8186;
    --lvl-land-acc-violet: #7371b4;
    --lvl-land-acc-green: #658053;
    --lvl-land-acc-yellow: #847742;
    --lvl-land-acc-orange: #a8674e;
    --lvl-land-acc-rose: #a76389;
    --lvl-land-acct-teal: #375863;
    --lvl-land-acct-violet: #4f4e82;
    --lvl-land-acct-green: #455742;
    --lvl-land-acct-yellow: #5c5337;
    --lvl-land-acct-orange: #73483e;
    --lvl-land-acct-rose: #714565;

    --lvl-land-logo-filter: grayscale(1) brightness(0);
    --lvl-land-ground: #f3f5fc;

    --lvl-land-dim: #434456;
    --lvl-land-line: rgba(9, 9, 32, 0.16);
    --lvl-land-line-soft: rgba(9, 9, 32, 0.08);
    --lvl-land-line-strong: rgba(9, 9, 32, 0.55);
    --lvl-land-surface: rgba(9, 9, 32, 0.045);

    /* #090920 on #f3f5fc = 17.99, --slate #434456 on #f3f5fc = 8.76. */
    background-color: var(--lvl-land-pale);
    color: var(--lvl-land-ink);
}

/*
 * ⚠ Oxygen forces a link colour per mode from its own stylesheet. Inside a
 * toned band the ground is fixed and the forced colour is not, so a dark-mode
 * ink would land on the light band and the other way round. These two are the
 * only !important colours in this file, and they are the reason.
 */
.lvl-land--tone-dark a,
.lvl-land--tone-dark a:visited {
    color: var(--lvl-land-white) !important;
}
.lvl-land--tone-light a,
.lvl-land--tone-light a:visited {
    color: var(--lvl-land-ink) !important;
}
.lvl-land--toned .lvl-land__button {
    color: inherit !important;
}
/*
 * The accent link keeps the accent on EVERY ground, not just inside a toned
 * band — on tone-auto Oxygen's forced link colour was winning and the item
 * links rendered plain white (NN/g finding). One !important, one reason.
 */
.lvl-land .lvl-service-grid__item-link,
.lvl-land .lvl-service-grid__item-link:visited,
.lvl-land .lvl-testimonial__case,
.lvl-land .lvl-testimonial__case:visited {
    color: var(--lvl-land-accent-text) !important;
}

/* --------------------------------------------------------------------------
   The shared section layer
   -------------------------------------------------------------------------- */

.lvl-land {
    /* ⚠ never a variable here on an untoned section — see the note up top. */
    box-sizing: border-box;
    max-width: 100%;
    /*
     * M1: rhythm as PADDING plus a hairline, the way the mockups build it
     * (`section{padding-block:var(--base-100); border-top:1px solid var(--line)}`).
     * Padding rather than margin, so the hairline sits at the true section
     * boundary instead of in the middle of a collapsed margin.
     */
    margin-block: 0;
    padding-block: var(--lvl-land-rhythm);
    border-top: 1px solid var(--lvl-land-line);
}

/*
 * No rule above the first section. The hero is always first, but a page may
 * start with something else, so both cases are covered.
 */
.lvl-hero,
.ct-inner-content > .lvl-land:first-child,
.lvl-main > .lvl-land:first-child {
    border-top: 0;
}

.lvl-land * {
    box-sizing: border-box;
}

/*
 * The column. The section itself stays full width so its tone paints edge to
 * edge; the content sits in a centred 1000px column with a gutter that never
 * drops below 20px.
 */
.lvl-land__inner {
    box-sizing: border-box;
    min-width: 0;
    max-width: calc(var(--lvl-land-column) + 2 * var(--lvl-land-gutter));
    margin-inline: auto;
    padding-inline: var(--lvl-land-gutter);
}

.lvl-land--toned {
    padding-block: var(--lvl-land-section-pad);
    margin-block: 0;
}

/*
 * M1: in dark mode a `tone-dark` band painted #090920 on a #090920 page is
 * invisible — the design critique measured exactly that. Give it the lifted
 * surface (rgba(243,245,252,.06) = #17172d over the page ground) and an accent
 * edge on top, so the band reads as a band. In LIGHT mode it stays the ink
 * band it was: there the contrast against the page already carries it.
 */
body.dark-mode .lvl-land--tone-dark {
    /* The lifted band, so the fade knows what to fade into. */
    --lvl-land-ground: #17172d;
    background-color: var(--lvl-land-surface);
    border-top: 2px solid var(--lvl-land-accent);
}

/*
 * Everything else the page may carry — the reused blog blocks (faq, cta-box,
 * key-figures, checklist, info-box, case-card, code-snippet) and the allowed
 * core blocks — gets the same column. Without this they inherit the template's
 * edge-to-edge container and a paragraph runs the full 1440px.
 *
 * Scoped to .ct-inner-content, which is the Oxygen element that renders
 * post_content, so nothing outside the Gutenberg body is touched.
 */
.ct-inner-content > *:not(.lvl-land) {
    box-sizing: border-box;
    /*
     * The column, or whatever is left after the gutter — whichever is smaller.
     * A padding-inline would have worked for prose but not for the blocks that
     * paint their own surface: their background would run 60px wider than the
     * column on either side and the cards would no longer line up with the
     * landing sections above them.
     */
    max-width: min(var(--lvl-land-column), calc(100% - 2 * var(--lvl-land-gutter)));
    margin-inline: auto;
}

/* Two toned bands in a row must not read as one. */
.lvl-land--toned + .lvl-land--toned {
    border-top: 1px solid var(--lvl-land-line-soft);
}

.lvl-land__kicker {
    margin: 0 0 0.75rem;
    /*
     * M2: the kicker measured 17px — it read as a second lede. 0.8rem is the
     * mockup value (.eyebrow, 0.75rem at a 16px root); the 12px floor keeps it
     * legible where the site root shrinks to 14px on a phone.
     */
    font-size: max(0.8rem, 12px);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.22rem;
    color: var(--lvl-land-accent-text);
}

.lvl-land__heading {
    margin: 0;
    font-size: var(--lvl-land-h2);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: inherit;
}

.lvl-land__heading--sm {
    font-size: var(--lvl-land-h3);
}

/* The 56px accent rule under every section heading, as in the mockups. */
.lvl-land__rule {
    width: 3.5rem;
    height: 1px;
    /* M2: +1.5rem over the heading, so the rule stops reading as an underline. */
    margin: 2.75rem 0 var(--lvl-land-gap);
    padding: 0;
    border: 0;
    background: var(--lvl-land-accent);
}

.lvl-land__intro,
.lvl-land__outro {
    max-width: 68ch;
}

.lvl-land__intro p,
.lvl-land__outro p {
    margin: 0 0 0.9em;
    font-size: var(--lvl-land-text);
    line-height: 1.65;
    color: inherit;
}

.lvl-land__intro p:last-child,
.lvl-land__outro p:last-child {
    margin-bottom: 0;
}

.lvl-land__outro {
    margin-top: var(--lvl-land-gap);
    color: var(--lvl-land-dim);
}

.lvl-land__note {
    margin: 1rem 0 0;
    font-size: var(--lvl-land-small);
    line-height: 1.5;
    color: var(--lvl-land-dim);
}

/* --------------------------------------------------------------------------
   Buttons — pill, uppercase, wide tracking (DESIGN-SYSTEM.md)
   -------------------------------------------------------------------------- */

.lvl-land__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: var(--lvl-land-gap) 0 0;
}

.lvl-land__button {
    /* 2.75rem = 44px, WCAG 2.2 SC 2.5.8 at AAA. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.85rem 2rem;
    border: 1px solid var(--lvl-land-accent);
    border-radius: var(--lvl-land-pill);
    background: transparent;
    color: inherit;
    /* M2: the brand button is 20px (DESIGN-SYSTEM .pill), not the blog's 16px. */
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.22rem;
    text-decoration: none !important;
    transition: box-shadow 0.25s var(--lvl-land-ease), border-color 0.25s var(--lvl-land-ease);
}

/*
 * Hover never swaps fill and label — that is what breaks under a forced link
 * colour. It lights the ring instead, which is the site's own button hover
 * ("box-shadow: 0 0 20px 0 var(--violet)" in DESIGN-SYSTEM.md).
 */
.lvl-land__button:hover,
.lvl-land__button:focus-visible {
    box-shadow: 0 0 1.25rem 0 var(--lvl-land-accent);
}

.lvl-land__button--ghost {
    /* SC 1.4.11: --lvl-land-line measured 1.5:1. --line-strong is >= 4.2:1. */
    border-color: var(--lvl-land-line-strong);
}

.lvl-land__button--ghost:hover,
.lvl-land__button--ghost:focus-visible {
    border-color: var(--lvl-land-accent);
}

/* --------------------------------------------------------------------------
   Review marker — draft and preview only, never on a published page
   -------------------------------------------------------------------------- */

.lvl-land__review {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: baseline;
    margin: 0 0 var(--lvl-land-gap);
    padding: 0.75rem 1rem;
    border-radius: var(--lvl-land-radius);
    border-inline-start: 0.25rem solid #e8d15e;
    /* Fixed surface, fixed ink, both modes: #090920 on #f7edb8 = 14.79. */
    background: #f7edb8;
    color: #090920;
    font-size: var(--lvl-land-small);
    line-height: 1.5;
}

.lvl-land__review-label {
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    /* #5c4a06 on #f7edb8 = 7.51. */
    color: #5c4a06;
    white-space: nowrap;
}

.lvl-land__review-label::after {
    content: ":";
}

/* --------------------------------------------------------------------------
   Tables — scrollable, focusable, named. No JavaScript in this package.
   -------------------------------------------------------------------------- */

.lvl-land__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    max-width: 100%;
    margin-top: var(--lvl-land-gap);
    scrollbar-width: thin;
}

.lvl-land__table-wrap:focus-visible {
    outline: 2px solid var(--lvl-land-accent-text);
    outline-offset: 3px;
}

.lvl-land table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: var(--lvl-land-text);
}

.lvl-land th,
.lvl-land td {
    padding: 0.9rem 1.2rem 0.9rem 0;
    text-align: start;
    vertical-align: top;
    border-bottom: 1px solid var(--lvl-land-line);
    color: inherit;
}

.lvl-land thead th {
    font-size: var(--lvl-land-small);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    color: var(--lvl-land-dim);
}

.lvl-land tbody th {
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   Visually hidden, still announced
   -------------------------------------------------------------------------- */

.lvl-land .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Focus — one ring for every interactive thing in a landing section
   --------------------------------------------------------------------------
   --lvl-blog-accent-text when blocks.css happens to be loaded too, otherwise
   the section's own accent-text token, which is >= 7:1 in both modes.
   -------------------------------------------------------------------------- */

.lvl-land a:focus-visible,
.lvl-land summary:focus-visible,
.lvl-land button:focus-visible {
    outline: 2px solid var(--lvl-blog-accent-text, var(--lvl-land-accent-text));
    outline-offset: 3px;
    border-radius: var(--lvl-land-radius);
}

/* ==========================================================================
   lvl/hero
   ========================================================================== */

.lvl-hero__inner {
    display: grid;
    gap: var(--lvl-land-gap);
    align-items: center;
    grid-template-columns: minmax(0, 1fr);
}

.lvl-hero--has-image .lvl-hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.lvl-hero__body {
    min-width: 0;
}

.lvl-hero__title {
    max-width: 18ch;
    margin: 0;
    font-size: var(--lvl-land-h1);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: inherit;
}

.lvl-hero__intro {
    max-width: 60ch;
}

.lvl-hero__intro p {
    margin: 0 0 0.9em;
    font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
    line-height: 1.6;
    color: inherit;
}

.lvl-hero__intro p:last-child {
    margin-bottom: 0;
}

/*
 * M4 — the facts row under the intro. The mockup's `.meta-row`: label above
 * value, uppercase label, wrapping.
 */
.lvl-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem clamp(1.5rem, 4vw, 2.5rem);
    margin: var(--lvl-land-gap) 0 0;
}

.lvl-hero__fact {
    min-width: 0;
}

.lvl-hero__fact-label {
    margin: 0 0 0.2rem;
    font-size: max(0.72rem, 11px);
    font-weight: 400;
    letter-spacing: 0.15rem;
    text-transform: uppercase;
    color: inherit;
}

.lvl-hero__fact-value {
    margin: 0;
    font-size: var(--lvl-land-small);
    line-height: 1.4;
    color: var(--lvl-land-dim);
}

.lvl-hero__media {
    margin: 0;
    min-width: 0;
}

.lvl-hero__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--lvl-land-radius);
}

/* ==========================================================================
   lvl/service-grid
   ========================================================================== */

/*
 * M3 — DEFAULT: numbered three-column rows, the mockup's `ol.rows`
 * (number | title ~340px | text). The card grid is now the ALTERNATIVE and only
 * appears when an author sets `columns` to 2 or 3 explicitly.
 */
.lvl-service-grid__list {
    margin: var(--lvl-land-gap) 0 0;
    padding: 0;
    list-style: none;
}

/* Two-class selector: the site styles bare `li`, so this has to outrank it. */
.lvl-service-grid .lvl-service-grid__item {
    display: grid;
    grid-template-columns: 5rem minmax(0, 340px) minmax(0, 1fr);
    gap: 0.5rem var(--lvl-land-gap);
    align-items: start;
    min-width: 0;
    margin: 0;
    padding: var(--lvl-land-gap) 0;
    border-top: 1px solid var(--lvl-land-line);
    list-style: none;
}

.lvl-service-grid .lvl-service-grid__item:last-child {
    border-bottom: 1px solid var(--lvl-land-line);
}

.lvl-service-grid__no {
    grid-column: 1;
    grid-row: 1 / span 3;
    padding-top: 0.35rem;
    font-size: max(0.8rem, 12px);
    letter-spacing: 0.25rem;
    line-height: 1.4;
    color: var(--lvl-land-accent-text);
}

.lvl-service-grid__item-title {
    grid-column: 2;
    margin: 0;
    font-size: var(--lvl-land-h3);
    /* M2: 300, the brand weight — 500 was the blog's, not this page's. */
    font-weight: 300;
    line-height: 1.3;
    color: inherit;
}

.lvl-service-grid__item-text {
    grid-column: 3;
    min-width: 0;
}

.lvl-service-grid__item-link {
    grid-column: 3;
}

/*
 * The card grid, opt-in via `columns`. Back to the original shape: a rule in
 * the accent on top, no number column.
 */
.lvl-service-grid--cards .lvl-service-grid__list {
    display: grid;
    gap: var(--lvl-land-gap);
    grid-template-columns: minmax(0, 1fr);
}

.lvl-service-grid--cards .lvl-service-grid__item {
    display: block;
    padding: 1rem 0 0;
    border-top: 1px solid var(--lvl-land-accent);
    border-bottom: 0;
}

.lvl-service-grid--cards .lvl-service-grid__item:last-child {
    border-bottom: 0;
}

.lvl-service-grid--cards .lvl-service-grid__no {
    display: none;
}

.lvl-service-grid--cards .lvl-service-grid__item-title {
    margin-bottom: 0.5rem;
}

.lvl-service-grid__item-text p {
    margin: 0 0 0.8em;
    font-size: var(--lvl-land-text);
    line-height: 1.6;
    color: var(--lvl-land-dim);
}

.lvl-service-grid__item-text p:last-child {
    margin-bottom: 0;
}

.lvl-service-grid__item-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    margin-top: 0.5rem;
    font-size: var(--lvl-land-small);
    color: var(--lvl-land-accent-text);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.lvl-service-grid__item-link svg {
    flex: none;
    transition: transform 0.25s var(--lvl-land-ease);
}

.lvl-service-grid__item-link:hover svg {
    transform: translateX(0.2rem);
}

/* ==========================================================================
   lvl/process
   ========================================================================== */

/*
 * M3 — a vertical list, not four 192px tracks. In the 1000px column the old
 * auto-fit grid squeezed every step to a 17-character measure; a step now gets
 * the full column and a hairline of its own.
 */
.lvl-process__steps {
    margin: var(--lvl-land-gap) 0 0;
    padding: 0;
    list-style: none;
}

/* Two-class selector: the site styles `li` with one, so this has to outrank it. */
.lvl-process .lvl-process__step {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: 0 var(--lvl-land-gap);
    align-items: start;
    min-width: 0;
    margin: 0;
    padding: var(--lvl-land-gap) 0;
    border-top: 1px solid var(--lvl-land-line);
    list-style: none;
}

.lvl-process .lvl-process__step:last-child {
    border-bottom: 1px solid var(--lvl-land-line);
}

.lvl-process__number {
    grid-column: 1;
    padding-top: 0.35rem;
    font-size: max(0.8rem, 12px);
    letter-spacing: 0.25rem;
    line-height: 1.4;
    color: var(--lvl-land-accent-text);
}

.lvl-process__body {
    grid-column: 2;
    min-width: 0;
}

.lvl-process__duration {
    display: block;
    margin: 0 0 0.6rem;
    font-size: var(--lvl-land-small);
    letter-spacing: 0.12rem;
    text-transform: uppercase;
    color: var(--lvl-land-dim);
}

.lvl-process__step-title {
    margin: 0 0 0.35rem;
    font-size: var(--lvl-land-h3);
    font-weight: 300;
    line-height: 1.3;
    color: inherit;
}

.lvl-process__step-text p {
    margin: 0 0 0.8em;
    font-size: var(--lvl-land-text);
    line-height: 1.6;
    color: var(--lvl-land-dim);
}

.lvl-process__step-text p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   lvl/pricing-table
   ========================================================================== */

/*
 * M3: the "Einheit" column is gone — the unit is appended to the range
 * ("2.500 bis 4.500 Euro, einmalig"), which is how a reader says it anyway and
 * is one column less to scroll on a phone. No nowrap: the combined string is
 * long enough that pinning it would force a wider table.
 */
.lvl-pricing-table__range {
    color: var(--lvl-land-accent-text);
}

.lvl-pricing-table__footnote {
    /* M3: the footnote was sitting on the last rule. */
    margin-top: 1.5rem;
}

/* ==========================================================================
   lvl/references
   ========================================================================== */

.lvl-references__list {
    display: grid;
    gap: var(--lvl-land-gap);
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.lvl-references__item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid var(--lvl-land-line);
    border-radius: var(--lvl-land-radius);
    background: var(--lvl-land-surface);
}

.lvl-references__media {
    margin: 0;
    /* A 16:10 well: a portrait shot is contained, not cropped to its middle. */
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--lvl-land-radius);
    background: var(--lvl-land-surface);
}

.lvl-references__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* M4: Branche and Region as chips, not a run-on kicker line. */
.lvl-references__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

.lvl-references .lvl-references__chip {
    margin: 0;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--lvl-land-line);
    border-radius: var(--lvl-land-pill);
    font-size: max(0.8rem, 12px);
    line-height: 1.5;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
    color: var(--lvl-land-dim);
    list-style: none;
}

.lvl-references .lvl-references__chip--client {
    border-color: var(--lvl-land-accent);
    color: inherit;
}

.lvl-references__item-title {
    margin: 0;
    font-size: var(--lvl-land-h3);
    font-weight: 300;
    line-height: 1.3;
    color: inherit;
}

/* SC 2.5.8: the reference link measured 41px. */
.lvl-references__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.lvl-references__result p {
    margin: 0.6rem 0 0;
    font-size: var(--lvl-land-small);
    line-height: 1.6;
    color: var(--lvl-land-dim);
}

/* ==========================================================================
   lvl/icp-filter
   ========================================================================== */

/* M3: 24px radius and the full column — 72ch made it the one narrow box. */
.lvl-icp-filter__panel {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--lvl-land-accent);
    border-radius: var(--lvl-land-radius-lg);
}

.lvl-icp-filter__text p {
    margin: 0 0 0.9em;
    font-size: var(--lvl-land-text);
    line-height: 1.65;
    color: inherit;
}

.lvl-icp-filter__text p:last-child {
    margin-bottom: 0;
}

/*
 * Flex, not auto-fit: with two facts in a wide column `repeat(auto-fit,
 * minmax(11rem,1fr))` leaves a collapsed 0px third track and the gap that goes
 * with it — measured 379px 379px 0px on /barrierefreiheitsgesetz.
 */
.lvl-icp-filter__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem var(--lvl-land-gap);
    margin: var(--lvl-land-gap) 0 0;
    padding: var(--lvl-land-gap) 0 0;
    border-top: 1px solid var(--lvl-land-line);
}

.lvl-icp-filter__fact {
    flex: 1 1 11rem;
    min-width: 0;
}

.lvl-icp-filter__fact-label {
    margin: 0 0 0.25rem;
    font-size: var(--lvl-land-small);
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    color: var(--lvl-land-dim);
}

.lvl-icp-filter__fact-value {
    margin: 0;
    font-size: var(--lvl-land-text);
    line-height: 1.4;
    color: inherit;
}

/* ==========================================================================
   lvl/cta-section
   ========================================================================== */

/*
 * The closing band is left-aligned like every other section — the copy is
 * measured, the column is not. Centring the inner would have pulled the whole
 * block away from the page's left edge.
 */
.lvl-cta-section__heading {
    max-width: 20ch;
}

.lvl-cta-section__text {
    max-width: 62ch;
}

.lvl-cta-section__text p {
    margin: 0 0 0.9em;
    font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
    line-height: 1.6;
    color: inherit;
}

.lvl-cta-section__text p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   lvl/logo-bar
   ========================================================================== */

.lvl-logo-bar__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    margin: var(--lvl-land-gap) 0 0;
    padding: 0;
    list-style: none;
}

.lvl-logo-bar .lvl-logo-bar__item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lvl-logo-bar__link {
    display: inline-flex;
    align-items: center;
    /* 44px, so a logo link is a legitimate touch target (SC 2.5.8). */
    min-height: 2.75rem;
}

/*
 * ⚠ Fixed height, width from the aspect ratio — NOT `height:auto` +
 * `max-height` together with `max-width`. A logo SVG exported from Illustrator
 * carries a viewBox and no width/height, so it has an intrinsic RATIO but no
 * intrinsic SIZE, and Chromium resolves that exact combination of four
 * constraints to a zero-width box: the whole row renders empty. Measured on
 * this stack, not guessed.
 */
.lvl-logo-bar__image {
    display: block;
    height: 2.75rem;
    width: auto;
    max-width: 10rem;
    object-fit: contain;
}

/*
 * The filter is a filter, not motion, so it stays under prefers-reduced-motion;
 * only the transition to colour is switched off further down.
 */
.lvl-logo-bar--mono .lvl-logo-bar__image {
    filter: var(--lvl-land-logo-filter);
    opacity: 0.75;
    transition: filter 0.25s var(--lvl-land-ease), opacity 0.25s var(--lvl-land-ease);
}

/* Hover/focus: the mark comes to full strength but keeps the mono filter.
   Dropping the filter showed the original black artwork on the dark ground
   (Philipp, 28.09.). */
.lvl-logo-bar--mono .lvl-logo-bar__item:hover .lvl-logo-bar__image,
.lvl-logo-bar--mono .lvl-logo-bar__link:focus-visible .lvl-logo-bar__image {
    opacity: 1;
}

/* A logo that is not filtered still needs a ground it can be seen on. */
.lvl-land--tone-dark .lvl-logo-bar__image,
body.dark-mode .lvl-land--tone-auto .lvl-logo-bar__image {
    border-radius: 0.25rem;
}

/* ==========================================================================
   lvl/comparison-table
   ========================================================================== */

.lvl-comparison-table__corner {
    border-bottom-color: transparent;
}

.lvl-comparison-table__label {
    /* The feature column carries the row's meaning, so it does not go grey. */
    color: inherit;
}

.lvl-comparison-table th,
.lvl-comparison-table td {
    padding-inline-end: 1.2rem;
}

.lvl-comparison-table__caption {
    caption-side: bottom;
    padding-top: 0.9rem;
    text-align: start;
    font-size: var(--lvl-land-small);
    line-height: 1.5;
    color: var(--lvl-land-dim);
}

/* ==========================================================================
   lvl/testimonial
   ========================================================================== */

.lvl-testimonial__figure {
    max-width: 68ch;
    margin: 0;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: var(--lvl-land-radius);
    border-inline-start: 0.25rem solid var(--lvl-land-accent);
    background: var(--lvl-land-surface);
}

.lvl-testimonial__quote {
    margin: 0;
    padding: 0;
    border: 0;
    quotes: "„" "“" "‚" "‘";
}

.lvl-testimonial__quote p {
    margin: 0 0 0.9em;
    font-size: clamp(1.0625rem, 1rem + 0.6vw, 1.5rem);
    font-weight: 300;
    line-height: 1.5;
    color: inherit;
}

.lvl-testimonial__quote p:first-child::before {
    content: open-quote;
}

.lvl-testimonial__quote p:last-child {
    margin-bottom: 0;
}

.lvl-testimonial__quote p:last-child::after {
    content: close-quote;
}

.lvl-testimonial__caption {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: var(--lvl-land-gap);
    padding-top: var(--lvl-land-gap);
    border-top: 1px solid var(--lvl-land-line);
}

.lvl-testimonial__avatar {
    flex: none;
}

.lvl-testimonial__photo {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    object-fit: cover;
}

.lvl-testimonial__who {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.lvl-testimonial__name {
    font-size: var(--lvl-land-h3);
    font-weight: 300;
    line-height: 1.3;
    color: inherit;
}

.lvl-testimonial__role {
    font-size: var(--lvl-land-small);
    line-height: 1.4;
    color: var(--lvl-land-dim);
}

.lvl-testimonial__case {
    align-self: flex-start;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    font-size: var(--lvl-land-small);
    color: var(--lvl-land-accent-text);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

/* layout = portrait: the client-voice card of the cases. Round photo above
   the quote, everything centred, 700px column. No surface, no accent rule. */
.lvl-testimonial--portrait .lvl-testimonial__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 43.75rem;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    text-align: center;
}

.lvl-testimonial--portrait .lvl-testimonial__portrait {
    display: block;
    width: 12.5rem;
    height: 12.5rem;
    margin-bottom: 2.5rem;
    border-radius: 50%;
    overflow: hidden;
}

.lvl-testimonial--portrait .lvl-testimonial__portrait .lvl-testimonial__photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.lvl-testimonial--portrait .lvl-testimonial__quote p {
    font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem);
    line-height: 1.2;
    text-wrap: pretty;
}

.lvl-testimonial--portrait .lvl-testimonial__caption {
    display: block;
    margin-top: 2.5rem;
    padding-top: 0;
    border-top: 0;
}

.lvl-testimonial--portrait .lvl-testimonial__who {
    align-items: center;
    gap: 0.375rem;
}

.lvl-testimonial--portrait .lvl-testimonial__name {
    font-size: var(--lvl-land-body, 1.125rem);
}

@media (max-width: 767px) {
    .lvl-testimonial--portrait .lvl-testimonial__portrait {
        width: 9.375rem;
        height: 9.375rem;
        margin-bottom: 2rem;
    }
}

/* ==========================================================================
   lvl/cta-box — the optional second button (L2)
   --------------------------------------------------------------------------
   Everything else about lvl/cta-box lives in blocks.css. Only the new actions
   row is here, because only a landing page can carry two buttons.
   ========================================================================== */

.lvl-cta-box__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Two classes: blocks.css fills the subtle/secondary button with a
   two-class selector of its own, and a one-class rule here would lose. */
.lvl-cta-box .lvl-cta-box__button--ghost {
    background: transparent;
    border-color: var(--lvl-blog-border, currentColor);
}

/* ==========================================================================
   Breakpoints — 1024 / 768 / 480, the same ladder blocks.css uses
   ========================================================================== */

@media (min-width: 1024px) {
    .lvl-service-grid--cols-2 .lvl-service-grid__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lvl-service-grid--cols-3 .lvl-service-grid__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .lvl-service-grid--cards .lvl-service-grid__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*
 * Rows mode below 820px — the mockup's own breakpoint: the number keeps its
 * narrow column and spans, title and text stack in the second.
 */
@media (max-width: 819.98px) {
    .lvl-service-grid:not(.lvl-service-grid--cards) .lvl-service-grid__item {
        grid-template-columns: 3.5rem minmax(0, 1fr);
    }

    .lvl-service-grid:not(.lvl-service-grid--cards) .lvl-service-grid__item-title,
    .lvl-service-grid:not(.lvl-service-grid--cards) .lvl-service-grid__item-text,
    .lvl-service-grid:not(.lvl-service-grid--cards) .lvl-service-grid__item-link {
        grid-column: 2;
    }

    .lvl-process .lvl-process__step {
        grid-template-columns: 3.5rem minmax(0, 1fr);
    }
}

@media (max-width: 1023.98px) {
    .lvl-hero--has-image .lvl-hero__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Copy first, image under it — which is also the source order. */
    .lvl-hero__media {
        order: 2;
    }
}

@media (max-width: 767.98px) {
    .lvl-land__button {
        /* Full width rather than two half-buttons crowding one line. */
        width: 100%;
    }

    /*
     * The scroll region reaches the screen edge so the table gets the full
     * width to scroll in — same move single.css makes for core/table. The QA
     * measured the wrapper at 310px against a 350px target; the negative
     * margin plus a minimum give it the whole prose column back.
     */
    .lvl-land__table-wrap,
    .ct-inner-content .lvl-land__table-wrap--core {
        margin-inline: calc(-1 * var(--lvl-land-gutter));
        padding-inline: var(--lvl-land-gutter);
        min-width: calc(100% + 2 * var(--lvl-land-gutter));
    }

    /*
     * M3 — the fade edge. 274px of the pricing table were hidden with no
     * affordance at all. Four layers, the standard scroll-shadow build: the two
     * `local` gradients ride WITH the content and cover the shadow when the
     * table is scrolled to that end, the two `scroll` radials stay pinned to
     * the box. So the cue appears only while there is more table to see.
     */
    .lvl-land__table-wrap {
        background:
            linear-gradient(to right, var(--lvl-land-ground) 30%, rgba(255, 255, 255, 0)) left center / 2.5rem 100% no-repeat local,
            linear-gradient(to left, var(--lvl-land-ground) 30%, rgba(255, 255, 255, 0)) right center / 2.5rem 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgba(128, 128, 160, 0.45), rgba(255, 255, 255, 0)) left center / 1rem 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgba(128, 128, 160, 0.45), rgba(255, 255, 255, 0)) right center / 1rem 100% no-repeat scroll;
    }

    .lvl-testimonial__caption {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .lvl-land__kicker,
    .lvl-land__button,
    .lvl-process__duration,
    .lvl-icp-filter__fact-label {
        /* 0.22rem of tracking eats a phone line. Keep the mark, lose the gap. */
        letter-spacing: 0.12rem;
    }

    .lvl-references__item,
    .lvl-icp-filter__panel,
    .lvl-testimonial__figure {
        padding: 1.25rem;
    }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .lvl-land *,
    .lvl-logo-bar__image {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .lvl-service-grid__item-link:hover svg {
        transform: none;
    }
}

/* ==========================================================================
   M5 — the <main> landmark and its skip link
   --------------------------------------------------------------------------
   Oxygen's shell brings no <main> and no skip link, so Blocks::wrap_main()
   supplies both around the Gutenberg body on landing pages. The link is the
   first thing in the content and the first tab stop inside it; it is off
   screen until it takes focus.
   ========================================================================== */

.lvl-main {
    display: block;
}

.lvl-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.85rem 1.5rem;
    border-radius: var(--lvl-land-radius);
    background: var(--lvl-land-ground);
    color: inherit;
    font-size: max(0.8rem, 12px);
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    text-decoration: none !important;
}

.lvl-skip:focus,
.lvl-skip:focus-visible {
    left: var(--lvl-land-gutter);
    outline: 2px solid var(--lvl-land-acct-teal);
    outline-offset: 3px;
}

/* ==========================================================================
   Core blocks inside a landing page
   --------------------------------------------------------------------------
   core/table is the only core block that breaks the column on its own: the QA
   measured 1100px against a 980px column. It gets the landing column, the
   landing table styling, and — via the render_block filter — the same
   focusable, named scroll region the block tables already carry.
   ========================================================================== */

.ct-inner-content .wp-block-table {
    max-width: min(var(--lvl-land-column), calc(100% - 2 * var(--lvl-land-gutter)));
    margin-inline: auto;
    overflow: visible;
}

.ct-inner-content .wp-block-table table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: var(--lvl-land-text);
}

.ct-inner-content .wp-block-table th,
.ct-inner-content .wp-block-table td {
    padding: 0.9rem 1.2rem 0.9rem 0;
    text-align: start;
    vertical-align: top;
    border: 0;
    border-bottom: 1px solid var(--lvl-land-line);
    color: inherit;
}

.ct-inner-content .wp-block-table thead th {
    font-size: var(--lvl-land-small);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    color: var(--lvl-land-dim);
}

.ct-inner-content .wp-block-table tbody th {
    font-weight: 400;
}

.lvl-land__table-wrap--core {
    margin-top: 0;
}

.lvl-land__table-wrap--core:focus-visible {
    outline: 2px solid var(--lvl-land-acct-teal);
    outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Oxygen template #1322 „main-orphanpage": the closing CTA (ct_reusable #32,
   „Ready für ein Level-up?") sits inside `.bottom-grid-container`
   (#div_block-30-1322), which is position:absolute; bottom:0; height:2400px;
   z-index:-1 — a decorative shell sized for the homepage. On any page longer
   than ~2400 px the band renders behind the running text (measured 324 px
   overlap on all 12 landing pages). Put the shell back into flow so the CTA
   takes space; the decorative grid image keeps its absolute placement.
   Structural fix belongs in the Builder (move #32 next to the footer);
   this rule is the safety net until then. QA 2026-09-15.
   ------------------------------------------------------------------------- */
#div_block-30-1322 {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    z-index: auto !important;
}
#div_block-30-1322 > .ct-image {
    position: absolute !important;
    left: 0;
    bottom: 0;
    z-index: -1 !important;
}

/* ==========================================================================
   D1 — design pass 2026-09-28 (/wordpress-agentur-linz, applies to all 12)
   --------------------------------------------------------------------------
   Everything below is scoped to .lvl-main, the landmark Blocks::wrap_main()
   puts around the body of a LANDING page and nowhere else. Cases load this
   file too (they carry lvl/testimonial, lvl/faq, lvl/cta-box), but they have
   no .lvl-main, so none of this reaches them. Blog posts never load it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The column. M5 wrapped the body in <main class="lvl-main">, and the
   blanket `.ct-inner-content > *:not(.lvl-land)` rule caught that wrapper and
   capped it at 1000px. Every band stopped at the column edge (a pale slab on
   the dark page) and the FAQ ran 60px wider than the sections around it.
   The wrapper is full width again, the bands are full-bleed by construction
   as the header comment intends, and the blocks that bring no column of their
   own get it one level in.
   -------------------------------------------------------------------------- */

.ct-inner-content > .lvl-main {
    max-width: none;
    margin-inline: 0;
}

/* :where() keeps this at (0,1,0): it is the default column, and every more
   specific rule (reading measure, cta-box, band edges) must be able to win.
   Unwrapped it was (0,2,2) and silently beat the measure rule (review R2). */
.lvl-main > :where(:not(.lvl-land):not(script):not(style)) {
    box-sizing: border-box;
    max-width: min(var(--lvl-land-column), calc(100% - 2 * var(--lvl-land-gutter)));
    margin-inline: auto;
}

/* --------------------------------------------------------------------------
   2. Bands. Dark-first means the page never flips polarity in the middle.
   A `light` band used to paint #f3f5fc on the dark page: three pale slabs,
   no system behind them. Now a toned band is always the RAISED surface of
   the current mode:
     dark mode   light band = #17172d (the lifted surface the dark band
                 already used), ink stays white
     light mode  light band = #ffffff on the #f3f5fc page
   A `dark` band stays what it was: the lifted surface with an accent edge in
   dark mode, the ink band in light mode. So the rhythm reads as ground, band,
   ground, band, and the closing band is the only one with an accent edge.
   -------------------------------------------------------------------------- */

body.dark-mode .lvl-main .lvl-land--tone-light {
    --lvl-land-acc-teal: #80ffea;
    --lvl-land-acc-violet: #9580ff;
    --lvl-land-acc-green: #8aff80;
    --lvl-land-acc-yellow: #ffff80;
    --lvl-land-acc-orange: #ffcf80;
    --lvl-land-acc-rose: #ff80bf;
    --lvl-land-acct-teal: #80ffea;
    --lvl-land-acct-green: #8aff80;
    --lvl-land-acct-yellow: #ffff80;
    --lvl-land-acct-orange: #ffcf80;
    --lvl-land-acct-rose: #ff80bf;

    --lvl-land-logo-filter: grayscale(1) brightness(0) invert(1);
    --lvl-land-ground: #17172d;

    /* #a5a5d8 on #17172d = 7.50, #ffffff on #17172d = 17.55. */
    --lvl-land-dim: #a5a5d8;
    --lvl-land-line: rgba(243, 245, 252, 0.18);
    --lvl-land-line-soft: rgba(243, 245, 252, 0.09);
    --lvl-land-line-strong: rgba(243, 245, 252, 0.55);
    --lvl-land-surface: rgba(243, 245, 252, 0.06);

    background-color: #17172d;
    color: var(--lvl-land-white);
}

/*
 * Violet as TEXT on the lifted band. #9d8aff is 7.01 on #090920 but only
 * 6.28 on #17172d, which the dark band already failed. #a796ff (the brand
 * violet lifted 17 % toward white) is 7.06 on #17172d and 7.89 on #090920.
 */
body.dark-mode .lvl-main,
body.dark-mode .lvl-main .lvl-land--tone-light,
.lvl-main .lvl-land--tone-dark {
    --lvl-land-acct-violet: #a796ff;
}

body.dark-mode .lvl-main .lvl-land--tone-light a,
body.dark-mode .lvl-main .lvl-land--tone-light a:visited {
    color: var(--lvl-land-white) !important;
}

/* The accent links keep the accent on the band as well. */
body.dark-mode .lvl-main .lvl-land .lvl-service-grid__item-link,
body.dark-mode .lvl-main .lvl-land .lvl-service-grid__item-link:visited {
    color: var(--lvl-land-accent-text) !important;
}

body:not(.dark-mode) .lvl-main .lvl-land--tone-light {
    /* Accent text on #ffffff: 7.64 to 7.79; marks 4.37 to 4.47. */
    --lvl-land-ground: #ffffff;
    background-color: #ffffff;
}

/* --------------------------------------------------------------------------
   3. Measure. Running text stops at ~70 characters, whatever the column.
   -------------------------------------------------------------------------- */

.lvl-main .lvl-land__intro,
.lvl-main .lvl-land__outro,
.lvl-main .lvl-process__step-text,
.lvl-main .lvl-icp-filter__text,
.lvl-main .lvl-pricing-table__footnote,
.lvl-main .lvl-cta-section__text {
    max-width: var(--lvl-land-measure);
}

/* --------------------------------------------------------------------------
   4. Review marker inside running text ("[PREIS PRÜFEN]").
   Same fixed surface as .lvl-land__review: #5c4a06 on #f7edb8 = 7.51.
   -------------------------------------------------------------------------- */

.lvl-land__flag {
    display: inline-block;
    margin-inline: 0.15em;
    padding: 0.1em 0.6em;
    border-radius: var(--lvl-land-pill);
    background: #f7edb8;
    color: #5c4a06;
    font-size: 0.72em;
    line-height: 1.5;
    letter-spacing: 0.08em;
    white-space: nowrap;
    vertical-align: 0.12em;
}

/* --------------------------------------------------------------------------
   5. Hero. Copy and image as equal halves (the image at 1440 is ~503px, 50 %
   of the column, was 36 %), the facts row under BOTH as four equal columns
   with a hairline above it.
   -------------------------------------------------------------------------- */

.lvl-main .lvl-hero--has-image .lvl-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 4.5vw, 4rem);
    row-gap: 0;
}

.lvl-main .lvl-hero__intro {
    max-width: 56ch;
}

/* 20px at 1440 (was 22px): 45 characters per line in the half column. */
.lvl-main .lvl-hero__intro p {
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
}

.lvl-main .lvl-hero__image {
    border: 1px solid var(--lvl-land-line);
    border-radius: var(--lvl-land-radius);
}

.lvl-main .lvl-hero__meta {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(var(--lvl-hero-facts, 4), minmax(0, 1fr));
    gap: 1.25rem var(--lvl-land-gap);
    margin: clamp(2.5rem, 5vw, 4rem) 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--lvl-land-line);
}

.lvl-main .lvl-hero__fact {
    margin: 0;
}

/* Label quiet, value in the ink: the value is what a reader came for. */
.lvl-main .lvl-hero__fact-label {
    margin: 0 0 0.4rem;
    letter-spacing: 0.18rem;
    color: var(--lvl-land-dim);
}

.lvl-main .lvl-hero__fact-value {
    margin: 0;
    font-size: var(--lvl-land-text);
    line-height: 1.4;
    color: inherit;
}

@media (max-width: 1023.98px) {
    .lvl-main .lvl-hero--has-image .lvl-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--lvl-land-gap);
    }

    .lvl-main .lvl-hero__meta {
        order: 3;
        margin-top: 0;
    }
}

@media (max-width: 767.98px) {
    .lvl-main .lvl-hero__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --------------------------------------------------------------------------
   6. Logo bar. A quiet strip under the hero, not a numbered section: the
   heading is set as an eyebrow (it stays an h2), the padding is half a
   section. Logos per row come from the renderer (--lvl-logo-lg/md/sm), so
   seven logos are one row of seven on a wide screen and 4 + 3 on a tablet
   and a phone, with the short row centred.
   -------------------------------------------------------------------------- */

.lvl-main .lvl-logo-bar.lvl-land {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.lvl-main .lvl-logo-bar__heading {
    font-size: max(0.8rem, 12px);
    line-height: 1.4;
    letter-spacing: 0.22rem;
    text-transform: uppercase;
    /* #a5a5d8 on #090920 = 8.37, #434456 on #f3f5fc = 8.76. */
    color: var(--lvl-land-dim);
}

.lvl-main .lvl-logo-bar__list {
    --lvl-logo-gap: clamp(1rem, 3vw, 2.5rem);
    --lvl-logo-n: var(--lvl-logo-lg, 6);
    justify-content: center;
    gap: 1.5rem var(--lvl-logo-gap);
    margin-top: 1.5rem;
}

.lvl-main .lvl-logo-bar .lvl-logo-bar__item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 calc((100% - (var(--lvl-logo-n) - 1) * var(--lvl-logo-gap)) / var(--lvl-logo-n));
    min-width: 0;
    min-height: 2.75rem;
}

.lvl-main .lvl-logo-bar__link {
    justify-content: center;
    max-width: 100%;
}

/* Fixed height, width from the ratio: the one combination Chromium resolves. */
.lvl-main .lvl-logo-bar__image {
    height: 2.5rem;
    max-width: 100%;
}

@media (max-width: 1023.98px) {
    .lvl-main .lvl-logo-bar__list {
        --lvl-logo-n: var(--lvl-logo-md, 4);
    }
}

@media (max-width: 767.98px) {
    .lvl-main .lvl-logo-bar__list {
        --lvl-logo-n: var(--lvl-logo-sm, 4);
        --lvl-logo-gap: 1rem;
    }

    .lvl-main .lvl-logo-bar__image {
        height: 2rem;
    }
}

/* --------------------------------------------------------------------------
   7. Service grid. The default rows (number | 340px title | text) ran
   3.600px tall with a 40-character text column. Now two columns of numbered
   entries from 768px, each under a hairline with a 40px accent mark: the
   same "01 · label, text" figure the case pages use for their feature lists.
   Text at 17px in the ~470px half column: 50 to 58 characters per line.
   -------------------------------------------------------------------------- */

.lvl-main .lvl-service-grid:not(.lvl-service-grid--cards) .lvl-service-grid__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.5rem, 4vw, 3.5rem) clamp(2rem, 5vw, 4rem);
}

.lvl-main .lvl-service-grid:not(.lvl-service-grid--cards) .lvl-service-grid__item,
.lvl-main .lvl-service-grid:not(.lvl-service-grid--cards) .lvl-service-grid__item:last-child {
    position: relative;
    display: block;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--lvl-land-line);
    border-bottom: 0;
}

.lvl-main .lvl-service-grid:not(.lvl-service-grid--cards) .lvl-service-grid__item::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 2.5rem;
    height: 2px;
    background: var(--lvl-land-accent);
}

.lvl-main .lvl-service-grid:not(.lvl-service-grid--cards) .lvl-service-grid__no {
    display: block;
    margin: 0 0 0.75rem;
    padding: 0;
}

.lvl-main .lvl-service-grid:not(.lvl-service-grid--cards) .lvl-service-grid__item-title {
    margin: 0 0 0.75rem;
}

/* Secondary text of a half-width entry: 17px, never under 16px on a phone. */
.lvl-main .lvl-service-grid__item-text p {
    font-size: max(1rem, var(--lvl-land-small));
}

@media (min-width: 768px) {
    .lvl-main .lvl-service-grid:not(.lvl-service-grid--cards) .lvl-service-grid__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --------------------------------------------------------------------------
   8. Process. The step text keeps the reading measure (3.), the title too.
   -------------------------------------------------------------------------- */

.lvl-main .lvl-process__step-title {
    max-width: var(--lvl-land-measure);
}

/* --------------------------------------------------------------------------
   9. cta-box on a landing page. It was a full rose fill, the one place the
   page broke "accents are never a surface". Now the case CTA figure: an
   outlined panel, a 40px accent mark on its top edge, a pill button in the
   same accent. Copy left, button right from 768px.
   -------------------------------------------------------------------------- */

.lvl-main .lvl-cta-box--landing,
.lvl-main .lvl-cta-box--landing.lvl-cta-box--primary,
.lvl-main .lvl-cta-box--landing.lvl-cta-box--secondary,
.lvl-main .lvl-cta-box--landing.lvl-cta-box--subtle {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    margin-block: 0 var(--lvl-land-rhythm);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--lvl-land-line-strong);
    border-radius: 0;
    background: none;
    color: inherit;
    box-shadow: none;
}

.lvl-main .lvl-cta-box--landing::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -1px;
    width: 2.5rem;
    height: 3px;
    background: var(--lvl-land-accent);
}

.lvl-main .lvl-cta-box--landing .lvl-cta-box__heading {
    grid-column: 1;
    margin: 0;
    font-size: var(--lvl-land-h3);
    font-weight: 300;
    line-height: 1.3;
    color: inherit;
}

.lvl-main .lvl-cta-box--landing .lvl-cta-box__text {
    grid-column: 1;
    max-width: var(--lvl-land-measure);
    margin: 0;
    color: var(--lvl-land-dim);
}

.lvl-main .lvl-cta-box--landing .lvl-cta-box__actions {
    margin-top: 0.75rem;
}

.lvl-main .lvl-cta-box--landing .lvl-cta-box__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.85rem 2rem;
    border: 1px solid var(--lvl-land-accent);
    border-radius: var(--lvl-land-pill);
    background: transparent;
    color: inherit;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.22rem;
    white-space: nowrap;
    text-decoration: none !important;
    transition: box-shadow 0.25s var(--lvl-land-ease), border-color 0.25s var(--lvl-land-ease);
}

.lvl-main .lvl-cta-box--landing .lvl-cta-box__button--ghost {
    border-color: var(--lvl-land-line-strong);
}

.lvl-main .lvl-cta-box--landing .lvl-cta-box__button:hover,
.lvl-main .lvl-cta-box--landing .lvl-cta-box__button:focus-visible {
    border-color: var(--lvl-land-accent);
    box-shadow: 0 0 1.25rem 0 var(--lvl-land-accent);
}

.lvl-main .lvl-cta-box--landing a:focus-visible {
    outline: 2px solid var(--lvl-land-accent-text);
    outline-offset: 3px;
}

@media (min-width: 768px) {
    .lvl-main .lvl-cta-box--landing,
    .lvl-main .lvl-cta-box--landing.lvl-cta-box--primary,
    .lvl-main .lvl-cta-box--landing.lvl-cta-box--secondary,
    .lvl-main .lvl-cta-box--landing.lvl-cta-box--subtle {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .lvl-main .lvl-cta-box--landing .lvl-cta-box__actions {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin-top: 0;
    }
}

@media (max-width: 767.98px) {
    .lvl-main .lvl-cta-box--landing .lvl-cta-box__button {
        width: 100%;
        white-space: normal;
    }

    .lvl-main .lvl-cta-box--landing .lvl-cta-box__actions {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .lvl-main .lvl-cta-box--landing .lvl-cta-box__button {
        letter-spacing: 0.12rem;
    }
}

/* --------------------------------------------------------------------------
   10. Testimonial. The renderer switches landing pages to the portrait
   (client-voice) shape; these lines only tune it for the landing column.
   No accent inside: the voice is an interlude, not a numbered section.
   -------------------------------------------------------------------------- */

.lvl-main .lvl-testimonial--portrait .lvl-testimonial__quote p {
    max-width: 34ch;
    margin-inline: auto;
}

.lvl-main .lvl-testimonial--portrait .lvl-testimonial__name {
    font-size: var(--lvl-land-text);
}

.lvl-main .lvl-testimonial--portrait .lvl-testimonial__case {
    align-self: center;
}

/* --------------------------------------------------------------------------
   11. References. Two by two for four cards (three across for three), the
   whole card is the link, and a card without a thumbnail shows the client's
   name in the well instead of an empty grey box.
   -------------------------------------------------------------------------- */

.lvl-main .lvl-references__list {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
    .lvl-main .lvl-references__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lvl-main .lvl-references__list--count-1 {
        grid-template-columns: minmax(0, 1fr);
        max-width: 32rem;
    }
}

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

.lvl-main .lvl-references__item {
    position: relative;
    transition: border-color 0.25s var(--lvl-land-ease), box-shadow 0.25s var(--lvl-land-ease);
}

.lvl-main .lvl-references__item:hover {
    border-color: var(--lvl-land-accent);
}

/* The stretched link: the title's anchor covers the card. */
.lvl-main .lvl-references__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--lvl-land-radius);
}

.lvl-main .lvl-references__link:focus-visible {
    outline: 0;
}

.lvl-main .lvl-references__item:has(.lvl-references__link:focus-visible) {
    border-color: var(--lvl-land-accent);
    outline: 2px solid var(--lvl-land-accent-text);
    outline-offset: 3px;
}

.lvl-main .lvl-references__media--fallback {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 1.25rem;
    border: 1px solid var(--lvl-land-line);
}

.lvl-main .lvl-references__media--fallback::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    width: 2.5rem;
    height: 2px;
    background: var(--lvl-land-accent);
}

.lvl-main .lvl-references__fallback {
    font-size: clamp(1.375rem, 1rem + 1.2vw, 2rem);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.01em;
    /* The ink, not --dim: dim on the doubled surface is only 6.47. White on
       #242439 = 15.15, ink on #dee0e9 = 14.88. */
    color: inherit;
}

/* --------------------------------------------------------------------------
   12. FAQ on a landing page: a numbered section ("05 · FAQ") in the landing
   column, questions under a hairline, the plus in the section accent, the
   answer at reading measure in the secondary ink.
   -------------------------------------------------------------------------- */

.lvl-main .lvl-faq--landing .lvl-faq__heading {
    margin: 0;
    font-size: var(--lvl-land-h2);
}

.lvl-main .lvl-faq--landing .lvl-faq__list {
    margin: 0;
    border-top: 1px solid var(--lvl-land-line);
}

.lvl-main .lvl-faq--landing .lvl-faq__item {
    border-bottom: 1px solid var(--lvl-land-line);
}

.lvl-main .lvl-faq--landing .lvl-faq__question {
    min-height: 2.75rem;
    padding: 1.25rem 0;
    gap: 1.5rem;
    font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
    font-weight: 300;
    line-height: 1.4;
}

.lvl-main .lvl-faq--landing .lvl-faq__question:hover,
.lvl-main .lvl-faq--landing .lvl-faq__question:focus-visible {
    color: var(--lvl-land-accent-text);
}

.lvl-main .lvl-faq--landing .lvl-faq__icon {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--lvl-land-accent);
}

.lvl-main .lvl-faq--landing .lvl-faq__icon::before,
.lvl-main .lvl-faq--landing .lvl-faq__icon::after {
    height: 1px;
}

.lvl-main .lvl-faq--landing .lvl-faq__answer {
    max-width: var(--lvl-land-measure);
    padding: 0 0 1.75rem;
    font-size: var(--lvl-land-text);
    line-height: 1.65;
    color: var(--lvl-land-dim);
}

/* The intro above the cards needs the same gap every other list gets. */
.lvl-main .lvl-references__list {
    margin-top: var(--lvl-land-gap);
}

/* Process: "Nummer groß im Akzent" (LANDING-PAGES.md). The step number at
   the figure size, light, in the accent text colour (>= 7:1 in both modes). */
.lvl-main .lvl-process__number {
    padding-top: 0;
    font-size: var(--lvl-land-figure);
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0;
}

/* Phone: the big step number sits above its step, so the text keeps the
   full column (the 3.5rem number track left it 25 characters wide). */
@media (max-width: 480px) {
    .lvl-main .lvl-process .lvl-process__step {
        grid-template-columns: minmax(0, 1fr);
    }

    .lvl-main .lvl-process__number {
        margin-bottom: 0.75rem;
    }

    .lvl-main .lvl-process__body {
        grid-column: 1;
    }
}

/* Focus: on a landing page the ring is the SECTION's accent text colour
   (>= 7:1 on every ground it can sit on), not the blog accent the shared rule
   falls back to, so ring and section mark never disagree. */
.lvl-main .lvl-land a:focus-visible,
.lvl-main .lvl-land summary:focus-visible,
.lvl-main .lvl-land button:focus-visible,
.lvl-main .lvl-land__table-wrap:focus-visible {
    outline: 2px solid var(--lvl-land-accent-text);
    outline-offset: 3px;
}

.lvl-main .lvl-land .lvl-references__link:focus-visible {
    /* The ring goes on the whole card instead (11. References). */
    outline: 0;
}

/* ==========================================================================
   D2 — design pass round 2 (2026-09-28): the two round-1 reviews.
   Same scope rule as D1: .lvl-main only, i.e. landing pages only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   R2-1. Type scale: "large and light". The H1 was barely above the lede,
   H2 and item H3 sat one step apart. Three clear steps now:
     H1  40 → 80px, lh 1.05     H2  32 → 48px, lh 1.12     H3  22 → 24px
   All AT Aero Medium at weight 300 (inherited from the site, never bolded).
   Section rhythm staggered: chapters 64 → 112px, FAQ and logo strip tighter.
   -------------------------------------------------------------------------- */

.lvl-main {
    --lvl-land-h1: clamp(2.5rem, 5.5vw, 5rem);
    --lvl-land-h2: clamp(2rem, 3.5vw, 3rem);
    --lvl-land-h3: max(1.1em, clamp(1.375rem, 1.2rem + 0.4vw, 1.5rem));
    --lvl-land-rhythm: clamp(4rem, 8vw, 7rem);
    --lvl-land-section-pad: clamp(4rem, 8vw, 7rem);
}

.lvl-main .lvl-hero__title {
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.lvl-main .lvl-land__heading,
.lvl-main > :is(h2, h3, h4) {
    line-height: 1.12;
    text-wrap: balance;
}

.lvl-main .lvl-land__heading--sm {
    line-height: 1.4;
}

.lvl-main .lvl-faq--landing {
    padding-block: clamp(3rem, 6vw, 5rem);
}

/* --------------------------------------------------------------------------
   R2-2. One mark per section start. Kicker ("01 · LEISTUNGEN"), heading and
   the 56px accent rule all said "a section starts here", and in the service
   grid the first entry mark followed 40px below the rule (two teal bars).
   The numbered kicker in the accent colour is the one mark now; the rule
   stays only in the hero, which has no kicker. Its element keeps the space.
   -------------------------------------------------------------------------- */

.lvl-main .lvl-land:not(.lvl-hero) .lvl-land__rule {
    height: 0;
    margin: 0 0 var(--lvl-land-gap);
    background: none;
}

.lvl-main .lvl-land__rule + * {
    margin-top: 0;
}

/* The kicker already counts the section: entries carry no second "01". */
.lvl-main .lvl-service-grid:not(.lvl-service-grid--cards) .lvl-service-grid__no {
    display: none;
}

@media (max-width: 767.98px) {
    .lvl-main .lvl-service-grid:not(.lvl-service-grid--cards) .lvl-service-grid__list {
        gap: 2rem;
    }

    /* Phone: 18px / 1.6 for the entries, not smaller type to save room. */
    .lvl-main .lvl-service-grid__item-text p {
        font-size: 1.125rem;
        line-height: 1.6;
    }
}

/* --------------------------------------------------------------------------
   R2-3. Core blocks between full-bleed bands (P1-3, P1-4). Since the bands
   run edge to edge, a paragraph or heading right after one sat on the colour
   edge (0px), and core prose ran the full 1000px (84 to 99 characters).
   Band edges get the section rhythm; prose gets the reading measure and
   keeps the column's LEFT edge, so it lines up with the sections.
   -------------------------------------------------------------------------- */

.lvl-main > .lvl-land--toned + :not(.lvl-land):not(script):not(style) {
    margin-top: var(--lvl-land-rhythm);
}

.lvl-main > :not(.lvl-land):not(script):not(style):has(+ .lvl-land--toned),
.lvl-main > :not(.lvl-land):not(script):not(style):has(+ script + .lvl-land--toned) {
    margin-bottom: var(--lvl-land-rhythm);
}

.lvl-main > :not(.lvl-land):not(script):not(style):has(+ .lvl-land--tone-auto) {
    margin-bottom: var(--lvl-land-gap);
}

.lvl-main > :is(p, ul, ol, blockquote) {
    max-width: min(var(--lvl-land-measure), calc(100% - 2 * var(--lvl-land-gutter)));
    margin-left: max(var(--lvl-land-gutter), calc((100% - var(--lvl-land-column)) / 2));
    margin-right: auto;
}

.lvl-main > h2 {
    margin-block: clamp(2.5rem, 5vw, 4rem) 1rem;
    font-size: var(--lvl-land-h2);
    font-weight: 300;
}

.lvl-main > :is(h3, h4) {
    margin-block: clamp(2rem, 4vw, 3rem) 0.75rem;
    font-size: var(--lvl-land-h3);
    font-weight: 300;
    line-height: 1.3;
}

/* Re-assert the band edge for headings (the two rules above set margin-top). */
.lvl-main > .lvl-land--toned + :is(h2, h3, h4) {
    margin-top: var(--lvl-land-rhythm);
}

/* --------------------------------------------------------------------------
   R2-4. cta-box (P1-1, P1-2). After a band or after core content it gets the
   section rhythm above it (it sat flush on the band edge). With two buttons
   the box is one column and the buttons wrap under the text (the text had
   been squeezed to ~20 characters beside two nowrap pills).
   -------------------------------------------------------------------------- */

.lvl-main > .lvl-land--toned + .lvl-cta-box.lvl-cta-box--landing,
.lvl-main > :not(.lvl-land) + .lvl-cta-box.lvl-cta-box--landing {
    margin-top: var(--lvl-land-rhythm);
}

.lvl-main .lvl-cta-box--landing .lvl-cta-box__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.lvl-main .lvl-cta-box.lvl-cta-box--landing:has(.lvl-cta-box__button ~ .lvl-cta-box__button) {
    grid-template-columns: minmax(0, 1fr);
}

.lvl-main .lvl-cta-box.lvl-cta-box--landing:has(.lvl-cta-box__button ~ .lvl-cta-box__button) .lvl-cta-box__actions {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   R2-5. Buttons: one system. 0.25rem tracking (DESIGN-SYSTEM.md), 48px
   minimum height, on every screen width.
   -------------------------------------------------------------------------- */

.lvl-main .lvl-land__button,
.lvl-main .lvl-cta-box--landing .lvl-cta-box__button {
    min-height: 3rem;
    letter-spacing: 0.25rem;
}

@media (max-width: 480px) {
    .lvl-main .lvl-land__button,
    .lvl-main .lvl-cta-box--landing .lvl-cta-box__button {
        letter-spacing: 0.25rem;
    }
}

/* --------------------------------------------------------------------------
   R2-6. Hero (P2-1, P2-5). Image top on the H1 top edge instead of floating
   at the middle of the copy column. The LCP image loads eagerly with
   fetchpriority=high (renderer). Fact label at the 12px floor the kicker uses.
   -------------------------------------------------------------------------- */

.lvl-main .lvl-hero--has-image .lvl-hero__inner {
    align-items: start;
}

/* Image top = H1 top. With a kicker above the H1 the image skips the
   kicker's line box (12.8px x 1.4) and its 0.75rem margin. */
.lvl-main .lvl-hero__media {
    margin-top: 0;
}

.lvl-main .lvl-hero__inner:has(.lvl-hero__kicker) .lvl-hero__media {
    margin-top: calc(max(0.8rem, 12px) * 1.4 + 0.75rem);
}

@media (max-width: 1023.98px) {
    .lvl-main .lvl-hero__inner:has(.lvl-hero__kicker) .lvl-hero__media {
        margin-top: 0;
    }
}

.lvl-main .lvl-hero__fact-label {
    font-size: max(0.8rem, 12px);
}

.lvl-main .lvl-logo-bar__heading {
    text-wrap: balance;
}

/* --------------------------------------------------------------------------
   R2-7. Light mode band (P2-4). #ffffff on the #f3f5fc page measured 1.09:1
   and read as no band at all. #e3e6f3 is 1.14:1 against the page, plus the
   hairline. On the darker ground the accent text gets its own darker set,
   every value >= 7:1 on #e3e6f3 (and >= 8.8 on white):
     teal #314e5a 7.13  violet #464575 7.13  green #3e4e3e 7.14
     yellow #524a34 7.07  orange #66403a 7.15  rose #633d5c 7.17
   Marks (non-text) stay: 3.51 to 3.66 on #e3e6f3. --dim 7.67, ink 15.75.
   -------------------------------------------------------------------------- */

body:not(.dark-mode) .lvl-main .lvl-land--tone-light {
    --lvl-land-ground: #e3e6f3;
    --lvl-land-acct-teal: #314e5a;
    --lvl-land-acct-violet: #464575;
    --lvl-land-acct-green: #3e4e3e;
    --lvl-land-acct-yellow: #524a34;
    --lvl-land-acct-orange: #66403a;
    --lvl-land-acct-rose: #633d5c;
    background-color: #e3e6f3;
}

/* --------------------------------------------------------------------------
   R2-8. Logos: equal optical weight, not equal boxes. The renderer hands each
   logo a --lvl-logo-scale (field `scale`, or a measured default for the
   shared client logos: GRS 0.72, LIVA 0.8, exp 1.3, …). A fine wordmark may
   reach a little into the gap; the gap is never smaller than 16px.
   -------------------------------------------------------------------------- */

.lvl-main .lvl-logo-bar__image {
    height: calc(2.5rem * var(--lvl-logo-scale, 1));
    max-width: calc(100% + 0.5 * var(--lvl-logo-gap));
}

@media (max-width: 767.98px) {
    .lvl-main .lvl-logo-bar__image {
        height: calc(2rem * var(--lvl-logo-scale, 1));
    }
}

/* --------------------------------------------------------------------------
   R2-9. References (P2-2, Codex 9). One contour layer less: no card frame,
   no card surface; the image leads (8:5, 12px radius, no border), title 16px
   below it, no permanent underline (the whole card is the link, the arrow and
   the hover/focus underline say so). A card without a picture shows the
   client as a small label in the kicker size, or no well at all.
   -------------------------------------------------------------------------- */

.lvl-main .lvl-references__item {
    gap: 1rem;
    padding: 0;
    border: 0;
    border-radius: var(--lvl-land-radius);
    background: none;
}

.lvl-main .lvl-references__item:hover {
    border-color: transparent;
}

.lvl-main .lvl-references__media {
    aspect-ratio: 8 / 5;
    border: 0;
    border-radius: var(--lvl-land-radius);
}

.lvl-main .lvl-references__image {
    transition: transform 0.4s var(--lvl-land-ease);
}

.lvl-main .lvl-references__item:hover .lvl-references__image {
    transform: scale(1.02);
}

.lvl-main .lvl-references__media--fallback {
    align-items: flex-end;
    border: 0;
    background: var(--lvl-land-surface);
}

.lvl-main .lvl-references__fallback {
    font-size: max(0.8rem, 12px);
    line-height: 1.4;
    letter-spacing: 0.22rem;
    text-transform: uppercase;
}

.lvl-main .lvl-references__item--no-media {
    padding-top: 1.25rem;
    border-top: 1px solid var(--lvl-land-line);
    border-radius: 0;
}

/* universal.css underlines every link with a (0,4,1) selector; this outranks it. */
.lvl-main .lvl-land .lvl-references__list .lvl-references__item a.lvl-references__link {
    text-decoration: none;
}

.lvl-main .lvl-land .lvl-references__list .lvl-references__item:hover a.lvl-references__link,
.lvl-main .lvl-land .lvl-references__list .lvl-references__item:has(.lvl-references__link:focus-visible) a.lvl-references__link {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

/* Title directly under the picture in every card, chips after it: a card
   with a client chip no longer pushes its title below the neighbour's. */
.lvl-main .lvl-references__body {
    display: flex;
    flex-direction: column;
}

.lvl-main .lvl-references__item-title {
    order: 1;
}

.lvl-main .lvl-references__chips {
    order: 2;
    margin: 0.5rem 0 0;
}

.lvl-main .lvl-references__result {
    order: 3;
}

.lvl-main .lvl-references__item-title {
    display: block;
}

/* The link is inline so the arrow stays glued to the last word (a no-break
   space joins them). The overlay that makes the whole card the target moves
   to ::before; the card is still one tab stop. */
.lvl-main .lvl-references__link {
    display: inline;
    min-height: 0;
}

.lvl-main .lvl-references__link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--lvl-land-radius);
}

.lvl-main .lvl-references__link::after {
    content: "\00a0→" / "";
    position: static;
    display: inline-block;
    color: var(--lvl-land-accent-text);
    transition: transform 0.25s var(--lvl-land-ease);
}

.lvl-main .lvl-references__item:hover .lvl-references__link::after {
    transform: translateX(0.25rem);
}

.lvl-main .lvl-references__item:has(.lvl-references__link:focus-visible) {
    outline-offset: 6px;
}

/* --------------------------------------------------------------------------
   R2-10. Radius: one step per kind. Outlined panels (cta-box, ICP) are square
   like the case CTA; pictures and picture wells are 12px.
   -------------------------------------------------------------------------- */

.lvl-main .lvl-icp-filter__panel {
    border-radius: 0;
}

@media (max-width: 767.98px) {
    /* ICP on a phone: compact panel, criteria in one column. */
    .lvl-main .lvl-icp-filter__panel {
        padding: 1.5rem;
    }

    .lvl-main .lvl-icp-filter__facts {
        flex-direction: column;
        gap: 1.5rem;
    }

    .lvl-main .lvl-icp-filter__fact {
        flex: none;
    }
}

/* --------------------------------------------------------------------------
   R2-11. Pricing on a phone (Codex 7). Under 640px the table is a list:
   service on top, the full amount with its interval under it, a hairline per
   entry. No sideways scrolling to find the price. The renderer carries
   explicit ARIA table roles, so the row/cell relation survives display:block.
   -------------------------------------------------------------------------- */

@media (max-width: 639.98px) {
    .lvl-main .lvl-pricing-table .lvl-land__table-wrap {
        overflow: visible;
        min-width: 0;
        margin-inline: 0;
        padding-inline: 0;
        background: none;
    }

    .lvl-main .lvl-pricing-table table,
    .lvl-main .lvl-pricing-table tbody,
    .lvl-main .lvl-pricing-table tr,
    .lvl-main .lvl-pricing-table th,
    .lvl-main .lvl-pricing-table td {
        display: block;
        width: auto;
        min-width: 0;
    }

    .lvl-main .lvl-pricing-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .lvl-main .lvl-pricing-table tbody tr {
        padding-block: 1.25rem;
        border-bottom: 1px solid var(--lvl-land-line);
    }

    .lvl-main .lvl-pricing-table tbody tr:first-child {
        border-top: 1px solid var(--lvl-land-line);
    }

    .lvl-main .lvl-pricing-table th,
    .lvl-main .lvl-pricing-table td {
        padding: 0;
        border: 0;
    }

    .lvl-main .lvl-pricing-table td {
        margin-top: 0.35rem;
    }
}

/* --------------------------------------------------------------------------
   R2-12. Template 1322 safety net, like the #div_block-30-1322 rule above.
   With the page's own toggle (L/D, top right) the header wordmark stayed
   #f3f5fc on the light ground: invisible. The template's icon inherits the
   Oxygen link colour; the main template (#45) sets its own. Only the colour
   is set here; the fix belongs in the Builder.
   -------------------------------------------------------------------------- */

body:not(.dark-mode) #fancy_icon-7-1322 {
    color: #090920;
}

/* A long German compound ("Barrierefreiheitsgesetz") at the 80px H1 is wider
   than the half hero column: it ran under the image and 44px past a phone's
   edge. Hyphenate (html lang="de"), and break as the last resort. */
.lvl-main .lvl-hero__title,
.lvl-main .lvl-land__heading,
.lvl-main > :is(h2, h3, h4) {
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}

/* ==========================================================================
   D3 — design pass round 3 (2026-09-28): review round 2.
   ========================================================================== */

/* R3-1. Pricing, desktop: the amount is the answer and never breaks.
   Amount + interval stay on one line; the service column takes the rest. */
@media (min-width: 640px) {
    .lvl-main .lvl-pricing-table td.lvl-pricing-table__range {
        white-space: nowrap;
    }
}

/* Phone list: the amount leads, the service is the label above it. */
@media (max-width: 639.98px) {
    .lvl-main .lvl-pricing-table th.lvl-pricing-table__service {
        font-size: var(--lvl-land-small);
        color: var(--lvl-land-dim);
    }

    .lvl-main .lvl-pricing-table .lvl-pricing-table__amount {
        font-size: 1.125rem;
    }
}

/* R3-2. Logos stay inside their cells (and so inside the column): scaling
   happens within the cell, never past it. Neighbours keep >= 24px. Between
   768 and 1199px seven logos go 4 + 3 (--lvl-logo-md), one row from 1200. */
.lvl-main .lvl-logo-bar__list {
    --lvl-logo-gap: clamp(1.5rem, 3vw, 2.5rem);
}

.lvl-main .lvl-logo-bar__image {
    max-width: 100%;
}

.lvl-main .lvl-logo-bar__link {
    max-width: 100%;
    min-width: 0;
}

@media (max-width: 1199.98px) {
    .lvl-main .lvl-logo-bar__list {
        --lvl-logo-n: var(--lvl-logo-md, 4);
    }
}

@media (max-width: 767.98px) {
    .lvl-main .lvl-logo-bar__list {
        --lvl-logo-n: var(--lvl-logo-sm, 4);
        --lvl-logo-gap: 1.5rem;
    }
}

/* R3-3. References: a card without anything to show gets an empty 8:5 well
   when its row has pictures (renderer), so titles sit on one line. The client
   chip only appeared on the one case with a `kunde`: dropped on landing pages
   (the title names the client, the no-picture well shows it). */
.lvl-main .lvl-references__chip--client {
    display: none;
}

.lvl-main .lvl-references__chips:not(:has(li:not(.lvl-references__chip--client))) {
    display: none;
}

/* R3-4. Hero facts: label and value rows shared across a row of facts
   (subgrid), so a label that wraps ("WORDPRESS WARTUNG" on a phone) no longer
   pushes its value below the neighbour's. */
.lvl-main .lvl-hero__meta {
    grid-auto-rows: auto;
}

.lvl-main .lvl-hero__fact {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    row-gap: 0.4rem;
    align-content: start;
}

.lvl-main .lvl-hero__fact-label {
    margin: 0;
    align-self: end;
}

/* R3-5. Hero image given by URL only: the renderer reserves its box with
   aspect-ratio (field image_ratio, default 16/9); the image is fitted in. */
.lvl-main .lvl-hero__image--ratio {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Mobile price list: the amount leads, the interval stays smaller (review r3). */
@media (max-width: 639.98px) {
    .lvl-main .lvl-pricing-table td.lvl-pricing-table__range {
        font-size: 1.125rem;
    }
}

/* ==========================================================================
   D4 — design pass round 4 (2026-09-28): Codex review round 3, points 2/3/6.
   ========================================================================== */

/* R4-1. Services on a phone: a second level of information without touching
   the copy. The entry number (01…06) comes back as a small accent label above
   the title, phone only (on desktop the kicker already counts the section);
   the title steps clearly above the 18px text; 40px between entries, the
   accent mark on each hairline is the divider. */
@media (max-width: 767.98px) {
    .lvl-main .lvl-service-grid:not(.lvl-service-grid--cards) .lvl-service-grid__list {
        gap: 2.5rem;
    }

    .lvl-main .lvl-service-grid:not(.lvl-service-grid--cards) .lvl-service-grid__no {
        display: block;
        margin: 0 0 0.5rem;
        padding: 0;
        font-size: max(0.8rem, 12px);
        line-height: 1.4;
        letter-spacing: 0.22rem;
        color: var(--lvl-land-accent-text);
    }

    .lvl-main .lvl-service-grid:not(.lvl-service-grid--cards) .lvl-service-grid__item-title {
        margin-bottom: 0.75rem;
        font-size: 1.5rem;
        line-height: 1.25;
    }
}

/* R4-2. The dark close. "Für wen" (lifted band) and the closing CTA (lifted
   band + accent edge) read as one long slab in dark mode. The closing CTA now
   stands on the page ground #090920, so the lifted ICP band ENDS before it;
   the 2px accent edge stays as the seam, and the CTA gets more air of its
   own. Light mode is unchanged (ink band, already distinct).
   On #090920: white 19.60, --dim 8.37, violet text #a796ff 7.89. */
body.dark-mode .lvl-main .lvl-cta-section.lvl-land--tone-dark {
    --lvl-land-ground: #090920;
    background-color: var(--lvl-land-ink);
    padding-block: clamp(5rem, 10vw, 8.5rem);
}

/* R4-3. Logos on a phone: the short row's cells share its spare width by
   weight (--lvl-logo-grow from the renderer, default 1). The fine, wide
   wordmark exp architekten (weight 3.5) gets the widest cell and grows with it;
   height-bound marks (GRS, LIVA) do not change. Full rows have no spare width,
   so nothing moves there. Still inside the cells, >= 24px between neighbours. */
@media (max-width: 767.98px) {
    .lvl-main .lvl-logo-bar .lvl-logo-bar__item {
        flex-grow: var(--lvl-logo-grow, 1);
    }
}

/* ==========================================================================
   lvl/case-teasers on a landing page (2026-09-29)
   --------------------------------------------------------------------------
   The card itself lives in blocks.css (it is the same in a blog post). Here
   only what a landing section changes: the head stays in the 1000px column,
   the card grid runs in the showcase archive's 1440 raster
   (.max-width-case-grid: max 1440px, 20px side padding, so three ~400px
   columns at 1440); kicker, heading and focus ring come from the landing
   layer.
   ========================================================================== */

.lvl-main .lvl-case-teasers.lvl-land {
    margin-block: 0;
}

/*
 * Head (kicker, H2, intro) stays in the 1000px column like every other
 * section; only the card grid breaks out to the archive raster. The section
 * is the query container, so 100cqw is the band width without the scrollbar.
 */
.lvl-main .lvl-case-teasers.lvl-land {
    container-type: inline-size;
}

.lvl-main .lvl-case-teasers .lvl-case-teasers__list {
    --lvl-ct-raster: min(1400px, calc(100cqw - 2.5rem));
    width: var(--lvl-ct-raster);
    max-width: none;
    margin-inline: calc((100% - var(--lvl-ct-raster)) / 2);
}

/* Two cards keep the card width of three; centred under the column. */
.lvl-main .lvl-case-teasers--cols-2 .lvl-case-teasers__list {
    --lvl-ct-raster: min(calc(2 * 25rem + var(--lvl-ct-col-gap)), calc(100cqw - 2.5rem));
}

/* The rule under the heading already carries the gap below it. */
.lvl-main .lvl-case-teasers .lvl-land__rule + .lvl-case-teasers__list {
    margin-top: 0;
}

.lvl-main .lvl-case-teasers .lvl-land__kicker + .lvl-case-teasers__list,
.lvl-main .lvl-case-teasers .lvl-land__intro + .lvl-case-teasers__list {
    margin-top: var(--lvl-land-gap);
}

/* The ring on the whole card, in the section's accent text colour. */
.lvl-main .lvl-land .lvl-case-teasers__link:focus-visible {
    outline: 2px solid var(--lvl-land-accent-text);
    outline-offset: 6px;
}