/* ==========================================================================
   levels-content — case study composition (post type `level`, Gutenberg body)
   --------------------------------------------------------------------------
   Loaded only on a singular case whose post_content is not empty
   (Case_Layout::is_gutenberg_case). Oxygen-built cases, posts and landing
   pages never load it. Selectors are scoped to `.lvl-case` (the wrapper
   Case_Layout::sectionize() writes) or `body.lvl-case-page`.

   Grid: the hand-built cases compose on 650 | 100 | 650 inside the 1400px
   container, image-led. Case_Layout turns the block list into sections and
   units; this file places them:

     intro     hero media (art-directed) · lead | key figures
     chapter   index + H2 (+ pull quote) | prose      ← one row
               full-width units: card rows, media, quote, table, slot
     closing   H2 + prose | CTA panel
     faq       heading | questions
     beats     (≥ 6 H2) one visual + a few lines per H2: split (text |
               visual, alternating), stack (H2 | text, visual below),
               quote; see "Beats" at the end of this file

   Scale (DS steps): 13 label · 15 caption · 18 secondary · 20 body ·
   26 lead / card heading · 32 H3 · 40 H2 / quote · 56 H1 / figures.
   Phone: 13 · 15 · 18 body · 20 · 21 H3 · 22 quote · 28 H2 · 32 H1 · 40.

   Spacing: 96px between chapters (major change), 64px between units inside
   a chapter, 48px inside card rows. Phone 56 / 48 / 40.

   Colour: text inherits (the shell flips body colour with .dark-mode).
   Semantic tokens below, defined once:
     --lvl-case-muted       secondary text, brand lavender, ≥ 7:1 (AAA)
     --lvl-case-accent      accent TEXT (index, links, quote marks), ≥ 7:1
     --lvl-case-mark        accent MARKS (3px bars, rules) — decorative, so
                            light mode uses the DS light variants
                            (--brand-teal …), not the darkened text values
   One accent per section, rotated in document order.
   ========================================================================== */

.lvl-case-page {
    --lvl-case-gutter: clamp(2.5rem, 7vw, 6.25rem);
    /* chapter change ≈ 113px: 48 out + 1 rule + 64 in */
    --lvl-case-space-in: clamp(3.5rem, 4.5vw, 4rem);
    --lvl-case-space-out: clamp(3rem, 3.4vw, 3rem);
    /* index (13) + gap (14) + bar (3) + gap (20): puts right-column content
       level with the H2 */
    --lvl-case-head-offset: calc(0.8125rem + 0.875rem + 3px + 1.25rem);
    --lvl-case-gap: clamp(3rem, 4.5vw, 4rem);
    --lvl-case-ease: cubic-bezier(0.84, 0.05, 0.31, 0.93);
    --lvl-case-font-light: "AT Aero Light", "Inter", system-ui, sans-serif;
    --lvl-case-font-medium: "AT Aero Medium", "Inter", system-ui, sans-serif;

    /* light mode (toggle), measured on #f3f5fc */
    --lvl-case-ink: #090920;
    --lvl-case-paper: #f3f5fc;
    --lvl-case-muted: #4b4e5b;              /* neutral grey, 7.59:1 (was lavender) */
    --lvl-case-rule: rgba(9, 9, 32, 0.16);
    --lvl-case-rule-strong: rgba(9, 9, 32, 0.5);
    --lvl-case-frame: rgba(9, 9, 32, 0.12);
    --lvl-case-slot: #adb4b9;               /* --grey */
    --lvl-case-warn: #e8d15e;               /* --brand-yellow, icon only */
    --lvl-case-glow: #9580ff;

    /* accent text (≥ 7:1) */
    --lvl-case-teal: #2e5958;
    --lvl-case-pink: #8b335e;
    --lvl-case-green: #435a2e;
    --lvl-case-yellow: #60520e;
    --lvl-case-orange: #8d380d;
    --lvl-case-violet: #4340c0;
    /* accent marks = DS light variants */
    --lvl-case-teal-mark: #6cb4b1;
    --lvl-case-pink-mark: #ce7aa3;
    --lvl-case-green-mark: #8cb369;
    --lvl-case-yellow-mark: #e8d15e;
    --lvl-case-orange-mark: #f09162;
    --lvl-case-violet-mark: #8d8bd9;
    --lvl-case-fig-surface: #ffffff;        /* node fill in figures */
}

body.dark-mode.lvl-case-page {
    --lvl-case-ink: #f3f5fc;
    --lvl-case-paper: #090920;
    --lvl-case-muted: #adb4b9;              /* --grey, 9.34:1 on #090920, 8.34:1 on the raised band */
    --lvl-case-rule: rgba(243, 245, 252, 0.16);
    --lvl-case-rule-strong: rgba(243, 245, 252, 0.5);
    --lvl-case-frame: rgba(243, 245, 252, 0.1);
    --lvl-case-slot: #434456;               /* --slate */
    --lvl-case-warn: #ffff80;               /* --yellow */

    --lvl-case-teal: #80ffea;
    --lvl-case-pink: #ff80bf;
    --lvl-case-green: #8aff80;
    --lvl-case-yellow: #ffff80;
    --lvl-case-orange: #ffcf80;
    --lvl-case-violet: #a08dff;             /* brand #9580ff is 6.35:1 */
    --lvl-case-teal-mark: #80ffea;
    --lvl-case-pink-mark: #ff80bf;
    --lvl-case-green-mark: #8aff80;
    --lvl-case-yellow-mark: #ffff80;
    --lvl-case-orange-mark: #ffcf80;
    --lvl-case-violet-mark: #9580ff;
    --lvl-case-fig-surface: #15153a;
}

/* --------------------------------------------------------------------------
   Oxygen hero, case-scoped (template 72 is not edited)
   -------------------------------------------------------------------------- */

/* Light mode: the shell paints the label #6cb4b1 = 2.19:1. Ink text, the
   brand teal stays as a decorative bar. */
body.lvl-case-page:not(.dark-mode) .js-case-label {
    color: var(--lvl-case-ink);
}

body.lvl-case-page:not(.dark-mode) .js-case-label::before {
    content: "";
    display: block;
    width: 2.5rem;
    height: 3px;
    margin-bottom: 0.875rem;
    background: var(--lvl-case-teal-mark);
}

/* H1: shell is 56px desktop / 25.6px phone (the phone step inverts the
   scale). Case-scoped: 32px phone → 56px desktop. */
body.lvl-case-page .js-case-h1.case-headline {
    font-size: clamp(2rem, 1.35rem + 2.75vw, 3.5rem);
    line-height: 1.12;
    text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Sections and accent rotation
   -------------------------------------------------------------------------- */

.ct-inner-content > .lvl-case {
    box-sizing: border-box;
    max-width: none;
    margin-inline: 0;
    color: inherit;
}

.lvl-case-section {
    --lvl-case-accent: var(--lvl-case-pink);
    --lvl-case-mark: var(--lvl-case-pink-mark);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--lvl-case-gutter);
    row-gap: var(--lvl-case-gap);
    align-items: start;
    padding-block: var(--lvl-case-space-in) var(--lvl-case-space-out);
    border-top: 1px solid var(--lvl-case-rule);
}

