/* ==========================================================================
   TOP JOB relaunch - reference prototype stylesheet
   HAND-WRITTEN SOURCE. The build never deletes or rewrites this file.

   Every value below was MEASURED on the Elementor master build
   https://topjob.x-ad.info on 24.09.2026 with src/staging_audit.py:
     _work/staging/layout/<page>-<viewport>.json   element boxes and styles
     _work/staging/css/                            the Elementor CSS itself
   Viewports measured: 1920 (design width), 1440, 1024, 390.
   The staging data-id of every section this CSS mirrors is named in the
   component comments, so the implementer finds the container in the
   Navigator.

   Values that do NOT come from the design are marked DERIVED. They cover
   states the design does not show (focus, disabled, active) and parts the
   content master needs but the design lacks (utility row, submenu row,
   table, deep-dive box). Each DERIVED part has a matching row in
   matching/matching.md.

   build/global-settings.md is generated from the :root block below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   Tier 1 primitives -> tier 2 semantic -> tier 3 component.
   Components only read tier 2 and tier 3. Primitive names carry the
   Elementor global colour slot in the comment.
   -------------------------------------------------------------------------- */
:root {
  /* Tier 1 - primitives (Elementor kit #6) */
  --tj-c-ink:        #1E1E1E;                 /* Primary + Secondary */
  --tj-c-paper:      #FBFBFB;                 /* custom 2593443, page background */
  --tj-c-outside:    #ECECEC;                 /* DERIVED 24.09.2026, beyond the 1920 px box */
  --tj-c-white:      #FFFFFF;                 /* custom 5ee7adb */
  --tj-c-gold:       #D0AA6D;                 /* Accent */
  --tj-c-gold-hover: #B28D50;                 /* button hover, measured on staging */
  --tj-c-gold-line:  rgba(208, 170, 109, .898); /* chip border, measured */
  --tj-c-slate:      #2D2F35;                 /* base of Text and borders */
  --tj-c-slate-70:   rgba(45, 47, 53, .698);  /* Text  (#2D2F35B2) */
  --tj-c-slate-10:   rgba(45, 47, 53, .1);    /* custom 0143662 (#2D2F351A) */
  --tj-c-red:        #B61F29;                 /* header button only */
  --tj-c-red-hover:  #9C1A22;                 /* DERIVED, not on staging */
  --tj-c-white-70:   rgba(255, 255, 255, .698);
  --tj-c-white-74:   rgba(251, 251, 251, .74);
  --tj-c-icon:       #333333;                 /* icon-list icons, measured */
  --tj-c-ink-44:     rgba(30, 30, 30, .44);   /* negative pill text, measured */
  --tj-c-acc-title:  #2A2A2B;                 /* accordion title, measured */

  --tj-grad-step-1:  linear-gradient(180deg, #2D2F35 0%, #330003 100%);  /* 135f50e */
  --tj-grad-step-2:  linear-gradient(180deg, #2D2F35 0%, #565656 100%);  /* dc74770 */
  --tj-ov-left:      linear-gradient(280deg, rgba(0,0,0,0) 0%, #000 100%);   /* 4a2bf2d, opacity 1 */
  --tj-ov-quote:     linear-gradient(90deg, #000 54%, rgba(255,255,255,0) 70%); /* 5d1f7ee, opacity .5 */
  /* DECIDED 24.09.2026 (Boris): the KPI card gradient spans the whole card.
     Staging 4a2bf2d fades to 0 on the right, where gold figures measured 1.12:1. */
  --tj-ov-kpi:       linear-gradient(280deg, rgba(0,0,0,.65) 0%, #000 100%);

  /* Tier 2 - semantic */
  --tj-bg:             var(--tj-c-paper);
  --tj-outside:        var(--tj-c-outside);   /* DERIVED: area beyond the 1920 px box */
  --tj-surface-dark:   var(--tj-c-ink);
  --tj-surface-white:  var(--tj-c-white);
  --tj-surface-tint:   var(--tj-c-slate-10);
  --tj-text:           var(--tj-c-slate-70);
  --tj-text-strong:    var(--tj-c-ink);
  --tj-text-inverse:   var(--tj-c-white);
  --tj-text-inverse-2: var(--tj-c-white-70);
  --tj-accent:         var(--tj-c-gold);
  --tj-accent-hover:   var(--tj-c-gold-hover);
  --tj-line:           var(--tj-c-slate-10);
  --tj-cta-header:     var(--tj-c-red);
  --tj-focus:          var(--tj-c-ink);        /* DERIVED, the design shows no focus */
  --tj-focus-inverse:  var(--tj-c-white);      /* DERIVED */
  --tj-text-on-gold:   #3E372C;                 /* accordion answer on gold, measured on staging */

  /* Typography - Kumbh Sans, variable font, weights 400/500/600 in use.
     DECIDED 28.09.2026 (Boris, Nachtrag 40): eight roles instead of 31 text
     styles, one Elementor Global Font each. Staging values in brackets.
     Tablet and phone values in the two media blocks below this one. */
  --tj-font: "Kumbh Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --tj-display:   55px; --tj-display-lh:   63px; --tj-display-ls:   -2px;  /* H1, weight 500 (2cec01b) */
  --tj-section:   40px; --tj-section-lh:   48px; --tj-section-ls:   -2px;  /* H2, weight 500 (42ec012) */
  --tj-statement: 28px; --tj-statement-lh: 36px; --tj-statement-ls: -1px;  /* quote, step title, year; weight 500 (30/40, 34/42) */
  --tj-figure:    55px; --tj-figure-lh:    55px;                           /* counter value, weight 600, gold (37073a4) */
  --tj-title:     20px; --tj-title-lh:     28px;                           /* H3, card and row title, weight 600 (20/24) */
  --tj-intro:     20px; --tj-intro-lh:     30px;                           /* lead paragraph, weight 400 (17/23) */
  --tj-body:      17px; --tj-body-lh:      26px;                           /* text, weight 400 (17/24) */
  --tj-label:     15px; --tj-label-lh:     20px; --tj-label-ls:    .2px;   /* eyebrow, labels, sources; weight 600, meta 400 */
  --tj-btn: 16px;  --tj-btn-lh: 16px;                       /* button, weight 600, unchanged */
  --tj-nav: 16px;  --tj-nav-lh: 22px;                       /* nav-menu 1dea5da, weight 500, unchanged */
  --tj-measure: 36em;        /* about 70 characters of text */
  --tj-measure-intro: 32em;
  /* Component names read the roles. */
  --tj-h1: var(--tj-display);     --tj-h1-lh: var(--tj-display-lh);     --tj-h1-ls: var(--tj-display-ls);
  --tj-h2: var(--tj-section);     --tj-h2-lh: var(--tj-section-lh);     --tj-h2-ls: var(--tj-section-ls);
  --tj-h3: var(--tj-title);       --tj-h3-lh: var(--tj-title-lh);
  --tj-h3-l: var(--tj-statement); --tj-h3-l-lh: var(--tj-statement-lh);
  --tj-h3-col: var(--tj-statement); --tj-h3-col-lh: var(--tj-statement-lh);
  --tj-lead: var(--tj-body);      --tj-lead-lh: var(--tj-body-lh);      /* historical name: every paragraph reads it */
  --tj-small: var(--tj-body);     --tj-small-lh: var(--tj-body-lh);
  --tj-list: var(--tj-body);      --tj-list-lh: var(--tj-body-lh);
  --tj-quote: var(--tj-statement); --tj-quote-lh: var(--tj-statement-lh);
  --tj-kpi: var(--tj-figure);     --tj-kpi-lh: var(--tj-figure-lh);
  --tj-kpi-label: var(--tj-title); --tj-kpi-label-lh: var(--tj-title-lh);
  --tj-chip: var(--tj-label);     --tj-chip-lh: var(--tj-label-lh);
  --tj-note: var(--tj-label);     --tj-note-lh: var(--tj-label-lh);
  --tj-pill: 20px; --tj-pill-lh: 20px;                      /* pill c0c27e0, prototype only (not in use) */

  /* Layout - Elementor kit: container 1490, default padding 10, widgets 20 */
  --tj-container: 1490px;
  /* DECIDED 24.09.2026 (Boris, Nachtrag 23): the whole site is boxed at 1920 px.
     Beyond it the page stands centred on the outside tone. */
  --tj-page-max:  1920px;
  /* Offset of fixed elements to the box edge. Only for position: fixed, where
     100 % is the viewport without scrollbar, exactly like the centred body. */
  --tj-page-side: max(0px, calc((100% - var(--tj-page-max)) / 2));
  --tj-pad-x: 10px;
  /* DECIDED 28.09.2026 (Nachtrag 40): grid gap 24 / 20 / 16, one value for the
     columns of the 12-column grid and for every text column. */
  --tj-gap: 24px;
  /* DECIDED 24.09.2026 (Nachtrag 23, both judges): one page edge and one text
     axis. The gutter replaces the kit padding 10 and the hero frame 22 for top
     level containers; the inset is the distance from a surface edge to its
     text, in cards and on paper alike. Up to 1538 px every surface starts at
     x = 24 and every text at x = 84. */
  --tj-gutter: 24px;
  --tj-inset: 60px;
  --tj-header-h: 80px;       /* d766443 */
  --tj-util-h: 38px;         /* DERIVED utility row */
  --tj-subnav-h: 48px;       /* DERIVED submenu row (Nachtrag 31), lies on the head image (Nachtrag 33) */
  --tj-stage-border: var(--tj-gutter);   /* hero frame, staging 22 / 15 / 10, now the gutter */

  /* Spacer widget heights in use on staging */
  --tj-sp-4: 4px;   --tj-sp-5: 5px;   --tj-sp-10: 10px;  --tj-sp-12: 12px;
  --tj-sp-20: 20px; --tj-sp-22: 22px; --tj-sp-25: 25px;  --tj-sp-30: 30px;
  --tj-sp-36: 36px; --tj-sp-40: 40px; --tj-sp-50: 50px;  --tj-sp-60: 60px;
  --tj-sp-70: 70px; --tj-sp-80: 80px; --tj-sp-90: 90px;  --tj-sp-99: 99px;
  --tj-sp-122: 122px; --tj-sp-150: 150px;

  /* Radius, by role */
  --tj-r-hero-start: 50px;   /* 8f79d91 */
  --tj-r-hero: 40px;         /* 42f519b */
  /* DECIDED 28.09.2026 (Nachtrag 40): two radii, surface 40 (phone 24) and card
     16, plus the button pill. The staging radii (in brackets) read them. */
  --tj-r-card-s: var(--tj-r-inner);       /* image cards (25) */
  --tj-r-card: var(--tj-r-inner);         /* loop card, split image (40) */
  --tj-r-card-l: var(--tj-r-surface);     /* step card, dark card (50) */
  --tj-r-card-kompass: var(--tj-r-inner); /* 168f3db (45) */
  --tj-r-form: var(--tj-r-inner);         /* 67f95ec (35); the form is a white card on paper */
  --tj-r-acc: var(--tj-r-inner);          /* accordion item (30), now a line */
  --tj-r-portrait: var(--tj-r-inner);     /* jury card 4d211e4 (30) */
  --tj-r-pill: 44px;                      /* pill c0c27e0, prototype only */
  --tj-r-btn: 50px;
  --tj-r-label: var(--tj-r-inner);        /* dark label cc19d7c (15) */
  --tj-r-surface: 40px;      /* DECIDED 24.09.2026: surfaces (quote, KPI, ink, white, closing); phone 24 */
  --tj-r-inner: 16px;        /* DECIDED 28.09.2026 (Nachtrag 40): every card and image card; only two radii */
  /* Surfaces (Nachtrag 40): padding top and bottom inside ink and white surfaces. */
  --tj-pad-surface: 96px;
  --tj-line-dark: rgba(255, 255, 255, .12);   /* hairline on ink */
  /* Gaps inside a section (Nachtrag 40): head container 16 (fixed in the
     component), text column 24, head to grid 64 / 48 / 32, inner spacer 50. */
  --tj-gap-text: 24px;
  --tj-gap-kopf: 64px;
  --tj-sp-inner: 50px;
  /* Figure for long values ("2–3 Wochen"): the tablet size of Figure, phone 36. */
  --tj-figure-lang: 44px; --tj-figure-lang-lh: 44px;
  /* Field border on white: 3.84:1 calculated (WCAG 1.4.11 needs 3:1). */
  --tj-line-field: rgba(45, 47, 53, .6);

  --tj-shadow: 0 6px 33.8px -4px rgba(0, 0, 0, .14);   /* the only shadow in the design */

  /* Motion - DERIVED, the design shows resting states only */
  --tj-ease: cubic-bezier(.23, 1, .32, 1);
  --tj-ease-io: cubic-bezier(.77, 0, .175, 1);
  --tj-t-press: 140ms;
  --tj-t-ui: 180ms;
  --tj-t-panel: 240ms;
  --tj-t-marquee: 40s;
  /* Motion and depth layer (Nachtrag 25/26): hover 220, open 280, close 180. */
  --tj-t-hover: 220ms;
  --tj-t-close: 180ms;
  --tj-t-open: 280ms;
  --tj-lift: -2px;
  --tj-shadow-rest: 0 36px 72px -52px rgba(12, 12, 12, .6), inset 0 1px 0 rgba(255, 255, 255, .06);
  --tj-shadow-hover-dark: 0 26px 52px -24px rgba(0, 0, 0, .85);
  --tj-shadow-hover: 0 22px 44px -26px rgba(30, 30, 30, .38);
  --tj-glow-gold: 0 12px 28px -14px rgba(208, 170, 109, .8);
  --tj-header-compact: 68px;

  --tj-z-header: 60;
  --tj-z-panel: 70;
  --tj-z-sidetab: 55;
  --tj-z-marker: 50;   /* below header (60), backdrop (59) and menu (70): markers never lie on the open menu or the fixed header (25.09.2026) */
}

@media (max-width: 1024px) {
  :root {
    --tj-display: 50px;   --tj-display-lh: 58px;
    --tj-section: 34px;   --tj-section-lh: 42px;
    --tj-statement: 26px; --tj-statement-lh: 34px;
    --tj-figure: 44px;    --tj-figure-lh: 44px;
    --tj-intro: 19px;     --tj-intro-lh: 28px;
    --tj-gutter: 20px; --tj-inset: 40px; --tj-gap: 20px;
    --tj-pad-surface: 64px; --tj-gap-kopf: 48px;
    --tj-pill: 18px;
    --tj-subnav-h: 52px;     /* the swipeable row keeps 4 px for its scroll area */
  }
}
@media (max-width: 767px) {
  :root {
    /* Nachtrag 40: fixed values instead of clamp (an Elementor value per
       breakpoint); "Qualitätsnachweis" fits 318 px with the soft hyphen. */
    --tj-display: 36px;   --tj-display-lh: 42px; --tj-display-ls: -1.5px;
    --tj-section: 28px;   --tj-section-lh: 34px; --tj-section-ls: -1px;
    --tj-statement: 22px; --tj-statement-lh: 30px;
    --tj-title: 18px;     --tj-title-lh: 26px;
    --tj-intro: 18px;     --tj-intro-lh: 28px;
    --tj-gutter: 16px; --tj-inset: 20px; --tj-gap: 16px;
    --tj-pad-surface: 48px; --tj-gap-kopf: 32px;
    --tj-figure-lang: 36px; --tj-figure-lang-lh: 36px;
    --tj-r-surface: 24px;
    --tj-header-h: 80px;
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  background: var(--tj-outside);
  /* The header is fixed. Anchors and focused elements must not hide behind it
     (WCAG 2.4.11 Focus Not Obscured). */
  scroll-padding-top: calc(var(--tj-header-h) + var(--tj-util-h) + 20px);
}
body {
  margin: 0 auto;
  max-width: var(--tj-page-max);
  background: var(--tj-bg);
  color: var(--tj-text);
  font-family: var(--tj-font);
  font-size: var(--tj-lead);
  line-height: var(--tj-lead-lh);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-top: calc(var(--tj-header-h) + var(--tj-util-h));
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3, h4 { color: var(--tj-text-strong); font-weight: 500; text-wrap: balance; }
h1 { font-size: var(--tj-h1); line-height: var(--tj-h1-lh); letter-spacing: var(--tj-h1-ls); }
h2 { font-size: var(--tj-h2); line-height: var(--tj-h2-lh); letter-spacing: var(--tj-h2-ls); }
h3 { font-size: var(--tj-h3); line-height: var(--tj-h3-lh); font-weight: 600; }
p { text-wrap: pretty; }
/* Long German compounds must never cut or overflow (qa_layout 24.09.2026:
   "Gefährdungsbeurteilung" in the H1 at 320 px). Hyphenate where the browser
   can, break anywhere as the last resort. */
main :is(p, li, td, th, figcaption, a, span, small, strong) { overflow-wrap: break-word; }
/* Break anywhere only in headings, as the last resort (a long compound in an
   H2 at 320 px overflowed with break-word, qa_layout 24.09.2026). Body text
   and labels no longer break mid-word ("Unternehmensleist|ung", sweep). */
main :is(h1, h2, h3, h4) { overflow-wrap: anywhere; }
/* Nachtrag 26: hyphenation by soft hyphens set by the generator for words of
   17 and more characters, on phones only. "auto" did not hyphenate German in
   the test browser ("Gefährdungsbeu|rteilung" broke without a hyphen), and on
   wider screens balanced headings started to split words that fit. In
   Elementor: add &shy; to these words in the heading text or accept the
   browser's hyphenation. */
main :is(h1, h2, h3, h4, p, li, a, span, td, th, figcaption) { hyphens: none; -webkit-hyphens: none; }
/* Since 28.09.2026 up to 1024 px: the tablet columns are as narrow as the
   phone (related posts, figure labels, split heads at 768 px), and words broke
   without a hyphen there ("Arbeitgeberattr|aktivitaet"). */
@media (max-width: 1024px) {
  main :is(h1, h2, h3, h4, p, li, a, span, td, th, figcaption) { hyphens: manual; -webkit-hyphens: manual; }
}
strong, b { font-weight: 600; color: var(--tj-text-strong); }
button { font: inherit; color: inherit; }

::selection { background: var(--tj-accent); color: var(--tj-text-strong); }
html { scrollbar-color: var(--tj-c-gold) var(--tj-c-slate-10); }

/* Focus - DERIVED. Dark ring on light, white ring on dark. */
:focus-visible { outline: 2px solid var(--tj-focus); outline-offset: 3px; border-radius: 4px; }
.tj-on-dark :focus-visible { outline-color: var(--tj-focus-inverse); }

.skip {
  position: fixed; left: 16px; top: -80px; z-index: 100;
  padding: 12px 18px; border-radius: var(--tj-r-btn);
  background: var(--tj-c-white); color: var(--tj-text-strong); font-weight: 600;
  transition: top var(--tj-t-ui) var(--tj-ease);
}
.skip:focus { top: 12px; }
.tj-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
main:focus { outline: none; }

/* On dark surfaces the text colours invert. Light cards inside dark surfaces
   take the light colours back (measured failure 19.09.2026: white on white). */
.tj-on-dark { color: var(--tj-text-inverse-2); }
.tj-on-dark :is(h1, h2, h3, h4, strong, b) { color: var(--tj-text-inverse); }
.tj-on-light { color: var(--tj-text); }
.tj-on-light :is(h1, h2, h3, h4, strong, b) { color: var(--tj-text-strong); }
/* Light cards inside dark cards: dark text again, whatever the heading level
   (measured 24.09.2026: post title white on white on news.html). */
.tj-on-dark :is(.tj-postcard, .tj-card, .tj-deep) { color: var(--tj-text); }
.tj-on-dark :is(.tj-postcard, .tj-card, .tj-deep) :is(h1, h2, h3, h4, strong, b, a) { color: var(--tj-text-strong); }
/* Card titles keep the card size at every heading level. */
:is(.tj-postcard__body, .tj-card, .tj-iconcol, .tj-benefit__col, .tj-steplist) :is(h2, h3, h4) {
  font-size: 20px; line-height: 25px; font-weight: 600; letter-spacing: normal;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   Every top level Elementor container: full width, padding 0 10px, the
   boxed content 1490 px. Vertical rhythm by Spacer widgets only.
   -------------------------------------------------------------------------- */
.tj-sec { position: relative; padding-inline: var(--tj-gutter); }
/* Sections on paper put their content on the text axis (Nachtrag 23). */
.tj-sec--achse > .tj-box { padding-inline: var(--tj-inset); }
.tj-box { width: 100%; max-width: var(--tj-container); margin-inline: auto; }

/* Spacer widget. data-d desktop, data-t tablet, data-m mobile, in px, from
   the staging spacer of the same section. */
.tj-sp { display: block; height: 0; }
.tj-sp[data-d="4"]{height:var(--tj-sp-4)} .tj-sp[data-d="5"]{height:var(--tj-sp-5)}
.tj-sp[data-d="10"]{height:var(--tj-sp-10)} .tj-sp[data-d="12"]{height:var(--tj-sp-12)}
.tj-sp[data-d="20"]{height:var(--tj-sp-20)} .tj-sp[data-d="22"]{height:var(--tj-sp-22)}
.tj-sp[data-d="25"]{height:var(--tj-sp-25)} .tj-sp[data-d="30"]{height:var(--tj-sp-30)}
.tj-sp[data-d="36"]{height:var(--tj-sp-36)} .tj-sp[data-d="40"]{height:var(--tj-sp-40)}
.tj-sp[data-d="50"]{height:var(--tj-sp-50)} .tj-sp[data-d="60"]{height:var(--tj-sp-60)}
.tj-sp[data-d="70"]{height:var(--tj-sp-70)} .tj-sp[data-d="80"]{height:var(--tj-sp-80)}
.tj-sp[data-d="90"]{height:var(--tj-sp-90)} .tj-sp[data-d="99"]{height:var(--tj-sp-99)}
.tj-sp[data-d="122"]{height:var(--tj-sp-122)} .tj-sp[data-d="150"]{height:var(--tj-sp-150)}
@media (max-width: 1024px) {
  .tj-sp[data-t="0"]{height:0} .tj-sp[data-t="10"]{height:var(--tj-sp-10)}
  .tj-sp[data-t="20"]{height:var(--tj-sp-20)} .tj-sp[data-t="30"]{height:var(--tj-sp-30)}
  .tj-sp[data-t="40"]{height:var(--tj-sp-40)} .tj-sp[data-t="50"]{height:var(--tj-sp-50)}
  .tj-sp[data-t="70"]{height:var(--tj-sp-70)} .tj-sp[data-t="122"]{height:var(--tj-sp-122)}
}
@media (max-width: 767px) {
  .tj-sp[data-m="0"]{height:0} .tj-sp[data-m="5"]{height:var(--tj-sp-5)}
  .tj-sp[data-m="10"]{height:var(--tj-sp-10)} .tj-sp[data-m="12"]{height:var(--tj-sp-12)}
  .tj-sp[data-m="20"]{height:var(--tj-sp-20)} .tj-sp[data-m="25"]{height:var(--tj-sp-25)}
  .tj-sp[data-m="30"]{height:var(--tj-sp-30)} .tj-sp[data-m="40"]{height:var(--tj-sp-40)}
  .tj-sp[data-m="50"]{height:var(--tj-sp-50)} .tj-sp[data-m="70"]{height:var(--tj-sp-70)}
  .tj-sp[data-m="90"]{height:var(--tj-sp-90)}
}

.tj-stack { display: flex; flex-direction: column; gap: var(--tj-gap); align-items: flex-start; min-width: 0; }
.tj-stack > * { max-width: 100%; }

/* --------------------------------------------------------------------------
   4. Atoms
   -------------------------------------------------------------------------- */

/* Chip. On staging this is a Button widget without background (e.g. 4e2fd28):
   15/18 weight 500, 2 px border gold 90 %, radius 50, padding 11 20. It labels
   the section, it is not a control, so the prototype renders it as text. */
.tj-chip {
  display: inline-flex; align-items: center; width: fit-content; max-width: 100%;
  padding: 11px 20px; border: 2px solid var(--tj-c-gold-line); border-radius: var(--tj-r-btn);
  font-size: var(--tj-chip); line-height: var(--tj-chip-lh); font-weight: 500;
  color: var(--tj-text-strong); background: transparent;
}
.tj-on-dark .tj-chip { color: var(--tj-text-inverse); }
.tj-chip--hero { padding: 12px 24px; }                       /* 9ac9a67 */
a.tj-chip { text-decoration: none; transition: background-color var(--tj-t-ui) var(--tj-ease), color var(--tj-t-ui) var(--tj-ease); }
a.tj-chip[aria-current="page"] { background: var(--tj-accent); border-color: var(--tj-accent); color: var(--tj-text-strong); }
@media (hover: hover) and (pointer: fine) {
  a.tj-chip:hover { background: var(--tj-accent); border-color: var(--tj-accent); color: var(--tj-text-strong); }
}

/* Buttons. Gold: 81e47a7. Radius 50, border 2, 16/16 weight 600, padding
   11 22 10. Hover #B28D50 is measured, press and disabled are DERIVED. */
.tj-btns { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: center; }
.tj-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 51px; padding: 11px 22px 10px;
  border: 2px solid var(--tj-accent); border-radius: var(--tj-r-btn);
  background: var(--tj-accent); color: var(--tj-text-strong);
  font-size: var(--tj-btn); line-height: var(--tj-btn-lh); font-weight: 600;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color var(--tj-t-ui) var(--tj-ease), border-color var(--tj-t-ui) var(--tj-ease),
              color var(--tj-t-ui) var(--tj-ease), transform var(--tj-t-press) var(--tj-ease);
}
.tj-btn .ic { flex: none; }
.tj-btn:active { transform: scale(.97); }
.tj-btn[aria-disabled="true"], .tj-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .tj-btn:hover { background: var(--tj-accent-hover); border-color: var(--tj-accent-hover); }
}
.tj-btn--outline { background: transparent; border-color: var(--tj-c-gold-line); color: var(--tj-text-strong); }
.tj-on-dark .tj-btn--outline { color: var(--tj-text-inverse); }
@media (hover: hover) and (pointer: fine) {
  .tj-btn--outline:hover { background: var(--tj-accent); border-color: var(--tj-accent); color: var(--tj-text-strong); }
}
.tj-btn--white { background: var(--tj-c-white); border-color: var(--tj-c-white); padding: 14px 22px; min-height: 48px; } /* ca84609 */
.tj-btn--red {                                              /* d91f1f9 */
  background: var(--tj-cta-header); border-color: var(--tj-cta-header); color: var(--tj-text-inverse);
  padding: 12px 18px; min-height: 50px; line-height: 22px;
}
@media (hover: hover) and (pointer: fine) {
  .tj-btn--red:hover { background: var(--tj-c-red-hover); border-color: var(--tj-c-red-hover); color: var(--tj-text-inverse); }
}
.tj-link {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600;
  color: var(--tj-text-strong); text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: var(--tj-c-gold-line); text-underline-offset: 5px;
}
.tj-on-dark .tj-link { color: var(--tj-text-inverse); }
@media (hover: hover) and (pointer: fine) { .tj-link:hover { text-decoration-color: currentColor; } }

/* Text roles */
.tj-lead { font-size: var(--tj-lead); line-height: var(--tj-lead-lh); max-width: 62ch; }
.tj-text { display: grid; gap: 14px; max-width: 64ch; }
.tj-text p { margin: 0; }
.tj-sub { font-size: 19px; line-height: 22px; font-weight: 600; color: var(--tj-text-strong); } /* d3b3e0b */
.tj-on-dark .tj-sub { color: var(--tj-text-inverse); }
.tj-src { font-size: var(--tj-note); line-height: var(--tj-note-lh); color: var(--tj-text); max-width: 70ch; }
.tj-on-dark .tj-src { color: var(--tj-text-inverse-2); }

/* Icon list with check icon. 2b6dcfd: 18/24, icon 28 x 22 in #333. */
.tj-checks { list-style: none; display: grid; gap: 7px; }
.tj-checks li { display: flex; gap: 14px; align-items: flex-start; font-size: var(--tj-list); line-height: var(--tj-list-lh); color: var(--tj-text-strong); }
.tj-checks .ic { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--tj-c-icon); }
.tj-checks--compact li { font-size: 16px; line-height: 22px; font-weight: 600; }       /* 0444a80 */
.tj-on-dark .tj-checks li { color: var(--tj-text-inverse); }
.tj-on-dark .tj-checks .ic { color: var(--tj-accent); }
.tj-checks__t { display: block; }
.tj-checks__t strong { display: block; }

/* Image card. A container with a background image, like the Elementor
   container background. data-ov chooses the measured overlay. */
.tj-imgcard {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--tj-r-card-s); background-color: var(--tj-c-ink);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.tj-imgcard::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tj-imgcard[data-ov="left"]::before  { background: var(--tj-ov-left); }                  /* KPI 4a2bf2d */
.tj-imgcard[data-ov="quote"]::before { background: var(--tj-ov-quote); opacity: .5; }   /* 5d1f7ee */
.tj-imgcard[data-ov="shade"]::before { background: #09060194; opacity: .62; }            /* 86ac48c */
.tj-imgcard[data-ov="half"]::before  { background: #000; opacity: .5; }                  /* b283c51 */
.tj-imgcard[data-ov="ink"]::before   { background: var(--tj-c-ink); opacity: .5; }      /* 3185ccb */
.tj-imgcard[data-ov="portrait"]::before { background: rgba(0, 0, 0, .48); }              /* 4d211e4 */
.tj-imgcard[data-ov="hero"]::before  { background: linear-gradient(275deg, rgba(0,0,0,0) 10%, rgba(0,0,0,.878) 100%); }
/* 42f519b has the transparent stop at 19 %. 10 % within the proposal approved on
   24.09.2026 (brighter hero text or a stronger hero overlay): at 1920 the text
   sits further right, leistungen lead measured 4.29:1 at 100 % white. */
.tj-imgcard[data-ov="story"]::before { background: rgba(0, 0, 0, .45); }                 /* 7da3672 */
/* Contrast corrections, DECIDED 24.09.2026 (Boris). Measured on the pixels
   by qa_bildkontrast.py; the staging values fell short of WCAG 1.4.3. */
.tj-kpicard[data-ov="left"]::before  { background: var(--tj-ov-kpi); }   /* staging 4a2bf2d: left half only */
.tj-benefit[data-ov="ink"]::before   { opacity: .62; }  /* staging efcd000: 50 %; decided 60 %, the chip measured 4.48:1 there */

/* Deep-dive bar. DERIVED (Nachtrag 23, all three concepts and both judges):
   one component for every deep block of the site. It always closes the block it
   belongs to and takes the full width of that block, so it never stands alone.
   White, 1 px line instead of the shadow (the shadow ran into the next
   section), gold circle with a dark arrow (white on gold measured 2.18:1). The
   whole bar is the link through the stretched title link. */
.tj-deep {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; padding: 24px 30px;
  background: var(--tj-surface-white); border: 1px solid var(--tj-line); border-radius: var(--tj-r-inner);
  color: var(--tj-text); text-decoration: none;
  transition: border-color var(--tj-t-ui) var(--tj-ease), transform var(--tj-t-press) var(--tj-ease);
}
.tj-deep__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 760px; }
.tj-deep__k { font-size: 14px; line-height: 18px; font-weight: 500; color: var(--tj-text); }
.tj-deep__t { font-size: var(--tj-h3); line-height: var(--tj-h3-lh); font-weight: 600; color: var(--tj-text-strong); }
.tj-deep__t a { text-decoration: none; color: inherit; }
.tj-deep__t a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tj-deep__p { font-size: var(--tj-small); line-height: var(--tj-small-lh); color: var(--tj-text); }
.tj-deep__ic {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tj-accent); color: var(--tj-text-strong);
  transition: background-color var(--tj-t-ui) var(--tj-ease), transform var(--tj-t-ui) var(--tj-ease);
}
.tj-deep:active { transform: scale(.99); }
.tj-deep:has(a:focus-visible) { outline: 2px solid var(--tj-focus); outline-offset: 3px; }
.tj-on-dark .tj-deep:has(a:focus-visible) { outline-color: var(--tj-focus-inverse); }
.tj-deep a:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) {
  .tj-deep:hover { border-color: var(--tj-accent); }
  .tj-deep:hover .tj-deep__ic { background: var(--tj-accent-hover); transform: rotate(45deg); }
}
.tj-on-dark .tj-deep :is(.tj-deep__t, strong) { color: var(--tj-text-strong); }
.tj-on-dark .tj-deep :is(.tj-deep__k, .tj-deep__p) { color: var(--tj-text); }

/* --------------------------------------------------------------------------
   5. Global: utility row, header bar, mega menu, submenu row, side tab
   -------------------------------------------------------------------------- */
.site-header { position: fixed; inset: 0 0 auto 0; max-width: var(--tj-page-max); margin-inline: auto; z-index: var(--tj-z-header); background: var(--tj-surface-dark); color: var(--tj-text-inverse); }

/* Utility row - DERIVED. The content master needs Kontakt, Kundenbereich,
   English and Suche in the head (decision 18.09.2026, zeag 2.8). The design
   has no such row. It also carries the "Eine Marke der zeag" lock-up, which
   no longer fits into the bar next to six menu items. */
.site-header__util { height: var(--tj-util-h); border-bottom: 1px solid rgba(255, 255, 255, .08); padding-inline: var(--tj-gutter); }
.site-header__util .tj-box { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brandline { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 14px; line-height: 15px; font-weight: 500; color: var(--tj-text-inverse); } /* 21a560f */
.brandline img { height: 26px; width: auto; }
.util-links { display: flex; align-items: center; gap: 24px; list-style: none; font-size: 14px; line-height: 20px; }
.util-links a { color: var(--tj-c-white-74); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .util-links a:hover { color: var(--tj-accent); } }

/* Bar d766443: 80 px, #1E1E1E. Logo image-2.png 80 x 80. */
.site-header__bar { height: var(--tj-header-h); padding-inline: var(--tj-gutter); }
.site-header__bar .tj-box { height: 100%; display: flex; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; flex: none; margin-right: auto; }
.brand img { width: 80px; height: 80px; }
.nav ul { display: flex; align-items: center; gap: 22px; list-style: none; }   /* item margin 22 */
.nav a {
  display: block; padding: 6px 0; font-size: var(--tj-nav); line-height: var(--tj-nav-lh); font-weight: 500;
  color: var(--tj-text-inverse); text-decoration: none; white-space: nowrap;
  transition: color var(--tj-t-ui) var(--tj-ease);
}
.nav a[aria-current="page"], .nav a.is-area { color: var(--tj-accent); }
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--tj-accent); } }
.site-header__bar .tj-btn--red { margin-left: 12px; }
.nav__toggle {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; margin-left: 8px;
  background: none; border: 0; border-radius: 50%; color: var(--tj-text-inverse); cursor: pointer;
}
.nav__toggle .ic-close { display: none; }
.nav__toggle[aria-expanded="true"] .ic-open { display: none; }
.nav__toggle[aria-expanded="true"] .ic-close { display: block; }
@media (hover: hover) and (pointer: fine) { .nav__toggle:hover { color: var(--tj-accent); } }

/* Mega menu dd386d1: fixed dark panel with rounded bottom (33 px), opens from
   the hamburger. Holds the complete menu tree, also on mobile. */
.megamenu {
  position: fixed; left: var(--tj-page-side); right: var(--tj-page-side); top: calc(var(--tj-header-h) + var(--tj-util-h)); z-index: var(--tj-z-panel);
  max-height: calc(100dvh - var(--tj-header-h) - var(--tj-util-h)); overflow-y: auto;
  background: var(--tj-surface-dark); color: var(--tj-text-inverse-2);
  border-radius: 0 0 33px 33px; padding: 40px var(--tj-pad-x) 30px;
  opacity: 1; transform: translateY(0);
  transition: opacity var(--tj-t-panel) var(--tj-ease), transform var(--tj-t-panel) var(--tj-ease);
}
.megamenu[hidden] { display: block; visibility: hidden; opacity: 0; transform: translateY(-12px); pointer-events: none; }
.megamenu__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 20px; }
.megamenu__t { font-size: 26px; line-height: 30px; font-weight: 500; }   /* c740e3c */
.megamenu__t a { color: var(--tj-text-inverse); text-decoration: none; }
.megamenu__group ul { list-style: none; margin-top: 16px; display: grid; gap: 5px; }
.megamenu__group li a { color: var(--tj-c-white-74); text-decoration: none; font-size: 16px; line-height: 22px; }
.megamenu__group a[aria-current="page"] { color: var(--tj-accent); }
@media (hover: hover) and (pointer: fine) { .megamenu__group a:hover { color: var(--tj-accent); } }
.megamenu__foot { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.megamenu__util { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; }

/* Submenu row of the active area - DERIVED. The content master shows the
   submenu of the active area below the header (HANDOVER 4.1); the design only
   has the hamburger panel. Built from the chip on the dark stage. */
.subnav { background: var(--tj-surface-dark); padding: 14px var(--tj-gutter) 6px; }
.subnav .tj-box { padding-inline: var(--tj-inset); }
.subnav ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
/* Phones and tablets: one swipeable row instead of stacked lines of chips
   above the hero (plan of the news group, 24.09.2026: about 150 px before the
   H1 on phones; 2 + 1 chips at 768, orphan check in qa_layout). */
@media (max-width: 1024px) {
  .subnav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
    mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .subnav ul::-webkit-scrollbar { display: none; }
  .subnav li { flex: none; }
}

/* Side tab 256d738: red pill fixed at the right edge, opens on hover. */
.tj-sidetab {
  position: fixed; right: var(--tj-page-side); top: 50%; z-index: var(--tj-z-sidetab);
  display: flex; align-items: center; gap: 10px; height: 70px; padding: 10px;
  max-width: 70px; overflow: hidden; white-space: nowrap;
  background: var(--tj-cta-header); color: var(--tj-text-inverse);
  border-radius: 110px 0 0 110px; text-decoration: none; font-weight: 600;
  transition: max-width var(--tj-t-panel) var(--tj-ease);
}
.tj-sidetab .ic { flex: none; width: 50px; height: 50px; }
.tj-sidetab__t { padding-right: 18px; font-size: 18px; }
.tj-sidetab:focus-visible, .tj-sidetab:hover { max-width: 340px; }

/* --------------------------------------------------------------------------
   6. Section components
   -------------------------------------------------------------------------- */

/* 6.1 Hero - start page 8f79d91, sub pages 42f519b.
   A dark stage with a rounded bottom; inside it the image card, framed by a
   22 px dark border. Start page 100vh, sub pages 60vh. */
.tj-hero { padding-inline: 0; background: var(--tj-surface-dark); border-radius: 0 0 var(--tj-r-hero) var(--tj-r-hero); }
.tj-hero--start { border-radius: 0 0 var(--tj-r-hero-start) var(--tj-r-hero-start); }
.tj-hero__card {
  display: flex; flex-direction: column; justify-content: center;
  margin: 0 var(--tj-stage-border); padding: 50px 0;
  /* the text sits on the text axis like every card (Nachtrag 23). 60vh as on
     the staging, capped at 760 px: in a 2440 px tall window the head grew to
     1440 px with the text lost in the middle (25.09.2026). */
  min-height: min(calc(60vh - var(--tj-stage-border)), 760px);
  border-radius: calc(var(--tj-r-hero) - var(--tj-stage-border));
}
.tj-hero__card > .tj-box { padding-inline: var(--tj-inset); }
/* Start hero: height capped at 880 so the 1001 px photo is never upscaled
   (judges 24.09.2026: without the cap factor 1.22 at 1920 x 1440). The proof
   line below the card stays above the fold at 1440 x 900. */
.tj-hero--start .tj-hero__card { min-height: max(560px, min(calc(100svh - 218px), 880px)); border-radius: var(--tj-r-surface); }
/* Counters below the photo, on the dark stage - DERIVED (gold on the photo
   measured 1.78:1; on #1E1E1E 7.66:1). */
.tj-hero__kpis { padding: 10px var(--tj-stage-border) 20px; }
.tj-hero__kpis > .tj-box { padding-inline: var(--tj-inset); }
/* Proof line below the start hero card, on the dark stage (Nachtrag 23):
   the facts as a quiet list with a gold dot, not as button-like chips. */
.tj-hero__proof { padding: 24px var(--tj-stage-border) 0; }
.tj-hero__proof > .tj-box { padding-inline: var(--tj-inset); }
.tj-proof { display: flex; flex-wrap: wrap; gap: 10px 40px; list-style: none; }
.tj-proof li { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--tj-text-inverse); }
.tj-proof li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--tj-accent); }
/* Image band: the photo of a card as its own strip above the text, tablet and
   phone only (Nachtrag 23). Replaces the 66 % veil for these cards. */