.lvl-case-section:nth-child(6n + 1) { --lvl-case-accent: var(--lvl-case-teal);   --lvl-case-mark: var(--lvl-case-teal-mark); }
.lvl-case-section:nth-child(6n + 2) { --lvl-case-accent: var(--lvl-case-pink);   --lvl-case-mark: var(--lvl-case-pink-mark); }
.lvl-case-section:nth-child(6n + 3) { --lvl-case-accent: var(--lvl-case-orange); --lvl-case-mark: var(--lvl-case-orange-mark); }
.lvl-case-section:nth-child(6n + 4) { --lvl-case-accent: var(--lvl-case-violet); --lvl-case-mark: var(--lvl-case-violet-mark); }
.lvl-case-section:nth-child(6n + 5) { --lvl-case-accent: var(--lvl-case-green);  --lvl-case-mark: var(--lvl-case-green-mark); }
.lvl-case-section:nth-child(6n + 6) { --lvl-case-accent: var(--lvl-case-yellow); --lvl-case-mark: var(--lvl-case-yellow-mark); }
/* Order teal · pink · orange · violet · green · yellow: the two warm
   pastels (orange, yellow) are never neighbours, and yellow lands on the
   6th section — a short one (closing row with 4 parts, FAQ with 3), never
   a chart part.
   Light mode: the pale yellow mark (#e8d15e, 1.41:1) gets 4px instead of 3. */
body.lvl-case-page:not(.dark-mode) .lvl-case-section:nth-child(6n + 6) { --lvl-case-mark-h: 4px; }
/* Yellow lands on the short closing row (a 3px bar next to the yellow
   footer band), never on a long chapter: #e8d15e is 1.41:1 on light. */

.lvl-case-section:last-child {
    border-bottom: 1px solid var(--lvl-case-rule);
}

.lvl-case-section > * {
    min-width: 0;
}

/* Head (index + H2 + optional pull quote) left, first prose unit beside it. */
.lvl-case-section__head {
    grid-column: 1;
    grid-row: 1;
}

.lvl-case-unit--prose {
    grid-column: 2;
}

.lvl-case-unit--wide {
    grid-column: 1 / -1;
}

/* One image (or its slot) beside the chapter's opening text. */
.lvl-case-unit--beside {
    grid-column: 1;
}

/* A chapter that opens with a card row or media: the head gets the line to
   itself, no empty right half beside it. */
.lvl-case-section__head--solo {
    grid-column: 1 / -1;
}

.lvl-case .lvl-case-section__head--solo h2.wp-block-heading {
    max-width: none;
}

/* Whatever sits beside the head starts on the H2's line, not the index's. */
.lvl-case-chapter > .lvl-case-section__head:not(.lvl-case-section__head--solo) + .lvl-case-unit {
    margin-top: var(--lvl-case-head-offset);
}

.lvl-case-chapter--closing > .lvl-case-section__head + .lvl-case-unit {
    margin-top: 0;
}

.lvl-case-chapter--closing > .lvl-case-unit--cta {
    margin-top: calc(3px + 1.25rem);
}

.lvl-case-section__index {
    display: block;
    margin-bottom: 1.25rem;
    font-family: var(--lvl-case-font-medium);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.25rem;
    color: var(--lvl-case-accent);
}

.lvl-case-section__index::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: var(--lvl-case-mark-h, 3px);
    margin-top: 0.875rem;
    background: var(--lvl-case-mark);
}

/* Unnumbered sections (closing, FAQ): the same bar, no number. */
.lvl-case-section__index--bare::after {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.lvl-case h2.wp-block-heading,
.lvl-case .lvl-faq__heading {
    margin: 0;
    max-width: 18ch;
    font-family: var(--lvl-case-font-medium);
    font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem);
    font-weight: 300;
    line-height: 1.15;
    color: inherit;
    text-wrap: balance;
}

.lvl-case h3.wp-block-heading {
    margin: 3.5rem 0 1.25rem;
    font-family: var(--lvl-case-font-medium);
    font-size: clamp(1.3125rem, 0.95rem + 1.2vw, 2rem);   /* 32 desktop, 21 phone */
    font-weight: 300;
    line-height: 1.3;
    color: inherit;
    text-wrap: balance;
}

/* H4 = annotation label: clearly below H3, the shell's label style. */
.lvl-case h4.wp-block-heading {
    margin: 2.5rem 0 0.75rem;
    font-family: var(--lvl-case-font-medium);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.25rem;
    text-transform: uppercase;
    color: var(--lvl-case-accent);
}

.lvl-case .wp-block-paragraph,
.lvl-case .wp-block-list {
    margin: 0 0 1.25rem;
    font-family: var(--lvl-case-font-light);
    font-size: 1.25rem;
    line-height: 1.6;
    color: inherit;
    text-wrap: pretty;
}

.lvl-case-unit--prose > :first-child,
.lvl-case-grid__item > :first-child {
    margin-top: 0;
}

.lvl-case-unit--prose > :last-child,
.lvl-case-grid__item > :last-child {
    margin-bottom: 0;
}

.lvl-case .wp-block-paragraph a,
.lvl-case .wp-block-list a {
    color: inherit;
    text-decoration-line: underline !important;
    /* The underline is the link's only cue, so it takes the TEXT accent
       (≥ 7:1), not the decorative mark (#e8d15e is 1.41:1 on light). */
    text-decoration-color: var(--lvl-case-accent) !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 0.2em;
    transition: color 0.2s var(--lvl-case-ease);
}

/* universal.css paints every a:hover violet with a (0,5,1) selector —
   #9580ff is 2.8:1 on the light ground. Case links take the accent text
   colour (≥ 7:1) instead; !important is the only lever against that
   specificity without an id. */
.lvl-case .wp-block-paragraph a:hover,
.lvl-case .wp-block-list a:hover {
    color: var(--lvl-case-accent) !important;
}

.lvl-case a:focus-visible,
.lvl-case summary:focus-visible {
    outline: 2px solid var(--lvl-case-accent);
    outline-offset: 0.25rem;
    border-radius: 2px;
}

/* Captions: core's global styles set them in the theme's Inter preset. */
.lvl-case figcaption,
.lvl-case .wp-element-caption {
    max-width: 40rem;
    margin: 1rem 0 0;
    font-family: var(--lvl-case-font-light);
    font-size: 0.9375rem;
    line-height: 1.5;
    text-align: start;
    color: var(--lvl-case-muted);
}

/* --------------------------------------------------------------------------
   Intro: hero across the grid · lead | key figures
   -------------------------------------------------------------------------- */

.lvl-case-section--intro {
    padding-top: 0;
    border-top: 0;
    row-gap: clamp(3rem, 4.5vw, 4rem);
}

.lvl-case-section--intro > .lvl-case-unit--prose {
    grid-column: 1;
}

.lvl-case-section--intro > .lvl-case-unit--figures {
    grid-column: 2;
    grid-row: 2;
}

.lvl-case-section--intro .lvl-case-unit--prose .wp-block-paragraph {
    font-size: clamp(1.25rem, 0.95rem + 0.85vw, 1.625rem);
    line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Key figures — factbox rhythm: hairlines, no cards, the number carries it.
   -------------------------------------------------------------------------- */

.lvl-case .lvl-key-figures {
    margin: 0;
}

.lvl-case .lvl-key-figures__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 2.5rem 1.5rem;
}

.lvl-case .lvl-key-figures .lvl-key-figures__item {
    position: relative;
    gap: 0.5rem;
    padding: 1.25rem 0 0;
    border: 0;
    border-top: 1px solid var(--lvl-case-rule-strong);
    border-radius: 0;
    background: none;
}

.lvl-case .lvl-key-figures .lvl-key-figures__item::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 2.5rem;
    height: 3px;
    background: var(--lvl-case-mark);
}

.lvl-case .lvl-key-figures__value {
    font-family: var(--lvl-case-font-light);
    font-size: clamp(2.5rem, 1.6rem + 2.4vw, 3.5rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: inherit;
    font-variant-numeric: tabular-nums;
}

.lvl-case .lvl-key-figures__label {
    font-family: var(--lvl-case-font-light);
    font-size: 1.125rem;
    line-height: 1.4;
}

.lvl-case .lvl-key-figures__note,
.lvl-case .lvl-key-figures__source {
    font-family: var(--lvl-case-font-light);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--lvl-case-muted);
    opacity: 1;
}