.tj-band { display: none; background-size: cover; background-repeat: no-repeat; }
.tj-hero__kpis .tj-counters { margin-top: 20px; }
.tj-hero__kpis .tj-src { margin-top: 16px; }
.tj-hero__text { width: min(100%, 1009px); display: flex; flex-direction: column; gap: var(--tj-gap); align-items: flex-start; }
.tj-hero__text h1 { max-width: 672px; }
.tj-hero__text .tj-lead { max-width: 569px; font-size: 17px; line-height: 23px; }
/* Staging 42f519b: 70 % white. DECIDED 24.09.2026 (Boris): brighter. 90 %
   still measured 4.33:1 on the events photo, so all hero text is 100 %. */
.tj-hero__text :is(.tj-lead, .tj-text p) { color: var(--tj-text-inverse); }
.tj-hero__trust { display: flex; flex-direction: column; gap: 16px; margin-top: 10px; }
.tj-hero__trust-t { font-size: 18px; line-height: 24px; font-weight: 600; color: var(--tj-text-inverse); } /* ed582ee */
.tj-hero__chips { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; }
/* DERIVED like the hero filter chips: the trust chips sit on the photo; the last
   one measured 2.87:1 at 1024 and 3.21:1 at 1920 without a fill. */
/* Scoped to the hero: the same chip list sits on light sections (adj, mab). */
.tj-hero .tj-hero__chips .tj-chip { background: rgba(30, 30, 30, .78); }
.tj-hero--story .tj-hero__card { background: var(--tj-c-ink); min-height: 0; padding-block: 90px; }

/* 6.2 Split: text and image card. 5b9dc38 (wide text), c000513 (50/50),
   cde7a7b (image left, gap 80), 6e632c2 (kompass, gap 99). */
.tj-split { display: flex; gap: var(--tj-gap); align-items: stretch; }
.tj-split__text { flex: 1 1 0; min-width: 0; padding: 10px; display: flex; flex-direction: column; gap: var(--tj-gap); justify-content: center; align-items: flex-start; }
.tj-split__media { flex: 1 1 0; min-width: 0; display: flex; }
.tj-split__media > .tj-imgcard { flex: 1; min-height: 463px; border-radius: var(--tj-r-card); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10px; }
.tj-split--wide .tj-split__text { flex-basis: 808px; flex-grow: 808; }
.tj-split--wide .tj-split__media { flex-basis: 662px; flex-grow: 662; }
.tj-split--wide .tj-split__media > .tj-imgcard { border-radius: var(--tj-r-card-s); min-height: 565px; }
.tj-split--rev { flex-direction: row-reverse; gap: 80px; }
.tj-split--rev .tj-split__media > .tj-imgcard { border-radius: var(--tj-r-card-s); min-height: 528px; }
.tj-split--kompass { flex-direction: row-reverse; gap: 99px; }
.tj-split--kompass .tj-split__media { flex-basis: 626px; flex-grow: 626; }
.tj-split--kompass .tj-split__text { flex-basis: 765px; flex-grow: 765; }
.tj-split--kompass .tj-split__media > .tj-imgcard { border-radius: var(--tj-r-card-kompass); min-height: 525px; background-color: var(--tj-c-slate-70); }
.tj-split h2 { max-width: 560px; }
.tj-split .tj-lead, .tj-split .tj-text { max-width: 575px; }
.tj-split .tj-checks { margin: 15px 0; max-width: 510px; }
.tj-split .tj-btns { margin-top: 12px; }
.tj-imgcard__overlay { width: min(350px, 70%); height: auto; }       /* Uni-Name.png on 86ac48c */
.tj-imgcard__label {                                                  /* cc19d7c */
  position: absolute; right: -40px; bottom: 40px; padding: 15px 18px 17px;
  border-radius: var(--tj-r-label); background: var(--tj-c-ink); color: var(--tj-text-inverse);
  font-size: 18px; line-height: 25px; font-weight: 500; text-align: center; max-width: 200px;
}

/* 6.3 Quote card 156bcd5 - portrait background, gradient from the left. */
.tj-quotecard { padding: 60px var(--tj-inset); min-height: 480px; display: flex; flex-direction: column; justify-content: center; gap: var(--tj-gap); border-radius: var(--tj-r-surface); }
.tj-quotecard__in { display: flex; flex-direction: column; gap: var(--tj-gap); align-items: flex-start; }
.tj-quotecard blockquote p { font-size: var(--tj-quote); line-height: var(--tj-quote-lh); font-weight: 400; color: var(--tj-text-inverse); max-width: 700px; }
/* The source is always smaller than the quote (audit: 18 px source over a 16 px quote on phones). */
.tj-quotecard figcaption { margin-top: 20px; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--tj-text-inverse-2); max-width: 560px; }
.tj-quotecard .tj-chip { margin-bottom: 6px; }

/* 6.4 KPI card 65dd57e - photo with dark gradient, five counters. */
.tj-kpicard { padding: 60px var(--tj-inset) 40px; display: flex; flex-direction: column; gap: var(--tj-gap); border-radius: var(--tj-r-surface); }
.tj-kpicard .tj-lead { max-width: 640px; color: var(--tj-text-inverse); }
/* KPI card with its call bar as the foot of the same card (Nachtrag 23). */
.tj-kpiwrap { border-radius: var(--tj-r-surface); overflow: hidden; background: var(--tj-surface-dark); }
.tj-kpiwrap > .tj-kpicard { border-radius: 0; }
.tj-kpiset__marks { display: flex; gap: 8px; margin-top: 16px; }
/* The second counter set carries hidden until zeag decides (prototype only).
   Own rule instead of the browser default, so a display rule on .tj-kpiset
   cannot show it (Nachtrag 62, decision 12.10.2026). */
.tj-kpiset[hidden] { display: none; }
.tj-counters { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: var(--tj-gap); margin-top: 30px; list-style: none; }
.tj-counters--lang { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); row-gap: 30px; }
.tj-counter__v { display: block; font-size: var(--tj-kpi); line-height: var(--tj-kpi-lh); font-weight: 600; color: var(--tj-accent); font-variant-numeric: tabular-nums; }
.tj-counter__l { display: block; margin-top: 12px; font-size: var(--tj-kpi-label); line-height: var(--tj-kpi-label-lh); font-weight: 600; color: var(--tj-text-inverse); }
.tj-kpicard .tj-src { margin-top: 30px; }

/* 6.5 Centred section head 74a9465 / 210a3ab - chip, H2, lead, centred. */
.tj-center { display: flex; flex-direction: column; align-items: center; gap: 15px; text-align: center; padding: 10px; }
.tj-center h2 { max-width: 560px; }
.tj-center .tj-lead { max-width: 600px; }

/* 6.6 Step cards 8e11431 - three large cards, gradient or image. */
.tj-steps { display: flex; flex-direction: column; gap: var(--tj-gap); list-style: none; }
.tj-stepcard {
  display: flex; align-items: center; gap: var(--tj-gap); min-height: 405px; padding: 10px 0;
  border-radius: var(--tj-r-card-l); box-shadow: var(--tj-shadow); overflow: hidden;
  background: var(--tj-grad-step-1); background-color: var(--tj-c-slate); color: var(--tj-text-inverse-2);
}
.tj-stepcard--2 { background: var(--tj-grad-step-2); background-color: var(--tj-c-slate); }
.tj-stepcard--3 { background-color: var(--tj-c-slate); background-size: cover; background-position: center; }
.tj-stepcard__text { flex: 1 1 742px; min-width: 0; padding: 50px 0 50px 55px; display: flex; flex-direction: column; gap: var(--tj-gap); }
.tj-stepcard__text h3 { font-size: var(--tj-h3-l); line-height: var(--tj-h3-l-lh); letter-spacing: -2px; font-weight: 500; color: var(--tj-text-inverse); }
.tj-stepcard__text p { font-size: 17px; line-height: 23px; max-width: 440px; }
.tj-stepcard__n { font-size: 15px; line-height: 18px; font-weight: 500; color: var(--tj-accent); }
/* Staging ca51f16 bleeds the graphic 14 px past the card (margin -14, card
   overflow hidden). Dropped: the clipped bleed measured as cut content in
   qa_layout and is invisible at this size. */
.tj-stepcard__media { flex: 1 1 742px; min-width: 0; display: flex; align-items: center; }
.tj-stepcard__media img { width: 100%; height: auto; }
.tj-steps-after { max-width: 760px; margin-inline: auto; text-align: center; }

/* 6.7 Pills 210a3ab - gold statement pills, centred. Accordion variant is
   DERIVED: the same pill opens to show its answer. */
.tj-pills { display: flex; flex-direction: column; align-items: center; gap: var(--tj-gap); list-style: none; }
.tj-pill {
  width: min(100%, 520px); padding: 18px 23px 19px 22px; border-radius: var(--tj-r-pill);
  background: var(--tj-accent); box-shadow: var(--tj-shadow); color: var(--tj-text-strong);
  font-size: var(--tj-pill); line-height: var(--tj-pill-lh); font-weight: 600;
}
.tj-pill--neg { background: var(--tj-surface-white); color: var(--tj-c-ink-44); width: min(100%, 500px); }
.tj-pill summary, .tj-pill > span { display: flex; gap: 14px; align-items: center; list-style: none; cursor: default; }
.tj-pill summary { cursor: pointer; }
.tj-pill summary::-webkit-details-marker { display: none; }
.tj-pill .ic { flex: none; width: 22px; height: 22px; color: var(--tj-c-icon); }
.tj-pill summary .ic-chev { margin-left: auto; transition: transform var(--tj-t-ui) var(--tj-ease); }
.tj-pill[open] summary .ic-chev { transform: rotate(180deg); }
.tj-pill__a { padding: 14px 0 2px 36px; font-size: var(--tj-small); line-height: var(--tj-small-lh); font-weight: 400; color: #3E372C; }

/* 6.8 Dark card with loop items a183506 - padding 30, radius 50. */
.tj-darkcard { padding: 30px; border-radius: var(--tj-r-card-l); background-color: var(--tj-surface-dark); background-size: cover; background-position: center; display: flex; flex-direction: column; gap: var(--tj-gap); }
.tj-darkcard > .tj-lead { max-width: 672px; }

/* Loop card cbe454a - white, radius 40. Company variant without image. */
.tj-postcard { flex: 1; display: flex; flex-direction: column; background: var(--tj-surface-white); border-radius: var(--tj-r-card); overflow: hidden; color: var(--tj-text); position: relative; }
.tj-postcard__img { aspect-ratio: 710 / 275; background: var(--tj-line) center / cover no-repeat; }
.tj-postcard__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px 20px 0; list-style: none; }
.tj-postcard__chip { padding: 11px 16px; border: 2px solid var(--tj-accent); border-radius: 55px; font-size: 15px; line-height: 18px; font-weight: 500; color: var(--tj-c-icon); }
.tj-postcard__body { padding: 16px 70px 25px 25px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tj-postcard__body h3 { font-size: 20px; line-height: 25px; font-weight: 600; color: var(--tj-text-strong); }
/* Any heading level: without a section heading the card title is an H2. */
.tj-postcard__body :is(h2, h3, h4) a { text-decoration: none; }
.tj-postcard__body :is(h2, h3, h4) a::after { content: ""; position: absolute; inset: 0; }
.tj-postcard__meta { font-size: 16px; line-height: 22px; }
.tj-postcard__ic { position: absolute; right: 25px; bottom: 25px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--tj-accent); color: var(--tj-c-white); }
.tj-postcard--firma { min-height: 190px; justify-content: space-between; }
.tj-postcard--firma .tj-postcard__body { flex: 0 0 auto; padding-right: 25px; }
.tj-postcard:has(a:focus-visible) { outline: 2px solid var(--tj-focus-inverse); outline-offset: 3px; }
.tj-postcard a:focus-visible { outline: none; }

/* 6.9 FAQ 0f559f2 / 67c71da - head left, nested accordion right.
   Closed item #2D2F351A, open and hover gold, radius 30. */
.tj-faq { display: flex; gap: var(--tj-gap); align-items: flex-start; }
.tj-faq__head { flex: 588 1 0; min-width: 0; padding: 10px; display: flex; flex-direction: column; gap: var(--tj-gap); align-items: flex-start; }
/* On the text axis: head 5/12 sticky on desktop, list 7/12 (Nachtrag 23). */
.tj-sec--achse .tj-faq { gap: 60px; }
.tj-sec--achse .tj-faq__head { flex: 5 1 0; padding: 0; position: sticky; top: calc(var(--tj-header-h) + var(--tj-util-h) + 20px); }
.tj-sec--achse .tj-faq__list { flex: 7 1 0; padding: 0; }
.tj-faq__head .tj-lead { max-width: 367px; }
.tj-faq__list { flex: 882 1 0; min-width: 0; padding: 10px; }
.tj-acc { display: flex; flex-direction: column; gap: 12px; }
.tj-acc__item { border-radius: var(--tj-r-acc); background: var(--tj-surface-tint); transition: background-color var(--tj-t-ui) var(--tj-ease); }
.tj-acc__item summary {
  display: flex; align-items: center; gap: 10px; padding: 18px 25px; list-style: none; cursor: pointer;
  font-size: 17px; line-height: 24px; font-weight: 500; color: var(--tj-c-acc-title); border-radius: var(--tj-r-acc);
}
.tj-acc__item summary::-webkit-details-marker { display: none; }
.tj-acc__item summary .ic { margin-left: auto; flex: none; transition: transform var(--tj-t-ui) var(--tj-ease); }
.tj-acc__item[open] { background: var(--tj-accent); }
.tj-acc__item[open] summary .ic { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .tj-acc__item:hover { background: var(--tj-accent); } }
.tj-acc__body { padding: 0 25px 25px; font-size: var(--tj-small); line-height: var(--tj-small-lh); color: var(--tj-text-on-gold); }
.tj-acc__body p + p { margin-top: 10px; }
/* Item without an answer in the content master: no chevron, does not open.
   A fake affordance would promise content that does not exist. */
.tj-acc__item--leer { display: flex; align-items: center; gap: 10px; padding: 18px 25px; background: transparent; border: 1px solid var(--tj-line); }
.tj-acc__item--leer:hover { background: transparent; }
.tj-acc__q { font-size: 17px; line-height: 24px; font-weight: 500; color: var(--tj-c-acc-title); }
.tj-pill--leer { display: flex; align-items: center; gap: 14px; }
.tj-pill--leer > span { display: flex; gap: 14px; align-items: center; }

/* 6.10 Closing CTA card a522a1e (footer template 366 on staging).
   Nachtrag 23: the card stands on the stage edge like the hero (gutter), the
   trophy Rectangle-56 is anchored left and grows with the card up to its
   natural width, never upscaled. Text column 60 % on the right of the boxed
   1490. Below 1025 px the trophy becomes an image band above the text; no
   swap to the hero photo. */
.tj-cta {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center;
  min-height: 535px; overflow: hidden; border-radius: var(--tj-r-surface);
  background-color: var(--tj-c-ink); background-position: left center; background-repeat: no-repeat;
  /* Grows with the card from 1409 px (covers the 535 px height) up to the
     file's natural width, never beyond it. Up to about 1900 px viewport the
     photo fills the card; at 1920 the last 18 px on the right show the card
     colour, where the file itself fades to it (RGB 31 against 30, measured).
     Feedback Boris 24.09.2026: the fixed 1409 px left a visible edge. */
  background-size: max(1409px, min(100%, var(--bg-w, 1854px))) auto;
}
.tj-cta__in { width: 100%; max-width: var(--tj-container); margin-inline: auto; display: flex; }
.tj-cta__text {
  margin-left: auto; width: 60%; min-width: 0;
  padding: 32px var(--tj-inset) 32px 10px; display: flex; flex-direction: column; justify-content: center;
  gap: var(--tj-gap); align-items: flex-start;
}
.tj-cta__text h2 { max-width: 558px; }
.tj-cta__text .tj-lead { max-width: 558px; color: var(--tj-text-inverse); }
.tj-cta__text .tj-btns { padding: 15px 0 25px; gap: 16px; }   /* 14ae018 */
.tj-cta .tj-input--pill {                       /* ca84609, a button on staging */
  flex: none; width: 191px; max-width: 100%; height: 48px; padding: 14px 22px;
  border: 2px solid var(--tj-c-white); background: var(--tj-c-white);
  font-weight: 600; line-height: 16px;
}
.tj-on-dark .tj-input:focus-visible { border-color: var(--tj-accent); box-shadow: 0 0 0 2px var(--tj-focus-inverse); }
.tj-cta__checks {                               /* 6fb981d, inline icon list */
  display: flex; flex-wrap: wrap; gap: 11px 22px; list-style: none;
  font-size: 20px; line-height: 22px; font-weight: 600; color: var(--tj-text-inverse);
}
.tj-cta__checks li { display: flex; gap: 8px; align-items: flex-start; }
.tj-cta__checks .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.tj-band--cta { background-position: 18% 55%; }
/* Between 1025 and 1280 the text column reaches the trophy (gap about 10 px at
   1100); the photo moves 80 px to the left, a crop of the dark wall, no scaling. */
@media (min-width: 1025px) and (max-width: 1280px) { .tj-cta { background-position: -80px center; } }
/* The closing card is a stage like the hero: box minus the gutter, not 1490. */
.tj-sec[data-type="cta"] > .tj-box { max-width: none; }

/* 6.30 Content-first components (proposal 24.09.2026, Nachtrag 23). All
   DERIVED from existing design elements; every one has a matching row.
   Grid of 7/12 text to 5/12 media, one text axis, surfaces by role:
   paper, tint #2D2F35 10 %, ink, and the step gradient for the way. */
.tj-split--achse { gap: 60px; align-items: stretch; }
.tj-split--achse .tj-split__text { flex: 7 1 0; padding: 0; justify-content: center; }
.tj-split--achse .tj-split__media { flex: 5 1 0; }
.tj-split--achse.tj-split--rev { gap: 60px; }
.tj-split--achse h2 { max-width: 720px; }
.tj-split--achse :is(.tj-lead, .tj-text) { max-width: 64ch; }
.tj-split--achse .tj-split__media > .tj-imgcard { border-radius: var(--tj-r-inner); min-height: 520px; }
.tj-split--achse .tj-split__media:has(> .tj-imgcard--43) { align-items: center; }
.tj-split--achse .tj-split__media > .tj-imgcard--43 { min-height: 0; aspect-ratio: 4 / 3; border: 1px solid var(--tj-line); }
.tj-split--achse .tj-btns { margin-top: 10px; }

/* Argument rows: title over text, hairlines between rows. */
.tj-rows { list-style: none; margin-top: 10px; align-self: stretch; }
.tj-rows li { display: flex; flex-direction: column; gap: 8px; padding: 24px 0; border-top: 1px solid var(--tj-line); }
.tj-rows li:last-child { border-bottom: 1px solid var(--tj-line); }
.tj-rows :is(h3, h4) { font-size: var(--tj-h3); line-height: var(--tj-h3-lh); font-weight: 600; letter-spacing: normal; color: var(--tj-text-strong); }
.tj-rows p { font-size: var(--tj-lead); line-height: var(--tj-lead-lh); max-width: 64ch; }

/* Tint card: the content master's "tint" surface. */
.tj-tintcard { padding: 60px var(--tj-inset); border-radius: var(--tj-r-surface); background: var(--tj-surface-tint); display: flex; flex-direction: column; gap: 40px; }
.tj-tintcard > .tj-split { gap: 60px; }
.tj-innercard {
  position: relative; flex: 1; min-height: 480px; display: flex; align-items: center; justify-content: center;
  padding: 30px; border-radius: var(--tj-r-inner); background: var(--tj-surface-white); border: 1px solid var(--tj-line);
}
.tj-innercard__img { height: 400px; width: auto; }

/* The way: one card in the step gradient, three equal steps. */
.tj-stepband {
  padding: 60px var(--tj-inset); border-radius: var(--tj-r-surface);
  background: var(--tj-grad-step-1); background-color: var(--tj-c-slate);
  display: flex; flex-direction: column; gap: 40px;
}
.tj-steprow { display: flex; gap: var(--tj-gap); list-style: none; }
.tj-steprow > li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 2px solid var(--tj-c-gold-line); }
.tj-steprow__n { font-size: 20px; line-height: 24px; font-weight: 600; color: var(--tj-accent); }
.tj-steprow :is(h3, h4) { font-size: var(--tj-h3-l); line-height: var(--tj-h3-l-lh); font-weight: 500; letter-spacing: -2px; color: var(--tj-text-inverse); }
.tj-steprow p { font-size: var(--tj-lead); line-height: var(--tj-lead-lh); max-width: 400px; }
.tj-steprow__foot { padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .2); }
.tj-steprow__foot .tj-text { max-width: 760px; }
.tj-steprow__foot p { font-size: 18px; line-height: 24px; font-weight: 500; color: var(--tj-text-inverse); }

/* Topic tiles 3 x 2 on the tint card. Not clickable: no hover, no arrow. */
.tj-tiles { display: flex; flex-wrap: wrap; gap: var(--tj-gap); list-style: none; }
.tj-tile {
  width: calc((100% - 2 * var(--tj-gap)) / 3); min-width: 0; min-height: 200px;
  display: flex; flex-direction: column; gap: 12px; padding: 30px;
  border-radius: var(--tj-r-inner); background: var(--tj-surface-white); border: 1px solid var(--tj-line);
}
.tj-tile__ic { width: 56px; height: 56px; margin-bottom: 8px; }
.tj-tile :is(h3, h4) { font-size: var(--tj-h3); line-height: var(--tj-h3-lh); font-weight: 600; letter-spacing: normal; color: var(--tj-text-strong); }
.tj-tile p { font-size: var(--tj-small); line-height: var(--tj-small-lh); }

/* Company grid on the dark card. */
.tj-darkcard--firmen { padding: 60px var(--tj-inset); border-radius: var(--tj-r-surface); gap: 40px; }
.tj-darkcard--firmen .tj-lead { max-width: 672px; color: var(--tj-text-inverse); }
.tj-firms { display: flex; flex-wrap: wrap; gap: var(--tj-gap); list-style: none; }
.tj-firm {
  width: calc((100% - 2 * var(--tj-gap)) / 3); min-width: 0; min-height: 240px;
  display: flex; flex-direction: column; gap: 6px; padding: 24px;
  border-radius: var(--tj-r-inner); background: var(--tj-surface-white); color: var(--tj-text);
}
/* The logo files carry their own white margin; a centred logo plate with a
   hairline keeps the text column clean. */
.tj-firm__logo { height: 96px; display: flex; align-items: center; justify-content: center; margin: -8px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--tj-line); }
.tj-firm__img { max-height: 80px; width: auto; max-width: min(100%, 240px); object-fit: contain; }
.tj-on-dark .tj-firm :is(h3, h4) { font-size: var(--tj-h3); line-height: var(--tj-h3-lh); font-weight: 600; letter-spacing: normal; color: var(--tj-text-strong); }
.tj-firm__meta { font-size: var(--tj-small); line-height: var(--tj-small-lh); }
.tj-firm__jahre { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: auto; padding-top: 6px; font-size: 15px; line-height: 18px; font-weight: 500; }
/* Label before the award years instead of a calendar icon (feedback zeag no. 38, 12.10.2026): lighter than the years;
   the years wrap as a whole below it when the foot row is short. */
.tj-firm__jahre > span:first-child { font-weight: 400; }

/* Call bar: the mid-page call inside its section (replaces banner da21501). */
.tj-midstrip { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-top: 30px; border-top: 1px solid var(--tj-line); align-self: stretch; }
.tj-midstrip__txt { display: flex; flex-direction: column; gap: 10px; max-width: 760px; min-width: 0; }
.tj-midstrip__t { font-size: 28px; line-height: 36px; font-weight: 500; letter-spacing: -1px; }
.tj-midstrip__p { font-size: var(--tj-lead); line-height: var(--tj-lead-lh); }
.tj-midstrip .tj-btns { flex: none; }
.tj-midstrip--dunkel { padding: 36px var(--tj-inset) 40px; border-top: 1px solid rgba(255, 255, 255, .14); background: var(--tj-surface-dark); }
.tj-midstrip--dunkel .tj-midstrip__t { color: var(--tj-text-inverse); }

/* 6.11 Icon columns b6ed22d / 2b788f7 - line icon, title, text or list. */
.tj-iconcols { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 11px; list-style: none; }
.tj-iconcol { padding: 10px; display: flex; flex-direction: column; gap: var(--tj-gap); }
.tj-iconcol__ic { width: 88px; height: 88px; object-fit: contain; margin-bottom: 10px; }
.tj-iconcol h3 { font-size: var(--tj-h3); line-height: var(--tj-h3-lh); font-weight: 600; }
.tj-iconcol p { font-size: 16px; line-height: 22px; }
.tj-iconcols--4 .tj-iconcol__ic { width: 60px; height: 60px; }

/* 6.12 Benefit band efcd000 - image card, dark overlay, white icons. */
.tj-benefit { padding: 60px; display: flex; flex-direction: column; gap: var(--tj-gap); }
.tj-benefit__cols { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--tj-gap); margin-top: 12px; list-style: none; }
.tj-benefit__col { display: flex; flex-direction: column; gap: 14px; }
.tj-benefit__col img { width: 90px; height: 90px; margin-bottom: 6px; }
.tj-benefit__col h3 { font-size: 18px; line-height: 24px; font-weight: 600; color: var(--tj-text-inverse); }
.tj-benefit__col p { font-size: 16px; line-height: 22px; color: var(--tj-text-inverse); }   /* white 100 % like 72bda76 */

/* 6.13 White cards on a dark card - loop card language, static grid. */
.tj-cards { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 10px; list-style: none; }
.tj-card { background: var(--tj-surface-white); border-radius: var(--tj-r-card); padding: 28px 25px 30px; display: flex; flex-direction: column; gap: 10px; color: var(--tj-text); }
.tj-card h3 { font-size: 20px; line-height: 25px; color: var(--tj-text-strong); }
.tj-card p { font-size: 16px; line-height: 22px; }
.tj-on-light .tj-card, .tj-sec--light .tj-card { box-shadow: var(--tj-shadow); }

/* 6.14 Banner da21501 - photo, 50 % black overlay, big line, gold button. */
.tj-banner { padding: 60px; min-height: 343px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--tj-gap); }
.tj-banner__t { font-size: 32px; line-height: 40px; font-weight: 400; color: var(--tj-text-inverse); max-width: 560px; }   /* 2d7e18e */
.tj-banner .tj-lead { max-width: 560px; color: var(--tj-text-inverse); }   /* the staging banner has white 100 % text only */

/* 6.15 Logo band ee972c0 / b997896 - marquee, pauses on hover, static with
   reduced motion. */
.tj-logos { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tj-logos__track { display: flex; gap: 24px; width: max-content; list-style: none; align-items: center; animation: tj-marquee var(--tj-t-marquee) linear infinite; }
.tj-logos:hover .tj-logos__track { animation-play-state: paused; }
.tj-logos__track li { flex: none; }
/* The logo files are 800 x 600 with generous white space around the mark,
   so the box is taller than the visible logo. */
.tj-logos__track img { height: 120px; width: auto; }
@keyframes tj-marquee { to { transform: translateX(-50%); } }

/* 6.16 Table - DERIVED (decision Boris 18.09.2026). Head row in gold like the
   open accordion, rows on white with 10 % lines, radius 30 like the
   accordion item. Below 768 px each row becomes a card. */
.tj-tablewrap { border-radius: var(--tj-r-acc); overflow: hidden; background: var(--tj-surface-white); box-shadow: var(--tj-shadow); }
.tj-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 22px; }
.tj-table th { background: var(--tj-accent); color: var(--tj-text-strong); font-weight: 600; text-align: left; padding: 16px 25px; }
.tj-table td { padding: 14px 25px; border-top: 1px solid var(--tj-line); color: var(--tj-text); vertical-align: top; }
.tj-table td:first-child { color: var(--tj-text-strong); font-weight: 500; }
.tj-table tbody tr:nth-child(even) td { background: #FAF8F5; }

/* 6.17 Form card 67f95ec - tint, radius 35, fields as white pills. The form
   sends nothing in the prototype. */
.tj-formcard { display: flex; gap: 30px; padding: 24px; border-radius: var(--tj-r-form); background: var(--tj-surface-tint); }
.tj-formcard__text { flex: 635 1 0; min-width: 0; padding: 10px; display: flex; flex-direction: column; gap: var(--tj-gap); align-items: flex-start; }
.tj-formcard__form { flex: 777 1 0; min-width: 0; padding: 10px; }
.tj-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 11px; }
.tj-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tj-field--full { grid-column: 1 / -1; }
.tj-field label { font-size: 14px; line-height: 18px; font-weight: 500; color: var(--tj-text-strong); }
.tj-input {
  width: 100%; height: 40px; padding: 8px 16px; border-radius: var(--tj-r-btn);
  border: 1px solid transparent; background: var(--tj-surface-white); color: var(--tj-text-strong);
  font: inherit; font-size: 16px; line-height: 22px;
  transition: border-color var(--tj-t-ui) var(--tj-ease), box-shadow var(--tj-t-ui) var(--tj-ease);
}
.tj-input::placeholder { color: #6C6D72; }
.tj-input:focus-visible { outline: none; border-color: var(--tj-c-ink); box-shadow: 0 0 0 2px var(--tj-c-ink); }
.tj-input[aria-invalid="true"] { border-color: var(--tj-c-red); }
.tj-check { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 20px; }
.tj-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--tj-c-ink); flex: none; }
.tj-form .tj-btn { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
.tj-form__note { grid-column: 1 / -1; font-size: 13px; line-height: 18px; }

/* Embed slot for the booking calendar - DERIVED from the form card. */
.tj-embed { min-height: 360px; border-radius: var(--tj-r-card-s); background: var(--tj-surface-white); display: grid; place-items: center; padding: 30px; text-align: center; border: 2px dashed var(--tj-c-gold-line); }

/* 6.18 Jury grid 4271483 - portrait cards, name at the bottom. */
.tj-jury { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; list-style: none; }
.tj-portrait { min-height: 280px; padding: 22px; border-radius: var(--tj-r-portrait); display: flex; flex-direction: column; justify-content: flex-end; text-align: center; background-size: cover; background-position: center; }
.tj-portrait__n { font-size: 20px; line-height: 22px; font-weight: 600; color: var(--tj-text-inverse); margin-bottom: 10px; }
.tj-portrait__r { font-size: 14px; line-height: 18px; font-weight: 500; color: var(--tj-text-inverse); }
/* DERIVED: the staging card shows the name only, the content master adds the
   role. A bottom shade keeps both readable on light portraits. */
.tj-imgcard.tj-portrait::before { background: linear-gradient(180deg, rgba(0,0,0,.25) 30%, rgba(0,0,0,.82) 100%); }
.tj-portrait--leer { background-color: var(--tj-c-slate); }
.tj-portrait--leer .ic { margin: 0 auto auto; color: var(--tj-c-white-70); }

/* 6.19 Filter chips 5edd579 (taxonomy filter). The prototype does not filter. */
.tj-filter { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.tj-filter button {
  padding: 11px 20px; border-radius: var(--tj-r-btn); border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .6); color: var(--tj-text-strong); font-size: 15px; line-height: 18px; font-weight: 500;
}
.tj-filter button[aria-pressed="true"] { background: var(--tj-c-white); }
.tj-filter--light button { background: var(--tj-surface-tint); }
.tj-filter--light button[aria-pressed="true"] { background: var(--tj-accent); }

/* Grid of loop cards, two per row like the Praxisbeispiele loop grid. */
.tj-grid { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 10px; list-style: none; }
.tj-grid > li { display: flex; }
.tj-more { align-self: center; }

/* 6.20 Statement card e5bcf6e - dark gradient card, radius 50, white text. */
.tj-statement {
  padding: 50px 55px; border-radius: var(--tj-r-card-l); box-shadow: var(--tj-shadow);
  background: var(--tj-grad-step-1); background-color: var(--tj-c-slate);
  display: flex; flex-direction: column; gap: var(--tj-gap); align-items: flex-start;
}
.tj-statement--2 { background: var(--tj-grad-step-2); background-color: var(--tj-c-slate); }
.tj-statement .tj-text, .tj-statement .tj-lead { max-width: 760px; }
.tj-statement .tj-checks { margin: 10px 0; }

/* 6.21 Deep-dive grid - DERIVED */
.tj-deeps { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--tj-gap); list-style: none; }
.tj-deeps > li { display: flex; }
.tj-deeps .tj-deep { max-width: none; }

/* 6.22 Numbered step list - DERIVED from the step cards */
.tj-steplist { list-style: none; display: grid; gap: 22px; max-width: 760px; }
.tj-steplist li { display: flex; gap: 18px; align-items: flex-start; }
.tj-steplist__n {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tj-accent); color: var(--tj-text-strong); font-weight: 600; font-size: 17px;
}
.tj-steplist h3, .tj-steplist h4 { font-size: 20px; line-height: 25px; margin-bottom: 4px; }

/* Text sections, table stacks, after-blocks */
.tj-textsec { max-width: 900px; }
.tj-textsec h3 { margin-top: 10px; }
.tj-tablestack { max-width: 1100px; }
.tj-tablestack .tj-tablewrap { align-self: stretch; }
.tj-after { display: flex; flex-direction: column; gap: var(--tj-gap); align-items: flex-start; }
.tj-after > .tj-banner, .tj-stack > .tj-banner, .tj-after > .tj-sp { align-self: stretch; }
.tj-banner { width: 100%; }
.tj-grid-note { margin-top: 12px; }
.tj-quote-inline { display: grid; gap: 12px; max-width: 760px; }
.tj-quote-inline blockquote p { font-size: var(--tj-quote); line-height: var(--tj-quote-lh); color: var(--tj-text-strong); }
.tj-quote-inline figcaption { font-size: 16px; line-height: 22px; font-weight: 500; }
.tj-quotecard--plain { background: var(--tj-grad-step-2); background-color: var(--tj-c-slate); min-height: 0; }
.tj-imgcard--contain { background-size: contain !important; background-color: var(--tj-c-ink); }
.tj-formcard__img { min-height: 420px; border-radius: var(--tj-r-card); height: 100%; }
.tj-postcard__img--leer { background: var(--tj-grad-step-2); }
.tj-hero__text .tj-counters { margin-top: 10px; width: 100%; }
.tj-hero__text .tj-src { color: var(--tj-text-inverse-2); }
.tj-hero .tj-filter button { background: rgba(30, 30, 30, .78); color: var(--tj-text-inverse); }
.tj-hero .tj-filter button[aria-pressed="true"] { background: var(--tj-c-white); color: var(--tj-text-strong); }
.tj-pill details summary { display: flex; gap: 14px; align-items: center; list-style: none; cursor: pointer; }
.tj-pill details summary::-webkit-details-marker { display: none; }
.tj-pill details[open] summary .ic-chev { transform: rotate(90deg); }
.tj-pill .ic-chev { margin-left: auto; flex: none; color: var(--tj-text-strong); transition: transform var(--tj-t-ui) var(--tj-ease); }
.tj-acc__item summary .ic { transform: rotate(90deg); }
.tj-acc__item[open] summary .ic { transform: rotate(-90deg); }

/* Image placeholder - striped, with the motif written on it. */
.ph {
  display: grid; place-items: center; width: 100%; min-height: 240px; padding: 24px; text-align: center;
  border-radius: var(--tj-r-card-s); color: var(--tj-text-strong);
  background: repeating-linear-gradient(135deg, #F1ECE3 0 14px, #E7DFD1 14px 28px);
}
.ph span { display: grid; gap: 6px; font-weight: 600; font-size: 16px; line-height: 22px; max-width: 34ch; min-width: 0; }
.ph small { font-weight: 400; font-size: 13px; line-height: 18px; color: var(--tj-text); overflow-wrap: anywhere; }
.tj-phwrap { display: flex; flex: 1; }
/* In a split the placeholder takes the column height; its aspect ratio would
   then force the width past the column (measured overflow at 768 px). */
.tj-phwrap .ph { min-height: 100%; aspect-ratio: auto !important; }

/* Nachtrag 40: the closing card no longer runs into the dark footer (staging
   strip c05cd2c, margin -46). It stands free on paper; the footer template
   begins with spacers. The class tj-sec--footjoin only marks a page that ends
   with its own card (footer without card). */

/* 6.31 The start page line for every page - DERIVED (Nachtrag 26).
   Sections without a photo are built as one "content block" on one of three
   surfaces: paper (text axis), tint card, dark gradient card like "Der Weg".
   Head, body and foot follow the order of the content master; the foot
   (deep-dive bar, call bar, buttons) takes the full width of the block.
   Elementor: one saved section per surface, inner containers as listed in
   build/sections/type-block.md. */
.tj-darkband {
  padding: 60px var(--tj-inset); border-radius: var(--tj-r-surface);
  background: var(--tj-grad-step-1); background-color: var(--tj-c-slate);
  display: flex; flex-direction: column; gap: 40px;
}
.tj-darkband--2 { background: var(--tj-grad-step-2); background-color: var(--tj-c-slate); }
.tj-blockstack { gap: var(--tj-gap); }
.tj-blockstack > :is(.tj-cols, .tj-tiles, .tj-cards, .tj-steprow, .tj-tablewrap, .tj-acc, .tj-rows, .tj-checks--2, .tj-counters, .tj-proof--hell),
.tj-duo__body > :is(.tj-cols, .tj-tiles, .tj-cards, .tj-steprow, .tj-tablewrap, .tj-acc, .tj-rows, .tj-checks--2, .tj-counters, .tj-proof--hell) {
  align-self: stretch; max-width: none;
}
.tj-blockstack > :is(.tj-cols, .tj-tiles, .tj-cards, .tj-steprow, .tj-tablewrap, .tj-acc, .tj-rows--duo, .tj-counters) { margin-top: 20px; }
.tj-blockstack > .tj-text + :is(.tj-cols, .tj-tiles, .tj-cards, .tj-steprow, .tj-tablewrap, .tj-acc) { margin-top: 30px; }
/* Spacing inside a block, measured against the start page (review
   24.09.2026): chip to H2 20 px, a second H2 after content 40 px; only direct
   children, so titles inside tiles and step numerals keep their own gaps. */
.tj-blockstack > h3:not(:first-child) { margin-top: 20px; }
.tj-blockstack > h2:not(:first-child) { margin-top: 40px; }
.tj-blockstack > .tj-chip + :is(h2, h3) { margin-top: 0; }
.tj-blockstack > .tj-steprow + .tj-src { margin-top: 10px; }
/* Loop cards on paper or tint get a line instead of the dark card around them. */
.tj-blockstack :is(.tj-postcard, .tj-firm) { border: 1px solid var(--tj-line); }
.tj-blockstack > :is(.tj-grid, .tj-firms) { align-self: stretch; margin-top: 20px; }
/* Post cards of the line: image 3:2 (portraits in the old posts are cropped at
   the top, not at the forehead), date as text, title, arrow like the deep bar. */
.tj-blockstack .tj-postcard { border-radius: var(--tj-r-inner); }
.tj-blockstack .tj-postcard__img { aspect-ratio: 3 / 2; background-size: cover; background-position: 50% 25%; }
.tj-blockstack .tj-postcard__body { padding: 20px 76px 24px 24px; gap: 8px; }
.tj-postcard__date { font-size: 15px; line-height: 18px; font-weight: 500; color: var(--tj-text); }
.tj-blockstack .tj-postcard__ic { color: var(--tj-text-strong); }
.tj-blockfoot { display: flex; flex-direction: column; gap: var(--tj-gap); align-items: flex-start; margin-top: 40px; }
.tj-blockfoot > :is(.tj-deep, .tj-midstrip) { align-self: stretch; }
:is(.tj-tintcard, .tj-darkband) > .tj-blockfoot { margin-top: 0; }
/* Head left 5/12, body right 7/12, like the FAQ on the text axis. */
.tj-duo { display: flex; gap: 60px; align-items: flex-start; }
.tj-duo__head, .tj-duo__body { min-width: 0; display: flex; flex-direction: column; gap: var(--tj-gap); align-items: flex-start; }
.tj-duo__head { flex: 5 1 0; position: sticky; top: calc(var(--tj-header-h) + var(--tj-util-h) + 20px); }
.tj-duo__body { flex: 7 1 0; }
.tj-duo__body > .tj-text, .tj-duo__body > .tj-lead { max-width: 64ch; }
/* Columns with a gold line on top, like the step row. Not clickable. */
.tj-cols { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 40px var(--tj-gap); list-style: none; }
.tj-cols > li { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 2px solid var(--tj-c-gold-line); }
.tj-cols__ic { width: 56px; height: 56px; object-fit: contain; margin-bottom: 8px; }
.tj-cols :is(h3, h4) { font-size: var(--tj-h3); line-height: var(--tj-h3-lh); font-weight: 600; letter-spacing: normal; color: var(--tj-text-strong); }
.tj-cols p { font-size: var(--tj-lead); line-height: var(--tj-lead-lh); max-width: 60ch; }
.tj-on-dark .tj-cols :is(h3, h4) { color: var(--tj-text-inverse); }
/* Rows: title left 5/12, text right 7/12. */
.tj-rows--duo li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 10px 60px; align-items: baseline; }
.tj-rows--duo p { max-width: 64ch; }
.tj-on-dark .tj-rows li { border-color: rgba(255, 255, 255, .16); }
.tj-on-dark .tj-rows :is(h3, h4) { color: var(--tj-text-inverse); }
.tj-tiles--2 .tj-tile { width: calc((100% - var(--tj-gap)) / 2); }
.tj-cards--line { gap: var(--tj-gap); }
.tj-cards--line .tj-card { border-radius: var(--tj-r-inner); }
.tj-darkband .tj-card { box-shadow: none; }
.tj-steprow--hell :is(h3, h4) { color: var(--tj-text-strong); }
/* Numerals on paper in ink: gold on paper measures 2.1:1 (qa_contrast). The
   gold stays as the line above each step. */
.tj-steprow--hell .tj-steprow__n { color: var(--tj-text-strong); }
.tj-steprow--hell p { color: var(--tj-text); }
.tj-checks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; }
.tj-proof--hell li { color: var(--tj-text-strong); }
.tj-on-dark .tj-proof--hell li { color: var(--tj-text-inverse); }
.tj-proof--hell { gap: 12px 36px; }
/* Page head with a motif (Nachtrag 26): where the content master sets the
   head as a split with an image on the right, the motif stands as a 4:3 card
   or as a graphic on a white inner card, on the dark stage with the light
   cone. Text never lies on people. Below 1025 px the motif comes first like
   the image band of the other heads. */
.tj-hero__card--split { background-position: center 30%; }
.tj-hero__split { display: flex; gap: 60px; align-items: center; }
.tj-hero__split > .tj-hero__text { flex: 7 1 0; min-width: 0; width: auto; }
.tj-hero__media { flex: 5 1 0; min-width: 0; display: flex; }
.tj-hero__media > :is(.tj-imgcard--43, .tj-phwrap, .tj-innercard) { flex: 1; aspect-ratio: 4 / 3; min-height: 0; border-radius: var(--tj-r-inner); }
.tj-hero__media > .tj-imgcard--43 { border: 1px solid rgba(255, 255, 255, .12); }
.tj-hero__media .ph { min-height: 0; height: 100%; }
.tj-innercard--hero { padding: 24px; }
.tj-innercard--hero .tj-innercard__img { height: auto; max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 1024px) {
  .tj-hero__split { flex-direction: column-reverse; align-items: stretch; gap: 30px; }
  .tj-hero__split > .tj-hero__text, .tj-hero__media { flex: 0 0 auto; }
  .tj-hero__card--split { padding-top: 30px; }
}

/* Contact card: text 5/12 on the tint card, the form or the booking embed on
   a white inner card 7/12 (Nachtrag 26). The fields get a line because they
   stand on white; the submit row is the button of the content master. */
.tj-duo--form .tj-duo__head { position: static; }
.tj-innercard--form { display: block; min-height: 0; padding: 36px; align-self: stretch; }
.tj-innercard--form .tj-input { border-color: var(--tj-line); background: var(--tj-c-paper); }
.tj-innercard--form .tj-embed { min-height: 520px; }
.tj-form__send { grid-column: 1 / -1; margin-top: 8px; }
.tj-form__note:empty { display: none; }
@media (max-width: 767px) { .tj-innercard--form { padding: 20px; } .tj-innercard--form .tj-embed { min-height: 420px; } }
/* A paper section that ends with the closing card (story template): the text
   stays on the axis of the box, the card takes the stage width like the
   closing card of the start page. */
.tj-achse { padding-inline: var(--tj-inset); }
.tj-sec--karte > .tj-box { max-width: none; }
.tj-sec--karte .tj-achse { max-width: var(--tj-container); margin-inline: auto; }
/* Tables of the line (Nachtrag 26): quiet head, the gold as a 2 px line under
   the head row instead of a gold fill, no zebra, a hairline frame instead of
   the shadow. Four gold head rows in a row were loud (plan Leistungen). */
.tj-tablewrap { box-shadow: none; border: 1px solid var(--tj-line); border-radius: var(--tj-r-inner); }
.tj-table th { background: transparent; border-bottom: 2px solid var(--tj-c-gold-line); padding: 18px 25px 14px;
  font-size: 15px; line-height: 18px; font-weight: 600; color: var(--tj-text-strong); }
.tj-table tbody tr:nth-child(even) td { background: transparent; }
.tj-table tbody tr:first-child td { border-top: 0; }
.tj-table :is(th, td) { overflow-wrap: normal; hyphens: manual; }
/* Service tables (Leistungen): the same column widths on all four tables, so
   "Enthalten" and "Zubuchbar" line up from table to table; values centred. */
.tj-table--leistung { table-layout: fixed; }
.tj-table--leistung :is(th, td):first-child { width: 58%; }
.tj-table--leistung :is(th, td):not(:first-child) { width: 21%; text-align: center; }
/* Timeline: the year is the row head in heading size (chronicle, Über uns). */
.tj-table--zeitleiste th[scope="row"] {
  width: 180px; padding: 16px 25px; border-bottom: 0; border-top: 1px solid var(--tj-line); vertical-align: top;
  font-size: var(--tj-h3-l); line-height: var(--tj-h3-l-lh); font-weight: 500; letter-spacing: -1px; color: var(--tj-text-strong);
}
.tj-table--zeitleiste tbody tr:first-child th[scope="row"] { border-top: 0; }
.tj-table--zeitleiste td { padding-top: 22px; }
/* Fact strip: a one-row table as label over value (profile of a story, size classes). */
.tj-facts { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 16px var(--tj-gap);
  margin: 0; padding: 24px 0; border-top: 1px solid var(--tj-line); border-bottom: 1px solid var(--tj-line); align-self: stretch; }
.tj-facts__f { min-width: 0; }
.tj-facts dt { font-size: 15px; line-height: 18px; font-weight: 500; color: var(--tj-text); }
.tj-facts dd { margin: 6px 0 0; font-size: var(--tj-h3); line-height: var(--tj-h3-lh); font-weight: 600; color: var(--tj-text-strong); }
.tj-blockstack > .tj-facts { margin-top: 20px; }
@media (max-width: 767px) {
  /* Row cards on phones: no fixed column widths (they split "Enthalten" into
     single letters, visual check 24.09.2026), label and value in one line,
     empty cells hidden. */
  .tj-table--leistung { table-layout: auto; }
  .tj-table--leistung :is(th, td) { width: auto !important; text-align: left !important; }
  .tj-table--leistung td:not(:first-child)::before { display: inline; margin-right: 8px; }
  .tj-table td:empty { display: none; }
  .tj-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tj-table--zeitleiste th[scope="row"] { display: block; width: auto; padding: 14px 20px 0; font-size: 24px; line-height: 30px; border-top: 0; }
  .tj-table--zeitleiste td { border-top: 0 !important; padding-top: 4px; }
  .tj-table--zeitleiste td::before { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* Year tiles: links to former years, from the deep-dive bar family. */
.tj-years { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tj-gap); list-style: none; align-self: stretch; margin-top: 20px; }
.tj-year {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px;
  border-radius: var(--tj-r-inner); background: var(--tj-surface-white); border: 1px solid var(--tj-line);
  color: var(--tj-text-strong); text-decoration: none;
  font-size: var(--tj-h3-l); line-height: var(--tj-h3-l-lh); font-weight: 500; letter-spacing: -1px;
  transition: border-color var(--tj-t-hover) var(--tj-ease), box-shadow var(--tj-t-hover) var(--tj-ease), transform var(--tj-t-hover) var(--tj-ease);
}
.tj-year .tj-deep__ic .ic { transition: transform var(--tj-t-hover) var(--tj-ease); }
@media (hover: hover) and (pointer: fine) {
  .tj-year:hover { transform: translateY(var(--tj-lift)); box-shadow: var(--tj-shadow-hover); border-color: var(--tj-c-gold-line); }
  .tj-year:hover .tj-deep__ic .ic { transform: translate(2px, -2px); }
}
.tj-year:active { transform: scale(.99); }
@media (max-width: 1024px) { .tj-years { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .tj-year { font-size: 26px; line-height: 32px; padding: 18px 18px; } }
@media (max-width: 480px) { .tj-years { grid-template-columns: minmax(0, 1fr); } }
/* Groups: every H2 of a section starts a group in the same grid, a hairline
   between them (Leistungen: head with icon left, table right). */
.tj-groups { display: flex; flex-direction: column; }
.tj-group + .tj-group { margin-top: 50px; padding-top: 50px; border-top: 1px solid var(--tj-line); }
.tj-on-dark .tj-group + .tj-group { border-top-color: rgba(255, 255, 255, .16); }
.tj-blockstack--weit { margin-top: 40px; }
/* Two lists with their heading as equal white cards side by side. */
.tj-listcards { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: var(--tj-gap); align-self: stretch; margin-top: 20px; }
.tj-listcard { min-width: 0; padding: 30px; border-radius: var(--tj-r-inner); background: var(--tj-surface-white); border: 1px solid var(--tj-line);
  display: flex; flex-direction: column; gap: 16px; }
.tj-listcard :is(h3, h4) { margin-top: 0 !important; }
.tj-blockstack > .tj-listcards, .tj-duo__body > .tj-listcards { align-self: stretch; }
/* Long check list in two columns, read column by column (1 to 4, then 5 to 8). */
.tj-checks--2 { display: block; column-count: 2; column-gap: 40px; }
.tj-checks--2 li { break-inside: avoid; margin-bottom: 7px; }
/* Seal cards: the seals of topjob.de on white cards on the dark card. */
.tj-seals { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: var(--tj-gap); list-style: none; align-self: stretch; margin-top: 20px; }
.tj-seal { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 24px;
  border-radius: var(--tj-r-inner); background: var(--tj-surface-white); color: var(--tj-text); }
.tj-seal__fig { position: relative; height: 136px; margin-bottom: 8px; }
.tj-seal__img { width: auto; height: 136px; }
.tj-on-dark .tj-seal :is(h3, h4) { font-size: var(--tj-h3); line-height: var(--tj-h3-lh); font-weight: 600; letter-spacing: normal; color: var(--tj-text-strong); }
.tj-seal p { font-size: var(--tj-small); line-height: var(--tj-small-lh); }
.tj-seals__rest { margin-top: 10px; align-self: stretch; }
.tj-seals__rest li { border-color: rgba(255, 255, 255, .16) !important; }
.tj-on-dark .tj-seals__rest :is(h3, h4) { color: var(--tj-text-inverse); }
/* Calm logo row: one line, equal height, no link, no marquee. */
/* A fixed grid, so no logo stands alone in a second line (8 logos wrapped
   7 + 1 at 1440, visual check 24.09.2026). */
.tj-logorow { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); align-items: center; gap: 24px 30px;
  list-style: none; align-self: stretch; padding-bottom: 30px; border-bottom: 1px solid var(--tj-line); }
.tj-logorow li { min-width: 0; display: flex; justify-content: center; }
.tj-logorow__img { width: auto; max-width: 100%; height: auto; max-height: 50px; object-fit: contain; }
/* Quote on paper with a small portrait of the source as byline. */
.tj-quoteline { display: flex; flex-direction: column; gap: 20px; max-width: 900px; margin-top: 20px; }
.tj-quoteline blockquote p { font-size: var(--tj-quote); line-height: var(--tj-quote-lh); font-weight: 500; letter-spacing: -.5px; color: var(--tj-text-strong); }
.tj-quoteline figcaption { display: flex; align-items: center; gap: 16px; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--tj-text); }
.tj-quoteline__img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
/* Quote inside the closing card (page ends with a quote and its buttons). */
.tj-cta .tj-quote-inline blockquote p { color: var(--tj-text-inverse); font-weight: 500; }
.tj-cta .tj-quote-inline figcaption { color: var(--tj-text-inverse-2); }
/* Filter bar of the directory: dropdowns and a search field, not chips. */
.tj-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; align-self: stretch; }
.tj-select, .tj-search { height: 48px; border-radius: var(--tj-r-btn); border: 1px solid rgba(45, 47, 53, .25); background: var(--tj-surface-white);
  color: var(--tj-text-strong); font: 500 15px/18px var(--tj-font); }
.tj-select { display: inline-flex; align-items: center; gap: 10px; padding: 0 18px 0 22px; cursor: pointer;
  transition: border-color var(--tj-t-hover) var(--tj-ease); }