.lvl-case .lvl-key-figures__source {
    margin-top: 2rem;
    text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Pull quote (first core/quote of a chapter) — in the head column.
   -------------------------------------------------------------------------- */

.lvl-case-pull {
    margin-top: 2.5rem;
}

.lvl-case .lvl-case-pull .wp-block-quote {
    margin: 0;
    padding: 0 0 0 1.5rem;
    border: 0;
    border-left: 3px solid var(--lvl-case-mark);
    background: none;
    quotes: "„" "“";
}

.lvl-case .lvl-case-pull .wp-block-quote p {
    margin: 0;
    max-width: 24ch;
    font-family: var(--lvl-case-font-light);
    font-size: clamp(1.375rem, 1.05rem + 0.9vw, 1.625rem);
    font-style: normal;
    font-weight: 300;
    line-height: 1.35;
    color: inherit;
    text-wrap: balance;
}

.lvl-case .lvl-case-pull .wp-block-quote p::before { content: open-quote; }
.lvl-case .lvl-case-pull .wp-block-quote p::after { content: close-quote; }

/* --------------------------------------------------------------------------
   Card rows (sibling subsections) — full width, hairline + mark on top.
   -------------------------------------------------------------------------- */

.lvl-case-grid__title h3.wp-block-heading {
    margin: 0 0 2.5rem;
}

/* 2-up cards on the 650 | 100 | 650 grid. Each card is a 2-row subgrid
   (heading, body), so every body in a row starts on the same line even when
   one heading wraps. */
.lvl-case-grid__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem var(--lvl-case-gutter);
}

.lvl-case-grid--2 .lvl-case-grid__item {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 1.25rem;
    align-content: start;
}

.lvl-case-grid__item {
    position: relative;
    padding-top: 1.5rem;
    border-top: 1px solid var(--lvl-case-rule-strong);
}

.lvl-case-grid__item::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 2.5rem;
    height: 3px;
    background: var(--lvl-case-mark);
}

.lvl-case .lvl-case-grid__item h3.wp-block-heading {
    margin: 0;
}

/* 2-up cards: cap the heading measure so neighbouring headings break
   alike (balance does the rest) — a 1-line heading next to a 2-line one
   would leave its body floating in the subgrid's heading row. */
.lvl-case .lvl-case-grid--2 .lvl-case-grid__item h3.wp-block-heading {
    max-width: 16.5em;
    text-wrap: balance;
}

.lvl-case-grid__body > :first-child {
    margin-top: 0;
}

.lvl-case-grid__body > :last-child {
    margin-bottom: 0;
}

/* Exactly three subsections ("Das hat drei Folgen"): a sequence of rows,
   heading left | text right. The H3 keeps 2rem on a 650px measure instead
   of shrinking into 430px cards. */
.lvl-case-grid--rows .lvl-case-grid__items {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.5rem;
}

.lvl-case-grid--rows .lvl-case-grid__item {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--lvl-case-gutter);
    align-items: start;
}

.lvl-case .lvl-case-grid--rows .lvl-case-grid__item h3.wp-block-heading {
    max-width: none;
}

/* --------------------------------------------------------------------------
   Numbered markers over an evidence image (image attr lvlMarkers, % of the
   image box). The overlay has the image's own aspect ratio, so it covers the
   image exactly (not the caption) at every width.
   -------------------------------------------------------------------------- */

.lvl-case-media__item {
    position: relative;
}

.lvl-case-markers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: var(--lvl-ratio, 1.6);
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
}

.lvl-case .lvl-case-markers .lvl-case-markers__dot {
    position: absolute;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--lvl-case-mark);
    border-radius: 50%;
    /* The screenshots are light in both modes: ink badge, paper numeral
       (18.9:1), a paper halo to lift it off the UI underneath. */
    background: #090920;
    color: #f3f5fc;
    font-family: var(--lvl-case-font-medium);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 3px rgba(243, 245, 252, 0.9);
}

.lvl-case .lvl-case-markers .lvl-case-markers__dot::before,
.lvl-case .lvl-case-markers .lvl-case-markers__dot::marker {
    content: none;
}

/* The notes carry the same numbers ("01 SEO"). */
.lvl-case-annotated--markers .lvl-case-annotated__notes {
    counter-reset: lvl-case-note;
}

.lvl-case-annotated--markers .lvl-case-grid__item {
    counter-increment: lvl-case-note;
}

.lvl-case .lvl-case-annotated--markers h4.wp-block-heading::before {
    content: counter(lvl-case-note, decimal-leading-zero) "\2003";
}

.lvl-case-media__zoom {
    display: block;
    cursor: zoom-in;
}

.lvl-case-media__zoom:focus-visible {
    outline: 2px solid var(--lvl-case-accent);
    outline-offset: 0.25rem;
}

/* --------------------------------------------------------------------------
   Annotated evidence: the article detail left (650), the four points it
   shows right (650), 100px gutter. [desktop crop, phone crop] = art
   direction by position.
   -------------------------------------------------------------------------- */

.lvl-case-annotated {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--lvl-case-gutter);
    align-items: start;
}

.lvl-case-annotated__title {
    grid-column: 1 / -1;
}

.lvl-case .lvl-case-annotated__title h3.wp-block-heading {
    margin: 0 0 2.5rem;
}

.lvl-case-annotated__media {
    grid-column: 1;
}

.lvl-case-annotated__notes {
    grid-column: 2;
}

.lvl-case-annotated .lvl-case-grid__item {
    padding-top: 1.25rem;
    border-top: 1px solid var(--lvl-case-rule-strong);
}

.lvl-case-annotated .lvl-case-grid__item + .lvl-case-grid__item {
    margin-top: 2.25rem;
}

.lvl-case .lvl-case-annotated .lvl-case-grid__item h4.wp-block-heading {
    margin: 0 0 0.75rem;
}

/* --------------------------------------------------------------------------
   Media — width proportional to the aspect ratio (Case_Layout writes
   --lvl-ratio), so a row shares one height and nothing is cropped.
   -------------------------------------------------------------------------- */

.lvl-case-media {
    display: flex;
    align-items: flex-start;
    gap: clamp(1rem, 1.6vw, 1.5rem);
}

.lvl-case-media__item {
    flex: var(--lvl-ratio, 1.6) 1 0;
    min-width: 0;
}

.lvl-case .lvl-case-media .wp-block-image {
    margin: 0;
}

.lvl-case .lvl-case-media .wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    outline: 1px solid var(--lvl-case-frame);
    outline-offset: -1px;
}

/* Art direction: [0] desktop, [1] phone. The visible one takes the full
   width (a ratio < 1 as flex-grow would leave it short of the column). */
.lvl-case-media--art .lvl-case-media__item {
    flex: 1 1 auto;
}

.lvl-case-media--art .lvl-case-media__item--portrait {
    display: none;
}

.lvl-case-media--portrait {
    max-width: 22rem;
}

/* --------------------------------------------------------------------------
   Testimonial — an interlude on the grid, NOT the Oxygen strip's look
   (that one is centred, Retina, below the body). Left edge, 3/4 of the grid,
   the „ hangs, attribution directly below on the same edge.
   -------------------------------------------------------------------------- */

.lvl-case-unit--quote {
    margin-top: 1rem;
}