.tj-search { display: inline-flex; align-items: center; gap: 10px; padding: 0 18px; margin-left: auto; min-width: 240px; }
.tj-search input { border: 0; outline: 0; background: transparent; font: inherit; color: inherit; flex: 1; min-width: 0; }
.tj-search:focus-within { border-color: var(--tj-c-ink); box-shadow: 0 0 0 1px var(--tj-c-ink); }
@media (hover: hover) and (pointer: fine) { .tj-select:hover { border-color: var(--tj-c-ink); } }
/* Payment details are never a text field: a slot for the payment provider. */
.tj-field__l { font-size: 14px; line-height: 18px; font-weight: 500; color: var(--tj-text-strong); }
.tj-payslot { min-height: 48px; border-radius: 16px; display: flex; align-items: center; padding: 8px 16px;
  background: repeating-linear-gradient(135deg, #F1ECE3 0 14px, #E7DFD1 14px 28px); }   /* placeholder stripes, not a field */
/* Columns with a graphic from topjob.de (the three energy traps). */
.tj-cols__fig { position: relative; aspect-ratio: 4 / 3; margin-bottom: 8px; border-radius: var(--tj-r-inner);
  background: var(--tj-surface-white); border: 1px solid var(--tj-line); display: grid; place-items: center; padding: 20px; }
.tj-cols__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* Linked tiles (award winners): the whole tile is the link, arrow like the deep bar. */
.tj-tile--link { position: relative; padding-bottom: 76px;
  transition: border-color var(--tj-t-hover) var(--tj-ease), box-shadow var(--tj-t-hover) var(--tj-ease), transform var(--tj-t-hover) var(--tj-ease); }
.tj-tile--link a { color: inherit; text-decoration: none; }
.tj-tile--link a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tj-tile__pfeil { position: absolute; right: 24px; bottom: 24px; }
.tj-tile--link:has(a:focus-visible) { outline: 2px solid var(--tj-focus); outline-offset: 3px; }
.tj-tile--link a:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) {
  .tj-tile--link:hover { transform: translateY(var(--tj-lift)); box-shadow: var(--tj-shadow-hover); border-color: var(--tj-c-gold-line); }
}
@media (max-width: 1279px) { .tj-seals { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Tablet: two equal lines of logos (4 + 4, 3 + 3), never a single one left over. */
@media (min-width: 768px) and (max-width: 1024px) {
  .tj-logorow[style*="--halb:4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tj-logorow[style*="--halb:3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .tj-group + .tj-group { margin-top: 40px; padding-top: 40px; }
  .tj-search { margin-left: 0; }
}
@media (max-width: 767px) {
  .tj-listcards { grid-template-columns: minmax(0, 1fr); }
  .tj-listcard { padding: 20px; }
  .tj-checks--2 { column-count: 1; }
  /* A list with the seal left: two columns left the fifth seal alone. */
  .tj-seals { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tj-seal { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding: 16px; align-items: start; }
  .tj-seal__fig { grid-row: 1 / span 2; height: 90px; margin: 0; }
  .tj-seal__img { height: 90px; }
  .tj-logorow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tj-filterbar > * { flex: 1 1 100%; }
  .tj-select { justify-content: space-between; }
  .tj-search { min-width: 0; }
}
/* No single item left over in the last row of a two-column grid (Nachtrag 26,
   orphan check in qa_layout): exactly three tiles stay three columns on
   tablets; an odd last tile or counter takes the whole row. */
@media (min-width: 768px) and (max-width: 1024px) {
  /* The tile widths of the flex era are gone (28.09.2026): the tiles are a
     grid since Nachtrag 40 (S-block "tiles"), and the old width, winning by
     its :has() specificity, divided the grid cell by three again (tiles
     53 px wide on gb 02 at 768 px, text one letter per line). */
  .tj-deeps > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* People grid of the line (jury): portrait 1:1 on top, name and role below in
   ink. No text on the photo, no veil, not clickable (Nachtrag 26). */
.tj-people { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px var(--tj-gap); list-style: none; align-self: stretch; margin-top: 20px; }
.tj-person { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tj-person__img {
  position: relative; aspect-ratio: 1; margin-bottom: 10px; overflow: hidden;
  border-radius: var(--tj-r-inner); background-color: var(--tj-c-slate);
  background-size: cover; background-repeat: no-repeat;
}
.tj-person__img--leer { display: grid; place-items: center; color: var(--tj-c-white-70); }
.tj-person__n { font-size: var(--tj-h3); line-height: var(--tj-h3-lh); font-weight: 600; color: var(--tj-text-strong); }
.tj-person__r { font-size: 15px; line-height: 20px; color: var(--tj-text); }
@media (max-width: 1024px) { .tj-people { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Phones: a list, portrait left, name and role right. Two columns left the
   15th member alone and broke roles mid-word (visual check 24.09.2026). */
@media (max-width: 767px) {
  .tj-people { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tj-person { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto;
    column-gap: 16px; row-gap: 2px; align-items: center; }
  .tj-person__img { grid-row: 1 / span 2; margin: 0; }
  .tj-person__n { font-size: 17px; line-height: 22px; align-self: end; }
  .tj-person__r { align-self: start; }
}
/* Keyword tiles: a term with its pictogram, not clickable (the six topic
   fields carry their own pictograms on topjob.de). */
.tj-kws { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tj-gap); list-style: none; align-self: stretch; margin-top: 20px; }
.tj-kw {
  min-width: 0; display: flex; align-items: center; gap: 18px; padding: 20px 24px;
  border-radius: var(--tj-r-inner); background: var(--tj-surface-white); border: 1px solid var(--tj-line);
  font-size: var(--tj-h3); line-height: var(--tj-h3-lh); font-weight: 600; color: var(--tj-text-strong);
}
.tj-kw__ic { flex: none; width: 64px; height: 64px; object-fit: contain; }
/* Long topic names break at their soft hyphens in the tile at every width
   ("Mitarbeitendenbindung" was clipped at 768 px). */
.tj-kw > span { min-width: 0; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: anywhere; }

@media (max-width: 1024px) { .tj-kws { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .tj-kws { grid-template-columns: minmax(0, 1fr); } .tj-kw__ic { width: 48px; height: 48px; } }
/* FAQ with the head on the text axis, on paper or in a card. */
.tj-faq--duo { gap: 60px; }
.tj-faq--duo .tj-faq__head { flex: 5 1 0; padding: 0; position: sticky; top: calc(var(--tj-header-h) + var(--tj-util-h) + 20px); }
.tj-faq--duo .tj-faq__list { flex: 7 1 0; padding: 0; }
/* Closed items are tint; on a tint card they turn white to stay visible. */
.tj-tintcard .tj-acc__item:not([open]):not(.tj-acc__item--leer) { background: var(--tj-surface-white); }
.tj-on-dark .tj-midstrip { border-top-color: rgba(255, 255, 255, .2); }
/* Long counter values ("2–3 Wochen") use the design's tablet size 44 on
   every width; at 55 the five values need 1300 px and wrap at 1440. */
.tj-counters--lang { grid-template-columns: repeat(var(--n, 5), max-content); justify-content: space-between; column-gap: 30px; }
/* Below 1281 px the values keep their natural width and wrap as whole items;
   the doubled class beats the two-column counter rule of section 9 (qa_layout
   24.09.2026: "2–3 Wochen" clipped at 768, 414 and 320). */
@media (max-width: 1280px) {
  .tj-counters.tj-counters--lang { display: flex; flex-wrap: wrap; gap: 26px 44px; justify-content: flex-start; }
}
@media (max-width: 767px) {
  .tj-counters.tj-counters--lang { flex-direction: column; gap: 0; }
}
.tj-counters--lang .tj-counter__v { font-size: 44px; line-height: 44px; white-space: nowrap; }

@media (max-width: 1024px) {
  .tj-darkband { padding-block: 40px; }
  .tj-duo, .tj-faq--duo { gap: 40px; }
  .tj-duo__head, .tj-faq--duo .tj-faq__head { position: static; }
  .tj-steprow--4 { flex-wrap: wrap; row-gap: 30px; }
  .tj-steprow--4 > li { flex: 1 1 calc(50% - var(--tj-gap)); }
  .tj-rows--duo li { gap: 10px 40px; }
}
@media (max-width: 767px) {
  .tj-darkband { padding-block: 24px 30px; }
  .tj-duo { flex-direction: column; gap: 24px; }
  .tj-duo__head, .tj-duo__body { flex: 0 0 auto; width: 100%; }
  .tj-cols { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .tj-rows--duo li { grid-template-columns: minmax(0, 1fr); }
  .tj-tiles--2 .tj-tile { width: 100%; }
  .tj-checks--2 { grid-template-columns: minmax(0, 1fr); }
  .tj-proof--hell { flex-direction: column; gap: 10px; }
}

/* --------------------------------------------------------------------------
   7. Footer 373eea8 - dark, three columns, legal line. Above it the closing
   card a522a1e (Nachtrag 22).
   -------------------------------------------------------------------------- */
/* Nachtrag 40: the layout of the footer is in the system block at the end of
   the file (raster, sender, navigation, base row). Here only the parts that
   did not change. */
.site-footer { color: var(--tj-text-inverse); }
.site-footer__cta { position: relative; }
.site-footer__main { background: var(--tj-surface-dark); }
.site-footer__addr { font-style: normal; }
.site-footer__links, .site-footer__legal-links { list-style: none; }
.site-footer__links { display: grid; }
.site-footer__social { display: flex; gap: 10px; list-style: none; }
.site-footer__social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--tj-accent); color: var(--tj-surface-dark); }
.site-footer__lockup { display: flex; align-items: center; font-size: var(--tj-label); line-height: var(--tj-label-lh); font-weight: 600; letter-spacing: var(--tj-label-ls); }
.site-footer__lockup span { white-space: nowrap; }
.site-footer__lockup img { height: auto; }

/* --------------------------------------------------------------------------
   8. Review markers - prototype only, never built
   -------------------------------------------------------------------------- */
.sec-id {
  position: absolute; top: 8px; right: 12px; z-index: var(--tj-z-marker);
  font: 600 11px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .02em;
  padding: 5px 8px; border-radius: 6px; background: rgba(30, 30, 30, .82); color: #fff;
}
.sec-id ~ .mk { position: absolute; top: 8px; right: calc(12px + var(--mk-off, 0px)); }
.mk {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  font: 600 11px/1 var(--tj-font); padding: 5px 8px; border-radius: 6px; white-space: nowrap;
  letter-spacing: normal; /* not the -2px tracking of H1 and H2 (draft markers in headings, 12.10.2026) */
  background: #FFF4D6; color: #5C4200; border: 1px solid #E9C766; cursor: help;
}
.mk[data-status="need"] { background: #FDE8E8; color: #8A1C1C; border-color: #F0B4B4; }
.mk[data-status="offen"] { background: #E8EEFD; color: #1C3A8A; border-color: #B4C4F0; }
.mk[data-status="entfaellt"] { background: #EEE; color: #444; border-color: #CCC; }
.mk[data-status="umgestellt"], .mk[data-status="neu"] { background: #EAF6EE; color: #1D5B33; border-color: #B9DEC6; }
.imk { position: absolute; left: 12px; top: 12px; z-index: 2; font: 600 11px/1 var(--tj-font); padding: 5px 8px; border-radius: 6px; background: #FDE8E8; color: #8A1C1C; }
.mk-sec .sec-marks { position: absolute; top: 8px; right: 12px; z-index: var(--tj-z-marker); display: flex; gap: 6px; align-items: center; }
.mk-sec .sec-marks .sec-id, .mk-sec .sec-marks .mk { position: static; margin: 0; }
.mk-bar {
  position: fixed; left: calc(var(--tj-page-side) + 16px); bottom: 16px; z-index: var(--tj-z-marker);
  display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 30px;
  background: rgba(30, 30, 30, .9); color: #fff; font-size: 13px;
}
.mk-bar .tj-src { color: var(--tj-c-white-70); padding-right: 8px; }
.mk-bar__btn { padding: 8px 14px; border-radius: 20px; border: 1px solid var(--tj-c-gold-line); background: transparent; color: #fff; font: 600 13px/1 var(--tj-font); cursor: pointer; text-decoration: none; }
.mk-bar__btn[aria-pressed="true"] { background: var(--tj-accent); color: var(--tj-c-ink); }
/* Switch between the two counter sets on the home page. Prototype only,
   hidden with the markers, never built in Elementor. */
.proto-switch { display: inline-flex; gap: 6px; margin-top: 16px; padding: 6px; border-radius: 30px; background: rgba(30, 30, 30, .9); align-self: flex-start; }
.proto-switch button { padding: 8px 14px; border-radius: 20px; border: 1px solid var(--tj-c-gold-line); background: transparent; color: #fff; font: 600 13px/1 var(--tj-font); cursor: pointer; }
.proto-switch button[aria-pressed="true"] { background: var(--tj-accent); color: var(--tj-c-ink); }
body.mk-off .proto-switch { display: none; }
body.mk-off :is(.sec-marks, .sec-id, .mk, .imk) { display: none !important; }

/* Site map page */
.tj-sitemap { list-style: none; display: grid; gap: 8px; margin-top: 30px; }
.tj-sitemap li { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; padding: 14px 20px; border-radius: 20px; background: var(--tj-surface-white); box-shadow: var(--tj-shadow); }
.tj-sitemap a { font-weight: 600; color: var(--tj-text-strong); }

/* --------------------------------------------------------------------------
   9. Responsive - Elementor breakpoints 1024 and 767, plus the navigation
   collapse at 1180 (six menu items plus button do not fit below it).
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .nav, .util-links { display: none; }
}
@media (max-width: 1024px) {
  .tj-hero { border-radius: 0 0 33px 33px; }
  .tj-hero__card, .tj-hero--start .tj-hero__card { border-radius: calc(33px - var(--tj-stage-border)); }
  .tj-split, .tj-split--rev, .tj-split--kompass, .tj-faq, .tj-formcard { gap: 30px; }
  .tj-stepcard__text { padding: 40px 0 40px 40px; }
  .tj-iconcols, .tj-benefit__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tj-jury { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tj-counters { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
  /* a522a1e below 1025: image band of the trophy, text on ink below it. */
  .tj-cta { min-height: 0; background-image: none !important; }
  .tj-cta .tj-band { display: block; height: 320px; }
  .tj-cta__text { width: 100%; padding: 30px var(--tj-inset) 40px; justify-content: flex-start; }
  .tj-cta__text .tj-btns { padding: 10px 0; }
  /* Band variants of the hero and the quote card (Nachtrag 23). */
  .tj-hero__card--band, .tj-quotecard--band { background-image: none !important; padding: 0; justify-content: flex-start; min-height: 0 !important; }
  .tj-hero__card--band::before, .tj-quotecard--band::before { display: none; }
  .tj-hero__card--band .tj-band { display: block; height: 380px; }
  .tj-hero__card--band > .tj-box { padding: 30px var(--tj-inset) 40px; }
  .tj-quotecard--band .tj-band { display: block; height: 300px; }
  .tj-quotecard--band .tj-quotecard__in { padding: 30px var(--tj-inset) 40px; }
  /* Content-first components on tablet. */
  .tj-split--achse, .tj-split--achse.tj-split--rev, .tj-tintcard > .tj-split, .tj-sec--achse .tj-faq { gap: 40px; }
  .tj-split--achse .tj-split__text { flex: 55 1 0; }
  .tj-split--achse .tj-split__media { flex: 45 1 0; }
  .tj-split--achse .tj-split__media > .tj-imgcard { min-height: 420px; }
  .tj-innercard { min-height: 420px; }
  .tj-innercard__img { height: 340px; }
  .tj-sec--achse .tj-faq__head { position: static; }
  .tj-tile, .tj-firm { width: calc((100% - var(--tj-gap)) / 2); }
  .tj-midstrip { flex-direction: column; align-items: flex-start; gap: 20px; }
  .tj-stepband, .tj-tintcard, .tj-darkcard--firmen, .tj-quotecard, .tj-kpicard { padding-block: 40px; }
  .tj-proof { column-gap: 24px; }
  /* Five counters stay in one row on tablet (about 160 px each at 1024). */
  .tj-kpiwrap .tj-counters { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
  .megamenu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tj-imgcard__label { right: 16px; }
}
/* DERIVED veil for tablet and phone. The design has desktop frames only; its
   overlays darken the left half, but below 1025 px the text runs across the
   whole photo. Measured 24.09.2026 without it: phone H1 1.19:1, lead 1.24:1;
   tablet (1024) H1 down to 1.99:1, closing card text 4.1:1. The closing card
   swaps to the hero photo from the tablet down, like the staging. */
@media (max-width: 1024px) {
  .tj-imgcard.tj-on-dark::before, .tj-hero__card.tj-imgcard::before {
    background: rgba(0, 0, 0, .66) !important; opacity: 1 !important;
  }
}
@media (max-width: 767px) {
  body { padding-top: var(--tj-header-h); }
  .site-header__util { display: none; }
  .megamenu { top: var(--tj-header-h); max-height: calc(100dvh - var(--tj-header-h)); }
  html { scroll-padding-top: calc(var(--tj-header-h) + 16px); }
  .site-header__bar .tj-btn--red { font-size: 12px; padding: 12px 14px; margin-left: 0; }
  .tj-hero, .tj-hero--start { border-radius: 0 0 33px 33px; }
  .tj-hero__card, .tj-hero--start .tj-hero__card { padding: 25px 10px 30px; border-radius: 0 0 23px 23px; min-height: 70vh; }
  .tj-hero__card { min-height: 60vh; }
  .tj-split, .tj-split--rev, .tj-split--kompass, .tj-faq, .tj-formcard, .tj-stepcard { flex-direction: column; }
  /* flex-basis 662/765 px would act as a HEIGHT in the stacked split (audit
     24.09.2026: 662 px photo, 765 px text column with 134 px empty above and below). */
  .tj-split__media, .tj-split__text { flex: 0 0 auto; }
  .tj-split__media { order: -1; width: 100%; }
  .tj-split__media > .tj-imgcard, .tj-split--wide .tj-split__media > .tj-imgcard,
  .tj-split--rev .tj-split__media > .tj-imgcard, .tj-split--kompass .tj-split__media > .tj-imgcard { min-height: 303px; border-radius: var(--tj-r-card-s); }
  .tj-split__text { padding: 5px; }
  .tj-quotecard, .tj-kpicard, .tj-banner, .tj-benefit { padding: 18px; }
  .tj-quotecard { min-height: 0; }
  .tj-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 0; }
  .tj-stepcard { border-radius: 35px; align-items: stretch; min-height: 0; padding: 0; }
  /* flex-basis 742px would act as a HEIGHT in the stacked card (measured:
     1504 px tall third card at 414 px). Size by content instead. */
  .tj-stepcard__media, .tj-stepcard__text { flex: 0 0 auto; }
  .tj-stepcard__media { order: -1; margin-right: 0; }
  .tj-stepcard--3 .tj-stepcard__media { height: 220px; }
  /* The trophy photo stays in the image area; the text runs on the dark card. */
  .tj-stepcard--3 { background-size: auto 220px !important; background-position: 72% top; }
  .tj-stepcard__text { padding: 20px; }
  .tj-darkcard { padding: 22px; border-radius: 35px; }
  .tj-cta .tj-band { height: 240px; }
  .tj-cta__text { padding: 20px var(--tj-inset) 40px; }
  .tj-cta__text .tj-btns { flex-direction: column; align-items: stretch; }
  .tj-cta__checks { font-size: 18px; line-height: 33px; row-gap: 0; }
  /* Content-first components on phones. */
  .tj-hero__card--band .tj-band { height: 260px; }
  .tj-hero__card--band > .tj-box { padding: 20px var(--tj-inset) 30px; }
  .tj-hero__card--band .tj-btns { flex-direction: column; align-items: stretch; }
  .tj-proof { flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .2); }
  .tj-quotecard--band .tj-band { height: 240px; }
  .tj-quotecard--band .tj-quotecard__in { padding: 20px var(--tj-inset) 30px; }
  .tj-split--achse, .tj-split--achse.tj-split--rev, .tj-tintcard > .tj-split { flex-direction: column; gap: 30px; }
  /* Text first on phones: chip and heading before the picture (the older
     rule pulls the media up for the design splits). */
  .tj-split--achse .tj-split__media { order: 0; }
  .tj-split--achse .tj-split__media > .tj-imgcard { min-height: 0; aspect-ratio: 4 / 3; }
  .tj-innercard { min-height: 300px; }
  .tj-innercard__img { height: 240px; }
  .tj-steprow { flex-direction: column; gap: 30px; }
  .tj-tile, .tj-firm { width: 100%; }
  .tj-tile { min-height: 0; }
  .tj-firm { min-height: 0; }
  .tj-kpiwrap .tj-kpicard { background-image: none !important; }
  .tj-kpiwrap .tj-kpicard::before { display: none; }
  .tj-kpiwrap .tj-counters { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tj-kpiwrap .tj-counters li { padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
  .tj-stepband, .tj-tintcard, .tj-darkcard--firmen, .tj-kpicard, .tj-midstrip--dunkel { padding-block: 24px 30px; }
  .tj-midstrip .tj-btns, .tj-midstrip .tj-btn { align-self: stretch; }
  .tj-cta__checks .ic { margin-top: 7px; }
  .tj-iconcols, .tj-benefit__cols, .tj-cards, .tj-grid { grid-template-columns: minmax(0, 1fr); }
  .tj-jury { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tj-portrait { min-height: 220px; }
  .tj-portrait__n { font-size: 16px; line-height: 20px; }
  .tj-form { grid-template-columns: 1fr; }
  .tj-formcard { padding: 14px; }
  .tj-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tj-table, .tj-table tbody, .tj-table tr, .tj-table td { display: block; }
  .tj-table tr { padding: 12px 0; border-top: 1px solid var(--tj-line); }
  .tj-table td { border: 0; padding: 4px 20px; }
  .tj-table td::before { content: attr(data-label); display: block; font-size: 13px; font-weight: 600; color: var(--tj-text-strong); }
  .megamenu__grid { grid-template-columns: minmax(0, 1fr); }
  .tj-sidetab { top: auto; bottom: 90px; height: 56px; max-width: 56px; padding: 6px; }
  .tj-sidetab .ic { width: 44px; height: 44px; }
  .mk-bar .tj-src { display: none; }
  .tj-deeps { grid-template-columns: minmax(0, 1fr); }
  .tj-statement { padding: 26px 22px; border-radius: 35px; }
  /* Never upscale: on phones the cards get taller than the photo. The image
     keeps at most its natural height (--bg-h from the markup) and the rest of
     the card shows the dark fallback colour. */
  .tj-imgcard, .tj-hero__card, .tj-stepcard--3, .tj-darkcard {
    background-size: auto min(100%, var(--bg-h, 100%));
    background-repeat: no-repeat;
  }
}
@media (max-width: 480px) {
  .tj-jury { grid-template-columns: minmax(0, 1fr); }
  .tj-portrait { min-height: 280px; }
}
@media (max-width: 1024px) and (min-width: 768px) {
  .tj-deeps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Post images from the old site are often narrower than the card. Show them
   at most at their natural width, never stretched. */
.tj-postcard__img { background-size: min(100%, var(--bg-w, 100%)) auto; background-color: var(--tj-line); }

/* Motion: less, not none. Transitions of colour and opacity stay. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .tj-logos__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .tj-logos__track li[aria-hidden="true"] { display: none; }
  .tj-btn:active { transform: none; }
  .megamenu { transform: none !important; }
}

@media print {
  .site-header, .megamenu, .tj-sidetab, .mk-bar, .sec-marks { display: none !important; }
  body { padding-top: 0; background: #fff; }
}

/* ==========================================================================
   Motion and depth layer (CLAUDE.md, Nachtrag 25, standard since Nachtrag 26)

   Principles, audience owners and managing directors:
   - Hover effects only on things that can be clicked. A card that lifts but
     leads nowhere promises something it does not keep.
   - Large surfaces get depth at rest (a long, soft shadow and a hairline of
     light on the top edge), never motion.
   - UI motion stays under 300 ms with a strong ease-out; one orchestrated
     entrance on the hero, nothing that slides in on every section.
   - Every effect has an Elementor equivalent, noted per block.
   - prefers-reduced-motion switches every movement off.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* The menu locks the page scroll; the stable gutter keeps the layout still. */
html { scrollbar-gutter: stable; }

/* --------------------------------------------------------------------------
   1. Header: compact on scroll. Elementor: Header template, Motion Effects >
   Sticky top, "Effects offset" 24; the shrink via the sticky effects class.
   -------------------------------------------------------------------------- */
.site-header {
  transition: background-color var(--tj-t-open) var(--tj-ease), box-shadow var(--tj-t-open) var(--tj-ease),
              backdrop-filter var(--tj-t-open) var(--tj-ease);
}
.site-header__util { overflow: hidden; transition: height var(--tj-t-open) var(--tj-ease), opacity var(--tj-t-open) var(--tj-ease); }
.site-header__bar { transition: height var(--tj-t-open) var(--tj-ease); }
.brand img { transition: width var(--tj-t-open) var(--tj-ease), height var(--tj-t-open) var(--tj-ease); }
html.is-scrolled .site-header {
  background: rgba(30, 30, 30, .86);
  -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 18px 36px -28px rgba(0, 0, 0, .7);
}
html.is-scrolled .site-header__util { height: 0; opacity: 0; border-bottom-width: 0; }
html.is-scrolled .site-header__bar { height: var(--tj-header-compact); }
html.is-scrolled .brand img { width: 60px; height: 60px; }
html.is-scrolled .megamenu { top: var(--tj-header-compact); max-height: calc(100dvh - var(--tj-header-compact)); }

/* Menu items: white text, a gold line grows from the left on hover. */
.nav a { position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--tj-accent); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--tj-t-hover) var(--tj-ease);
}
.nav a[aria-current="page"]::after, .nav a.is-area::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { color: var(--tj-text-inverse); }
  .nav a:hover::after { transform: scaleX(1); }
}

/* Menu toggle: the two icons cross-fade and turn instead of swapping. */
.nav__toggle { position: relative; transition: background-color var(--tj-t-hover) var(--tj-ease); }
.nav__toggle .ic-open, .nav__toggle .ic-close,
.nav__toggle[aria-expanded="true"] .ic-open, .nav__toggle[aria-expanded="true"] .ic-close {
  display: block; position: absolute; top: 50%; left: 50%;
  transition: opacity 200ms var(--tj-ease), transform var(--tj-t-open) var(--tj-ease);
}
.nav__toggle .ic-open { transform: translate(-50%, -50%); }
.nav__toggle .ic-close { opacity: 0; transform: translate(-50%, -50%) rotate(-90deg) scale(.8); }
.nav__toggle[aria-expanded="true"] .ic-open { opacity: 0; transform: translate(-50%, -50%) rotate(90deg) scale(.8); }
.nav__toggle[aria-expanded="true"] .ic-close { opacity: 1; transform: translate(-50%, -50%); }
@media (hover: hover) and (pointer: fine) {
  .nav__toggle:hover { background: rgba(255, 255, 255, .08); color: var(--tj-text-inverse); }
}

/* --------------------------------------------------------------------------
   2. Mega menu: soft entrance, faster exit, dimmed page behind it.
   Elementor: Off-Canvas or Popup template, entrance "Fade In Down" 280 ms,
   exit 180 ms, overlay colour rgba(12,12,12,.42), "Prevent scroll" on.
   -------------------------------------------------------------------------- */
.megamenu {
  box-shadow: 0 48px 96px -48px rgba(0, 0, 0, .75);
  transition: opacity var(--tj-t-open) var(--tj-ease), transform var(--tj-t-open) var(--tj-ease), visibility 0s linear 0s;
}
.megamenu[hidden] {
  transform: translateY(-10px);
  transition: opacity var(--tj-t-close) var(--tj-ease), transform var(--tj-t-close) var(--tj-ease),
              visibility 0s linear var(--tj-t-close);
}
/* Groups rise in with a short stagger when the menu opens; no stagger on close. */
.megamenu__group {
  transition: opacity 360ms var(--tj-ease), transform 360ms var(--tj-ease);
  transition-delay: calc(60ms + var(--i, 0) * 35ms);
}
.megamenu[hidden] .megamenu__group { opacity: 0; transform: translateY(8px); transition-duration: 0s; transition-delay: 0s; }
.megamenu__t { padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.megamenu__group ul { margin-top: 14px; gap: 8px; }
.megamenu__group li a { display: inline-block; transition: color var(--tj-t-hover) var(--tj-ease), transform var(--tj-t-hover) var(--tj-ease); }
@media (hover: hover) and (pointer: fine) {
  .megamenu__group li a:hover { color: var(--tj-text-inverse); transform: translateX(4px); }
  .megamenu__t a:hover { color: var(--tj-accent); }
}
.tj-backdrop {
  position: fixed; inset: 0; z-index: calc(var(--tj-z-header) - 1);
  background: rgba(12, 12, 12, .42);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--tj-t-close) var(--tj-ease), visibility 0s linear var(--tj-t-close);
}
html.is-menu-open .tj-backdrop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity var(--tj-t-open) var(--tj-ease), visibility 0s;
}
html.is-menu-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   3. Accordion: one item open at a time, height and content animate (js).
   Elementor: Nested Accordion > Interactions > Max items expanded "One",
   animation duration 260 ms. Closed rows stay calm on hover; open is gold.
   -------------------------------------------------------------------------- */
.tj-acc__item { transition: background-color var(--tj-t-hover) var(--tj-ease); }
.tj-acc__item summary .ic { transition: transform 260ms var(--tj-ease); }
.tj-acc__item.is-closing { background: var(--tj-surface-tint); }
.tj-acc__item.is-closing summary .ic { transform: rotate(90deg); }
.tj-acc__body { overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  .tj-acc__item:not([open]):hover { background: rgba(45, 47, 53, .16); }
  .tj-acc__item:not([open]):hover summary .ic { transform: rotate(90deg) translateX(2px); }
}

/* --------------------------------------------------------------------------
   4. Buttons and links: the arrow moves towards its direction, the gold
   button gets a warm glow. Elementor: Button hover colours and box shadow,
   transition 220 ms; the arrow nudge needs one line of custom CSS.
   -------------------------------------------------------------------------- */
.tj-btn {
  transition: background-color var(--tj-t-hover) var(--tj-ease), border-color var(--tj-t-hover) var(--tj-ease),
              color var(--tj-t-hover) var(--tj-ease), box-shadow var(--tj-t-hover) var(--tj-ease),
              transform var(--tj-t-press) var(--tj-ease);
}
:is(.tj-btn, .tj-link) .ic { transition: transform var(--tj-t-hover) var(--tj-ease); }
@media (hover: hover) and (pointer: fine) {
  :is(.tj-btn, .tj-link):hover .ic { transform: translate(2px, -2px); }
  .tj-btn:not(.tj-btn--outline):not(.tj-btn--red):not(.tj-btn--white):hover { box-shadow: var(--tj-glow-gold); }
}

/* --------------------------------------------------------------------------
   5. Deep-dive bar, the small clickable box: lifts 2 px with a soft shadow,
   the line turns gold. Elementor: Container hover (border, box shadow),
   Motion Effects > Transform on hover translate Y -2 px, 220 ms.
   -------------------------------------------------------------------------- */
.tj-deep {
  transition: border-color var(--tj-t-hover) var(--tj-ease), box-shadow var(--tj-t-hover) var(--tj-ease),
              transform var(--tj-t-hover) var(--tj-ease);
}
.tj-deep__ic .ic { transition: transform var(--tj-t-hover) var(--tj-ease); }
@media (hover: hover) and (pointer: fine) {
  .tj-deep:hover { transform: translateY(var(--tj-lift)); box-shadow: var(--tj-shadow-hover); border-color: var(--tj-c-gold-line); }
  .tj-on-dark .tj-deep:hover { box-shadow: var(--tj-shadow-hover-dark); }
  .tj-deep:hover .tj-deep__ic { transform: none; }
  .tj-deep:hover .tj-deep__ic .ic { transform: translate(2px, -2px); }
}
.tj-deep:active { transform: translateY(0) scale(.99); }
/* Post cards of the line are links (stretched title link): same lift. */
.tj-blockstack .tj-postcard {
  transition: border-color var(--tj-t-hover) var(--tj-ease), box-shadow var(--tj-t-hover) var(--tj-ease),
              transform var(--tj-t-hover) var(--tj-ease);
}
.tj-blockstack .tj-postcard__ic .ic { transition: transform var(--tj-t-hover) var(--tj-ease); }
@media (hover: hover) and (pointer: fine) {
  .tj-blockstack .tj-postcard:has(a):hover { transform: translateY(var(--tj-lift)); box-shadow: var(--tj-shadow-hover); border-color: var(--tj-c-gold-line); }
  .tj-blockstack .tj-postcard:has(a):hover .tj-postcard__ic .ic { transform: translate(2px, -2px); }
}
.tj-blockstack .tj-postcard:has(a:focus-visible) { outline-color: var(--tj-focus); }

/* --------------------------------------------------------------------------
   6. Large surfaces: depth at rest, no hover (they are not links).
   Elementor: Container > Style > Box Shadow, one preset for all dark cards.
   -------------------------------------------------------------------------- */
:is(.tj-quotecard, .tj-kpiwrap, .tj-stepband, .tj-darkcard--firmen, .tj-cta, .tj-darkband, .tj-darkcard, .tj-statement) { box-shadow: var(--tj-shadow-rest); }
.tj-tintcard { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }

/* --------------------------------------------------------------------------
   7. One entrance moment on the hero, CSS only. Elementor: Entrance
   Animation "Fade In Up", duration fast, delays 80 / 160 / 240 ms.
   -------------------------------------------------------------------------- */
@keyframes tj-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .tj-hero--start .tj-hero__text > * { animation: tj-rise 720ms var(--tj-ease) both; }
  .tj-hero--start .tj-hero__text > :nth-child(1) { animation-delay: 80ms; }
  .tj-hero--start .tj-hero__text > :nth-child(2) { animation-delay: 160ms; }
  .tj-hero--start .tj-hero__text > :nth-child(3) { animation-delay: 240ms; }
  .tj-hero__proof li { animation: tj-rise 600ms var(--tj-ease) both; animation-delay: 360ms; }
  .tj-hero__proof li:nth-child(2) { animation-delay: 420ms; }
  .tj-hero__proof li:nth-child(3) { animation-delay: 480ms; }
  .tj-hero__proof li:nth-child(4) { animation-delay: 540ms; }
}

/* --------------------------------------------------------------------------
   8. The way: the gold line draws step by step when the card comes into view
   (js adds .is-in). It shows the order, so the movement carries meaning.
   Elementor: custom CSS on the step row, or a Divider with entrance animation.
   -------------------------------------------------------------------------- */
.tj-steprow > li { position: relative; border-top-color: transparent; }
.tj-steprow > li::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: var(--tj-c-gold-line); transform-origin: left center;
}
html.has-motion .tj-steprow > li::before { transform: scaleX(0); transition: transform 800ms var(--tj-ease-io); }
html.has-motion .tj-steprow > li > * { opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--tj-ease), transform 500ms var(--tj-ease); }
html.has-motion .tj-steprow.is-in > li::before { transform: scaleX(1); }
html.has-motion .tj-steprow.is-in > li > * { opacity: 1; transform: none; }
html.has-motion .tj-steprow > li:nth-child(2)::before { transition-delay: 180ms; }
html.has-motion .tj-steprow > li:nth-child(3)::before { transition-delay: 360ms; }
html.has-motion .tj-steprow > li:nth-child(1) > * { transition-delay: 300ms; }
html.has-motion .tj-steprow > li:nth-child(2) > * { transition-delay: 480ms; }
html.has-motion .tj-steprow > li:nth-child(3) > * { transition-delay: 660ms; }

/* 9. Side tab: the label glides out. */
.tj-sidetab { transition: max-width 320ms var(--tj-ease), box-shadow var(--tj-t-hover) var(--tj-ease); }
.tj-sidetab:hover, .tj-sidetab:focus-visible { box-shadow: 0 16px 32px -18px rgba(182, 31, 41, .8); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}

/* ======================================================================
   Review of the 20 pages, 24.09.2026 (Nachtrag 26). Last in the file on
   purpose: these rules correct earlier ones at the same specificity,
   including the responsive section above.
   ====================================================================== */
/* Deep-dive bar on phones: text over the full width, arrow below on the right
   (review: 173 of 303 px left for the text, a lone full stop in its line). */
@media (max-width: 767px) {
  .tj-deep { flex-direction: column; align-items: stretch; gap: 14px; padding: 22px 24px; }
  .tj-deep__ic { align-self: flex-end; width: 40px; height: 40px; }
}
/* Deep-dive bars side by side start at the top, labels on one line. */
.tj-deeps .tj-deep { align-items: flex-start; }
/* Hero text on phones on the one text axis of the page (review: 46 px against
   36 px of everything below it). */
@media (max-width: 767px) {
  .tj-hero :is(.tj-hero__card--band, .tj-hero__card--split) > .tj-box { padding-inline: calc(var(--tj-inset) - 10px); }
}
/* Headings on phones: pretty, not balanced; balance used the soft hyphens to
   split words that fit ("Personalab-/teilung"). */
@media (max-width: 1024px) { main :is(h1, h2, h3) { text-wrap: pretty; } }
/* Text links: the arrow follows the last word when the link wraps. */
.tj-link { display: inline; }
.tj-link .ic { display: inline-block; vertical-align: -3px; margin-left: 8px; }
.tj-tel { color: inherit; text-decoration-color: var(--tj-c-gold-line); white-space: nowrap; }
/* Placeholders in a split keep the ratio of their motif and sit at the top. */
.tj-split--achse .tj-split__media:has(> .tj-phwrap) { align-items: flex-start; }
.tj-split--achse .tj-split__media .tj-phwrap .ph { aspect-ratio: var(--ph-r, 4 / 3) !important; min-height: 0; height: auto; }
/* Prototype-only notes vanish with the markers (review: marker-only paragraphs
   kept their gap, the note "6 von 92" read like page text). */
body.mk-off .mk-only { display: none !important; }
/* Tiles 2 x 2 carry short texts: no minimum height. */
.tj-tiles--2 .tj-tile { min-height: 0; }
/* Column graphics sit straight under the gold line, one edge only. */
.tj-cols__fig { background: none; border: 0; padding: 0 0 8px; place-items: start; }
/* Filter chips of the hero stay visible on the dark stage below 1025 px. */
.tj-hero .tj-filter button { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.tj-hero .tj-filter button[aria-pressed="true"] { box-shadow: none; }
/* Head left and wide content right do not fit on tablets: tables, step rows,
   columns and tiles go below the head there (review: "Enthalt/en" at 1024,
   step texts with two words per line in 152 px columns). */
@media (max-width: 1024px) {
  .tj-duo:has(.tj-duo__body > :is(.tj-tablewrap, .tj-steprow, .tj-cols, .tj-tiles)) { flex-direction: column; gap: 24px; }
  .tj-duo:has(.tj-duo__body > :is(.tj-tablewrap, .tj-steprow, .tj-cols, .tj-tiles)) > * { flex: 0 0 auto; width: 100%; }
}
@media (max-width: 1280px) {
  .tj-duo:has(.tj-duo__body > .tj-steprow) { flex-direction: column; gap: 24px; }
  .tj-duo:has(.tj-duo__body > .tj-steprow) > * { flex: 0 0 auto; width: 100%; }
}
/* Page head with a motif below 1025 px: the photo becomes the image band of
   the other heads (edge to edge, 380 / 260 px), a graphic keeps its card at
   its own size (review: 889 x 667 px photo pushed the H1 below the fold, the
   energy matrix sat small in a big white card). */
@media (max-width: 1024px) {
  .tj-hero__card--split { padding-top: 0; }
  .tj-hero__card--split > .tj-box { padding-top: 0; }
  .tj-hero__media > .tj-imgcard--43, .tj-hero__media > .tj-phwrap {
    aspect-ratio: auto; height: 380px; margin-inline: calc(-1 * var(--tj-inset)); border-radius: 0; border: 0; }
  .tj-hero__media:has(> .tj-innercard--hero) { justify-content: flex-start; padding-top: 30px; }
  .tj-hero__media > .tj-innercard--hero { flex: 0 1 auto; width: min(100%, 470px); aspect-ratio: 1; }
}
@media (max-width: 767px) {
  .tj-hero__media > .tj-imgcard--43, .tj-hero__media > .tj-phwrap { height: 260px; margin-inline: calc(-1 * (var(--tj-inset) - 10px)); }
  .tj-hero__media > .tj-innercard--hero { width: 100%; padding: 12px; }
}
/* Post cards: the arrow sits in its own line below the title, so the title
   uses the whole card width (review: titles in 188 of 290 px). */
.tj-blockstack .tj-postcard__body { padding: 20px 24px 76px; }
/* Six posts go 2 x 3 on tablets; three stay in one row of three. */
@media (max-width: 1024px) and (min-width: 768px) { .tj-blockstack > .tj-grid:has(> li:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Closing card checks on phones: readable lines, the e-mail field as wide as
   the button below it. */
@media (max-width: 767px) {
  .tj-cta__checks { font-size: 17px; line-height: 24px; row-gap: 10px; }
  .tj-cta__checks .ic { margin-top: 3px; }
  .tj-cta .tj-input--pill { width: 100%; }
}
/* Consent row of a form: checkbox and a placeholder for the legal text. */
.tj-consent { display: flex; align-items: center; gap: 12px; }
.tj-consent input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--tj-c-ink); }
.tj-consent .tj-payslot { flex: 1; }
/* Counters on phones: one column with hairlines, like the start page 04
   (review: two columns ran the labels together and broke them mid-word). */
/* Long values on tablets: three equal columns while "2–3 Wochen" (259 px)
   fits, below that two, the fifth value over the full row (review analyse:
   3 + 2 with a hole in the middle). */
@media (max-width: 1024px) and (min-width: 980px) {
  .tj-counters.tj-counters--lang { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 30px; }
}
@media (max-width: 979px) and (min-width: 768px) {
  .tj-counters.tj-counters--lang { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 30px; }
  .tj-counters.tj-counters--lang > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
  /* Nachtrag 40: the phone size of long figures is the token --tj-figure-lang. */
}
@media (max-width: 767px) {
  .tj-counters, .tj-counters.tj-counters--lang { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tj-counters > li { padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
  .tj-counter__l { overflow-wrap: normal; hyphens: manual; }
}
/* A quote after a step row is the foot of the row, not part of step 1
   (review bp 02): hairline and 30 px like .tj-steprow__foot. */
.tj-blockstack > .tj-steprow + .tj-quote-inline { margin-top: 20px; padding-top: 30px; border-top: 1px solid var(--tj-line); align-self: stretch; max-width: none; }
.tj-blockstack > .tj-steprow + .tj-quote-inline > * { max-width: 760px; }
.tj-on-dark .tj-blockstack > .tj-steprow + .tj-quote-inline { border-top-color: rgba(255, 255, 255, .16); }
/* Inside a tint card the wide part follows the two columns at the card's
   gap of 40 px, like the start page 08 (review gb 02: 100 px). */
.tj-tintcard .tj-duo + .tj-blockstack--weit, .tj-darkband .tj-duo + .tj-blockstack--weit { margin-top: 0; }
/* Tiles in a block size to their content; the row keeps equal heights
   (review oe 02, gb 02: tiles half empty at min-height 200). The start page
   themes are not in a block and keep their height. */
.tj-blockstack .tj-tile { min-height: 0; }
/* A two-sentence H1 breaks after the first sentence (review kompass). */
.tj-satz { display: block; }
/* Call cells of a table (the column without a head): text link with arrow,
   right aligned; on phones the foot of the card under a hairline. */
.tj-table td.tj-table__cta { text-align: right; white-space: nowrap; }
.tj-table td.tj-table__cta .tj-link { font-size: 16px; }
@media (max-width: 767px) {
  .tj-table td.tj-table__cta { text-align: left; white-space: normal; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--tj-line) !important; }
  .tj-table td.tj-table__cta::before { display: none; }
}
.tj-nobr { white-space: nowrap; }
/* Photo in its own aspect ratio in a split, no inner card (start page 05,
   decision Boris 25.09.2026): full column width up to the natural width of
   the file, vertically centered. Elementor: Image widget, radius 25. */
.tj-split--achse .tj-split__media:has(> .tj-fotocard) { align-items: center; }
.tj-fotocard { position: relative; flex: 1 1 auto; min-width: 0; line-height: 0; }
.tj-fotocard__img { display: block; width: 100%; height: auto; border-radius: var(--tj-r-inner); }
/* Video card (home, section from the old start page, decision Boris
   25.09.2026): the Vimeo player in 16:9 with the radius of the image cards.
   Elementor: Video widget, aspect ratio 16:9, lazy load; the iframe filling
   the box is the widget's own markup. */
.tj-split--achse .tj-split__media:has(> .tj-videocard) { align-items: center; }
.tj-videocard { position: relative; flex: 1 1 auto; min-width: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--tj-r-inner); background: var(--tj-c-ink); }
.tj-videocard iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Image overlay with the play circle of 69fe2b9 (Play-circle.svg, ink outline,
   no fill). The whole overlay is the button. */
.tj-videocard__play {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer;
  display: grid; place-items: center; background-color: var(--tj-c-ink);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* A light disc behind the circle at rest: on the dark spots of the texture the
   bare ink ring measured 2.33:1 (WCAG 1.4.11 asks 3:1), with the disc the
   inside of the ring is always light. Derived, the staging shows no disc. */
.tj-videocard__ic { display: grid; place-items: center; color: var(--tj-c-ink); border-radius: 50%;
  background-color: rgba(251, 251, 251, .45);
  transition: transform var(--tj-t-hover) var(--tj-ease), background-color var(--tj-t-hover) var(--tj-ease); }
/* 88 of 662 px in 69fe2b9: the circle keeps that share of the card width. */
.tj-videocard__ic svg { width: clamp(48px, 13.3cqi, 88px); height: auto; aspect-ratio: 1; }
.tj-videocard { container-type: inline-size; }
@media (hover: hover) and (pointer: fine) {
  .tj-videocard__play:hover .tj-videocard__ic { transform: scale(1.06); background-color: rgba(251, 251, 251, .7); }
}
.tj-videocard__play:active .tj-videocard__ic { transform: scale(.97); }
.tj-videocard__play:focus-visible { outline: none; }
.tj-videocard__play:focus-visible .tj-videocard__ic { outline: 2px solid var(--tj-focus); outline-offset: 4px; }

/* ======================================================================
   Step 3, posts and legal pages (Nachtrag 28). Derived from the staging
   post page beitrag 7da3672 and the post grid dcbd1e2; the text comes 1:1
   from the old website. Elementor: Single Post template (post head, post
   content), Loop Grid with numbered pagination and Taxonomy Filter.
   ====================================================================== */
/* Tokens of the reading column */
:root {
  --tj-prose-w: 780px;          /* measure of the post text, about 75 characters */
  --tj-prose-wide: 1000px;      /* head image, gallery, video, fact box */
  /* Nachtrag 40: the reading column uses the roles Text and Lead like every
     other page (was 18/30 and 21/32; a ninth and tenth size). */
  --tj-prose-p: var(--tj-body); --tj-prose-p-lh: var(--tj-body-lh);
  --tj-prose-lead: var(--tj-intro); --tj-prose-lead-lh: var(--tj-intro-lh);
}
/* Post head: chip, H1, date on the dark stage without photo. */
.tj-hero__meta { margin-top: 18px; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--tj-text-inverse); }
.tj-hero--story .tj-hero__text h1 { max-width: 1100px; }

/* Reading column on the text axis */
.tj-prose { max-width: var(--tj-prose-wide); display: flex; flex-direction: column; align-items: flex-start; }
.tj-prose > * { max-width: var(--tj-prose-w); width: 100%; }
.tj-prose > :is(.tj-prose__fig--kopf, .tj-prose__galerie, .tj-prose__video, .tj-prose__fakten, .tj-bildspalten,
                .tj-tablewrap, .tj-downloads, .tj-prose__aufruf) { max-width: var(--tj-prose-wide); }
.tj-prose p, .tj-prose li { font-size: var(--tj-prose-p); line-height: var(--tj-prose-p-lh); color: var(--tj-text); }
.tj-prose > p + p, .tj-prose > p + :is(ul, ol) { margin-top: 16px; }
.tj-prose p strong, .tj-prose li strong { color: var(--tj-text-strong); font-weight: 600; }
.tj-prose p.tj-prose__lead { font-size: var(--tj-prose-lead); line-height: var(--tj-prose-lead-lh); color: var(--tj-text-strong); }
.tj-prose p.tj-prose__lead + p.tj-prose__lead { margin-top: 14px; }
.tj-prose a:not(.tj-link, .tj-btn, .tj-download) { color: var(--tj-text-strong); text-decoration: underline;
  text-decoration-thickness: 2px; text-decoration-color: var(--tj-c-gold-line); text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .tj-prose a:not(.tj-link, .tj-btn, .tj-download):hover { text-decoration-color: currentColor; } }
/* Sub headings: the outline is renumbered (H1 of the post, then H2...), the
   size follows the old level, so an interview question stays a small head. */
.tj-prose__h { margin-top: 44px; margin-bottom: 14px; color: var(--tj-text-strong); letter-spacing: normal; }
.tj-prose__h--alt2 { font-size: 32px; line-height: 40px; font-weight: 500; letter-spacing: -1px; }
.tj-prose__h--alt3 { font-size: 26px; line-height: 34px; font-weight: 500; letter-spacing: -.5px; }
.tj-prose__h--alt4 { font-size: 21px; line-height: 29px; font-weight: 600; }
.tj-prose__h--alt5 { font-size: 18px; line-height: 26px; font-weight: 600; }
.tj-prose > .tj-prose__h:first-child { margin-top: 0; }
@media (max-width: 767px) {
  .tj-prose__h--alt2 { font-size: 26px; line-height: 34px; }
  .tj-prose__h--alt3 { font-size: 22px; line-height: 30px; }
}
.tj-prose__liste { margin-top: 16px; padding-left: 1.3em; display: flex; flex-direction: column; gap: 10px; }
.tj-prose__liste li::marker { color: var(--tj-c-gold); }
ol.tj-prose__liste li::marker { color: var(--tj-text-strong); font-weight: 600; }
.tj-prose__hr { margin: 40px 0; border: 0; border-top: 1px solid var(--tj-line); }
/* Figures: never upscaled (natural width as the limit, img()), radius of the
   image cards; small files (logos up to 400 px) sit on a white plate. */
.tj-prose__fig { margin: 32px 0; }
.tj-prose__fig .tj-prose__img { display: block; height: auto; border-radius: var(--tj-r-inner); }
.tj-prose__fig--kopf { margin-top: 36px; }
.tj-prose__fig--kopf .tj-prose__img { width: 100%; }
.tj-prose__fig--klein { width: auto !important; padding: 18px 22px; background: var(--tj-surface-white); border: 1px solid var(--tj-line); border-radius: var(--tj-r-inner); }
.tj-prose__fig--klein .tj-prose__img { border-radius: 0; }
.tj-prose__fig figcaption { margin-top: 10px; font-size: 15px; line-height: 21px; color: var(--tj-text); }
.tj-prose__galerie { margin: 32px 0; display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 16px; align-items: start; }
.tj-prose__galerie > .tj-prose__fig { margin: 0; }
@media (max-width: 767px) { .tj-prose__galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
/* Pull quote: on the old site centred gold text between two rules; gold on
   paper measures 2.1:1, so the quote stands in ink with a gold rule. */
.tj-prose__zitat { margin: 40px 0; padding: 4px 0 4px 28px; border-left: 3px solid var(--tj-c-gold-line); }
.tj-prose__zitat blockquote p { font-size: 24px; line-height: 34px; font-weight: 500; color: var(--tj-text-strong); letter-spacing: -.3px; }
.tj-prose__zitat figcaption { margin-top: 12px; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--tj-text); }
@media (max-width: 767px) { .tj-prose__zitat { padding-left: 20px; } .tj-prose__zitat blockquote p { font-size: 20px; line-height: 29px; } }
/* Fact box: three and more centred lines (company, size class, participations). */
.tj-prose__steckbrief { margin: 32px 0; padding: 24px 28px; border-radius: var(--tj-r-inner); background: var(--tj-surface-tint); display: flex; flex-direction: column; gap: 4px; }
.tj-prose__steckbrief p { margin: 0; }
.tj-prose__linkzeile { margin: 20px 0 8px; }
.tj-prose .tj-link { font-size: 16px; }
.tj-prose__video { margin: 32px 0; }
.tj-prose__embed { margin: 32px 0; min-height: 260px; }
.tj-prose__aufruf { margin-top: 56px; }
.tj-prose__zurueck { margin-top: 36px; }
/* Video cards in posts: dark stage as poster until zeag delivers stills, white circle. */
.tj-videocard--dunkel .tj-videocard__ic { color: var(--tj-c-white); background-color: rgba(255, 255, 255, .12); }
@media (hover: hover) and (pointer: fine) {
  .tj-videocard--dunkel .tj-videocard__play:hover .tj-videocard__ic { background-color: rgba(255, 255, 255, .24); }
}
.tj-videocard--dunkel .tj-videocard__play:focus-visible .tj-videocard__ic { outline-color: var(--tj-focus-inverse); }
/* Downloads: file bars like the deep-dive bar, the whole bar is the link. */
.tj-downloads { margin: 24px 0 8px; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.tj-download { display: flex; align-items: center; gap: 18px; padding: 16px 18px 16px 24px; border: 1px solid var(--tj-line); border-radius: var(--tj-r-inner);
  background: var(--tj-surface-white); color: var(--tj-text-strong); text-decoration: none;
  transition: border-color var(--tj-t-hover) var(--tj-ease), transform var(--tj-t-hover) var(--tj-ease); }
.tj-download__t { flex: 1; min-width: 0; font-weight: 600; font-size: 17px; line-height: 24px; }
.tj-download__m { flex: none; font-size: 15px; line-height: 20px; color: var(--tj-text); }
.tj-download__ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--tj-accent); color: var(--tj-text-strong); }
@media (hover: hover) and (pointer: fine) { .tj-download:hover { border-color: var(--tj-c-gold-line); transform: translateY(var(--tj-lift, -2px)); } }
.tj-download:focus-visible { outline: 2px solid var(--tj-focus); outline-offset: 3px; }
.tj-download:active { transform: scale(.99); }
/* Counters of the old site on the dark card; the icon files carry white, so
   they sit as round plates. */
.tj-prose__fakten { margin: 36px 0; }
.tj-fakten { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.tj-fakten li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tj-fakten__ic { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; }
.tj-fakten__t { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--tj-text-inverse); }
.tj-fakten .tj-counter__v { font-size: 44px; line-height: 48px; }
@media (max-width: 1024px) { .tj-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .tj-fakten { grid-template-columns: minmax(0, 1fr); } }
/* Contact person (jobs) */
.tj-personcard { margin: 24px 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 30px; align-items: center;
  padding: 24px; border-radius: var(--tj-r-inner); background: var(--tj-surface-tint); }
.tj-personcard__img { aspect-ratio: 3 / 2; border-radius: var(--tj-r-inner); background-size: cover; background-repeat: no-repeat; }
.tj-personcard__txt { display: flex; flex-direction: column; gap: 10px; }
.tj-personcard__n { font-size: 22px; line-height: 28px; font-weight: 600; color: var(--tj-text-strong); }
@media (max-width: 767px) { .tj-personcard { grid-template-columns: minmax(0, 1fr); } }
/* Image columns (jobs: advantages with a photo each) */
.tj-bildspalten { margin: 24px 0 8px; list-style: none; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 40px var(--tj-gap); }
.tj-bildspalten li { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tj-kachelbild { aspect-ratio: 4 / 3; border-radius: var(--tj-r-inner); background-size: cover; background-position: center; margin-bottom: 8px; }
.tj-bildspalten h3 { font-size: var(--tj-h3); line-height: var(--tj-h3-lh); font-weight: 600; color: var(--tj-text-strong); }
@media (max-width: 1024px) { .tj-bildspalten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .tj-bildspalten { grid-template-columns: minmax(0, 1fr); } }

/* Post list: loop grid, 12 per page, numbered pagination (Elementor Loop Grid
   pagination "numbers + previous/next"). Without script all cards show. */
.tj-grid--liste { gap: var(--tj-gap); }
@media (max-width: 1024px) and (min-width: 768px) { .tj-blockstack .tj-grid--liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tj-liste { align-self: stretch; display: flex; flex-direction: column; gap: 30px; }
.tj-liste li[hidden] { display: none; }
.tj-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tj-pager[hidden] { display: none; }
.tj-pager button { min-width: 44px; height: 44px; padding: 0 12px; border-radius: 50px; border: 2px solid var(--tj-c-gold-line);
  background: transparent; color: var(--tj-text-strong); font: 600 16px/1 var(--tj-font); cursor: pointer;
  display: inline-grid; place-items: center; transition: background-color var(--tj-t-hover) var(--tj-ease); }
.tj-pager button[aria-current="page"] { background: var(--tj-accent); }
.tj-pager button:disabled { opacity: .4; cursor: default; }
@media (hover: hover) and (pointer: fine) { .tj-pager button:not(:disabled):not([aria-current="page"]):hover { background: var(--tj-surface-white); } }
.tj-pager button:focus-visible { outline: 2px solid var(--tj-focus); outline-offset: 3px; }
.tj-pager button:active:not(:disabled) { transform: scale(.97); }
.tj-pager .ic { width: 18px; height: 18px; }

/* Sub menu: the chip of the overview a post belongs to */
a.tj-chip[aria-current="true"] { background: var(--tj-accent); border-color: var(--tj-accent); color: var(--tj-text-strong); }

/* Company cards with a story (home 10, directory): the whole card is the link,
   hover like every clickable card (Nachtrag 25), arrow bottom right. */
.tj-firm--link { position: relative; padding-bottom: 70px;
  transition: transform var(--tj-t-hover) var(--tj-ease), box-shadow var(--tj-t-hover) var(--tj-ease); }
.tj-firm--link :is(h2, h3, h4) a { color: inherit; text-decoration: none; }
.tj-firm--link :is(h2, h3, h4) a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tj-firm__ic { position: absolute; right: 24px; bottom: 24px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--tj-accent); color: var(--tj-text-strong); }
@media (hover: hover) and (pointer: fine) { .tj-firm--link:hover { transform: translateY(var(--tj-lift, -2px)); box-shadow: var(--tj-shadow-hover); } }
.tj-firm--link:has(a:focus-visible) { outline: 2px solid var(--tj-focus); outline-offset: 3px; }
.tj-firm--link a:focus-visible { outline: none; }
.tj-on-dark .tj-firm--link:has(a:focus-visible) { outline-color: var(--tj-focus-inverse); }
/* Card grids never upscale their images (qa_layout, 25.09.2026): two columns
   are as wide as two of three; on tablets (two columns) an odd last card of a
   longer grid spans the row as a landscape card. Elementor: Loop Grid
   "Alternate template" on the last position. */
.tj-grid.tj-grid--zwei { max-width: calc(2 * 441px + var(--tj-gap)); }
@media (max-width: 1024px) and (min-width: 768px) {
  .tj-grid > li.tj-karte--breit { grid-column: 1 / -1; }
  .tj-karte--breit .tj-postcard { flex-direction: row; }
  .tj-karte--breit .tj-postcard__img { flex: 0 0 42%; aspect-ratio: auto; min-height: 250px; }
}

/* ------------------------------------------------------------------------
   Review of the posts, 25 Sep 2026 (Nachtrag 28, 95 confirmed findings).
   At the end of the file on purpose: these rules win over the earlier ones.
   ------------------------------------------------------------------------ */

/* The arrow disc on post and company cards is decoration; the click belongs
   to the card link underneath (a::after). Elementor: the loop item container
   itself is the link. */
.tj-postcard__ic, .tj-firm__ic { pointer-events: none; }

/* Post head: two categories stand as two chips in a wrapping row. */
.tj-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Card images 16:9 (key visuals 2026 carry logo and band at the edge; 3:2 cut
   them). The file covers the box only as far as its natural width allows:
   --bg-cover is the width that covers a 16:9 box, --bg-w the natural width.
   Never upscaled. Elementor: Loop Item, image ratio 16:9. */
.tj-blockstack .tj-postcard__img { aspect-ratio: 16 / 9; }
.tj-blockstack .tj-postcard__img[style*="--bg-cover"] {
  background-size: min(var(--bg-cover), var(--bg-w)) auto; background-position: 50% 30%; }
/* No file fills the card: a labelled placeholder with the TOP JOB mark. */
.tj-postcard__img--leer { position: relative; display: grid; place-items: center; }
.tj-postcard__mark { width: 72px; height: 72px; border-radius: 6px; }
/* Page cards among the related posts carry their teaser. */
.tj-postcard__teaser { font-size: 16px; line-height: 22px; color: var(--tj-text); }
/* One or two related entries: landscape cards across the full width, never a
   lone box (Nachtrag 23). The image box stays inside the natural size of the
   file (16:9 of at most its width and height), so cover never upscales. */
.tj-grid.tj-grid--quer { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .tj-karte--quer .tj-postcard { flex-direction: row; align-items: flex-start; }
  .tj-karte--quer .tj-postcard__img { flex: 0 0 min(42%, var(--bg-w, 42%), calc(var(--bg-h, 2000px) * 16 / 9));
    aspect-ratio: 16 / 9; background-size: cover; }
  .tj-karte--quer .tj-postcard__body { align-self: stretch; justify-content: center; padding: 28px 32px 84px; }
  .tj-karte--quer .tj-postcard__ic { right: 32px; bottom: 28px; }
}
/* Four related posts: four columns where they fit. */
@media (min-width: 1280px) { .tj-grid.tj-grid--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px) and (max-width: 1279px) { .tj-grid.tj-grid--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Reading column: spacing after lists and downloads (was 0 px). */
.tj-prose :is(.tj-prose__liste, .tj-downloads) + :is(p:not([class]), .tj-prose__hervor, .tj-prose__h) { margin-top: 16px; }
.tj-prose :is(.tj-prose__liste, .tj-downloads) + .tj-prose__h { margin-top: 44px; }
/* Gold paragraphs of the old site (interview questions, size classes): ink,
   weight 600. Gold on paper measures 2.1:1. */
.tj-prose p.tj-prose__hervor { color: var(--tj-text-strong); font-weight: 600; }
.tj-prose > * + p.tj-prose__hervor, .tj-prose__textbild > :not(figure) + p.tj-prose__hervor { margin-top: 28px; }
/* Gold first line of the teaser: a kicker above the lead. */
.tj-prose p.tj-prose__dach { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--tj-text-strong); }
.tj-prose .tj-prose__dach + .tj-prose__lead { margin-top: 10px; }

/* Image in the text (old site: text with image left/right, 250 to 300 px):
   the old display width, never wider than the file, the text flows around it.
   Elementor: image inside the Text Editor, alignment left/right. */
.tj-prose__textbild { display: flow-root; margin: 32px 0; }
.tj-prose__textbild > * { margin-top: 0; margin-bottom: 0; }
.tj-prose__textbild > :not(figure) + :not(figure) { margin-top: 16px; }
.tj-prose__textbild > .tj-prose__h:not(:first-child) { margin-top: 32px; }
.tj-prose__textbild > .tj-prose__zitat { display: flow-root; margin: 0; }
.tj-prose__textbild > .tj-prose__zitat + * { margin-top: 20px; }
.tj-prose__fig--seite { width: var(--fig-w); max-width: 45%; margin: 4px 0 16px; }
.tj-prose__fig--seite.tj-prose__fig--rechts { float: right; margin-left: 32px; }
.tj-prose__fig--seite.tj-prose__fig--links { float: left; margin-right: 32px; }
.tj-prose__fig--seite .tj-prose__img { width: 100%; }
.tj-prose__fig--seite.tj-prose__fig--klein { width: calc(var(--fig-w) + 46px); padding: 14px 18px; }
@media (max-width: 599px) {
  .tj-prose__fig--seite.tj-prose__fig--rechts, .tj-prose__fig--seite.tj-prose__fig--links {
    float: none; margin: 0 0 16px; max-width: 100%; }
}
.tj-prose__h[id] { scroll-margin-top: 120px; }

/* Galleries: one column on small phones (screenshots stay readable). */
@media (max-width: 599px) { .tj-prose__galerie { grid-template-columns: minmax(0, 1fr); } }

/* Fact icons: gold on white up to the file edge; a white round plate with
   inner space shows the whole icon (the circle cut flag, heads and arrow). */
.tj-fakten__ic { width: 72px; height: 72px; padding: 11px; background: var(--tj-c-white); object-fit: contain; border-radius: 50%; }

/* Download bars on phones: the title takes the full width, type and size in a
   line below, the icon top right. File names break after _ and - (<wbr>). */
@media (max-width: 767px) {
  .tj-download { flex-wrap: wrap; row-gap: 4px; column-gap: 14px; padding: 16px 16px 16px 20px; }
  .tj-download__t { flex: 1 1 calc(100% - 54px); order: 1; overflow-wrap: anywhere; }
  .tj-download__ic { order: 2; }
  .tj-download__m { order: 3; flex-basis: 100%; }
}

/* Pagination: focus moves to the list after a page change, a live region
   reads the position. On phones only previous, "Seite x von n", next. */
.tj-liste:focus { outline: none; }
.tj-liste:focus-visible { outline: 2px solid var(--tj-focus); outline-offset: 8px; border-radius: var(--tj-r-inner); }
.tj-pager__status { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); white-space: nowrap; }
.tj-pager__pos { display: none; align-self: center; padding: 0 10px; font-size: 16px; line-height: 44px; font-weight: 600; color: var(--tj-text-strong); }
@media (max-width: 767px) {
  .tj-pager { flex-wrap: nowrap; }
  .tj-pager button[data-nr] { display: none; }
  .tj-pager__pos { display: block; }
}

/* Footer after the content master (texte-v2): address, "Bereiche", "Service",
   profiles. Nachtrag 40: column heads in the role Label. */
.site-footer__h { font-size: var(--tj-label); line-height: var(--tj-label-lh); font-weight: 600; letter-spacing: var(--tj-label-ls); }

/* Post grids between 560 and 767 px: two columns, so a card never grows wider
   than its image (review 25.09.2026: single cards up to 678 px wide). An odd
   last card spans the row as a landscape card, here and on tablets. The image
   box stays inside the natural size of the file, so cover never upscales. */
@media (min-width: 560px) and (max-width: 767px) {
  .tj-blockstack > .tj-liste > .tj-grid--liste,
  .tj-blockstack > .tj-grid--verwandt:not(.tj-grid--quer) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tj-grid > li.tj-karte--breit { grid-column: 1 / -1; }
  .tj-karte--breit .tj-postcard { flex-direction: row; }
}
@media (min-width: 560px) and (max-width: 1024px) {
  .tj-karte--breit .tj-postcard { align-items: flex-start; }
  .tj-karte--breit .tj-postcard__img { flex: 0 0 min(42%, var(--bg-w, 42%), calc(var(--bg-h, 2000px) * 16 / 9));
    aspect-ratio: 16 / 9; min-height: 0; background-size: cover; }
}
/* Three related posts on tablets: two columns and the third as a landscape
   card (28.09.2026, see the block "Related posts on tablets" at the end). The
   former row of three was 196 px per card at 768 px and broke the titles in
   the middle of a word. */

/* Video card with a small poster file (home 04, 577 px): the card never grows
   beyond the file, centred in its column (qa_layout 767 px, 25.09.2026). */
.tj-videocard--max { width: 100%; max-width: var(--card-max, none); margin-inline: auto; }

/* Heads of posts, the best-practice overview and the legal pages (Nachtrag 29,
   Boris 25.09.2026): the dark stage with the light cone of the page heads
   (Blog-post-BG-scaled.png, as on leistungen), no veil. These heads are
   shorter than a page head, so the image sits lower: the cone rises behind the
   text, its brightest part at the bottom edge. Cover never upscales here: the
   file is 2560 px wide, the card at most 1876 px. Elementor: background image
   of the head container in the Single Post template, position center 62 %. */
.tj-hero--story .tj-hero__card--buehne { background-color: var(--tj-c-ink); background-size: cover; background-position: center 62%; }
/* The horizon of the stage (row 1648 of 2202, i.e. 0.2164 x image width above
   its bottom) is tied to the bottom edge of the head, 4 px below it, instead of
   a fixed percentage: with 62 % a cut-off floor strip of 3 to 17 px showed at
   the edge depending on title length (review K29-1, 25.09.2026). From 768 px the
   image is bound to the card width (100 % auto, never wider than the 2560 px
   file), so the brightest part of the cone always sits at the bottom edge.
   Elementor: Custom CSS of the head container,
   background-size: 100% auto;
   background-position: center bottom calc(-0.2164 * (min(100vw, 1920px) - 48px) - 4px). */
@media (min-width: 768px) {
  .tj-hero--story { container-type: inline-size; }
  .tj-hero--story .tj-hero__card--buehne {
    background-size: 100% auto;
    background-position: center bottom calc(-0.2164 * (100cqw - 2 * var(--tj-stage-border)) - 4px);
  }
}

/* Mega menu opened by hovering a main item (Nachtrag 30, standard since
   Nachtrag 32): the group of that item is marked, gold title and gold rule,
   the others stay as they are. Moves with the pointer along the items. */
.megamenu__t { transition: border-color var(--tj-t-hover) var(--tj-ease); }
.megamenu__t a { transition: color var(--tj-t-hover) var(--tj-ease); }
.megamenu__group.is-hover .megamenu__t { border-bottom-color: var(--tj-c-gold-line); }
.megamenu__group.is-hover .megamenu__t a { color: var(--tj-accent); }

/* Fine submenu (Nachtrag 31, standard since Nachtrag 32): text links, no chips,
   a second menu line that starts at the left edge of the main menu (--nav-x,
   measured by site.js; without it the text axis). Same underline as the main
   menu: gold line for the current page and on hover. */
.subnav--fein { padding: 2px var(--tj-gutter) 12px; }
.subnav--fein .tj-box { padding-left: var(--nav-x, var(--tj-inset)); }
.subnav--fein ul { gap: 26px; }
.subnav__a {
  position: relative; display: block; padding: 8px 0; font-size: 15px; line-height: 18px; font-weight: 500;
  color: var(--tj-c-white-74); text-decoration: none; white-space: nowrap;
  transition: color var(--tj-t-hover) var(--tj-ease);
}
.subnav__a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--tj-accent); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--tj-t-hover) var(--tj-ease);
}
.subnav__a[aria-current] { color: var(--tj-text-inverse); }
.subnav__a[aria-current]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .subnav__a:hover { color: var(--tj-text-inverse); }
  .subnav__a:hover::after { transform: scaleX(1); }
}
.subnav__a:focus-visible { outline: 2px solid var(--tj-focus-inverse); outline-offset: 4px; border-radius: 2px; }

/* Page heads in full width and height (Nachtrag 32 test on the start page,
   Nachtrag 33 on every page, Boris 25.09.2026). No dark frame around the
   image: the photo or the stage runs edge to edge of the page box, from below
   the utility row to its rounded bottom, behind the menu bar and the submenu
   row. Both are transparent until the page scrolls (then the glass header as
   everywhere); the utility row stays dark. --tj-ueber is what lies on the
   image: the bar, plus the submenu row where the area has one. Never
   upscaled: photo heads cover at most their file, the stage file is 2560 px.
   Elementor: header template with a transparent background and the sticky
   effect "change background on scroll", the submenu row in the same template.
   Head container full width, no margin, negative top margin of the bar height
   (80 px) or bar plus submenu row (80 + 48 px, tablet and phone 80 + 52 px),
   the same amount added to its top padding. */
.site-header[data-ueber-bild] { background: transparent; }
.site-header[data-ueber-bild] .site-header__util { background: var(--tj-surface-dark); }
html.is-menu-open .site-header[data-ueber-bild] { background: var(--tj-surface-dark); }
.subnav--ueber-bild { position: relative; z-index: 2; height: var(--tj-subnav-h); background: transparent; }
.tj-hero--voll {
  --tj-ueber: var(--tj-header-h);
  /* One top veil for everything that lies on the image: strong behind the bar
     and the submenu row, gone 120 px below them. Measured at the pixels
     (qa_bildkontrast): the gold current item needs about .75 over a white sky
     (4.5:1), the submenu in 74 % white about .7. */
  --tj-veil-top: linear-gradient(180deg, rgba(12, 12, 12, .8) 0, rgba(12, 12, 12, .72) var(--tj-ueber),
                                 rgba(12, 12, 12, 0) calc(var(--tj-ueber) + 120px));
  background: transparent; border-radius: 0; margin-top: calc(-1 * var(--tj-ueber));
}
.subnav--ueber-bild + .tj-hero--voll { --tj-ueber: calc(var(--tj-header-h) + var(--tj-subnav-h)); }
.tj-hero--voll > .sec-marks { top: calc(var(--tj-ueber) + 8px); }
.tj-hero--voll .tj-hero__card {
  margin: 0; border-radius: 0 0 var(--tj-r-hero) var(--tj-r-hero);
  min-height: calc(min(60vh, 760px) + var(--tj-ueber));
  padding: calc(var(--tj-ueber) + 50px) 0 50px;
}
.tj-hero--voll .tj-hero__card > .imk { top: calc(var(--tj-ueber) + 12px); }
/* One text axis (Nachtrag 23): without the frame the head text keeps the axis
   of every other section, page edge plus inset (84 / 60 / 36 px). */
.tj-hero.tj-hero--voll .tj-hero__card > .tj-box,
.tj-hero.tj-hero--voll .tj-hero__proof > .tj-box,
.tj-hero.tj-hero--voll .tj-hero__kpis > .tj-box { padding-inline: calc(var(--tj-gutter) + var(--tj-inset)); }
/* Top veil for the bar on the photo. Photo heads keep their left gradient. */
.tj-hero--voll {
  /* Left gradient of photo heads: transparent at the right edge, full at 20 %
     from the left, so the whole text column lies on at least about 60 %
     black. With the old stops (10 % to 100 %) the spray on nutzen measured
     4.16:1 per glyph at 1920 x 1080 (review 25.09.2026). */
  --tj-ov-hero: linear-gradient(275deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .878) 80%);
}
.tj-hero--voll .tj-hero__card[data-ov="hero"]::before { background: var(--tj-veil-top), var(--tj-ov-hero); }
/* The stage of split and post heads: the light cone rises into the bar (gold
   current item 3.94:1 at 1920 without the veil). In the split head the stage
   moves up so the bright floor of the cone stays below the text: with 30 %
   the taller head showed more of it (text link on kompass 4.05:1). */
.tj-hero--voll :is(.tj-hero__card--split, .tj-hero__card--buehne)::before { background: var(--tj-veil-top); }
.tj-hero--voll .tj-hero__card--split { background-position: center 12%; }

/* Start page: at most 1000 px high, the file is 1001 px. The proof line is the
   foot of the image, with a bottom veil. */
.tj-hero--start.tj-hero--voll .tj-hero__card {
  border-radius: 0 0 var(--tj-r-hero-start) var(--tj-r-hero-start);
  min-height: max(640px, min(calc(100svh - var(--tj-util-h)), 1000px));
  padding: calc(var(--tj-ueber) + 30px) 0 34px; justify-content: flex-start;
}
.tj-hero--start.tj-hero--voll .tj-hero__card > .tj-box { margin-block: auto; }
.tj-hero--start.tj-hero--voll .tj-hero__card::before {
  background: var(--tj-veil-top), linear-gradient(0deg, rgba(12, 12, 12, .55) 0, rgba(12, 12, 12, 0) 160px);
}
.tj-hero--voll .tj-hero__proof { padding: 30px 0 0; }

/* Counters never lie on a photo or on the light cone (Nachtrag 21; in the
   stage card gold measured down to 1.79:1). They keep the dark surface as a
   band over the full width; the image ends square above it and fades into the
   band, the band carries the rounded bottom. */
.tj-hero--voll.tj-hero--zahlen { background: var(--tj-surface-dark); border-radius: 0 0 var(--tj-r-hero) var(--tj-r-hero); }
.tj-hero--voll.tj-hero--zahlen .tj-hero__card { border-radius: 0; }
.tj-hero--voll.tj-hero--zahlen .tj-hero__card[data-ov="hero"]::before {
  background: var(--tj-veil-top), linear-gradient(0deg, var(--tj-surface-dark) 0, transparent 180px), var(--tj-ov-hero);
}
.tj-hero--voll.tj-hero--zahlen .tj-hero__card--split::before {
  background: var(--tj-veil-top), linear-gradient(0deg, var(--tj-surface-dark) 0, transparent 180px);
}
.tj-hero--voll .tj-hero__kpis { padding: 10px 0 50px; }

/* Post, overview and legal heads on the stage: the horizon of the stage file
   stays at the bottom edge, now for the full card width. */
.tj-hero--story.tj-hero--voll .tj-hero__card { min-height: 0; padding-block: calc(var(--tj-ueber) + 90px) 90px; }
@media (min-width: 768px) {
  .tj-hero--story.tj-hero--voll .tj-hero__card--buehne { background-position: center bottom calc(-0.2164 * 100cqw - 4px); }
}

/* Tablet and phone: the image band of a photo head runs up behind the bar,
   edge to edge, with the top veil. In a split head bar and submenu lie on the
   stage and the motif band starts below them, edge to edge: running up behind
   the bar, the submenu links crossed faces (review 25.09.2026, arbeitgeber,
   gb, bp, events). */
@media (max-width: 1024px) {
  .tj-hero--voll .tj-hero__card { border-radius: 0 0 33px 33px; min-height: 0; }
  .tj-hero--start.tj-hero--voll .tj-hero__card { padding: 0; min-height: 0; border-radius: 0 0 33px 33px; }
  .tj-hero--start.tj-hero--voll .tj-hero__card > .tj-box { margin-block: 0; }
  .tj-hero--voll.tj-hero--zahlen { border-radius: 0 0 33px 33px; }
  .tj-hero--voll.tj-hero--zahlen .tj-hero__card { border-radius: 0; }
  .tj-hero--voll .tj-hero__card--band { padding: 0; }
  .tj-hero--voll .tj-hero__card--band .tj-band { height: calc(380px + var(--tj-ueber)); }
  .tj-hero--voll .tj-hero__proof { padding: 0 0 36px; }
  .tj-hero--voll .tj-hero__card--split { padding-top: var(--tj-ueber); }
  .tj-hero--voll .tj-hero__media > :is(.tj-imgcard--43, .tj-phwrap) {
    height: 380px; margin-inline: calc(-1 * (var(--tj-gutter) + var(--tj-inset)));
  }
  .tj-hero--voll .tj-band { position: relative; }
  .tj-hero--voll .tj-band::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--tj-veil-top);
  }
  /* The stage fades into the counter band here too; the 66 % veil of the
     tablet otherwise ended in a hard seam on analyse (review 25.09.2026). */
  .tj-hero--voll.tj-hero--zahlen .tj-hero__card--split::before {
    background: linear-gradient(0deg, var(--tj-surface-dark) 0, transparent 180px),
                linear-gradient(rgba(0, 0, 0, .66), rgba(0, 0, 0, .66)) !important;
  }
}
@media (max-width: 767px) {
  .tj-hero--voll .tj-hero__card--band .tj-band { height: calc(260px + var(--tj-ueber)); }
  .tj-hero--voll .tj-hero__media > :is(.tj-imgcard--43, .tj-phwrap) { height: 260px; }
  /* Edge to edge on phones: the height-bound phone rule (auto min(100%,
     --bg-h)) left dark strips beside motif and stage from about 580 to 767 px
     (review 25.09.2026). Cover stays below 1:1, the files are 1916 px and
     more (motifs) and 2560 px (stage). */
  .tj-hero--voll :is(.tj-hero__card--split, .tj-hero__media > .tj-imgcard--43) { background-size: cover; }
  .tj-hero--voll .tj-hero__card--split { padding-bottom: 30px; }
  .tj-hero--voll .tj-hero__proof { padding-bottom: 28px; }
  .tj-hero--voll .tj-hero__kpis { padding-bottom: 30px; }
}

/* Landing page for applicants (Nachtrag 33, /versprechen-an-bewerber-innen/,
   footer only). Built from the start page components; DERIVED are the promise
   rows and the employer voices. Every rule has a matching row. */
/* Label above a check list ("Für Sie heißt das:"): gold on the old site, ink
   600 here (gold on paper 2.1:1). */
/* Check list of whole sentences: bold words stay inline (.tj-checks__t strong
   is a title line in the other lists). */
.tj-checks--satz .tj-checks__t strong { display: inline; }
.tj-label { font-size: 18px; line-height: 24px; font-weight: 600; color: var(--tj-text-strong); margin-top: 10px; }
.tj-on-dark .tj-label { color: var(--tj-text-inverse); }
/* Trophy with the badge on it (versprechen 02, Boris 25.09.2026): the trophy
   crop of home 06 as the background of the card, in its own aspect ratio and
   never wider than the file (649 x 620), shown whole; the badge as an image
   in the lower third, right aligned (Boris 25.09.2026), small enough to leave
   the word on the base readable. Elementor: container with background image (cover, max width
   649 px, aspect ratio 649 / 620), flex column, justify end, align end, one
   Image widget inside. No absolute positioning. */
.tj-fotocard--stoerer {
  flex: 0 1 auto; width: min(100%, 649px); aspect-ratio: 649 / 620; border-radius: var(--tj-r-inner);
  background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--tj-c-ink);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; padding: 2% 1% 3%;
}
.tj-fotocard__stoerer { width: 46%; height: auto; }
/* Closing line over the full width of a card (Nachtrag 23: no box alone). */
.tj-fazit { padding-top: 24px; border-top: 2px solid var(--tj-c-gold-line); font-size: 18px; line-height: 24px;
  font-weight: 600; letter-spacing: .02em; color: var(--tj-text-strong); }
/* Promise rows: title and quote left 5/12, labelled texts right 7/12. */
.tj-versprechen__intro { display: flex; flex-direction: column; gap: var(--tj-gap); }
.tj-versprechen__intro .tj-text { max-width: 64ch; }
.tj-rows.tj-versprechen { margin-top: 50px; }
.tj-rows.tj-versprechen > li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 60px; padding: 44px 0; }
.tj-versprechen__kopf { display: flex; flex-direction: column; gap: 18px; }
.tj-rows.tj-versprechen h3 { font-size: var(--tj-h3-l); line-height: var(--tj-h3-l-lh); font-weight: 500; letter-spacing: -1px; }
.tj-rows p.tj-versprechen__zitat { font-size: 20px; line-height: 28px; font-weight: 500; color: var(--tj-text-strong);
  padding-left: 18px; border-left: 2px solid var(--tj-c-gold-line); }
.tj-versprechen__zitat em { font-style: normal; }
/* The promise's own photo from the old page below title and quote, full
   column width, never wider than the file (img caps at 1248 px). */
.tj-versprechen__bild img { display: block; width: 100%; height: auto; border-radius: var(--tj-r-inner); }
.tj-versprechen__text { display: flex; flex-direction: column; gap: 12px; }
.tj-rows p.tj-versprechen__label { font-size: 15px; line-height: 18px; font-weight: 600; color: var(--tj-text-strong); margin-top: 10px; }
.tj-rows p.tj-versprechen__label:first-child { margin-top: 0; }
.tj-rows p.tj-versprechen__fazit { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--tj-line); color: var(--tj-text-strong); }
/* Dark statement card in two columns. */
.tj-darkcard--split { padding: 60px var(--tj-inset); border-radius: var(--tj-r-surface); }
.tj-darkcard--split .tj-split__text { justify-content: flex-start; }
.tj-kaufen { display: flex; flex-direction: column; gap: var(--tj-gap); justify-content: center; }
.tj-on-dark :is(.tj-gold, .tj-gold strong) { color: var(--tj-accent); }
/* Employer voices: two tint cards, square image, quote, source, link. */
.tj-stimmen { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tj-gap); margin-top: 40px; }
.tj-stimme { min-width: 0; display: flex; flex-direction: column; gap: 22px; padding: 40px; border-radius: var(--tj-r-inner); background: var(--tj-surface-tint); }
.tj-stimme__img { display: block; width: 200px; height: 200px; object-fit: cover; border-radius: var(--tj-r-inner); }
.tj-stimme__fig { display: flex; flex-direction: column; gap: 16px; }
.tj-stimme__fig blockquote p { font-size: 20px; line-height: 28px; font-weight: 500; color: var(--tj-text-strong); }
.tj-stimme__fig blockquote strong { font-weight: inherit; }
.tj-stimme__fig figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 16px; line-height: 22px; }
.tj-stimme__firma { color: var(--tj-text-strong); }
.tj-stimme__link { margin-top: auto; }
@media (max-width: 1024px) {
  .tj-rows.tj-versprechen > li { gap: 16px 40px; padding: 36px 0; }
  .tj-darkcard--split { padding: 40px var(--tj-inset); }
  .tj-stimme { padding: 30px; }
}
@media (max-width: 767px) {
  .tj-rows.tj-versprechen > li { grid-template-columns: minmax(0, 1fr); padding: 30px 0; }
  .tj-darkcard--split { padding: 30px var(--tj-inset); }
  .tj-stimmen { grid-template-columns: minmax(0, 1fr); }
  .tj-stimme { padding: 24px; }
  .tj-stimme__img { width: 160px; height: 160px; }
}