.lvl-case .lvl-case-unit--quote .lvl-testimonial {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.lvl-case .lvl-testimonial .lvl-land__inner {
    max-width: none;
    margin: 0;
    padding: 0;
}

.lvl-case .lvl-testimonial__figure {
    display: block;
    max-width: calc(75% + var(--lvl-case-gutter) / 4);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

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

.lvl-case .lvl-testimonial__quote p {
    margin: 0;
    font-family: var(--lvl-case-font-light);
    font-size: clamp(1.375rem, 0.85rem + 2vw, 2.5rem);
    font-weight: 300;
    line-height: 1.3;
    text-indent: -0.3em;   /* 20px container gutter: a full hang crowds the edge */
    text-wrap: pretty;
    color: inherit;
}

.lvl-case .lvl-testimonial__quote p:first-child::before,
.lvl-case .lvl-testimonial__quote p:last-child::after {
    color: var(--lvl-case-accent);
}

.lvl-case .lvl-testimonial__caption {
    display: block;
    margin: 1.75rem 0 0;
    padding: 0;
    border: 0;
}

.lvl-case .lvl-testimonial__who {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.lvl-case .lvl-testimonial__name {
    font-family: var(--lvl-case-font-medium);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.25rem;
    text-transform: uppercase;
}

.lvl-case .lvl-testimonial__role {
    font-family: var(--lvl-case-font-light);
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--lvl-case-muted);
}

/* --------------------------------------------------------------------------
   Table — full-width scoreboard: label-style head, values in 32px tabular
   figures, the latest period in Medium + accent (weight, not colour alone).
   -------------------------------------------------------------------------- */

.lvl-case .wp-block-table {
    max-width: none;
    margin: 0;
    overflow-x: auto;
}

.lvl-case .wp-block-table .lvl-land__table-wrap {
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
}

.lvl-case .lvl-land__table-wrap:focus-visible {
    outline: 2px solid var(--lvl-case-accent);
    outline-offset: 0.375rem;
}

.lvl-case .wp-block-table table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    font-family: var(--lvl-case-font-light);
    font-variant-numeric: tabular-nums;
}

.lvl-case .wp-block-table thead {
    border: 0;
}

.lvl-case .wp-block-table th,
.lvl-case .wp-block-table td {
    padding: 1.25rem 0 1.25rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--lvl-case-rule);
    font-weight: 300;
    text-align: right;
    vertical-align: baseline;
    color: inherit;
}

.lvl-case .wp-block-table tr > :first-child {
    width: 36%;
    padding-left: 0;
    text-align: left;
    font-size: 1.125rem;
}

.lvl-case .wp-block-table thead th:first-child {
    font-size: 0.8125rem;
}

.lvl-case .wp-block-table tbody td {
    font-size: 2rem;
    line-height: 1.1;
}

.lvl-case .wp-block-table thead th {
    padding-top: 0;
    padding-bottom: 1rem;
    border-bottom-color: var(--lvl-case-rule-strong);
    font-family: var(--lvl-case-font-medium);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.15rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.lvl-case .wp-block-table tbody tr:last-child > * {
    border-bottom-color: var(--lvl-case-rule-strong);
    font-family: var(--lvl-case-font-medium);
}

.lvl-case .wp-block-table tbody tr:last-child > :not(:first-child) {
    color: var(--lvl-case-accent);
}

/* --------------------------------------------------------------------------
   Data chapter (04): H2 + intro left, table right level with the H2,
   commentary under the table. One reading direction, no zigzag.
   -------------------------------------------------------------------------- */

.lvl-case-chapter--data > .lvl-case-section__head {
    grid-row: 1 / span 2;
}

.lvl-case-section__lead {
    margin-top: 2rem;
}

.lvl-case-section__lead > :last-child {
    margin-bottom: 0;
}

.lvl-case-chapter--data > .lvl-case-unit--table {
    grid-column: 2;
    grid-row: 1;
}

.lvl-case-chapter--data > .lvl-case-unit--prose {
    grid-column: 2;
}

.lvl-case-chapter--data {
    row-gap: 2.5rem;
}

/* --------------------------------------------------------------------------
   Closing: H2 + prose | CTA panel (no fill — accents are never surfaces).
   -------------------------------------------------------------------------- */

.lvl-case-chapter--closing > .lvl-case-unit--cta {
    grid-column: 2;
    grid-row: 1;
}

.lvl-case .lvl-cta-box,
.lvl-case .lvl-cta-box--primary,
.lvl-case .lvl-cta-box--secondary,
.lvl-case .lvl-cta-box--subtle {
    position: relative;
    margin: 0;
    padding: clamp(2rem, 3.5vw, 3rem);
    border: 1px solid var(--lvl-case-rule-strong);
    border-radius: 0;
    background: none;
    color: inherit;
    box-shadow: none;
}

.lvl-case .lvl-cta-box::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -1px;
    width: 2.5rem;
    height: var(--lvl-case-mark-h, 3px);
    background: var(--lvl-case-mark);
}

.lvl-case .lvl-cta-box__heading {
    margin: 0 0 0.75rem;
    font-family: var(--lvl-case-font-medium);
    font-size: clamp(1.3125rem, 0.95rem + 1.2vw, 2rem);
    font-weight: 300;
    line-height: 1.25;
    color: inherit;
}

.lvl-case .lvl-cta-box__text {
    margin: 0 0 2rem;
    font-family: var(--lvl-case-font-light);
    font-size: 1.25rem;
    line-height: 1.6;
    color: inherit;
}

/* Site button: pill, uppercase, wide tracking, violet glow on hover. */
.lvl-case .lvl-cta-box .lvl-cta-box__button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.25rem;
    padding: 0.75rem 1.75rem;
    border: 1px solid currentColor;
    border-radius: 1.875rem;
    background: transparent;
    color: inherit;
    font-family: var(--lvl-case-font-medium);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: box-shadow 0.3s var(--lvl-case-ease);
}

.lvl-case .lvl-cta-box .lvl-cta-box__button::after {
    content: "→";
    letter-spacing: 0;
    transition: transform 0.3s var(--lvl-case-ease);
}

.lvl-case .lvl-cta-box .lvl-cta-box__button:hover,
.lvl-case .lvl-cta-box .lvl-cta-box__button:focus-visible {
    color: inherit !important;
    text-decoration: none !important;
    box-shadow: 0 0 20px 0 var(--lvl-case-glow);
}

.lvl-case .lvl-cta-box .lvl-cta-box__button:hover::after {
    transform: translateX(0.25rem);
}

.lvl-case .lvl-cta-box .lvl-cta-box__button:focus-visible {
    outline: 2px solid var(--lvl-case-accent);
    outline-offset: 0.25rem;
}

/* --------------------------------------------------------------------------
   FAQ — heading left, questions right.
   -------------------------------------------------------------------------- */

.lvl-case-section--faq {
    display: block;
}

.lvl-case .lvl-faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--lvl-case-gutter);
    align-items: start;
    margin: 0;
}

.lvl-case .lvl-faq__heading::before {
    content: "";
    display: block;
    width: 2.5rem;
    height: var(--lvl-case-mark-h, 3px);
    margin-bottom: 1.25rem;
    background: var(--lvl-case-mark);
}

.lvl-case .lvl-faq__list {
    border-top: 1px solid var(--lvl-case-rule-strong);
}

.lvl-case .lvl-faq__item {
    border-bottom: 1px solid var(--lvl-case-rule);
}

.lvl-case .lvl-faq__question {
    min-height: 2.75rem;
    padding: 1.5rem 0;
    gap: 1.5rem;
    font-family: var(--lvl-case-font-light);
    font-size: 1.25rem;
    line-height: 1.4;
}

.lvl-case .lvl-faq__question:hover,
.lvl-case .lvl-faq__question:focus-visible {
    color: var(--lvl-case-accent);
}

.lvl-case .lvl-faq__icon {
    width: 1.125rem;
    height: 1.125rem;
}

.lvl-case .lvl-faq__icon::before,
.lvl-case .lvl-faq__icon::after {
    height: 1px;
}

.lvl-case .lvl-faq__answer {
    max-width: 38rem;
    padding: 0 0 1.75rem;
    font-family: var(--lvl-case-font-light);
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--lvl-case-muted);
}

/* --------------------------------------------------------------------------
   Missing asset ([SCREENSHOT PRÜFEN …]) — a quiet empty image slot: 1px
   --slate / --grey frame, a 16px yellow icon, nothing else loud.
   -------------------------------------------------------------------------- */

.lvl-case .lvl-case-unit--placeholder .lvl-info-box {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 0;
    aspect-ratio: 16 / 10;          /* the slot of the screenshot it stands for */
    margin: 0;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--lvl-case-slot);
    border-radius: 0;
    background: none;
    text-align: center;
}

.lvl-case .lvl-case-unit--placeholder .lvl-info-box__icon {
    width: 1rem;
    height: 1rem;
    color: var(--lvl-case-warn);
}

.lvl-case .lvl-case-unit--placeholder .lvl-info-box__icon svg {
    width: 1rem;
    height: 1rem;
}

.lvl-case .lvl-case-unit--placeholder .lvl-info-box__heading {
    margin: 0 0 0.5rem;
    font-family: var(--lvl-case-font-medium);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.25rem;
    text-transform: uppercase;
    color: inherit;
}

.lvl-case .lvl-case-unit--placeholder .lvl-info-box__text {
    max-width: 36rem;
    margin-inline: auto;
    font-family: var(--lvl-case-font-light);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--lvl-case-muted);
}

/* ==========================================================================
   ≤ 991px: one column. Heads above their text, units stack in DOM order.
   ========================================================================== */

@media (max-width: 991px) {
    .lvl-case-section,
    .lvl-case .lvl-faq {
        grid-template-columns: minmax(0, 1fr);
    }

    .lvl-case-section > *,
    .lvl-case-section--intro > .lvl-case-unit--prose,
    .lvl-case-section--intro > .lvl-case-unit--figures,
    .lvl-case-chapter--closing > .lvl-case-unit--prose,
    .lvl-case-chapter--closing > .lvl-case-unit--cta {
        grid-column: 1;
        grid-row: auto;
    }

    .lvl-case-section__head {
        margin-bottom: calc(2rem - var(--lvl-case-gap));
    }

    .lvl-case-chapter > .lvl-case-section__head:not(.lvl-case-section__head--solo) + .lvl-case-unit,
    .lvl-case-chapter--closing > .lvl-case-unit--cta {
        margin-top: 0;
    }

    .lvl-case-chapter--data > .lvl-case-section__head,
    .lvl-case-chapter--data > .lvl-case-unit--table,
    .lvl-case-chapter--data > .lvl-case-unit--prose,
    .lvl-case-chapter--closing > .lvl-case-unit--cta {
        grid-column: 1;
        grid-row: auto;
    }

    .lvl-case-chapter--data > .lvl-case-section__head {
        margin-bottom: 0;
    }

    .lvl-case .lvl-case-annotated__title h3.wp-block-heading {
        margin-bottom: 0;
    }

    .lvl-case-unit--prose {
        max-width: 42rem;
    }

    .lvl-case .lvl-faq__heading {
        margin-bottom: 2rem;
    }

    .lvl-case h2.wp-block-heading,
    .lvl-case .lvl-faq__heading {
        max-width: 22ch;
    }
}

/* ==========================================================================
   ≤ 767px: phone scale (32 · 28 · 21 · 22 · 18), phone art direction.
   ========================================================================== */

@media (max-width: 767px) {
    .lvl-case-page {
        --lvl-case-space-in: 3.5rem;
        --lvl-case-space-out: 3.5rem;
        --lvl-case-gap: 3rem;
    }

    .lvl-case .wp-block-paragraph,
    .lvl-case .wp-block-list,
    .lvl-case .lvl-cta-box__text {
        font-size: 1.125rem;
        line-height: 1.65;
    }

    .lvl-case-grid__items,
    .lvl-case-grid--rows .lvl-case-grid__item,
    .lvl-case-annotated {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 2.5rem;
    }

    .lvl-case-grid--2 .lvl-case-grid__item {
        display: block;
    }

    .lvl-case-grid--rows .lvl-case-grid__item {
        row-gap: 1.25rem;   /* heading → body, as in the cards */
    }

    /* Phone crop has no markers; drop the numbers from the notes. */
    .lvl-case .lvl-case-annotated--markers h4.wp-block-heading::before {
        content: none;
    }

    .lvl-case-annotated__media,
    .lvl-case-annotated__notes {
        grid-column: 1;
    }

    /* Cards are plain blocks on phones: 20px heading → body. (Rows get the
       same 20px from their row-gap, so no margin there.) */
    .lvl-case .lvl-case-grid--2 .lvl-case-grid__item h3.wp-block-heading {
        margin-bottom: 1.25rem;
    }

    /* Annotated evidence on phones: the phone crop (art direction). */
    .lvl-case-annotated .lvl-case-media--art .lvl-case-media__item--landscape {
        display: none;
    }

    .lvl-case-annotated .lvl-case-media--art .lvl-case-media__item--portrait {
        display: block;
        flex: 1 1 auto;
    }

    .lvl-case-grid__title h3.wp-block-heading {
        margin-bottom: 2rem;
    }

    /* Art direction: phones get the portrait crop instead of the panorama. */
    .lvl-case-media--art .lvl-case-media__item--landscape {
        display: none;
    }

    .lvl-case-media--art .lvl-case-media__item--portrait {
        display: block;
        flex: 1 1 auto;
    }

    /* Desktop pair [desktop shot, phone shot] → phones show the phone shot
       alone, full width, cropped to 4:5 from the top (header, title, author). */
    .lvl-case-media--phone-first .lvl-case-media__item--landscape {
        display: none;
    }

    .lvl-case-media--phone-first .lvl-case-media__item--portrait {
        flex: 1 1 auto;
    }

    .lvl-case-media--phone-first .lvl-case-media__item--portrait img {
        aspect-ratio: 4 / 5;
        object-fit: cover;
        object-position: top;
    }

    .lvl-case .lvl-key-figures__grid {
        gap: 2rem 1rem;
    }

    .lvl-case .lvl-key-figures__value {
        font-size: 2.5rem;
    }

    .lvl-case .lvl-key-figures__label {
        font-size: 1rem;
    }

    .lvl-case .lvl-testimonial__quote p {
        font-size: 1.375rem;
    }

    .lvl-case .lvl-testimonial__figure {
        max-width: none;
    }

    .lvl-case .lvl-case-pull .wp-block-quote p {
        font-size: 1.375rem;
    }

    .lvl-case .lvl-faq__question {
        padding: 1.25rem 0;
        font-size: 1.125rem;
    }

    .lvl-case .lvl-cta-box .lvl-cta-box__button {
        font-size: 1rem;
        letter-spacing: 0.15rem;
    }

    /* Table → one small factbox per row. Values labelled (data-label from
       Case_Layout) in quiet 13px; the latest row gets a 3px bar and Medium
       weight. The <thead> stays for screen readers. */
    .lvl-case .wp-block-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .lvl-case .wp-block-table table,
    .lvl-case .wp-block-table tbody {
        display: block;
    }

    .lvl-case .wp-block-table tbody tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.625rem 1rem;
        padding: 1.25rem 0;
        border-bottom: 1px solid var(--lvl-case-rule);
    }

    .lvl-case .wp-block-table tbody tr:first-child {
        border-top: 1px solid var(--lvl-case-rule-strong);
    }

    .lvl-case .wp-block-table tbody tr:last-child {
        padding-left: 1rem;
        border-bottom-color: var(--lvl-case-rule-strong);
        box-shadow: inset 3px 0 0 var(--lvl-case-mark);
    }

    .lvl-case .wp-block-table tbody tr > * {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        width: auto;
        padding: 0;
        border: 0;
        text-align: left;
        font-size: 1.25rem;
    }

    .lvl-case .wp-block-table tbody tr > :first-child {
        grid-column: 1 / -1;
        width: auto;
        font-size: 1rem;
    }

    .lvl-case .wp-block-table tbody tr > :not(:first-child)::before {
        content: attr(data-label);
        font-family: var(--lvl-case-font-light);
        font-size: 0.8125rem;
        line-height: 1.3;
        color: var(--lvl-case-muted);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lvl-case *,
    .lvl-case *::before,
    .lvl-case *::after {
        transition: none !important;
    }
}