/* Review of the full-bleed heads, 25.09.2026 (Nachtrag 33). */
/* One text axis above 1490 px: the head boxes carry gutter plus inset, so
   they are as wide as a section box plus its gutter. Before, the gutter was
   added a second time once the 1490 box was capped (24 px off at 1920). */
.tj-hero.tj-hero--voll :is(.tj-hero__card, .tj-hero__proof, .tj-hero__kpis) > .tj-box {
  max-width: calc(var(--tj-container) + 2 * var(--tj-gutter));
}
/* Post heads from 768 px: the stage is bound to the width; without no-repeat
   a second copy showed above it on tall heads (768 to 1099 px). */
.tj-hero--story .tj-hero__card--buehne { background-repeat: no-repeat; }
/* Photo heads with text on the photo: from 1025 to 1280 px the text column
   covers most of the photo (lead 2.2:1 on the trophy glow at 1100, text on
   people on entwicklung and infopaket). There the photo is the image band
   above the text, as on the tablet. Elementor: Laptop breakpoint 1280 or a
   custom breakpoint with the tablet settings of the head. */
@media (min-width: 1025px) and (max-width: 1280px) {
  .tj-hero--voll .tj-hero__card--band {
    background-image: none !important; padding: 0; justify-content: flex-start; min-height: 0 !important;
  }
  .tj-hero--voll .tj-hero__card--band::before { display: none; }
  .tj-hero--voll .tj-hero__card--band .tj-band { display: block; position: relative; height: calc(420px + var(--tj-ueber)); }
  .tj-hero--voll .tj-hero__card--band .tj-band::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--tj-veil-top);
  }
  .tj-hero--voll .tj-hero__card--band > .tj-box { padding-block: 40px 50px; }
  .tj-hero--start.tj-hero--voll .tj-hero__card.tj-hero__card--band { padding: 0; min-height: 0; }
  .tj-hero--start.tj-hero--voll .tj-hero__card--band > .tj-box { margin-block: 0; }
  .tj-hero--voll .tj-hero__proof { padding: 0 0 40px; }
}
/* Mega menu on the text axis: gutter outside, inset inside the box, as in
   every section (was the kit padding 10 px; review 25.09.2026). */