/* ==========================================================================
   Figures (lvl/svg-figure) in a case. The SVG draws with currentColor (page
   ink) and the --lvl-fig-* tokens, which map to the case tokens here — so
   the section accent reaches the chart, and dark/light follow the toggle.
   ========================================================================== */

.lvl-case-section {
    --lvl-fig-accent: var(--lvl-case-accent);   /* text colour: lines, outlines, labels */
    --lvl-fig-fill: var(--lvl-case-mark);        /* mark colour: large fills (pastel in light) */
    --lvl-fig-accent-2: var(--lvl-case-violet);
    --lvl-fig-muted: var(--lvl-case-muted);
    --lvl-fig-grid: var(--lvl-case-rule);
    --lvl-fig-surface: var(--lvl-case-fig-surface);
    --lvl-fig-bg: var(--lvl-case-paper);
}

/* accent-2 is never the section's own hue */
.lvl-case-section:nth-child(6n + 4) { --lvl-fig-accent-2: var(--lvl-case-teal); }

.lvl-case .lvl-fig {
    margin: 0;
}

.lvl-case .lvl-fig__caption {
    max-width: none;            /* the caption is as wide as its figure */
    margin-top: 1rem;
}

/* Chapter mode: column = one grid column, full = the grid. */
.lvl-case-chapter > .lvl-case-unit--fig-column.lvl-case-unit--wide {
    grid-column: 1;
}

/* ==========================================================================
   Beats (Case_Layout::render_beat — cases with ≥ 6 H2 sections). One visual
   and a few lines per beat, unnumbered (the 3px bar stays), more air:
   ≈ 110px between beats, no hairline; 113px + hairline stays for the big
   changes (intro → story, story → closing → FAQ).
   ========================================================================== */

.lvl-case--beats {
    --lvl-case-beat-space: clamp(2.25rem, 3.9vw, 3.5rem);   /* ×2 between beats */
    --lvl-case-beat-gap: clamp(2rem, 3.4vw, 3rem);
    /* bare bar (3px) + its 20px gap: puts content level with the H2 */
    --lvl-case-bar-offset: calc(var(--lvl-case-mark-h, 3px) + 1.25rem);
}

.lvl-case-beat {
    row-gap: var(--lvl-case-beat-gap);
    padding-block: var(--lvl-case-beat-space);
    border-top: 0;
}

.lvl-case-section--intro + .lvl-case-beat {
    padding-top: var(--lvl-case-space-in);
    border-top: 1px solid var(--lvl-case-rule);
}

.lvl-case-beat:last-child {
    border-bottom: 0;
}

.lvl-case-beat__copy > .lvl-case-beat__text {
    margin-top: 2rem;
}

.lvl-case-beat__text > .lvl-case-unit + .lvl-case-unit {
    margin-top: 1.25rem;
}

/* A quote beat: the thesis large, with room above and below. */
.lvl-case-beat__visual--quote {
    grid-column: 1 / -1;
    padding-block: clamp(1rem, 3vw, 2.5rem);
}

.lvl-case .lvl-case-beat__visual--quote .lvl-case-pull {
    margin: 0;
}

.lvl-case .lvl-case-beat__visual--quote .wp-block-quote p {
    max-width: 26ch;
    font-size: clamp(1.75rem, 0.85rem + 2.6vw, 3rem);
    line-height: 1.2;
}

@media (min-width: 992px) {
    .lvl-case-beat--split > .lvl-case-beat__copy,
    .lvl-case-beat--split > .lvl-case-beat__visual {
        grid-row: 1;
    }

    .lvl-case-beat--visual-left > .lvl-case-beat__visual { grid-column: 1; }
    .lvl-case-beat--visual-left > .lvl-case-beat__copy { grid-column: 2; }
    .lvl-case-beat--visual-right > .lvl-case-beat__copy { grid-column: 1; }
    .lvl-case-beat--visual-right > .lvl-case-beat__visual { grid-column: 2; }

    /* The visual starts level with the H2, not with the bar. */
    .lvl-case-beat--split > .lvl-case-beat__visual {
        margin-top: var(--lvl-case-bar-offset);
    }

    /* Stack / text / quote: H2 | text on one row, the visual below. */
    .lvl-case-beat > .lvl-case-section__head {
        grid-column: 1;
        grid-row: 1;
    }

    .lvl-case-beat > .lvl-case-section__head--solo {
        grid-column: 1 / -1;
    }

    .lvl-case-beat > .lvl-case-beat__text {
        grid-column: 2;
        grid-row: 1;
        margin-top: var(--lvl-case-bar-offset);
    }

    .lvl-case-beat--stack > .lvl-case-beat__visual {
        grid-column: 1 / -1;
    }
}

/* Four short cards in a row (guardrails), each with an optional icon. */
.lvl-case-grid--4 .lvl-case-grid__items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 2.8vw, 2.5rem);
}

.lvl-case-grid--4 .lvl-case-grid__item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Card titles are H4 = the label style (13px tracked, accent) above 20px
   text: the H3 above them is the beat. (An H3 card title in a flat beat
   keeps the card-heading step, 26px.) */
.lvl-case .lvl-case-grid--4 .lvl-case-grid__item h3.wp-block-heading {
    max-width: none;
    font-size: clamp(1.25rem, 0.9rem + 0.8vw, 1.625rem);
}

.lvl-case .lvl-case-grid--4 .lvl-case-grid__item h4.wp-block-heading {
    margin: 0.5rem 0 0;
}

.lvl-case .lvl-case-grid--4 .lvl-case-grid__body .wp-block-paragraph {
    font-size: 1.25rem;
}

/* 56px icons: the 48-unit drawings' 2px strokes land at 2.3px, next to the
   figures' 2px lines. */
.lvl-case-grid__icon {
    width: 3.5rem;
    color: inherit;
}

.lvl-case .lvl-case-grid__icon .lvl-fig__caption {
    display: none;
}

/* Short list (a core/list of 2–8 labels ≤ 20 characters, e.g. languages):
   a plain 2 × 2 list, a 3px accent mark per item — facts, not controls. */
.lvl-case .lvl-case-unit--chips .wp-block-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    gap: 0.75rem 3rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.lvl-case .lvl-case-unit--chips .wp-block-list li {
    margin: 0;
    padding: 0.125rem 0 0.125rem 1rem;
    border-left: 3px solid var(--lvl-case-mark);
    font-family: var(--lvl-case-font-light);
    font-size: 1.25rem;
    line-height: 1.4;
    list-style: none;
}

.lvl-case .lvl-case-unit--chips .wp-block-list li::before,
.lvl-case .lvl-case-unit--chips .wp-block-list li::marker {
    content: none;
}

@media (max-width: 991px) {
    .lvl-case-grid--4 .lvl-case-grid__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 2.5rem;
    }

}

@media (max-width: 767px) {
    .lvl-case--beats {
        --lvl-case-beat-space: 2.25rem;
        --lvl-case-beat-gap: 2rem;
    }

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

    .lvl-case .lvl-case-beat__visual--quote .wp-block-quote p {
        font-size: 1.625rem;
    }
}

/* ==========================================================================
   Parts (an H2 with a kicker, Case_Layout::render_part): a strong part head
   — kicker (13px tracked, accent) + 3px bar + H2 40px — and lighter H3
   beats without a bar inside it. One accent per part. Rhythm: 113px + a
   hairline between parts, 72px between beats of a part (phone 96 / 48).
   ========================================================================== */

.lvl-case--parts {
    --lvl-case-beat-step: clamp(3rem, 5vw, 4.5rem);
}

.lvl-case-part {
    display: block;
}

.lvl-case-part__top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--lvl-case-gutter);
    align-items: start;
}

.lvl-case-part__top > .lvl-case-section__head--solo {
    grid-column: 1 / -1;
}

.lvl-case .lvl-case-part__kicker {
    margin: 0 0 1.25rem;
    text-transform: uppercase;
}

.lvl-case-part__lead {
    margin-top: var(--lvl-case-head-offset);
}

.lvl-case-part .lvl-case-beat {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--lvl-case-gutter);
    row-gap: var(--lvl-case-beat-gap);
    align-items: start;
    margin-top: var(--lvl-case-beat-step);
    padding: 0;
}

.lvl-case .lvl-case-beat__head h3.wp-block-heading {
    margin: 0;
}

.lvl-case-part .lvl-case-beat__copy > .lvl-case-beat__text {
    margin-top: 1.25rem;
}

@media (min-width: 992px) {
    /* H3 beats have no bar: visual and text start level with the H3. */
    .lvl-case-part .lvl-case-beat--split > .lvl-case-beat__visual,
    .lvl-case-part .lvl-case-beat > .lvl-case-beat__text {
        margin-top: 0.375rem;
    }
}

@media (max-width: 991px) {
    .lvl-case-part__top,
    .lvl-case-part .lvl-case-beat {
        grid-template-columns: minmax(0, 1fr);
    }

    .lvl-case-part__top > *,
    .lvl-case-part .lvl-case-beat > * {
        grid-column: 1;
        grid-row: auto;
    }

    .lvl-case-part__lead {
        margin-top: 2rem;
    }

    .lvl-case-part .lvl-case-beat > .lvl-case-beat__text {
        margin-top: 0;
    }

    /* heading → text 20px, as everywhere else on phones */
    .lvl-case-part .lvl-case-beat > .lvl-case-beat__head {
        margin-bottom: calc(1.25rem - var(--lvl-case-beat-gap));
    }
}

@media (max-width: 767px) {
    /* "18,5 → 10" must fit a 170px half-column */
    .lvl-case .lvl-key-figures__value {
        font-size: 2rem;
    }
}

/* Data beat: heading + commentary left, the compact table right, the
   chart across the grid below. */
.lvl-case-beat__lead {
    margin-top: 1.25rem;
}

.lvl-case-beat__lead .lvl-case-unit + .lvl-case-unit {
    margin-top: 1.25rem;
}

/* ==========================================================================
   Round 7 — part-head beats, label beats, captions, phone rhythm
   ========================================================================== */

/* The part's first section as its own beat: kicker + bar + H2 head it. */
.lvl-case-part > .lvl-case-beat--part-head {
    margin-top: 0;
}

@media (min-width: 992px) {
    .lvl-case-part .lvl-case-beat--part-head.lvl-case-beat--split > .lvl-case-beat__visual,
    .lvl-case-part .lvl-case-beat--part-head > .lvl-case-beat__text {
        margin-top: var(--lvl-case-head-offset);
    }
}

/* Kicker-only beat (heading style "label"): the H3 keeps its level, set as
   a 15px tracked label in muted ink — quieter than the part kicker, which
   keeps the accent. */
.lvl-case h3.wp-block-heading.is-style-lvl-label,
.lvl-case h4.wp-block-heading.is-style-lvl-label {
    font-family: var(--lvl-case-font-medium);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.15rem;
    text-transform: uppercase;
    color: var(--lvl-case-muted);
}

@media (min-width: 992px) {
    /* Split label beat: the visual's top edge meets the label's cap height
       (15px × 1.3 line box: half-leading 2px + ascender gap ≈ 3px). */
    .lvl-case-part .lvl-case-beat--label.lvl-case-beat--split > .lvl-case-beat__visual {
        margin-top: 0.3125rem;
    }
}

/* Text under a full-width visual (mini captions): one row of columns,
   numbered in the label style. */
.lvl-case-beat__after {
    grid-column: 1 / -1;
}

.lvl-case .lvl-case-beat__after ol.wp-block-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.5rem var(--lvl-case-gutter);
    margin: 0;
    padding: 0;
    list-style: none;
}

.lvl-case .lvl-case-beat__after ol.wp-block-list li {
    margin: 0;
    padding: 1rem 0 0;
    border-top: 1px solid var(--lvl-case-rule-strong);
    list-style: none;
}

/* No numerals: the drawing above already numbers its stations ①–⑤. */
.lvl-case .lvl-case-beat__after ol.wp-block-list li::before,
.lvl-case .lvl-case-beat__after ol.wp-block-list li::marker {
    content: none;
}

/* Full-width figures: the caption stays a readable column (650) under the
   figure's start. Method notes: inline on desktop, folded on phones. */
.lvl-case .lvl-fig--full .lvl-fig__caption {
    max-width: calc((100% - var(--lvl-case-gutter)) / 2);
}

.lvl-case .lvl-fig__method {
    display: none;
}

.lvl-case .lvl-case-media__zoom img {
    cursor: zoom-in;
}

/* Table caption (core/table figcaption). */
.lvl-case .wp-block-table figcaption {
    margin-top: 1rem;
}

@media (max-width: 767px) {
    /* 20px heading → body in every beat, whatever the heading style. */
    .lvl-case-part .lvl-case-beat__copy > .lvl-case-beat__text {
        margin-top: 1.25rem;
    }

    .lvl-case .lvl-fig__note {
        display: none;
    }

    .lvl-case .lvl-fig__method {
        display: block;
        margin-top: 0.25rem;
    }

    .lvl-case .lvl-fig__method summary {
        display: flex;
        align-items: center;
        min-height: 2.75rem;
        cursor: pointer;
        font-family: var(--lvl-case-font-medium);
        color: var(--lvl-case-accent);
    }

    .lvl-case .lvl-fig__method summary:focus-visible {
        outline: 2px solid var(--lvl-case-accent);
        outline-offset: 0.125rem;
    }

    .lvl-case .lvl-fig--full .lvl-fig__caption {
        max-width: none;
    }

    /* Guardrail cards: one column; 40px icon beside the label, the text
       full width below at 18/1.5; 24px between cards. */
    .lvl-case-grid--4 .lvl-case-grid__items {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .lvl-case-grid--4 .lvl-case-grid__item {
        display: grid;
        grid-template-columns: 2.5rem minmax(0, 1fr);
        column-gap: 1rem;
        row-gap: 0.75rem;
        align-items: center;
        padding-top: 1rem;
    }

    .lvl-case-grid--4 .lvl-case-grid__item > .lvl-case-grid__icon { grid-column: 1; grid-row: 1; }
    .lvl-case-grid--4 .lvl-case-grid__item > h4 { grid-column: 2; grid-row: 1; }
    .lvl-case-grid--4 .lvl-case-grid__item > .lvl-case-grid__body { grid-column: 1 / -1; grid-row: 2; }

    .lvl-case-grid__icon {
        width: 2.5rem;
    }

    .lvl-case .lvl-case-grid--4 .lvl-case-grid__item h4.wp-block-heading {
        margin: 0;
        letter-spacing: 0.15rem;
    }

    .lvl-case .lvl-case-grid--4 .lvl-case-grid__body .wp-block-paragraph {
        font-size: 1.125rem;
        line-height: 1.5;
    }

    .lvl-case .lvl-case-beat__after ol.wp-block-list {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Oxygen's testimonial strip after the body (template 72, not edited):
       case-scoped only. 36px centred on a phone was a wall of text. */
    body.lvl-case-page .case-content-kundenstimme .ct-text-block {
        width: auto !important;   /* Oxygen sets 80%, which left "empfehlen." alone at 375–390 */
        max-width: 34ch;
        margin-inline: 1.25rem !important;     /* the page's 20px phone gutter */
        text-align: left !important;
    }

    body.lvl-case-page .case-content-kundenstimme .body-retina-36 {
        font-size: 1.375rem !important;
        line-height: 1.35 !important;
    }
}

/* Heading → body is 20px in every beat: in the split copy column the head
   carries no margin of its own (the ≤ 991px chapter rule gives heads a
   negative one to offset the grid gap, which split columns do not have). */
.lvl-case-beat__copy > .lvl-case-section__head {
    margin-bottom: 0;
}

.lvl-case-part .lvl-case-beat__copy > .lvl-case-beat__text {
    margin-top: 1.25rem;
}

@media (max-width: 767px) {
    body.lvl-case-page .case-content-kundenstimme .ct-section-inner-wrap {
        align-items: flex-start !important;
    }
}

/* ==========================================================================
   Round 8
   ========================================================================== */

/* --------------------------------------------------------------------------
   Client voice (lvl/testimonial layout=portrait): the card of the Oxygen
   cases. Round 200px photo, the quote centred at H3 size in the 700px
   column, name and role centred below. Overrides the left-edge interlude.
   -------------------------------------------------------------------------- */

.lvl-case .lvl-testimonial--portrait .lvl-testimonial__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 43.75rem;
    margin: 0 auto;
    text-align: center;
}

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

.lvl-case .lvl-testimonial--portrait .lvl-testimonial__quote p:first-child::before,
.lvl-case .lvl-testimonial--portrait .lvl-testimonial__quote p:last-child::after {
    color: inherit;
}

.lvl-case .lvl-testimonial--portrait .lvl-testimonial__caption {
    margin-top: 2.5rem;
}

.lvl-case .lvl-testimonial--portrait .lvl-testimonial__who {
    align-items: center;
}

.lvl-case .lvl-testimonial--portrait .lvl-testimonial__name {
    font-family: var(--lvl-case-font-light);
    font-size: 1.125rem;
    font-weight: 300;
    letter-spacing: 0;
    text-transform: none;
}

.lvl-case .lvl-testimonial--portrait .lvl-testimonial__role {
    font-size: 0.875rem;
    color: inherit;
}

/* Oxygen strip (template 72, no condition): hidden when the case's ACF
   kundenstimme is empty because the voice sits in the body instead. */
body.lvl-case-page--no-strip .case-content-kundenstimme {
    display: none;
}

/* The lead-in above a centred voice is centred too. */
.lvl-case .lvl-case-beat__visual--leadin:has(.lvl-testimonial--portrait) .lvl-case-beat__leadin {
    max-width: 43.75rem;
    margin-inline: auto;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Lightbox for full-size screenshots (assets/js/case.js). Native <dialog>:
   focus trap, Esc, focus return come from the browser. Without JS the links
   below open the file itself.
   -------------------------------------------------------------------------- */

.lvl-case-lightbox {
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: 4.25rem 1rem 1rem;      /* room for the close button above the image */
    border: 0;
    background: rgba(8, 8, 24, 0.96);
    color: #fff;
}

.lvl-case-lightbox::backdrop {
    background: rgba(8, 8, 24, 0.96);
}

.lvl-case-lightbox__img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 5.25rem);
    margin: 0 auto;
    object-fit: contain;
}