.megamenu { padding-inline: var(--tj-gutter); }
.megamenu > .tj-box { padding-inline: var(--tj-inset); }
/* Skip link inside the centred page box above 1920 px. */
.skip { left: calc(var(--tj-page-side) + 16px); }
/* Compact header: a focused utility link brings its row back (WCAG 2.4.11;
   the row had height 0 while its links stayed in the tab order). */
html.is-scrolled .site-header__util:focus-within { height: var(--tj-util-h); opacity: 1; border-bottom-width: 1px; }
/* Plain quote card on phones on the text axis (was 18 px, axis 20 px). */
@media (max-width: 767px) { .tj-quotecard--plain { padding-inline: var(--tj-inset); } }
/* Swipeable submenu row: room for the focus ring inside the scroll box (it was
   clipped to one vertical bar), and no fade once the row is at its end, so the
   last item can be read in full. site.js sets .is-ende. */
@media (max-width: 1024px) {
  .subnav ul { padding: 6px 8px 10px; margin: -6px -8px -6px; }
  .subnav ul.is-ende { -webkit-mask-image: none; mask-image: none; }
}
/* Per-word photo contrast (qa_bildkontrast since 25.09.2026) found text that
   the per-element measure hid:
   1. Quote cards on a photo (home 03, ueberuns 03): up to 1280 px the image
      band above the text, as for the photo heads; above it caption and
      paragraph in 100 % white like all hero text (Nachtrag 22), and the
      paragraph no wider than the caption, so it stays on the dark side of the
      gradient (ueberuns "Leitung" 3.28:1 at 1440 before).
   2. Split heads: a soft dark gradient under the text column on the stage;
      the light cone stays in the middle (kompass text link 3.9:1 at 1280). */
@media (min-width: 1025px) and (max-width: 1280px) {
  .tj-quotecard--band { background-image: none !important; padding: 0; justify-content: flex-start; min-height: 0 !important; }
  .tj-quotecard--band::before { display: none; }
  .tj-quotecard--band .tj-band { display: block; height: 340px; }
  .tj-quotecard--band .tj-quotecard__in { padding: 36px var(--tj-inset) 44px; }
}
.tj-quotecard:not(.tj-quotecard--plain) :is(figcaption, .tj-text p) { color: var(--tj-text-inverse); }
.tj-quotecard .tj-text { max-width: 560px; }
.tj-hero--voll .tj-hero__card--split::before {
  background: var(--tj-veil-top), linear-gradient(90deg, rgba(12, 12, 12, .62) 0, rgba(12, 12, 12, 0) 58%);
}
.tj-hero--voll.tj-hero--zahlen .tj-hero__card--split::before {
  background: var(--tj-veil-top), linear-gradient(0deg, var(--tj-surface-dark) 0, transparent 180px),
              linear-gradient(90deg, rgba(12, 12, 12, .62) 0, rgba(12, 12, 12, 0) 58%);
}

/* Footer profiles (Boris 25.09.2026): all four of topjob.de, the icon in ink on
   the gold circle (the staging grey #69727D reached about 2.3:1 on gold). Hover
   white circle, focus ring in white. Elementor: Social Icons widget, custom
   colours, shape circle, size 18, padding 11. */
.site-footer__social a { transition: background-color var(--tj-t-hover) var(--tj-ease), transform var(--tj-t-hover) var(--tj-ease); }
@media (hover: hover) and (pointer: fine) {
  .site-footer__social a:hover { background: var(--tj-c-white); transform: translateY(-2px); }
}
.site-footer__social a:active { transform: scale(.96); }
/* Phone line of the contact card (gespraech 02, Boris 25.09.2026): the sentence
   stays, the number is the call to action of the head column: 32/38 px ink with
   the phone icon, a gold rule above it. */
.tj-telefon { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-top: 22px;
  border-top: 2px solid var(--tj-c-gold-line); }
.tj-telefon__t { color: var(--tj-text); }
.tj-telefon__nr { display: flex; align-items: center; gap: 14px; }
.tj-telefon__nr .ic { flex: none; color: var(--tj-text-strong); }
.tj-telefon .tj-tel { font-size: 32px; line-height: 38px; font-weight: 600; letter-spacing: -.5px;
  color: var(--tj-text-strong); text-decoration: none; background-image: linear-gradient(var(--tj-accent), var(--tj-accent));
  background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size var(--tj-t-hover) var(--tj-ease); }
@media (hover: hover) and (pointer: fine) { .tj-telefon .tj-tel:hover { background-size: 100% 2px; } }
@media (max-width: 767px) { .tj-telefon .tj-tel { font-size: 26px; line-height: 32px; } }

/* TOP JOB-Partner (Nachtrag 35, Boris 25.09.2026), built from the start page
   line. Elementor notes per block. */
/* Logo on a white inner card, right column of the split (as the seal on the
   start page before Nachtrag 27). Container white, radius inner, padding
   50/40, Image widget max 420 px. */
.tj-logocard { flex: 1; display: flex; align-items: center; justify-content: center; padding: 50px 40px;
  border-radius: var(--tj-r-inner); background: var(--tj-surface-white); }
.tj-logocard__img { display: block; width: min(100%, 420px); height: auto; }
/* Quote with portrait as the foot of the same tint card: quote 7/12 left on
   the text axis, the portrait 5/12 right in its own ratio (never upscaled),
   the columns of the split above. A hairline separates the two rows. */
.tj-personcard--zitat { margin: 50px 0 0; padding: 50px 0 0; gap: 60px; align-items: center;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-top: 1px solid var(--tj-line); border-radius: 0; background: none; }
.tj-personcard--zitat .tj-personcard__bild { order: 2; min-width: 0; }
.tj-personcard__foto { display: block; width: 100%; height: auto; border-radius: var(--tj-r-inner); }
.tj-personcard--zitat .tj-personcard__txt { margin: 0; gap: 18px; }
.tj-personcard--zitat blockquote p { font-size: 20px; line-height: 28px; font-weight: 500; color: var(--tj-text-strong);
  padding-left: 18px; border-left: 2px solid var(--tj-c-gold-line); }
.tj-personcard__q { font-size: 15px; line-height: 21px; color: var(--tj-text); padding-left: 20px; }
.tj-personcard__q strong { font-weight: 600; color: var(--tj-text-strong); }
@media (max-width: 1024px) { .tj-personcard--zitat { gap: 30px; } }
@media (max-width: 767px) {
  .tj-personcard--zitat { grid-template-columns: minmax(0, 1fr); margin-top: 30px; padding-top: 30px; }
  .tj-personcard--zitat .tj-personcard__bild { order: 0; }
}
/* Quote card with a heading and a long quote (patron): heading on the dark
   side, quote 24/34 so the card stays below the 600 px height of the photo
   (never upscaled), name as H3 and the role line below, both 100 % white on
   the photo (Nachtrag 33, rule 11). */
.tj-quotecard__in > h2 { max-width: 700px; }
.tj-quotecard--lang blockquote p { font-size: 24px; line-height: 34px; max-width: 760px; }
.tj-quotecard figcaption .tj-quotecard__name { font-size: var(--tj-h3); line-height: var(--tj-h3-lh); font-weight: 600;
  letter-spacing: normal; color: var(--tj-text-inverse); }
.tj-quotecard figcaption .tj-quotecard__rolle { margin-top: 4px; font-size: 16px; line-height: 22px; color: var(--tj-text-inverse); }
@media (max-width: 767px) { .tj-quotecard--lang blockquote p { font-size: var(--tj-quote); line-height: var(--tj-quote-lh); } }
/* Jury with text: the people grid of jury.html plus the member's text and
   the link to the website, open below the name (on the old page the text
   opened on click). Four columns keep lines near 40 characters; three from
   1280 px down (15 members, no single card in the last row); a list on
   phones with the text below portrait and name. Elementor: Loop Grid or
   Container per person: Image, Heading H3, Text Editor x2, Button (link). */
.tj-people.tj-people--text { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 50px var(--tj-gap); }
.tj-people--text h3.tj-person__n { letter-spacing: normal; }
.tj-person__t { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.tj-person__t p { font-size: 15px; line-height: 21px; color: var(--tj-text); }
.tj-person__link { margin-top: 6px; font-size: 15px; line-height: 21px; }
@media (max-width: 1280px) { .tj-people.tj-people--text { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .tj-people.tj-people--text { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .tj-people--text .tj-person__t, .tj-people--text .tj-person__link { grid-column: 1 / -1; }
  .tj-people--text .tj-person__t { margin-top: 12px; }
}
/* Button text of a page card of the old page ("Mehr erfahren"): part of the
   card link, not a separate control. */
.tj-postcard__more { margin-top: 4px; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--tj-text-strong); }
/* Patron card: name and role above the quote, as on the old page. */
.tj-quotecard__fig--kopf figcaption { margin: 0 0 16px; }

/* Head with the image below bar and submenu (tj-hero--tief, TOP JOB-Partner,
   Boris 25.09.2026: "Die Koepfe muessen tiefer und nicht so dunkel. Auch
   links heller."). For photos whose faces sit in the top quarter: the bar and
   the submenu row lie on the dark surface of the utility row, the image starts
   below them, top aligned, with a 24 px fade instead of the veil. The head is
   as tall as the image at full width, at most to the bottom of the window;
   cover never exceeds 1:1 because the area is capped at 56.25 % of the page
   box (1080 px at 1920). Lighter left gradient, measured per word.
   Elementor: outer container dark, padding-top = bar + submenu; inner
   container with the background image (position top center, size cover),
   min-height as below, overlay gradient. */
.tj-hero__alt { display: block; height: 0; }
.tj-hero--tief {
  --tj-bild-h: min(calc(min(100vw, var(--tj-page-max)) * .5625),
                   calc(100svh - var(--tj-util-h) - var(--tj-ueber)));
  --tj-ov-hero-hell: linear-gradient(90deg, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, .3) 28%, rgba(0, 0, 0, 0) 50%);
  --tj-kante-oben: linear-gradient(180deg, var(--tj-surface-dark) 0, var(--tj-surface-dark) var(--tj-ueber),
                                   rgba(30, 30, 30, 0) calc(var(--tj-ueber) + 24px));
}
@media (min-width: 1281px) {
  .tj-hero--voll.tj-hero--tief .tj-hero__card[data-ov="hero"] {
    background-color: var(--tj-surface-dark); background-origin: content-box; background-size: cover;
    padding: var(--tj-ueber) 0 0; min-height: calc(var(--tj-ueber) + var(--tj-bild-h));
  }
  .tj-hero--voll.tj-hero--tief .tj-hero__card > .tj-box { padding-block: 50px; }
  .tj-hero--voll.tj-hero--tief .tj-hero__card[data-ov="hero"]::before {
    background: var(--tj-kante-oben), var(--tj-ov-hero-hell);
  }
}
/* Up to 1280 px: the image band in 16:9 below bar and submenu, the whole
   image where the window allows; capped so the H1 stays in the first screen. */
@media (max-width: 1280px) {
  .tj-hero--voll.tj-hero--tief .tj-hero__card--band { background-color: var(--tj-surface-dark); }
  .tj-hero--voll.tj-hero--tief .tj-hero__card--band .tj-band {
    height: auto; aspect-ratio: 16 / 9; margin-top: var(--tj-ueber);
    max-height: calc(100svh - var(--tj-util-h) - var(--tj-ueber) - 150px);
  }
  .tj-hero--voll.tj-hero--tief .tj-hero__card--band .tj-band::after {
    background: linear-gradient(180deg, var(--tj-surface-dark) 0, rgba(30, 30, 30, 0) 24px);
  }
}

/* Footer hover (found 25.09.2026 by the impeccable detector, measured in the
   browser): the general rule .site-footer a:hover turned the text of the
   footer CTA button gold on its gold hover surface (1.4:1) and the social
   icons gold on their white hover circle. Button and social circle keep their
   own foreground; only plain text links turn gold. */
@media (hover: hover) and (pointer: fine) {
  .site-footer a.tj-btn:hover { color: var(--tj-text-strong); }
  .site-footer .site-footer__social a:hover { color: var(--tj-surface-dark); }
}

/* ==========================================================================
   System (Nachtrag 40, decision Boris 28.09.2026). LAST IN THE FILE ON PURPOSE.

   The evolution test version is adopted for the whole site as one system:
   "Line for content, card for what is clickable". The rules below win over
   the component rules above: every selector starts with `:root body`, which
   weighs one class (the weight of the former test body class), so no
   !important is needed. Elementor ignores the selector; what counts for the
   rebuild are the values and the notes per block.

   1. Grid: 12 columns on the text axis (84 px at 1440), gap 24 / 20 / 16.
      Two-column patterns are a Flex row, not a 12-column grid: the element on
      the second edge (column 7) is calc(50% - 12px), the first one
      calc(41.667% - 14px), justify space-between. Tablet 50 / 50, phone one
      column. Equal columns are a Grid container with a fixed column count.
   2. Type: eight roles, one Global Font each (tokens in section 1):
      Display, Section, Statement, Figure, Title, Lead, Text, Label.
   3. Rhythm: Spacer widgets 90 / 70 / 70 between sections, 150 / 122 / 90
      before every closing card, 50 inside. Head container gap 16 (eyebrow to
      heading), text column gap 24, head to grid 64 / 48 / 32.
   4. Surfaces: paper, white (hairline), ink (flat). Radius 40 (phone 24) for
      surfaces, 16 for cards. No grey tint card, no gradient to bordeaux, no
      resting shadow, no light edge.
   5. Lines for what is not clickable (rows, topic fields, tiles, lists,
      tables, timeline, seal family, FAQ); white cards with a hairline for
      what is (link card, companies, posts, year tiles, linked tiles).
   ========================================================================== */

/* --------------------------------------------------------------------------
   S1. Type roles. Text is the default; :where keeps it weaker than every
   component rule, so titles set as p keep their role.
   Elementor: Site Settings > Typography, Body = Global Font "Text", H1
   Display, H2 Section, H3/H4 Title. "Primary" holds the family only.
   -------------------------------------------------------------------------- */
:where(main) :where(p, li, dd, td) { font-size: var(--tj-body); line-height: var(--tj-body-lh); }
:root body main :is(h3, h4) { font-size: var(--tj-title); line-height: var(--tj-title-lh); font-weight: 600; letter-spacing: normal; }

/* Lead */
:root body :is(main, .site-footer__cta) :is(.tj-lead, .tj-steprow__foot p, .tj-fazit, .tj-prose p.tj-prose__lead) {
  font-size: var(--tj-intro); line-height: var(--tj-intro-lh); font-weight: 400;
}
:root body :is(main, .site-footer__cta) .tj-lead { max-width: var(--tj-measure-intro); }

/* Text */
:root body main :is(.tj-card p, .tj-iconcol p, .tj-benefit__col p, .tj-postcard__teaser, .tj-table, .tj-table td,
  .tj-checks li, .tj-checks--compact li, .tj-acc__body, .tj-deep__p, .tj-midstrip__p, .tj-person__t p,
  .tj-stepcard__text p, .tj-tile p, .tj-seal p, .tj-prose .tj-link, .tj-table td.tj-table__cta .tj-link,
  .tj-pager__pos, .tj-input, .tj-quotecard .tj-text p) {
  font-size: var(--tj-body); line-height: var(--tj-body-lh);
}
:root body main .tj-checks--compact li { font-weight: 400; }
:root body main :is(.tj-text, .tj-rows, .tj-acc__body, .tj-cols, .tj-tile, .tj-listcard, .tj-steprow, .tj-seal) p { max-width: var(--tj-measure); }

/* Title */
:root body main :is(.tj-postcard__body :is(h2, h3, h4), .tj-card :is(h2, h3), .tj-steplist :is(h3, h4),
  .tj-iconcol h3, .tj-benefit__col h3, .tj-portrait__n, .tj-person__n, .tj-personcard__n, .tj-download__t,
  .tj-sub, .tj-acc__item summary, .tj-acc__q, .tj-deep__t, .tj-midstrip__t, .tj-imgcard__label,
  .tj-prose__h--alt4, .tj-prose__h--alt5, .tj-kw, .tj-facts dd, .tj-fakten__t, .tj-hero__trust-t) {
  font-size: var(--tj-title); line-height: var(--tj-title-lh); font-weight: 600; letter-spacing: normal;
}
:root body :is(main, .site-footer__cta) .tj-counter__l { font-size: var(--tj-title); line-height: var(--tj-title-lh); font-weight: 600; }

/* Statement: quote, step title and numeral, year, pull quote, sub head of a post */
:root body :is(main, .site-footer__cta) :is(.tj-quotecard blockquote p, .tj-quoteline blockquote p,
  .tj-quote-inline blockquote p, .tj-prose__zitat blockquote p, .tj-stimme__fig blockquote p,
  .tj-personcard--zitat blockquote p, .tj-rows p.tj-versprechen__zitat, .tj-steprow :is(h3, h4), .tj-steprow__n,
  .tj-stepcard__text h3, .tj-table--zeitleiste tbody th, .tj-year, .tj-banner__t,
  .tj-prose__h--alt2, .tj-prose__h--alt3) {
  font-size: var(--tj-statement); line-height: var(--tj-statement-lh); font-weight: 500; letter-spacing: var(--tj-statement-ls);
}

/* Section role for the phone line of the contact page (Nachtrag 34: larger and
   dominant; the role Section instead of a ninth size). */
:root body main .tj-telefon .tj-tel { font-size: var(--tj-section); line-height: var(--tj-section-lh); letter-spacing: var(--tj-section-ls); }

/* Label, weight 600 */
:root body :is(main, .site-footer) :is(.tj-field label, .tj-field__l, .tj-stepcard__n, .tj-postcard__chip,
  .tj-firm__jahre, .tj-table thead th, .tj-facts dt, .tj-rows p.tj-versprechen__label, .tj-person__link,
  .tj-postcard__more, .tj-proof li, .tj-quotecard figcaption, .tj-quote-inline figcaption, .tj-quoteline figcaption,
  .tj-prose__zitat figcaption, .tj-stimme__fig figcaption, .tj-prose p.tj-prose__dach, .tj-filter button,
  .tj-select, .tj-search, .tj-label) {
  font-size: var(--tj-label); line-height: var(--tj-label-lh); font-weight: 600; letter-spacing: var(--tj-label-ls);
}
/* Label meta, weight 400 */
:root body :is(main, .site-footer) :is(.tj-src, .tj-firm__meta, .tj-deep__k, .tj-prose__fig figcaption,
  .tj-download__m, .tj-person__r, .tj-portrait__r, .tj-check, .tj-form__note, .tj-quotecard__rolle,
  .tj-postcard__date, .tj-postcard__meta, .tj-hero__meta, .tj-personcard__q) {
  font-size: var(--tj-label); line-height: var(--tj-label-lh); font-weight: 400; letter-spacing: normal;
}
:root body main .tj-hero__text .tj-lead { font-size: var(--tj-intro); line-height: var(--tj-intro-lh); max-width: var(--tj-measure-intro); }
:root body main .tj-hero__meta { font-weight: 600; }

/* Headings from the tablet up with balanced lines; phones keep pretty
   (Nachtrag 26, rule 3). Elementor: Custom CSS on the Heading widget. */
@media (min-width: 1025px) { :root body :is(main, .site-footer__cta) h2 { text-wrap: balance; } }

/* --------------------------------------------------------------------------
   S2. Eyebrow: a label with a gold dash instead of the gold pill. A gold
   border is always a button, a gold dash always an eyebrow. Gold never as
   text on paper. Elementor: Heading widget, tag p, Global Font Label, CSS
   class tj-eyebrow (two lines in Site Settings > Custom CSS).
   Head container: eyebrow and heading in their own container, gap 16.
   -------------------------------------------------------------------------- */
:root body :is(main, .site-footer__cta) p.tj-chip {
  display: inline-flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%;
  padding: 0; margin: 0; border: 0; border-radius: 0; background: none;
  font-size: var(--tj-label); line-height: var(--tj-label-lh); font-weight: 600; letter-spacing: var(--tj-label-ls);
  color: var(--tj-text-strong);
}
:root body :is(main, .site-footer__cta) p.tj-chip::before { content: ""; flex: none; width: 24px; height: 2px; background: var(--tj-accent); }
:root body :is(main, .site-footer__cta) :is(.tj-on-dark, .tj-hero) p.tj-chip,
:root body :is(main, .site-footer__cta) p.tj-chip.tj-chip--hero { color: var(--tj-text-inverse); }
:root body .tj-kopf { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; min-width: 0; max-width: 100%; }
:root body .tj-kopf > :is(h1, h2) { margin: 0; }
:root body .tj-center .tj-kopf { align-items: center; }
:root body .tj-hero__chips { gap: 8px 24px; }

/* --------------------------------------------------------------------------
   S3. Rhythm. Section spacers come from the markup (90 / 70 / 70, before a
   closing card 150 / 122 / 90). Spacers inside a section are 50.
   Elementor: two saved Spacer widgets, "Spacer Section" and "Spacer vor
   Abschluss", each with all three breakpoint values.
   -------------------------------------------------------------------------- */
:root body main .tj-box .tj-sp:is([data-d="20"], [data-d="30"], [data-d="40"]) { height: var(--tj-sp-inner); }
:root body main .tj-stack { gap: var(--tj-gap-text); }
:root body main .tj-blockstack > :is(.tj-cols, .tj-tiles, .tj-cards, .tj-steprow, .tj-tablewrap, .tj-acc, .tj-rows,
  .tj-counters, .tj-checks--2, .tj-listcards, .tj-seals, .tj-logorow, .tj-firms, .tj-grid, .tj-people, .tj-kws,
  .tj-years, .tj-facts, .tj-deeps, .tj-groups, .tj-liste) {
  margin-top: calc(var(--tj-gap-kopf) - var(--tj-gap-text));
}
:root body main .tj-blockstack > :first-child,
:root body main .tj-blockstack > .mk-only:first-child + * { margin-top: 0; }
:root body main .tj-blockstack > .tj-seals__rest { margin-top: 0; }
:root body main .tj-blockstack > h2, :root body main .tj-blockstack > .tj-kopf > h2 { max-width: 16em; }
:root body main :is(.tj-blockfoot, .tj-after) { margin-top: var(--tj-sp-inner); gap: var(--tj-gap-text); }
:root body main .tj-box > .tj-sp + :is(.tj-blockfoot, .tj-after) { margin-top: 0; }
:root body main .tj-blockstack--weit { margin-top: var(--tj-gap-kopf); }
:root body main .tj-cols { gap: 48px var(--tj-gap); }
:root body main .tj-cols > li { gap: 8px; padding-top: 24px; }

/* --------------------------------------------------------------------------
   S4. Two columns on the grid edges. Text and head on 1-5, image and
   content from column 7. Elementor: container Direction Row, Justify Space
   Between, Gap 24 / 20; children Width calc(41.667% - 14px) and calc(50% -
   12px); tablet both calc(50% - 10px); phone Direction Column, Width 100 %,
   image first (Order). Four saved templates: Split Text|Image, Split
   Image|Text, Duo Head|Content, closing card.
   -------------------------------------------------------------------------- */
:root body main .tj-split.tj-split--achse {
  display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; gap: var(--tj-gap);
}
:root body main .tj-split--achse > .tj-split__text { flex: 0 0 calc(41.667% - 14px); max-width: none; padding: 0; justify-content: flex-start; gap: var(--tj-gap-text); }
:root body main .tj-split--achse > .tj-split__media { flex: 0 0 calc(50% - 12px); }
:root body main .tj-split--achse.tj-split--rev { flex-direction: row-reverse; gap: var(--tj-gap); }
:root body main .tj-split--achse.tj-split--rev > .tj-split__text { flex-basis: calc(50% - 12px); }
:root body main .tj-split--achse.tj-split--rev > .tj-split__media { flex-basis: calc(41.667% - 14px); }
:root body main .tj-split__text :is(h2, .tj-lead, .tj-text) { max-width: none; }
:root body main .tj-split__text .tj-btns { margin-top: 8px; }
:root body main :is(.tj-duo, .tj-faq.tj-faq--duo) { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: var(--tj-gap); }
:root body main :is(.tj-duo__head, .tj-faq--duo .tj-faq__head) { flex: 0 0 calc(41.667% - 14px); width: auto; padding: 0; gap: var(--tj-gap-text); }
:root body main :is(.tj-duo__body, .tj-faq--duo .tj-faq__list) { flex: 0 0 calc(50% - 12px); width: auto; padding: 0; }
:root body main .tj-duo__body { gap: var(--tj-gap-text); }
/* The foot of a head-content block hangs under the content column, the order
   in the markup stays (director 28.09.2026: buttons after FAQ and timeline). */
:root body main :is(.tj-duo, .tj-faq--duo) + .tj-blockfoot { margin-left: auto; width: calc(50% - 12px); }
:root body main .tj-duo__body > .tj-blockfoot { margin-top: calc(var(--tj-sp-inner) - var(--tj-gap-text)); margin-left: 0; width: auto; align-self: stretch; }
:root body main .tj-imgcard.tj-imgcard--43, :root body main .tj-split__media > .tj-imgcard,
:root body main :is(.tj-fotocard__img, .tj-videocard, .tj-cols__fig, .tj-innercard) { border-radius: var(--tj-r-inner); }
:root body main .tj-split__media > .tj-imgcard--43 { border: 0; }

/* --------------------------------------------------------------------------
   S5. Surfaces. Ink flat, white with a hairline, both radius 40 (phone 24),
   padding 96 / 64 / 48 and the inset 60 / 40 / 20 left and right, so text
   stands on the same axis as on paper. The grey tint card is gone: the
   generator renders "tint" sections on paper; the rule below only keeps an
   old wrapper neutral. Elementor: "Section Ink" and "Section White" as saved
   sections, Container background, radius, padding per breakpoint.
   -------------------------------------------------------------------------- */
:root body main :is(.tj-stepband, .tj-darkband, .tj-darkband--2, .tj-statement, .tj-quotecard--plain) {
  background: var(--tj-surface-dark); border-radius: var(--tj-r-surface);
  padding: var(--tj-pad-surface) var(--tj-inset); gap: var(--tj-gap-kopf); box-shadow: none;
}
:root body main .tj-darkcard--firmen {
  background-image: none !important; background-color: var(--tj-surface-dark); border-radius: var(--tj-r-surface);
  padding: var(--tj-pad-surface) var(--tj-inset); gap: var(--tj-gap-kopf); box-shadow: none;
}
:root body :is(main, .site-footer) :is(.tj-quotecard, .tj-kpiwrap, .tj-kpicard, .tj-cta, .tj-darkcard, .tj-stepcard, .tj-card) { box-shadow: none; }
:root body main .tj-whitecard {
  display: flex; flex-direction: column; gap: var(--tj-gap-kopf);
  background: var(--tj-surface-white); border: 1px solid var(--tj-line); border-radius: var(--tj-r-surface);
  padding: var(--tj-pad-surface) var(--tj-inset);
}
:root body main .tj-tintcard { background: none; border-radius: 0; padding: 0 var(--tj-inset); gap: var(--tj-gap-kopf); }
/* The link card at the foot of a white surface is the foot of that surface:
   a row under a hairline, not a card in the card. */
:root body main :is(.tj-whitecard, .tj-darkband, .tj-stepband, .tj-darkcard, .tj-tintcard) > .tj-blockfoot { margin-top: 0; }
:root body main .tj-whitecard > .tj-blockfoot > :is(.tj-deep, .tj-midstrip),
:root body main .tj-whitecard .tj-duo__body > .tj-blockfoot > :is(.tj-deep, .tj-midstrip) {
  padding: 32px 0 0; border: 0; border-top: 1px solid var(--tj-line); border-radius: 0; background: none; transform: none;
}
/* Two lists in a white surface: two halves with a vertical hairline. */
:root body main .tj-whitecard .tj-listcards { gap: 0; }
:root body main .tj-whitecard .tj-listcard { padding: 0; border: 0; }
:root body main .tj-whitecard .tj-listcard:first-child { padding-right: 48px; }
:root body main .tj-whitecard .tj-listcard + .tj-listcard { padding-left: 48px; border-left: 1px solid var(--tj-line); }

/* Quote card: text on the first half, source as label. */
:root body main .tj-quotecard { padding: min(64px, var(--tj-pad-surface)) var(--tj-inset); min-height: 0; border-radius: var(--tj-r-surface); }
:root body main .tj-quotecard__in { gap: 16px; max-width: calc(50% - 12px); }
:root body main .tj-quotecard figcaption { margin-top: 8px; color: var(--tj-text-inverse); }

/* --------------------------------------------------------------------------
   S6. Hero proof line on the quarters of the start page.
   -------------------------------------------------------------------------- */
:root body .tj-hero__text { gap: var(--tj-gap-text); }
:root body .tj-hero__text .tj-btns { margin-top: 8px; }
:root body .tj-hero--start .tj-proof {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--tj-gap); row-gap: 12px;
  padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .2);
}

/* --------------------------------------------------------------------------
   S7. Lines for content. Rows, columns, topic tiles, key words, list cards,
   tables, the timeline and the seal family are not clickable: a hairline, no
   box, no hover. Elementor: one saved "Row" container (border top or bottom
   1 px) and the "Tile" container (Image 40 px, Heading, Text Editor).
   -------------------------------------------------------------------------- */
:root body main .tj-rows { margin-top: 8px; }
:root body main .tj-rows li { gap: 8px; padding: 24px 0; }
:root body main .tj-on-dark .tj-rows li { border-color: var(--tj-line-dark); }
/* Rows in halves: the list carries the line on top, every row its line below. */
:root body main .tj-rows--duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--tj-gap); border-top: 1px solid var(--tj-line); }
:root body main .tj-rows--duo li { display: flex; flex-direction: column; gap: 8px; border-top: 0; border-bottom: 1px solid var(--tj-line); }
:root body main .tj-on-dark .tj-rows--duo { border-top-color: var(--tj-line-dark); }
:root body main .tj-on-dark .tj-rows--duo li { border-bottom-color: var(--tj-line-dark); }

/* Topic tiles as grid cells: hairline on top, icon 40, no box. Thirds. */
:root body main .tj-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px var(--tj-gap); }
:root body main .tj-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root body main .tj-tiles > .tj-tile { width: auto; }
:root body main .tj-tile {
  background: none; border: 0; border-radius: 0; border-top: 1px solid var(--tj-line);
  padding: 24px 0 0; min-height: 0; gap: 8px; box-shadow: none;
}
:root body main .tj-tile__ic { width: 40px; height: 40px; margin-bottom: 12px; }
:root body main .tj-on-dark .tj-tile { border-top-color: var(--tj-line-dark); }
/* Linked tiles stay cards: white, hairline, radius 16, arrow bottom right. */
:root body main .tj-tile.tj-tile--link {
  background: var(--tj-surface-white); border: 1px solid var(--tj-line); border-radius: var(--tj-r-inner);
  padding: 24px 32px 76px;
}
/* Static white cards (loop card language) become rows too. */
:root body main .tj-cards { gap: 48px var(--tj-gap); }
:root body main .tj-card { background: none; border-radius: 0; border-top: 1px solid var(--tj-line); padding: 24px 0 0; gap: 8px; }
:root body main .tj-on-dark .tj-card { border-top-color: var(--tj-line-dark); color: var(--tj-text-inverse-2); }
:root body main .tj-on-dark .tj-card :is(h2, h3, h4, strong) { color: var(--tj-text-inverse); }
/* Key words with their pictogram (topic fields of mab). */
:root body main .tj-kw { gap: 16px; padding: 24px 0 0; background: none; border: 0; border-top: 1px solid var(--tj-line); border-radius: 0; }
:root body main .tj-kw__ic { width: 40px; height: 40px; }
/* List cards as columns under a gold rule. */
:root body main .tj-listcard { background: none; border: 0; border-radius: 0; padding: 24px 0 0; border-top: 2px solid var(--tj-c-gold-line); box-shadow: none; gap: 16px; }
:root body main .tj-checks { gap: 12px; }
:root body main .tj-checks li { gap: 12px; color: var(--tj-text-strong); }
:root body main .tj-on-dark .tj-checks li { color: var(--tj-text-inverse); }
:root body main .tj-checks .ic { margin-top: 2px; }
:root body main .tj-checks--2 { column-gap: var(--tj-gap); }

/* Tables without a card: hairlines, the head as labels over a gold rule. */
:root body main .tj-tablewrap { border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
:root body main .tj-table thead th {
  background: none; padding: 0 24px 16px 0; border-bottom: 2px solid var(--tj-c-gold-line); color: var(--tj-text-strong);
}
:root body main .tj-table td { padding: 20px 24px 20px 0; background: none; border-top: 1px solid var(--tj-line); }
:root body main .tj-table tbody tr:last-child :is(td, th) { border-bottom: 1px solid var(--tj-line); }
:root body main .tj-table--leistung :is(th, td):not(:first-child) { padding-right: 0; }
/* Timeline: one row per entry, the year in the role Statement, year and text
   on one baseline. Elementor: saved "Timeline Row" (container with border
   bottom, Heading for the year, Text Editor), no HTML table widget. */
:root body main .tj-table--zeitleiste tbody th[scope="row"] {
  width: 22%; padding: 24px 24px 24px 0; border: 0; border-top: 1px solid var(--tj-line);
  vertical-align: baseline; color: var(--tj-text-strong); background: none;
}
:root body main .tj-table--zeitleiste td { padding: 24px 0; vertical-align: baseline; }
:root body main .tj-table--zeitleiste tbody tr:first-child :is(th, td) { border-top: 0; }

/* Seal family: rows on ink, the seal 80 px on the left, title and text on the
   grid edges (title from the seal, text from column 7). The entry without a
   seal of its own stays a row over the full width, on the same edges.
   Elementor: the saved "Row" container, Image 80 px, Heading, Text Editor. */
:root body main .tj-seals { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--tj-line-dark); }
:root body main .tj-seal {
  display: grid; grid-template-columns: 80px minmax(0, 1fr) calc(50% - 12px); column-gap: var(--tj-gap); row-gap: 8px;
  align-items: start; padding: 24px 0; background: none; border-radius: 0; border-bottom: 1px solid var(--tj-line-dark);
  color: var(--tj-text-inverse-2);
}
:root body main .tj-seal__fig { grid-column: 1; grid-row: 1 / span 2; height: auto; margin: 0; }
:root body main .tj-seal__img { width: 80px; height: auto; }
:root body main .tj-seal :is(h3, h4) { grid-column: 2; grid-row: 1; color: var(--tj-text-inverse); }
:root body main .tj-seal p { grid-column: 3; grid-row: 1 / span 2; color: var(--tj-text-inverse-2); }
:root body main .tj-seals__rest { display: block; margin-top: 0; border-top: 0; }
:root body main .tj-seals__rest li {
  display: grid; grid-template-columns: 80px minmax(0, 1fr) calc(50% - 12px); column-gap: var(--tj-gap);
  padding: 24px 0; border-top: 0; border-bottom: 1px solid var(--tj-line-dark);
}
:root body main .tj-seals__rest li > :is(h3, h4) { grid-column: 2; }
:root body main .tj-seals__rest li > p { grid-column: 3; }

/* --------------------------------------------------------------------------
   S8. Link card: the deep-dive bar and the call bar are one component. White,
   hairline, radius 16, title in the role Title, text, and on the right the
   arrow circle (a page) or a button (a contact action). The whole card is the
   link where it leads to a page. Elementor: one saved container "Link card"
   with two variants of the right slot; the container itself is the link.
   -------------------------------------------------------------------------- */
:root body main :is(.tj-deep, .tj-midstrip:not(.tj-midstrip--dunkel)) {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--tj-gap);
  width: 100%; padding: 24px 32px; background: var(--tj-surface-white); border: 1px solid var(--tj-line);
  border-radius: var(--tj-r-inner);
}
:root body main :is(.tj-deep__txt, .tj-midstrip__txt) { display: flex; flex-direction: column; gap: 4px; max-width: 760px; min-width: 0; }
:root body main :is(.tj-deep__t, .tj-midstrip__t) { color: var(--tj-text-strong); }
:root body main :is(.tj-deep__p, .tj-midstrip__p) { color: var(--tj-text); }
:root body main .tj-deep__ic { width: 40px; height: 40px; }
:root body main .tj-midstrip:not(.tj-midstrip--dunkel) .tj-btns { flex: none; }
:root body main .tj-on-dark .tj-midstrip:not(.tj-midstrip--dunkel) :is(.tj-midstrip__t, strong) { color: var(--tj-text-strong); }
:root body main .tj-on-dark .tj-midstrip:not(.tj-midstrip--dunkel) .tj-midstrip__p { color: var(--tj-text); }
/* The call at the foot of an ink surface is the foot of that surface. */
:root body main .tj-midstrip--dunkel {
  display: flex; align-items: center; justify-content: space-between; gap: var(--tj-gap);
  margin-inline: var(--tj-inset); padding: 48px 0 var(--tj-pad-surface);
  background: none; border-top: 1px solid var(--tj-line-dark);
}
:root body main :is(.tj-darkband, .tj-stepband, .tj-darkcard) .tj-midstrip--dunkel { margin-inline: 0; padding-bottom: 0; }
:root body main .tj-midstrip--dunkel .tj-midstrip__txt { display: flex; flex-direction: column; gap: 8px; }
:root body main .tj-midstrip--dunkel .tj-midstrip__t { color: var(--tj-text-inverse); }
:root body main .tj-midstrip--dunkel .tj-midstrip__p { color: var(--tj-text-inverse); }
:root body main .tj-deeps { gap: var(--tj-gap); }
/* Post and company cards: radius 16. */
:root body main .tj-postcard { border-radius: var(--tj-r-inner); }

/* --------------------------------------------------------------------------
   S9. FAQ as a line list. Top edge 2 px in every state, only its colour
   changes (line, gold when open or hovered), so nothing jumps. The chevron
   carries the state; no fill. Exactly one open (site.js).
   Elementor: Nested Accordion, Max items expanded "One", title border top
   2 px Normal #2D2F351A, Hover and Active gold, no background.
   -------------------------------------------------------------------------- */
:root body main .tj-acc { gap: 0; border-bottom: 2px solid var(--tj-line); }
:root body main .tj-acc__item,
:root body main .tj-tintcard .tj-acc__item:not([open]):not(.tj-acc__item--leer) {
  border-radius: 0; background: none; border: 0; border-top: 2px solid var(--tj-line);
  box-shadow: none; transition: border-color var(--tj-t-hover) var(--tj-ease);
}
:root body main .tj-acc__item summary { padding: 24px 0; gap: 16px; border-radius: 0; color: var(--tj-text-strong); }
:root body main .tj-acc__item[open] { background: none; border-top-color: var(--tj-accent); }
:root body main .tj-acc__body { padding: 0 48px 24px 0; color: var(--tj-text); }
:root body main .tj-acc__item--leer { padding: 24px 0; border-left: 0; border-right: 0; border-bottom: 0; }
:root body main .tj-acc__q { color: var(--tj-text-strong); }
@media (hover: hover) and (pointer: fine) {
  :root body main .tj-acc__item:hover { background: none; }
  :root body main .tj-acc__item:not(.tj-acc__item--leer):hover { border-top-color: var(--tj-accent); }
}
:root body main .tj-faq__head { gap: var(--tj-gap-text); }

/* --------------------------------------------------------------------------
   S10. The way, on ink: thirds under a gold line, the numeral in the role
   Statement in gold (7.66:1 on ink), the step title as Statement, the closing
   sentence as Lead below a hairline. On paper the numeral stands in ink.
   -------------------------------------------------------------------------- */
:root body main .tj-steprow { gap: var(--tj-gap); }
:root body main .tj-steprow > li { gap: 12px; padding-top: 24px; }
:root body main .tj-steprow__n { color: var(--tj-accent); }
:root body main .tj-steprow--hell .tj-steprow__n { color: var(--tj-text-strong); }
:root body main .tj-steprow p { color: var(--tj-text-inverse-2); max-width: none; }
:root body main .tj-steprow--hell p { color: var(--tj-text); }
:root body main .tj-steprow__foot { padding-top: 48px; border-top: 1px solid var(--tj-line-dark); }
:root body main .tj-steprow__foot p { color: var(--tj-text-inverse); max-width: var(--tj-measure-intro); }

/* --------------------------------------------------------------------------
   S11. Figures. The warm photo stays; the two-stop gradient of Nachtrag 22
   (100 % left to 65 % right) carries heading and figures. Five equal cells
   with a hairline on top; the call is the foot on plain ink.
   Elementor: Container with background image and Background Overlay
   gradient 280 deg; counters as Heading widgets with the end value.
   -------------------------------------------------------------------------- */
:root body .tj-counters { gap: var(--tj-gap); margin-top: 0; }
:root body .tj-counters > li { padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .2); }
:root body .tj-counter__l { margin-top: 8px; }
:root body main .tj-kpiwrap { border-radius: var(--tj-r-surface); }
:root body main .tj-kpicard { padding: var(--tj-pad-surface) var(--tj-inset) 48px; gap: var(--tj-gap-text); }
:root body main .tj-kpicard .tj-kpiset { margin-top: 24px; }
:root body main .tj-kpicard .tj-src { margin-top: 24px; color: var(--tj-text-inverse); }

/* --------------------------------------------------------------------------
   S12. Company cards on ink: white cards (clickable), thirds, one anatomy:
   logo plate, name, meta, foot with years and arrow. Logos larger than in
   the test version, never upscaled (max 240 x 72).
   Elementor: Loop Item or six static containers from one template, flex
   column, the foot a row with Flex Grow on the years.
   -------------------------------------------------------------------------- */
:root body main .tj-firms { gap: var(--tj-gap); }
:root body main .tj-firm {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr auto;
  column-gap: 16px; row-gap: 8px; min-height: 0; padding: 32px; border-radius: var(--tj-r-inner);
}
:root body main .tj-firm > * { grid-column: 1 / -1; }
:root body main .tj-firm__logo { height: 104px; margin: 0 0 16px; padding-bottom: 24px; }
:root body main .tj-firm__img { max-height: 72px; max-width: min(100%, 240px); }
:root body main .tj-firm__jahre { grid-column: 1; grid-row: 4; margin-top: 16px; padding-top: 0; align-self: center; }
:root body main .tj-firm__ic { grid-column: 2; grid-row: 4; position: static; align-self: center; margin-top: 16px; }

/* --------------------------------------------------------------------------
   S13. Closing card, free on paper: all four corners visible, the text on
   column 7 of the card, padding 64 so the card stays within the height of the
   trophy photo (704 px file; the seam of the test version, 28.09.2026).
   Until decision A3 only the button to /infopaket/.
   Elementor: first container of the footer template (or last of the page),
   background image left, text container width calc(50% - 12px), margin left
   auto; before it the Spacer 150 / 122 / 90.
   -------------------------------------------------------------------------- */
:root body :is(main > .tj-sec--footjoin, .site-footer__cta) { background: none; }
:root body .tj-cta { min-height: 0; border-radius: var(--tj-r-surface); padding: 0; box-shadow: none; }
:root body .tj-cta__in { max-width: none; display: flex; justify-content: flex-end; padding: 64px var(--tj-inset); }
:root body .tj-cta__text { flex: 0 0 calc(50% - 12px); width: auto; margin: 0; padding: 0; gap: var(--tj-gap-text); justify-content: center; }
:root body .tj-cta__text :is(h2, .tj-lead) { max-width: none; }
:root body .tj-cta__text .tj-btns { padding: 0; margin-top: 8px; gap: 16px; }
:root body .tj-cta__checks { display: grid; gap: 8px; margin-top: 0; font-size: var(--tj-body); line-height: var(--tj-body-lh); font-weight: 400; color: var(--tj-text-inverse); }
:root body .tj-cta__checks li { gap: 12px; }
:root body .tj-cta__checks .ic { margin-top: 4px; color: var(--tj-accent); }