.lvl-case-lightbox__close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #0a0a20;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.lvl-case-lightbox__close:focus-visible {
    outline: 3px solid var(--lvl-case-accent);
    outline-offset: 0.25rem;
}

/* Visible full-size link under evidence screenshots (the image itself links
   for pointer users only). */
.lvl-case .lvl-case-media__full {
    display: block;
    width: fit-content;
    margin-top: 0.25rem;
    padding-block: 0.6875rem;         /* ≥ 44px target with the 15px line */
    color: var(--lvl-case-accent);
    text-decoration-line: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 0.2em;
    white-space: nowrap;
}

.lvl-case .lvl-case-media__full:hover {
    color: var(--lvl-case-accent) !important;
    text-decoration-thickness: 2px !important;
}

/* The testimonial's lead-in ("… über diese Zusammenarbeit:") sits right
   above the quote, 72px below whatever precedes it. */
.lvl-case-beat__visual--leadin {
    margin-top: calc(4.5rem - var(--lvl-case-beat-gap));
}

.lvl-case-beat__leadin {
    max-width: calc((100% - var(--lvl-case-gutter)) / 2);
    margin-bottom: 1.5rem;
}

.lvl-case-beat__leadin .wp-block-paragraph {
    margin: 0;
}

@media (max-width: 767px) {
    .lvl-case-beat__leadin {
        max-width: none;
    }

    /* Oxygen strip: ≤ 48px above the quote, 16px to the attribution. */
    body.lvl-case-page .case-content-kundenstimme,
    body.lvl-case-page .case-content-kundenstimme .ct-section-inner-wrap {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    body.lvl-case-page .case-content-kundenstimme .ct-section-inner-wrap {
        padding-top: 3rem !important;
    }

    body.lvl-case-page .case-content-kundenstimme .body-retina-36 {
        margin-bottom: 1rem !important;
    }

    body.lvl-case-page .case-content-kundenstimme .ct-text-block.label {
        margin-top: 0 !important;
    }
}

@media (max-width: 767px) {
    /* Divider (end of the case body) → Alexa quote: one 48px step. The
       Oxygen wrapper around ct_inner_content adds 75px padding-bottom; the
       strip's inner wrap already carries the 48px (see above). :has() keeps
       it structural, the id is the fallback for the current template. */
    body.lvl-case-page .ct-div-block:has(> .ct-section > .ct-section-inner-wrap > .ct-inner-content > .lvl-case),
    body.lvl-case-page #div_block-26-56 {
        padding-bottom: 0 !important;
    }

    body.lvl-case-page .case-content-kundenstimme .body-retina-36 {
        text-wrap: balance;   /* fallback */
        text-wrap: pretty;    /* no lone "empfehlen." */
    }
}

/* ==========================================================================
   Case: accent per part (heading attr lvlAccent → section modifier), set by
   the case author instead of the document-order rotation above. The intro
   (key figures) takes the first part's accent, FAQ the closing chapter's.
   Key-figure values carry the accent, in Medium and bold (Philipp, 28.09.).
   ========================================================================== */

.lvl-case .lvl-case-section--accent-teal   { --lvl-case-accent: var(--lvl-case-teal);   --lvl-case-mark: var(--lvl-case-teal-mark); }
.lvl-case .lvl-case-section--accent-pink   { --lvl-case-accent: var(--lvl-case-pink);   --lvl-case-mark: var(--lvl-case-pink-mark); }
.lvl-case .lvl-case-section--accent-orange { --lvl-case-accent: var(--lvl-case-orange); --lvl-case-mark: var(--lvl-case-orange-mark); }
.lvl-case .lvl-case-section--accent-violet { --lvl-case-accent: var(--lvl-case-violet); --lvl-case-mark: var(--lvl-case-violet-mark); }
.lvl-case .lvl-case-section--accent-green  { --lvl-case-accent: var(--lvl-case-green);  --lvl-case-mark: var(--lvl-case-green-mark); }
.lvl-case .lvl-case-section--accent-yellow { --lvl-case-accent: var(--lvl-case-yellow); --lvl-case-mark: var(--lvl-case-yellow-mark); }
/* accent-2 in figures must never be the section's own hue */
.lvl-case .lvl-case-section--accent-violet { --lvl-fig-accent-2: var(--lvl-case-teal); }

.lvl-case .lvl-case-section--intro .lvl-key-figures__value {
    font-family: var(--lvl-case-font-medium);
    font-weight: 700;
    color: var(--lvl-case-accent);
}

/* Split beats: copy and visual centred on each other (Philipp, 28.09.) —
   the visual no longer hangs from the heading's top edge. */
@media (min-width: 768px) {
    .lvl-case .lvl-case-part .lvl-case-beat--split {
        align-items: center;
    }
}

/* More air between beats in a part and above a pull quote (Philipp, 29.09.). */
.lvl-case-part {
    --lvl-case-beat-step: clamp(4.5rem, 7vw, 7rem);
}

.lvl-case .lvl-case-part .lvl-case-beat__visual--quote {
    padding-block: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2.5rem);
}