/* --------------------------------------------------------------------------
   S14. Footer: one sender, three columns on the thirds, a base row below a
   hairline. Two text styles: Label for the column heads and legal links,
   Text for everything else. Links 12 apart; hover is a colour change to gold
   (7.66:1 on ink), no underline (the pointer of a vertical Nav Menu would
   run over the whole column). Elementor: two footer templates (with and
   without the card), Grid 3, Nav Menu widgets, Social Icons.
   -------------------------------------------------------------------------- */
:root body .site-footer { margin-top: 0; }
:root body .site-footer__cta { padding-inline: var(--tj-gutter); }
:root body .site-footer__main { padding: var(--tj-pad-surface) var(--tj-gutter) 0; }
:root body .site-footer__main > .tj-box { padding-inline: var(--tj-inset); }
:root body .site-footer__raster {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--tj-gap); row-gap: 48px;
  padding-bottom: 64px;
}
:root body :is(.site-footer__marke, .site-footer__nav) { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
:root body .site-footer__lockup { flex-wrap: wrap; margin-bottom: 8px; gap: 12px; }
:root body .site-footer__lockup img:first-child { width: 64px; height: 64px; }
:root body .site-footer__lockup img:last-child { width: min(200px, 100%); }
:root body .site-footer__org { font-size: var(--tj-body); line-height: var(--tj-body-lh); font-weight: 600; }
:root body .site-footer__addr { font-size: var(--tj-body); line-height: var(--tj-body-lh); color: var(--tj-text-inverse); }
:root body .site-footer__h { color: var(--tj-text-inverse-2); }
:root body .site-footer__links { gap: 12px; font-size: var(--tj-body); line-height: var(--tj-body-lh); }
:root body .site-footer :is(.site-footer__links, .site-footer__legal-links, .site-footer__addr) a {
  color: var(--tj-text-inverse); text-decoration: none; transition: color var(--tj-t-hover) var(--tj-ease);
}
:root body .site-footer .site-footer__legal-links a { color: var(--tj-text-inverse-2); }
@media (hover: hover) and (pointer: fine) {
  :root body .site-footer :is(.site-footer__links, .site-footer__legal-links, .site-footer__addr) a:hover { color: var(--tj-accent); }
}
:root body .site-footer :is(.site-footer__links, .site-footer__legal-links, .site-footer__addr) a:focus-visible { outline: 2px solid var(--tj-focus-inverse); outline-offset: 4px; }
:root body .site-footer__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px var(--tj-gap);
  padding: 24px 0 32px; border-top: 1px solid var(--tj-line-dark);
}
:root body .site-footer__legal-links { display: flex; flex-wrap: wrap; gap: 12px 24px; list-style: none; font-size: var(--tj-label); line-height: var(--tj-label-lh); }
:root body .site-footer__base .site-footer__social { gap: 12px; }

/* --------------------------------------------------------------------------
   S16. Tablet (768 to 1024): gap 20, axis 60. Head and content stack; text
   and image stay side by side at 50 / 50.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root body main .tj-split--achse > .tj-split__text,
  :root body main .tj-split--achse > .tj-split__media,
  :root body main .tj-split--achse.tj-split--rev > .tj-split__text,
  :root body main .tj-split--achse.tj-split--rev > .tj-split__media { flex-basis: calc(50% - var(--tj-gap) / 2); }
  :root body main :is(.tj-duo, .tj-faq.tj-faq--duo) { flex-direction: column; align-items: stretch; gap: var(--tj-gap-kopf); }
  :root body main :is(.tj-duo__head, .tj-faq--duo .tj-faq__head, .tj-duo__body, .tj-faq--duo .tj-faq__list) { flex: 0 0 auto; width: 100%; position: static; }
  :root body main :is(.tj-duo, .tj-faq--duo) + .tj-blockfoot { margin-left: 0; width: auto; }
  :root body main .tj-quotecard__in { max-width: none; }
  :root body .tj-hero--start .tj-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root body main .tj-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root body main .tj-tiles:has(> .tj-tile:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root body main .tj-tiles > .tj-tile:last-child:nth-child(odd):not(:nth-child(3)) { grid-column: 1 / -1; }
  :root body main .tj-seal { grid-template-columns: 80px minmax(0, 1fr); }
  :root body main .tj-seal p { grid-column: 2; grid-row: 2; }
  :root body main .tj-seal :is(h3, h4) { grid-row: 1; }
  :root body main .tj-seals__rest li { grid-template-columns: minmax(0, 1fr); }
  :root body main .tj-seals__rest li > :is(h3, h4, p) { grid-column: 1; }
  :root body main .tj-whitecard .tj-listcard:first-child { padding-right: 32px; }
  :root body main .tj-whitecard .tj-listcard + .tj-listcard { padding-left: 32px; }
  :root body main .tj-midstrip--dunkel { flex-direction: column; align-items: flex-start; }
  :root body .tj-cta__in { padding: 0; display: block; }
  :root body .tj-cta__text { padding: 48px var(--tj-inset) var(--tj-pad-surface); }
  :root body .site-footer__marke { grid-column: 1 / -1; }
  :root body .site-footer__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   S17. Phone (up to 767): one column, axis 36. Image before text. Figures and
   seals as rows; company cards compact with the logo on top.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root body main .tj-split.tj-split--achse, :root body main .tj-split--achse.tj-split--rev { flex-direction: column; gap: 32px; }
  :root body main .tj-split--achse > :is(.tj-split__text, .tj-split__media),
  :root body main .tj-split--achse.tj-split--rev > :is(.tj-split__text, .tj-split__media) { flex: 0 0 auto; width: 100%; }
  :root body main .tj-split--achse > .tj-split__media { order: -1; }
  :root body main :is(.tj-duo, .tj-faq.tj-faq--duo) { gap: 32px; }
  :root body main .tj-rows--duo { grid-template-columns: minmax(0, 1fr); }
  :root body main .tj-tiles, :root body main .tj-tiles:has(> .tj-tile:nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  :root body main .tj-tiles > .tj-tile:last-child:nth-child(odd):not(:nth-child(3)) { grid-column: auto; }
  :root body .tj-hero--start .tj-proof { grid-template-columns: minmax(0, 1fr); border-top: 0; padding-top: 0; }
  :root body main .tj-acc__body { padding-right: 0; }
  /* Link card: text over the full width, arrow or button below it. */
  :root body main :is(.tj-deep, .tj-midstrip:not(.tj-midstrip--dunkel)) { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px 24px; }
  :root body main .tj-deep__ic { align-self: flex-end; }
  :root body main .tj-whitecard .tj-listcards { grid-template-columns: minmax(0, 1fr); }
  :root body main .tj-whitecard .tj-listcard:first-child { padding: 0 0 32px; }
  :root body main .tj-whitecard .tj-listcard + .tj-listcard { padding: 32px 0 0; border-left: 0; border-top: 1px solid var(--tj-line); }
  /* Timeline: the year directly over its text, no line between them. */
  :root body main .tj-table--zeitleiste tbody th[scope="row"] { display: block; width: auto; padding: 24px 0 4px; }
  :root body main .tj-table--zeitleiste td { display: block; padding: 0 0 24px; border-top: 0; }
  :root body main .tj-table--zeitleiste tbody tr { border-top: 1px solid var(--tj-line); padding: 0; }
  :root body main .tj-table--zeitleiste tbody tr:first-child { border-top: 0; }
  :root body main .tj-table--zeitleiste tbody th[scope="row"] { border-top: 0; }
  /* Figures as rows: value left, label right on the baseline, hairline between. */
  :root body .tj-counters:not(.tj-counters--lang) { grid-template-columns: minmax(0, 1fr); gap: 0; }
  :root body .tj-counters:not(.tj-counters--lang) > li {
    display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 4px;
    padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .14);
  }
  :root body .tj-counters:not(.tj-counters--lang) .tj-counter__v { flex: 0 0 auto; min-width: 7ch; }
  :root body .tj-counters:not(.tj-counters--lang) .tj-counter__l { flex: 1 1 auto; margin-top: 0; }
  /* Seals: 64 px on the left, title over text. */
  :root body main .tj-seal { grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; padding: 20px 0; }
  :root body main .tj-seal__img { width: 64px; }
  /* Company cards compact: logo on top (48), years and arrow in one row. */
  :root body main .tj-firm { padding: 20px 24px; }
  :root body main .tj-firm__logo { height: 72px; margin-bottom: 12px; padding-bottom: 16px; }
  :root body main .tj-firm__img { max-height: 48px; }
  :root body main .tj-firm__jahre, :root body main .tj-firm__ic { margin-top: 8px; }
  :root body .tj-cta__text { padding: 32px var(--tj-inset) var(--tj-pad-surface); }
  :root body .tj-cta__text .tj-btns { flex-direction: column; align-items: stretch; }
  :root body .site-footer__legal-links { flex-direction: column; gap: 12px; }
  :root body .site-footer__base { flex-direction: column; align-items: flex-start; }
}


/* --------------------------------------------------------------------------
   S18. Review of all templates, 28.09.2026 (5 reviewers, 5 skeptics, 59
   confirmed findings). Last in the file on purpose.
   -------------------------------------------------------------------------- */
/* Lines for content, consistently: columns and list columns under a hairline;
   the gold rule belongs to the step row and the table head. */
:root body main .tj-cols > li { border-top: 1px solid var(--tj-line); }
:root body main .tj-on-dark .tj-cols > li { border-top-color: var(--tj-line-dark); }
:root body main .tj-listcard { border-top: 1px solid var(--tj-line); }
:root body main .tj-cols__ic { width: 40px; height: 40px; margin-bottom: 12px; }
/* A lead before the first heading of a block (oe 02) stands 50 above it. */
:root body main .tj-blockstack > .tj-lead + :is(h2, .tj-kopf) { margin-top: calc(var(--tj-sp-inner) - var(--tj-gap-text)); }
/* Prototype typesetting: a range and its unit never break apart (company meta). */
.tj-nobr { white-space: nowrap; }
/* A graphic plate is not a link card: no hairline (white + hairline + 16 is
   reserved for link cards and forms). */
:root body main .tj-innercard:not(.tj-innercard--form) { border: 0; }
/* Linked tiles are cards: the grid gap in both directions, the arrow the last
   flex child instead of absolute. */
:root body main .tj-tiles:has(> .tj-tile--link) { row-gap: var(--tj-gap); }
:root body main .tj-tile.tj-tile--link { padding: 24px 32px; }
:root body main .tj-tile--link .tj-tile__pfeil { position: static; margin-top: auto; align-self: flex-end; }
/* Card grids (posts, related posts, page cards): the grid gap. */
:root body main .tj-grid { gap: var(--tj-gap); }
/* A post card without a target is content, not a card (events 03). */
:root body main .tj-postcard:not(:has(a)) { background: none; border: 0; border-radius: 0; overflow: visible; }
:root body main .tj-postcard:not(:has(a)) .tj-postcard__img { border-radius: var(--tj-r-inner); }
:root body main .tj-postcard:not(:has(a)) .tj-postcard__body { padding: 16px 0 0; }
/* Column titles set as H2 (events 02) in the role Statement. */
:root body main .tj-cols > li > h2 { font-size: var(--tj-statement); line-height: var(--tj-statement-lh); letter-spacing: var(--tj-statement-ls); }
/* Several link cards in a row: text over the full card, arrow below. */
:root body main .tj-deeps .tj-deep { flex-direction: column; align-items: flex-start; }
:root body main .tj-deeps .tj-deep__ic { align-self: flex-end; margin-top: auto; }
/* Quote after a step row (bp 02): 50 to its rule, 24 after it. */
:root body main .tj-blockstack > .tj-steprow + .tj-quote-inline { margin-top: calc(var(--tj-sp-inner) - var(--tj-gap-text)); padding-top: var(--tj-gap-text); }
/* Post list: pagination on the text axis, 50 below the grid. */
:root body main .tj-liste { gap: var(--tj-sp-inner); }
:root body main .tj-pager { justify-content: flex-start; }
/* Long figures: one documented variant of Figure. */
:root body .tj-counters--lang .tj-counter__v { font-size: var(--tj-figure-lang); line-height: var(--tj-figure-lang-lh); }
/* Head-content block whose content is a step row (kompass 02): head over the
   row, the row in thirds over the full width. */
:root body main .tj-duo:has(> .tj-duo__body > .tj-steprow) { flex-direction: column; align-items: stretch; gap: var(--tj-gap-kopf); }
:root body main .tj-duo:has(> .tj-duo__body > .tj-steprow) > * { flex: 0 0 auto; width: 100%; }
/* Logos and a sentence as one proof line (infopaket 03); the hairline only
   where a quote follows (siegel 07). */
:root body main .tj-logorow { column-gap: var(--tj-gap); }
:root body main .tj-blockstack > .tj-logorow:not(:has(+ .tj-quoteline)) { border-bottom: 0; padding-bottom: 0; }
/* Forms: fields visible on white (3:1), spacing on the scale, radius 16. */
:root body main .tj-innercard--form { padding: 32px; border-radius: var(--tj-r-form); }
:root body main .tj-innercard--form .tj-input { border-color: var(--tj-line-field); background: var(--tj-surface-white); }
:root body main .tj-form { gap: 16px var(--tj-gap); }
:root body main .tj-field { gap: 8px; }
:root body main .tj-telefon { padding-top: 24px; gap: 8px; }
:root body main .tj-telefon .tj-tel { font-weight: 500; }
/* A placeholder is striped, never a gold border (gold is a button). */
:root body main .tj-embed { border: 0; background: repeating-linear-gradient(135deg, #F1ECE3 0 14px, #E7DFD1 14px 28px); }
/* Split head (bp, oe): on the grid edges like every split. */
@media (min-width: 1025px) {
  :root body main .tj-hero__split { gap: var(--tj-gap); justify-content: space-between; }
  :root body main .tj-hero__split > .tj-hero__text { flex: 0 0 calc(41.667% - 14px); }
  :root body main .tj-hero__split > .tj-hero__media { flex: 0 0 calc(50% - 12px); }
}
/* Promise rows (versprechen 04) on the grid edges, 64 below the intro. */
:root body main .tj-rows.tj-versprechen { margin-top: var(--tj-gap-kopf); }
:root body main .tj-rows.tj-versprechen > li { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: var(--tj-gap); }
:root body main :is(.tj-versprechen__kopf, .tj-versprechen__text) { min-width: 0; }
:root body main .tj-versprechen__kopf { flex: 0 0 calc(41.667% - 14px); }
:root body main .tj-versprechen__text { flex: 0 0 calc(50% - 12px); }
/* A closing line after a split stands 50 below it (versprechen 05). */
:root body main .tj-split + .tj-fazit { margin-top: var(--tj-sp-inner); }
/* Employer voices are content: lines, no tinted cards. */
:root body main .tj-stimmen { margin-top: var(--tj-gap-kopf); gap: 48px var(--tj-gap); }
:root body main .tj-stimme { background: none; border-radius: 0; border-top: 1px solid var(--tj-line); padding: 24px 0 0; }
:root body main .tj-stimme__fig figcaption p { font-size: inherit; line-height: inherit; }
/* Contact person and fact box in the reading column: lines, no tint. */
:root body main .tj-prose .tj-personcard { background: none; border-radius: 0; border-top: 1px solid var(--tj-line); padding: 24px 0 0; }
:root body main .tj-personcard__n { color: var(--tj-text-strong); }
:root body main .tj-prose__steckbrief { background: none; border-radius: 0; padding: 24px 0; border-top: 2px solid var(--tj-c-gold-line); border-bottom: 1px solid var(--tj-line); }
/* Quote with portrait at the foot of a split (partner 03) on the grid edges. */
:root body main .tj-personcard--zitat { display: flex; justify-content: space-between; align-items: center; gap: var(--tj-gap); }
:root body main .tj-personcard--zitat > .tj-personcard__txt { flex: 0 0 calc(41.667% - 14px); min-width: 0; }
:root body main .tj-personcard--zitat > .tj-personcard__bild { flex: 0 0 calc(50% - 12px); }
/* Tables: the first column in the role Text, emphasis by colour. */
:root body main .tj-table:not(.tj-table--zeitleiste) td:first-child { font-weight: 400; color: var(--tj-text-strong); }
/* People grid: the scale of non-clickable content. */
@media (min-width: 768px) {
  :root body main .tj-people { row-gap: 48px; }
  :root body main .tj-person { row-gap: 8px; }
}
/* Topic names wrap only where a column needs it (1025 px and up they fit). */
@media (min-width: 1025px) { :root body main .tj-kw > span { hyphens: none; -webkit-hyphens: none; } }
/* Footer sender: the TOP JOB mark, then "Eine Marke der" and the zeag logo as
   one unit that never tears apart. */
:root body .site-footer__lockup { flex-wrap: nowrap; }
:root body .site-footer__marke-der { display: flex; align-items: center; gap: 12px; min-width: 0; }
:root body .site-footer__marke-der img { width: min(200px, 100%); height: auto; }
@media (max-width: 1024px) {
  :root body main .tj-rows.tj-versprechen > li > :is(.tj-versprechen__kopf, .tj-versprechen__text) { flex-basis: calc(50% - var(--tj-gap) / 2); }
  :root body main .tj-personcard--zitat > :is(.tj-personcard__txt, .tj-personcard__bild) { flex-basis: calc(50% - var(--tj-gap) / 2); }
}
/* Photo bands (up to 1280 px): the band runs to the card edge, the text below
   stands on the axis. */
@media (max-width: 1280px) {
  :root body main .tj-quotecard--band { padding: 0; }
  :root body main .tj-quotecard--band .tj-quotecard__in { max-width: none; padding: var(--tj-gap-kopf) var(--tj-inset) var(--tj-pad-surface); }
}
@media (max-width: 767px) {
  /* Tables as rows: one hairline per entry, labels in the role Label. */
  :root body main .tj-table:not(.tj-table--zeitleiste) tbody tr { padding: 24px 0; border-top: 1px solid var(--tj-line); }
  :root body main .tj-table:not(.tj-table--zeitleiste) tbody tr:last-child { border-bottom: 1px solid var(--tj-line); }
  :root body main .tj-table:not(.tj-table--zeitleiste) tbody tr td:not(.tj-table__cta) { padding: 4px 0; border: 0; }
  :root body main .tj-table:not(.tj-table--zeitleiste) tbody tr td.tj-table__cta { margin-top: 12px; padding: 16px 0 0; border-bottom: 0; }
  :root body main .tj-table:not(.tj-table--zeitleiste) td::before { font-size: var(--tj-label); line-height: var(--tj-label-lh); font-weight: 600; letter-spacing: var(--tj-label-ls); margin-bottom: 4px; }
  :root body main .tj-table--leistung td:first-child::before { display: none; }
  :root body main .tj-facts { grid-template-columns: minmax(0, 1fr); }
  :root body main .tj-blockfoot > .tj-btns:has(.tj-btn + .tj-btn) { flex-direction: column; align-items: stretch; width: fit-content; }
  :root body main .tj-tile.tj-tile--link, :root body main .tj-year { padding: 20px 24px; }
  :root body main .tj-innercard--form { padding: 20px; }
  :root body main .tj-split--achse > .tj-split__media.tj-kaufen { order: 0; }
  :root body main .tj-rows.tj-versprechen > li { flex-direction: column; align-items: stretch; gap: 32px; }
  :root body main .tj-rows.tj-versprechen > li > * { flex-basis: auto; }
  :root body main .tj-personcard--zitat { flex-direction: column; align-items: stretch; gap: 32px; }
  :root body main .tj-personcard--zitat > :is(.tj-personcard__txt, .tj-personcard__bild) { flex-basis: auto; }
  :root body .site-footer__marke-der { flex-direction: column; align-items: flex-start; gap: 4px; flex: 1 1 0; }
  :root body .site-footer__marke-der img { width: 100%; max-width: 200px; }
}

/* --------------------------------------------------------------------------
   S19. Closing card reaching into the footer (Boris 28.09.2026, Nachtrag 42;
   after the test on the start page on every page with a closing card, in the
   footer or as the last section). The lower part of the card lies on the dark footer,
   a shadow closes it downwards; the footer grows by the overlap, so its
   content keeps the surface padding below the card. The only resting shadow
   of the system (exception to Nachtrag 40, decided).
   Elementor: card container Z-Index 2 and Box Shadow 0 48 80 -16
   rgba(0,0,0,.9), native; on ink a lighter shadow is not visible (compared
   28.09.2026: .6 disappeared, two stacked shadows looked the same). The
   dark footer container Margin Top -90 / -70 / -50 and Padding Top
   186 / 134 / 98 (overlap plus surface padding); no spacer between card and
   footer.
   -------------------------------------------------------------------------- */
:root { --tj-karte-ragt: 90px; --tj-shadow-karte: 0 48px 80px -16px rgba(0, 0, 0, .9); }
@media (max-width: 1024px) { :root { --tj-karte-ragt: 70px; } }
@media (max-width: 767px)  { :root { --tj-karte-ragt: 50px; } }
:root body .site-footer--ragt .site-footer__main {
  margin-top: calc(-1 * var(--tj-karte-ragt));
  padding-top: calc(var(--tj-karte-ragt) + var(--tj-pad-surface));
}
:root body main:has(+ .site-footer--ragt) > .tj-sec:last-child .tj-cta,
:root body .site-footer--ragt .site-footer__cta .tj-cta {
  position: relative; z-index: 2; box-shadow: var(--tj-shadow-karte);
}
/* Height of the closing card (Boris 28.09.2026: the trophy touched the edges;
   the photo has about 130 px above and 144 px of floor below the trophy). At
   least 480 px, on wide screens up to 556 px. The photo covers the card
   (background-size cover): a longer text (footer card between 1025 and
   1280 px, up to 593 px high) no longer leaves a seam, and the trophy keeps
   its margins. Cover never upscales here: the card is at most 1857 px wide
   and 593 px high, the file 1854 x 704 (factor at most 1.002 at 1920, within
   the tolerance of Nachtrag 34). The text stays centred.
   Elementor: Min Height custom max(480px, min(30vw, 556px)); Background Size
   Cover, Position Center Left (1025 to 1280: X -80 px); tablet and mobile
   the image band. */
@media (min-width: 1025px) {
  :root body .tj-cta { min-height: max(480px, min(30vw, 556px)); background-size: cover; }
  :root body .tj-cta__in { flex: 1 1 auto; align-items: center; }
}
/* Above 1900 px the card (1872 px) is wider than the file: natural size as
   before, never upscaled (NEED: wider file, Nachtrag 22). */
@media (min-width: 1901px) { :root body .tj-cta { background-size: max(1409px, min(100%, 1854px)) auto; } }
/* Laptop widths (1025 to 1280, measured since 28.09.2026):
   - The sender line of the footer wraps inside its unit when the column is
     narrower than the line ("Eine Marke der" over the zeag logo, next to the
     TOP JOB mark); at 1440 and wider it stays one line. Elementor: inner
     container Direction Row, Wrap.
   - Five long figures in the head stand 3 + 2 instead of 4 + 1. */
:root body .site-footer__marke-der { flex: 1 1 0; flex-wrap: wrap; row-gap: 4px; }
@media (min-width: 1025px) and (max-width: 1280px) {
  :root body .tj-counters.tj-counters--lang { display: grid; grid-template-columns: repeat(3, max-content); column-gap: 44px; row-gap: 26px; }
}
/* Photo quote cards are at least as high as their photo at card width
   (Boris 28.09.2026, ueberuns 03: faces must never be cut off, raise the
   height). The card was as high as its text (300 to 378 px); the photo needs
   466 to 592 px, and cover cut off the upper part with the face.
   aspect-ratio from the file (--bg-r in the markup), min-height auto so a
   longer text still makes the card taller. Measured by qa_gesichter.py.
   Below 1281 px the photo is the image band above the text.
   Elementor: Custom CSS on the card container `aspect-ratio: 2560 / 1018`
   (the pixel size of its file); without custom CSS a Min Height per
   breakpoint from the card width divided by that ratio. */
@media (min-width: 1281px) {
  :root body main .tj-imgcard.tj-quotecard { aspect-ratio: var(--bg-r); min-height: auto; }
}
/* --------------------------------------------------------------------------
   S20. Faces are never cut (Boris 28.09.2026: "Manchmal sind die Gesichter
   abgeschnitten. Das darf nicht sein."). Every rule here comes from a finding
   of qa_gesichter.py, which knows where the faces are in each photo
   (_work/gesichter/gesichter.json) and computes the visible crop per width.
   -------------------------------------------------------------------------- */
/* Post cards: Top Center (an Elementor preset for the loop item). The faces
   of the card photos sit in the upper part; the centred crop cut heads. Three
   portraits need a lower crop; their position is inline (common.BILD_LAGE) and
   their featured image is to be uploaded cropped (build/images.md). */
:root body .tj-postcard__img { background-position: 50% 0; }
/* 4:3 image cards next to text keep 4:3 on the tablet too. The 420 px minimum
   made them taller than wide (307 x 420) and cut the people at the sides. */
:root body main .tj-split--achse .tj-split__media > .tj-imgcard--43 { min-height: 0; }
/* The image of a split head is shown whole on phones: a band 260 px high cut
   the team photo on bp at both sides. Elementor: image widget instead of the
   background on mobile, or the container with aspect-ratio (custom CSS). */
@media (max-width: 767px) {
  :root body .tj-hero--voll .tj-hero__media > .tj-imgcard--43 { height: auto; aspect-ratio: var(--bg-r, 3 / 2); }
}
/* Image band in 16:9 below bar and submenu up to 1280 px, as in the head
   tj-hero--tief, where the phone band cut the people at the sides (adj). */
@media (max-width: 1280px) {
  :root body .tj-hero--voll.tj-hero--band169 .tj-hero__card--band { background-color: var(--tj-surface-dark); }
  :root body .tj-hero--voll.tj-hero--band169 .tj-hero__card--band .tj-band {
    height: auto; aspect-ratio: 16 / 9; margin-top: var(--tj-ueber);
    max-height: calc(100svh - var(--tj-util-h) - var(--tj-ueber) - 150px);
  }
  :root body .tj-hero--voll.tj-hero--band169 .tj-hero__card--band .tj-band::after {
    background: linear-gradient(180deg, var(--tj-surface-dark) 0, rgba(30, 30, 30, 0) 24px);
  }
}
/* Figure card with the photo (start page 05): the photo stands top aligned.
   Up to 1280 px the card is taller than the photo at card width (content
   603 px, photo 547 px at 1100); cover then cut the two women at the sides.
   There the photo keeps the full width and fades into the ink at its lower
   edge (container query width / --bg-r = height of the photo).
   Elementor: Background Size custom 100% auto, Position Top Center on tablet
   and laptop; the fade is custom CSS on the card (build/system.md). */
:root body main .tj-kpiwrap { container-type: inline-size; }
@media (max-width: 1280px) {
  :root body main .tj-kpiwrap .tj-kpicard { background-size: 100% auto; background-position: 50% 0; }
  :root body main .tj-kpiwrap .tj-kpicard[data-ov="left"]::before {
    background: linear-gradient(180deg, rgba(30, 30, 30, 0) calc(100cqw / var(--bg-r, 1.9) - 160px),
                                var(--tj-surface-dark) calc(100cqw / var(--bg-r, 1.9))),
                var(--tj-ov-kpi);
  }
}
/* Figures on the tablet: three columns (Nachtrag 26 rule 4). Five columns
   broke the labels without a hyphen at 768 px ("Produktivit|aet"). */
@media (min-width: 768px) and (max-width: 1024px) {
  :root body main .tj-kpiwrap .tj-counters:not(.tj-counters--lang) { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
}
/* Post cards in the lists: Top Center here too; the rule above lost against
   the 16:9 list rule with its attribute selector (50% 30%). */
:root body :is(main, .site-footer) .tj-blockstack .tj-postcard__img { background-position: 50% 0; }
/* Related posts on tablets: two columns, the third as a landscape card across
   the row, as between 560 and 767 px. Three columns were 196 px wide at 768 px
   and broke the titles in the middle of a word. */
@media (min-width: 768px) and (max-width: 1024px) {
  :root body .tj-blockstack > .tj-grid--verwandt:not(.tj-grid--quer) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root body .tj-grid > li.tj-karte--breit { grid-column: 1 / -1; }
  :root body .tj-karte--breit .tj-postcard { flex-direction: row; }
}
/* Heads with the image below the bar (tj-hero--tief) keep the standard left
   gradient; only TOP JOB-Partner has the lighter one Boris asked for there
   (tj-hero--hell). With the lighter one the lead on the bright office photos
   of gb and gespraech measured 1.1:1 to 1.5:1. The head is never taller than
   the photo at full width (--bg-r of the file): the form photo of infopaket is
   1920 x 850, a 16:9 head upscaled it by 1.13. */
.tj-hero--tief { --tj-ov-tief: var(--tj-ov-hero); }
.tj-hero--tief.tj-hero--hell { --tj-ov-tief: var(--tj-ov-hero-hell); }
@media (min-width: 1281px) {
  :root body .tj-hero--voll.tj-hero--tief .tj-hero__card[data-ov="hero"] {
    --tj-bild-h: min(calc(min(100vw, var(--tj-page-max)) / var(--bg-r, 1.7778)),
                     calc(100svh - var(--tj-util-h) - var(--tj-ueber)));
  }
  :root body .tj-hero--voll.tj-hero--tief .tj-hero__card[data-ov="hero"]::before {
    background: var(--tj-kante-oben), var(--tj-ov-tief);
  }
}
/* --------------------------------------------------------------------------
   S21. Answers to question block 1 (Boris 28.09.2026, Nachtrag 44).
   -------------------------------------------------------------------------- */
/* 1.2 Image marker "Bestand" on the photos of the posts: sits on the image. */
:root body .tj-prose__fig { position: relative; }
/* 1.10 Figure without an icon in the stock (Fehlerquote): the same white
   plate stays empty, so the row keeps its rhythm. */
:root body .tj-fakten__ic--leer { display: inline-block; vertical-align: top; }
/* 1.5 Company card: the whole card opens the company website (stretched name
   link); "Zum Porträt" lies above the stretched link. Elementor: Button or
   Text link with position relative and Z-Index 2. */
:root body .tj-firm__portraet { position: relative; z-index: 2; margin-top: 8px; }
:root body .tj-firm__portraet .tj-link { font-size: 16px; }
:root body .tj-postcard--firma .tj-postcard__body { padding-right: 70px; }
/* 1.6 Placeholders for open facts in the revised legal texts: always visible
   (content gap, not a prototype marker). */
:root body .tj-luecke { background: #FDE8E8; color: #8A1C1C; border-radius: 4px; padding: 0 4px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* 1.9 Empty field for the Brevo form embed. */
:root body .tj-prose__embed:empty, :root body .tj-prose__embed { display: grid; place-items: center; }
/* 1.5 "Zum Porträt" in its own row right above the years; ink on the white
   card (the cards stand on the dark company surface, where links are white). */
:root body main .tj-firm { grid-template-rows: auto auto 1fr auto auto; }
:root body main .tj-firm__portraet { grid-row: 4; }
:root body main .tj-firm__jahre, :root body main .tj-firm__ic { grid-row: 5; }
:root body .tj-on-dark .tj-firm__portraet .tj-link { color: var(--tj-text-strong); }
/* 1.10 Five figures stand 3 + 2, never 4 + 1 (no box alone, Nachtrag 23);
   one column below 768 px. */
:root body .tj-fakten:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) {
  :root body .tj-fakten:has(> li:nth-child(5):last-child) { grid-template-columns: minmax(0, 1fr); }
}
/* 1.6 The placeholder mark in the legal texts takes no horizontal padding:
   at a line end the 4 px pushed the text 1 to 3 px over its box (qa_layout
   28.09.2026). The light frame comes from a shadow that takes no space. */
:root body .tj-luecke { padding: 0; box-shadow: 0 0 0 2px #FDE8E8; }
/* Page overview (prototype only): long addresses of the legal subpages wrap. */
:root body .tj-sitemap .tj-src { overflow-wrap: anywhere; min-width: 0; }