/* ── fonts-lato.css ────────────────────────────────────────────── */
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/lato/S6u8w4BMUTPHjxsAUi-qNiXg7eU0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/lato/S6u8w4BMUTPHjxsAXC-qNiXg7Q.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/lato/S6u9w4BMUTPHh7USSwaPGQ3q5d0N7w.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/lato/S6u9w4BMUTPHh7USSwiPGQ3q5d0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/lato/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/lato/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/lato/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/lato/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/lato/S6u9w4BMUTPHh50XSwaPGQ3q5d0N7w.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/lato/S6u9w4BMUTPHh50XSwiPGQ3q5d0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ── tokens.css ────────────────────────────────────────────────── */
/**
 * TEKOM design tokens — the single source of truth for colour, radius,
 * elevation and motion.
 *
 * The Webflow export hardcoded 146 distinct hex values, 24 radii and 38 font
 * sizes across 1530 rules. Rather than rewriting all of it, the primitives
 * Webflow already emits are re-pointed at these tokens at the bottom of this
 * file, so existing rules keep working but draw from one place.
 *
 * Rule for new work: use tokens only, never raw hex values.
 * Loaded before the Webflow stylesheets.
 */

:root {
  /* ── Brand ─────────────────────────────────────────────────────────── */
  --tk-brand: #5c9091;
  --tk-brand-light: #77a8a9;
  --tk-brand-lighter: #a8c6c6;
  --tk-brand-dark: #1d383c;
  --tk-brand-darker: #16292a;

  /* ── Neutrals ──────────────────────────────────────────────────────── */
  --tk-white: #fff;
  --tk-black: #000;
  --tk-neutral-lightest: #eee;
  --tk-neutral-lighter: #ccc;
  --tk-neutral-light: #aaa;
  --tk-neutral: #666;
  --tk-neutral-dark: #444;
  --tk-neutral-darker: #222;

  /* ── Semantic surfaces ─────────────────────────────────────────────── */
  --tk-surface: var(--tk-white);
  --tk-surface-muted: var(--tk-neutral-lightest);
  --tk-surface-inverse: var(--tk-black);
  --tk-surface-brand: var(--tk-brand);

  /* ── Semantic text ─────────────────────────────────────────────────── */
  --tk-text: var(--tk-black);
  --tk-text-muted: var(--tk-neutral);
  --tk-text-inverse: var(--tk-white);
  --tk-text-on-brand: var(--tk-white);

  /* ── Radius — three steps plus pill, replacing 24 ad-hoc values.
     In px on purpose: the root font size is fluid, so rem-based radii would
     shrink on narrow viewports and corners would drift between pages. ──── */
  --tk-radius-sm: 8px;
  --tk-radius-md: 12px;
  --tk-radius-lg: 16px;
  --tk-radius-pill: 999px;

  /* ── Elevation ─────────────────────────────────────────────────────── */
  --tk-shadow-sm: 0 1px 3px #0000001a;
  --tk-shadow-md: 0 4px 11px #000000d9;
  --tk-shadow-pressed: 0 4px 4px #0000004d;

  /* ── Motion ────────────────────────────────────────────────────────── */
  --tk-duration-fast: 150ms;
  --tk-duration-base: 200ms;
  --tk-duration-slow: 400ms;
  --tk-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Focus ─────────────────────────────────────────────────────────── */
  --tk-focus-ring: 0 0 0 3px var(--tk-white), 0 0 0 6px var(--tk-brand);
}

/**
 * Fluid root font size — the base of the whole rem-driven type and spacing
 * scale.
 *
 * Webflow emitted this inline per page, and six pages never got it
 * (401, 404, einwilligung, unternehmenspraesentation and the kandidaten and
 * service templates). Those rendered at the 16px browser default, roughly 50%
 * too large, which pushed the navigation past the viewport edge. Defining it
 * here once applies it everywhere and keeps a new page from missing it.
 */
html {
  font-size: 1.1rem;
}

@media screen and (max-width: 1920px) {
  html {
    font-size: calc(0.34375rem + 0.55vw);
  }
}

@media screen and (max-width: 1600px) {
  html {
    font-size: calc(0.01375rem + 0.92125vw);
  }
}

@media screen and (max-width: 991px) {
  html {
    font-size: calc(0.48125rem + 0.72875vw);
  }
}

@media screen and (max-width: 479px) {
  html {
    font-size: calc(0.70125rem + 0.78475vw);
  }
}

/**
 * Bridge: the primitives emitted by Webflow now resolve to the tokens above.
 * Every existing rule using var(--_primitives---colors--brand) keeps working
 * and follows a change to --tk-brand automatically.
 */
:root {
  --_primitives---colors--brand: var(--tk-brand);
  --_primitives---colors--brand-dark: var(--tk-brand-dark);
  --_primitives---colors--white: var(--tk-white);
  --_primitives---colors--neutral-darkest: var(--tk-black);
  --_primitives---colors--neutral-darker: var(--tk-neutral-darker);
  --_primitives---colors--neutral-dark: var(--tk-neutral-dark);
  --_primitives---colors--neutral: var(--tk-neutral);
  --_primitives---colors--neutral-light: var(--tk-neutral-light);
  --_primitives---colors--neutral-lighter: var(--tk-neutral-lighter);
  --_primitives---colors--neutral-lightest: var(--tk-neutral-lightest);
  --_apps---colors--background: var(--tk-brand);
  --_apps---charts--chart-1: var(--tk-brand);
}

/* Reveal easing — fast start, soft settle. */
:root {
  --tk-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}


/* ── components.css ────────────────────────────────────────────── */
/**
 * Shared component styling on top of the Webflow export.
 *
 * The export grew four button variants with three radii, three padding
 * systems and differing hover behaviour — and no visible focus state at all.
 * This file harmonises them without touching the markup in 12 files: colour,
 * radius, weight, elevation, hover, active and focus come from tokens.css,
 * contextual padding stays where the layout needs it.
 *
 * Loaded last, so it wins over the export.
 */

/* ── Buttons: one visual language ───────────────────────────────────── */

.button,
.button-gradient,
.jobs-teaser-cta-button {
  border-radius: var(--tk-radius-md);
  font-weight: 600;
  text-decoration: none;
  transition:
    transform var(--tk-duration-base) var(--tk-ease),
    box-shadow var(--tk-duration-base) var(--tk-ease);
}

/* Solid variants carry the elevation; link-style buttons stay flat. */
.button:not(.is-link),
.button-gradient,
.jobs-teaser-cta-button {
  box-shadow: var(--tk-shadow-md);
}

.button:not(.is-link):hover,
.button-gradient:hover,
.jobs-teaser-cta-button:hover {
  transform: scale(1.05);
}

.button:not(.is-link):active,
.button-gradient:active,
.jobs-teaser-cta-button:active {
  transform: translateY(2px);
  box-shadow: var(--tk-shadow-pressed);
}

/* The inner shell of the gradient button follows the same radius. */
.button__inner,
.gradient {
  border-radius: var(--tk-radius-md);
}

/* Solid dark buttons draw from tokens instead of hardcoded values. */
.button:not(.is-link):not(.is-secondary):not(.is-alternate):not(.is-green) {
  background-color: var(--tk-surface-inverse);
  border-color: var(--tk-surface-inverse);
  color: var(--tk-text-inverse);
}

.jobs-teaser-cta-button {
  background-color: var(--tk-surface-inverse);
  color: var(--tk-text-inverse);
}

.button.is-green {
  background-image: linear-gradient(90deg, var(--tk-brand), var(--tk-brand-light));
  border-color: var(--tk-brand-light);
}

/* Padding snapped to a two-step scale; modifiers keep their own values
   through higher specificity. */
.button {
  padding: 1.5rem 3rem;
  font-size: 1.125rem;
}

/* Kept in px: this button sits outside the fluid type scale, and rem would
   shrink it well below its intended size on narrow viewports. */
.jobs-teaser-cta-button {
  padding: 16px 32px;
}

/* ── Focus: was missing entirely, which is a keyboard-access defect ─── */

.button:focus-visible,
.button-gradient:focus-visible,
.jobs-teaser-cta-button:focus-visible,
.w-button:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--tk-focus-ring);
  border-radius: var(--tk-radius-sm);
}

/* ── Respect reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .button,
  .button-gradient,
  .jobs-teaser-cta-button {
    transition: none;
  }

  .button:hover,
  .button-gradient:hover,
  .jobs-teaser-cta-button:hover {
    transform: none;
  }
}

/* ── Images: keep the aspect ratio once dimensions are on the tag ─────
   The build writes intrinsic width/height onto every local image so the
   browser can derive an aspect-ratio and reserve space before the file loads.

   Both axes are released to auto because the attributes double as legacy
   presentational hints: with only height:auto, width="1275" still acted as
   width:1275px, and the partner logos — sized by CSS through height alone —
   hit their max-width and stretched. Released, the derived aspect-ratio fills
   in whichever axis CSS leaves open, which is what reserves the space.

   :where() carries no specificity, so every class that sets a real dimension —
   .bento_bg-img, .mission_left-img, .infinity-slider-logo — still wins. */

img:where([width][height]) {
  width: auto;
  height: auto;
}

/* ── Centred H2: let it wrap ──────────────────────────────────────────
   The export pinned .heading-style-h2.text-align-center to white-space:
   nowrap, so a long heading — "Während wir uns melden — Einblicke in unsere
   Arbeit" — ran straight off the viewport. The Designer's answer was
   word-break: break-all in a media query, which breaks mid-word instead
   ("Einblic / ke"). Both are replaced: the heading wraps at word boundaries
   and only breaks inside a word when a single word is wider than the line.

   The size never shrank on small screens either. Webflow steps headings down
   at 991px and 767px through .heading-style-h2 (specificity 0,1,0), but the
   centred variant is set by .heading-style-h2.text-align-center (0,2,0) —
   the more specific base rule won inside the media queries too, so the
   heading stayed at 2.4rem all the way down. The steps below restore the
   intended ladder, keeping the same ratio to the base heading (2.4/3). */

.heading-style-h2.text-align-center {
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}

@media screen and (max-width: 991px) {
  .heading-style-h2.text-align-center {
    font-size: 2.2rem;
  }
}

@media screen and (max-width: 767px) {
  .heading-style-h2.text-align-center {
    font-size: 1.8rem;
  }
}

/* ── Sub-hero ────────────────────────────────────────────────────────
   The section used to be filled with #915c90 — the brand teal with red and
   blue transposed. Dropped entirely: the waves graphic carries the header on
   its own, so the section stays transparent over the page background. */

.section_sub-hero {
  background-color: transparent;
}

.sub-tag {
  background-color: var(--tk-brand);
}

/* ── Process timeline ─────────────────────────────────────────────────
   The export pinned the progress bar to the viewport (position: fixed,
   height: 50vh), so its edge sat at half screen height no matter where the
   steps were — and being fixed, it was painted across the entire page and
   showed through unrelated sections. It now lives inside its own track and
   follows the section's scroll progress (see js/timeline-progress.js). */

.timeline_progress-bar {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: calc(var(--tk-timeline-progress, 0) * 100%);
  background-color: var(--tk-brand-dark);
}

/* Steps light up once their dot passes the reading position. */
.timeline_circle,
.timeline-circle-inner,
.timeline-inner-inner {
  transition:
    background-color var(--tk-duration-slow) var(--tk-ease),
    transform var(--tk-duration-slow) var(--tk-ease);
}

.timeline_item.is-passed .timeline_circle {
  background-color: var(--tk-brand);
  transform: scale(1.08);
}

.timeline_item.is-passed .timeline-circle-inner,
.timeline_item.is-passed .timeline-inner-inner {
  background-color: var(--tk-brand-dark);
}

@media (prefers-reduced-motion: reduce) {
  .timeline_circle,
  .timeline-circle-inner,
  .timeline-inner-inner {
    transition: none;
  }

  .timeline_item.is-passed .timeline_circle {
    transform: none;
  }
}

/* ── The lone secondary button ────────────────────────────────────────
   .button-gradient.is-secondary appears exactly once site-wide: white fill
   with a black border, but inheriting the solid button's 85%-black shadow,
   which read as a grey smear around it. Not a deliberate variant — folded
   into the standard button. */

.button-gradient.is-secondary {
  background-color: var(--tk-surface-inverse);
  border: none;
  color: var(--tk-text-inverse);
}

/* ── Bento bottom image: stop the distortion ──────────────────────────
   The class pins width and height to 110% but never got object-fit, unlike
   every sibling that does the same thing (.bento_bg-img, .split_img,
   .mission_wow-img). The image was therefore stretched to a ratio it does
   not have — the one Best Practices audit still failing on desktop. */

.bento_bottom-img {
  object-fit: cover;
}

/* ── Mission block: readable text on the brand teal ───────────────────
   #eeeeee on #5c9091 is 3.09:1 — below the 4.5:1 WCAG AA needs for body
   text. The teal is darkened by 20% at the same hue, which reaches 4.53:1
   and keeps the brand character; the alternative was near-black text,
   which would have changed the section's look entirely. */

.mission_item {
  background-color: #4a7374;
}

/* ── Job meta pills: let the row wrap, not the label ──────────────────
   The wrapper is a wrapping flex row, but the pills kept the default
   flex-shrink: 1. When a line ran out of space the browser squeezed them all,
   and the shortest label lost first — "Ab sofort" broke into two lines while
   "Arbeitnehmerüberlassung" next to it stayed on one, so the pills in a single
   row had different heights.

   The labels come from the CMS and can be any length, so the rule has to hold
   for content nobody has written yet: a pill keeps its natural width and moves
   to the next line instead of shrinking, and only a label wider than the card
   itself is allowed to break — max-width keeps that case inside the card
   rather than overflowing it. */

.jobs_info {
  flex: 0 0 auto;
  max-width: 100%;
}

/* The icon is a flex item too and was the other thing being squeezed. */
.jobs_icon {
  flex: 0 0 auto;
}

/* ── CTA section without its second column ────────────────────────────
   The block was a two-column grid: copy and button on the left, the Calendly
   embed on the right. With the embed gone the text kept the left half and the
   right half stayed empty, separated by an 8.75rem gap.

   Written as :has(> :only-child) rather than a flat one-column rule so the
   two-column layout returns by itself if a second column is ever added back. */

.cta_component:has(> :only-child) {
  grid-template-columns: 1fr;
}

/* ── The brand teal as text ───────────────────────────────────────────
   #5c9091 is a background colour that the export also used for small text on
   white, where it reaches 3.59:1 — below the 4.5:1 AA needs. Same darkened
   teal as .mission_item above (5.26:1 on white), so the two corrections stay
   one colour rather than drifting apart.

   The gold #b49b64 is worse at 2.69:1; on a 12px label it has to come down
   far enough to clear the threshold with margin, not sit on it. */

.insights_link,
.next-step-tag,
.next-step-tag-1 {
  color: #4a7374;
}

.job-teaser-category,
.job-teaser-category-1 {
  color: #7d6a3c;
}

/* The apply button is corrected in src/templates/job.html instead: its rule
   lives in a <style> block inside the body, which wins over this file. */

/* ── Bento labels: one size below the desktop layout ──────────────────
   The tiles carry four different font sizes (.bigger, .smaller,
   .is-smaller and the base) plus hand-placed <br> tags in three of the
   seven labels. On a wide grid that reads as deliberate; once the grid
   collapses the tiles are near enough the same width that the mixture
   just looks accidental — one label on a line, the next on three.

   Two of them also ran out of their tile, which has overflow:hidden:
   "IT & Softwareentwicklung" and "Automotive / Fahrzeugtechnik" were cut
   off at 768px. Hyphenation lets the long compounds break instead
   ("Fahrzeug-technik"), so nothing is clipped at any width. */

@media screen and (max-width: 991px) {
  .bento_component [class*='item'] h3 {
    font-size: 1.25rem;
    line-height: 1.15;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* The hard breaks were placed for the desktop column widths. */
  .bento_component [class*='item'] h3 br {
    display: none;
  }
}

/* ── Bento: slide-up reveal for the industry labels ───────────────────
   The hidden state is applied by js/reveal.js, never in the served HTML —
   without JavaScript the labels simply show, they never stay invisible. */

.bento-reveal {
  opacity: 0;
  transform: translateY(0.6em);
  transition:
    opacity 600ms var(--tk-ease-out),
    transform 600ms var(--tk-ease-out);
  will-change: opacity, transform;
}

.bento-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .bento-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Branchen-Landingpage: Differenzierungsband ───────────────────────
   Dunkle Fläche auf --tk-brand-dark, dem einzigen Markenton, der bisher
   nirgends als Sektionsfläche vorkam. Sie trennt die Branchenseite optisch
   von /fuer-unternehmen, das durchgehend hell ist, ohne einen neuen Farbwert
   einzuführen. */

.section_branche-band {
  background-color: var(--tk-brand-dark);
  color: var(--tk-white);
}

.branche-band_inner {
  grid-column-gap: 4rem;
  grid-row-gap: 2.5rem;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: start;
  display: grid;
}

@media screen and (max-width: 991px) {
  .branche-band_inner {
    grid-template-columns: 1fr;
  }
}

.section_branche-band h2 {
  color: var(--tk-white);
}

.branche-band_lead {
  color: #dfe8e8;
  margin-top: 1.25rem;
}

/* ── Vorlaufzeit-Skala ────────────────────────────────────────────────
   Ein Gantt-artiger Streifen: jede Prüfstufe liegt als Balken auf einer
   gemeinsamen Monatsachse, die Position trägt die Aussage. Die Spannen
   kommen aus dem CMS und werden als Prozentwerte auf die Achse gerechnet,
   damit eine geänderte Zahl nicht auch noch das Markup ändert. */

.scale_axis {
  border-bottom: 1px solid #ffffff26;
  height: 1.5rem;
  margin-bottom: 0.75rem;
  position: relative;
}

.scale_tick {
  color: #a8bcbc;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  position: absolute;
  bottom: 0.4rem;
  transform: translateX(-50%);
}

.scale_row {
  grid-column-gap: 1rem;
  grid-template-columns: 4.5rem 1fr auto;
  align-items: center;
  padding: 0.85rem 0;
  display: grid;
}

.scale_name {
  font-size: 1rem;
  font-weight: 700;
}

.scale_track {
  background-color: #ffffff14;
  border-radius: var(--tk-radius-pill);
  height: 0.75rem;
  position: relative;
  overflow: hidden;
}

.scale_bar {
  background-image: linear-gradient(90deg, var(--tk-brand), var(--tk-brand-light));
  border-radius: var(--tk-radius-pill);
  position: absolute;
  top: 0;
  bottom: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms var(--tk-ease-out);
}

/* Muss .scale_bar schlagen: die kurze Fassung .is-revealed .scale_bar hat den
   Ausgangswert scaleX(0) nicht überschrieben. */
.scale.is-revealed .scale_bar {
  transform: scaleX(1);
}

.scale_val {
  color: #c3d2d2;
  font-size: 0.9rem;
  white-space: nowrap;
}

@media screen and (max-width: 640px) {
  .scale_row {
    grid-template-columns: 3.5rem 1fr;
  }

  .scale_val {
    grid-column: 2;
    font-size: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scale_bar {
    transition: none;
    transform: scaleX(1);
  }
}

/* ── Landingpage-Fließtext ────────────────────────────────────────────
   Zwei Dinge, die der Abschnitt aus dem Service-Template geerbt hat:

   Er setzte keinen eigenen Hintergrund, und der <body> ist im Export mit dem
   Markenteal gefüllt. Zwischen dem dunklen Band darüber und der hellen FAQ
   darunter stand der Fließtext deshalb als schwarze Schrift auf Teal — nicht
   unlesbar, aber sichtbar ein Loch im Seitenaufbau.

   Und er lief über die volle Containerbreite: rund 150 Zeichen pro Zeile,
   etwa doppelt so viel wie sich am Stück lesen lässt. Die Spalte wird auf
   Lesebreite begrenzt und mittig gesetzt — linksbündig ließe sie die halbe
   Seite leer stehen. */

.section_lp-content {
  background-color: var(--tk-surface);
}

/* ── Kapitel: Überschrift links, Text rechts ──────────────────────────
   Jedes Kapitel ist sein eigenes zweispaltiges Raster. Die Überschrift steht
   links und klebt — aber nur innerhalb ihres Kapitels, denn ein sticky-Element
   haftet an seinem Containerblock. Läuft der Text des Kapitels aus, schiebt
   das nächste Kapitel die alte Überschrift hinaus und setzt seine eigene an
   ihre Stelle. Dieser Wechsel braucht keine Zeile JavaScript.

   Die Überschrift bleibt dabei im Dokument bei ihrem Kapitel stehen. Sie in
   eine eigene Spalte zu sammeln hätte vier H2 am Stück und danach den
   gesamten Text ergeben — für Screenreader eine Überschrift mit vier Rümpfen,
   und die Bindung zwischen Überschrift und Passage, die den Text überhaupt
   erst zitierfähig macht, wäre verloren. */

/* Kapitelraster und Kennzahlenreihe teilen sich dieselbe Breite und dieselben
   Kanten. Stünden die Maße an zwei Stellen, liefen sie beim nächsten
   Feinschliff auseinander — und genau daran hing die Reihe zuletzt schief
   unter dem Text. */
.lp-pin {
  --lp-spalte-kopf: 20rem;
  --lp-spalte-text: 58ch;
  --lp-rinne: 4rem;
  --lp-textbreite: calc(var(--lp-spalte-kopf) + var(--lp-rinne) + var(--lp-spalte-text));
}

.lp-chapter {
  display: grid;
  grid-template-columns:
    minmax(0, var(--lp-spalte-kopf, 20rem))
    minmax(0, var(--lp-spalte-text, 58ch));
  grid-column-gap: var(--lp-rinne, 4rem);
  justify-content: center;
  /* Notwendig, nicht kosmetisch: ein auf Zeilenhöhe gestrecktes Rasterelement
     kann nicht kleben, weil es keinen Weg zu wandern hat. */
  align-items: start;
  padding-bottom: 5rem;
}

/* Eine erzwungene Mindesthöhe von einer Bildschirmhöhe je Kapitel war der
   erste Versuch, immer nur eine Überschrift zu zeigen. Sie löst das Problem
   nicht und schafft zwei neue: kurze Kapitel bekommen eine große Leerfläche,
   und weil der Text oben im Kapitel steht, klebte die Überschrift des einen
   Kapitels neben dem Text des nächsten. Die Kapitel behalten deshalb ihre
   natürliche Höhe — für „nur eine Überschrift" sorgt die Überblendung unten.

   Ein Mindestmaß bleibt trotzdem: ohne es fallen kurze Kapitel auf gut 160 px
   zusammen und der ganze Artikel ist kürzer als ein Bildschirm, sodass vom
   Durchscrollen nichts übrig bleibt. Der eigentliche Hebel ist mehr Text je
   Kapitel, nicht mehr Leerraum. */

@media screen and (min-width: 992px) {
  .lp-chapter {
    min-height: 60svh;
  }
}

/* align-self: start positioniert die Überschrift oben in ihrem Rasterfeld,
   lässt das Feld aber über die volle Kapitelhöhe stehen — genau der Weg, den
   das klebende Element zum Wandern braucht. Mit align-items am Container
   allein wäre das Feld auf Inhaltshöhe geschrumpft und nichts würde kleben. */
.lp-chapter_head {
  position: sticky;
  top: 8rem;
  align-self: start;
}

.lp-chapter_head h2 {
  font-size: 2.25rem;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

/* Der Vorspann vor der ersten Überschrift hat keinen Kopf und rückt deshalb
   in die Textspalte, damit er nicht allein links steht. */
.lp-chapter.is-lead .lp-chapter_body {
  grid-column: 2;
}

@media screen and (max-width: 991px) {
  .lp-chapter {
    grid-template-columns: 1fr;
    grid-row-gap: 1rem;
    padding-bottom: 3rem;
  }

  .lp-chapter_head {
    position: static;
  }

  .lp-chapter_head h2 {
    font-size: 1.75rem;
  }

  .lp-chapter.is-lead .lp-chapter_body {
    grid-column: 1;
  }
}

/* ── Textrhythmus in der rechten Spalte ───────────────────────────────
   Der Webflow-Reset nimmt allen Kindelementen die Margen; die Bestandsseiten
   setzen Abstände über Utility-Klassen am Element, was Rich-Text aus dem CMS
   nicht mitbringen kann. Ohne diese Regeln stoßen die Absätze aneinander. */

.lp-chapter_body > * {
  margin-top: 0;
  margin-bottom: 1.15rem;
}

.lp-chapter_body > :last-child {
  margin-bottom: 0;
}

.lp-chapter_body > h3 {
  font-size: 1.4rem;
  line-height: 1.25;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
}

/* Aufzählungen tragen ihren Marker bereits als Häkchen-SVG im Hintergrund des
   <li> (siehe .w-richtext li im Export). Ein zusätzlicher Einzug holt nur den
   nativen Punkt hervor, dann stehen Punkt und Häkchen nebeneinander. */

.lp-chapter_body ul {
  list-style: none;
  padding-left: 0;
}

.lp-chapter_body ol {
  padding-left: 1.25rem;
}

.lp-chapter_body li {
  margin-bottom: 0.4rem;
}

/* Kapitel blenden beim Hereinscrollen ein. Der versteckte Zustand wird erst
   von js/reveal.js gesetzt, damit ohne JavaScript nichts unsichtbar bleibt. */

.lp-chapter_body.tk-chapter {
  opacity: 0;
  transform: translateY(0.6em);
  transition:
    opacity 600ms var(--tk-ease-out),
    transform 600ms var(--tk-ease-out);
}

.lp-chapter_body.tk-chapter.is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .lp-chapter_body.tk-chapter {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Sonst landet das Kapitel beim Anspringen unter der schwebenden Navigation. */
.lp-chapter[id] {
  scroll-margin-top: 7rem;
}

/* ── Festgepinnte Sektion ─────────────────────────────────────────────
   Statt vier kurzer klebender Kapitel hintereinander steht die ganze Sektion
   einmal fest: .lp-pin ist so hoch wie die Anzahl der Kapitel mal eine
   Bildschirmhöhe, .lp-pin_stage klebt darin auf voller Bildschirmhöhe. Alle
   Kapitel liegen im selben Rasterfeld übereinander; welches sichtbar ist,
   entscheidet der Scrollfortschritt innerhalb von .lp-pin.

   .is-pinned setzt js/reveal.js. Ohne die Klasse greift keine dieser Regeln
   und die Kapitel stehen normal untereinander — sonst lägen ohne JavaScript
   vier Kapitel deckungsgleich aufeinander.

   Überschrift und Text bleiben dabei im Dokument beieinander: gestapelt wird
   das ganze Kapitel, nicht die Überschriftenspalte für sich. */

@media screen and (min-width: 992px) {
  /* Der Scrollweg, den ein Kapitel bekommt, bevor das nächste übernimmt.
     Eine volle Bildschirmhöhe je Kapitel fühlte sich zäh an: vier Bildschirme
     Scrollweg für einen Artikel, der auf jedem davon nur ein Viertel der
     Fläche füllt. Eine halbe reicht, um den Wechsel zu lesen. */
  .lp-pin.is-pinned {
    position: relative;
    /* --lp-buehne ist die Höhe des stehenden Bereichs, --lp-schritt der
       Scrollweg je Kapitel. Eine bildschirmhohe Bühne war deutlich zu groß:
       das längste Kapitel füllt keine 200px, der Rest stand leer.
       Die Bühne kommt am Ende dazu, weil das klebende Element nur die
       Differenz aus Behälter- und eigener Höhe wandern kann. */
    --lp-buehne: 66svh;
    --lp-schritt: 50svh;
    height: calc(var(--lp-n, 4) * var(--lp-schritt) + var(--lp-buehne));
  }

  /* Mittig im Bild statt am oberen Rand — so steht der Text ruhig zwischen
     zwei gleich großen Flächen, statt unter dem schwebenden Menü zu kleben. */
  .lp-pin.is-pinned .lp-pin_stage {
    position: sticky;
    top: calc((100svh - var(--lp-buehne)) / 2);
    display: grid;
    /* Kapitel in der ersten Zeile, Kennzahlen darunter. Die Kapitel liegen
       gestapelt im selben Feld, die Zahlen stehen fest. */
    grid-template-rows: 1fr auto;
    align-items: center;
    height: var(--lp-buehne);
    overflow: hidden;
  }

  .lp-pin.is-pinned .lp-pin_zahlen {
    grid-row: 2;
    margin-top: 0;
  }

  /* Die Bühne bringt die volle Bildschirmhöhe schon mit; die Abstände der
     Sektion kämen oben und unten noch dazu und schöben die Bühne aus dem Bild. */
  .section_lp-content.is-pinned .padding-section {
    padding-top: 0;
    padding-bottom: 0;
  }

  .lp-pin.is-pinned .lp-chapter {
    grid-area: 1 / 1;
    align-content: center;
    min-height: 0;
    padding-bottom: 0;
    /* Der Wechsel wird über Zeichen und Text animiert; das Kapitel selbst wird
       erst danach ausgeblendet, sonst bräche die Ausgangsanimation ab. */
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 600ms;
  }

  .lp-pin.is-pinned .lp-chapter.is-current {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s;
  }

  /* Im gepinnten Zustand steht die Überschrift fest im Rasterfeld — kleben
     hätte hier keinen Weg, die Bühne bewegt sich nicht. */
  .lp-pin.is-pinned .lp-chapter_head {
    position: static;
  }

  .lp-pin.is-pinned .lp-chapter_body {
    opacity: 0;
    transform: translateY(1.25rem);
    transition:
      opacity 500ms var(--tk-ease-out),
      transform 500ms var(--tk-ease-out);
  }

  .lp-pin.is-pinned .lp-chapter.is-current .lp-chapter_body {
    opacity: 1;
    transform: none;
    transition-delay: 120ms;
  }
}

/* ── Überschrift zeichenweise ─────────────────────────────────────────
   js/reveal.js zerlegt das H2 in Wörter und Zeichen. Jedes Wort schneidet ab,
   was darunter hinausragt, damit die Zeichen aus dem Nichts hochrollen statt
   von unten hereinzuwandern. Die Verzögerung je Zeichen kommt als --d vom
   Skript und gilt nur beim Hereinkommen — beim Verschwinden gehen alle
   Zeichen gemeinsam, sonst zerfranst der Ausgang. */

/* Der vollständige Überschriftentext für Screenreader: sichtbar für
   Vorlesewerkzeuge, ohne im Layout Platz zu belegen. */
.tk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Die zerlegte Fassung ist nicht markierbar, damit eine Auswahl über die
   Überschrift die unsichtbare Volltextkopie erwischt. Sonst kommt beim
   Kopieren jeder Buchstabe in einer eigenen Zeile heraus — jedes Zeichen
   steht in einem eigenen Element, und die Wörter sind Flex-Container. */
.tk-split {
  user-select: none;
  -webkit-user-select: none;
}

.tk-word {
  display: inline-flex;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.12em;
}

.tk-char {
  display: inline-block;
}

@media screen and (min-width: 992px) {
  .lp-pin.is-pinned .tk-char {
    opacity: 0;
    transform: translateY(1em);
    transition:
      opacity 500ms var(--tk-ease-out),
      transform 500ms var(--tk-ease-out);
  }

  .lp-pin.is-pinned .lp-chapter.is-current .tk-char {
    opacity: 1;
    transform: none;
    transition-delay: var(--d, 0ms);
  }
}

/* Ohne Animation gäbe es nichts mehr zu überbrücken; das alte Kapitel bliebe
   sonst noch eine halbe Sekunde stehen, bevor die Sichtbarkeit umspringt. */
@media (prefers-reduced-motion: reduce) {
  .lp-pin.is-pinned .tk-char,
  .lp-pin.is-pinned .lp-chapter_body {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .lp-pin.is-pinned .lp-chapter {
    transition: none;
  }
}


/* ── Abschluss-CTA der Landingpage ────────────────────────────────────
   .button-gradient rechnet sich zu display:block; auf den Bestandsseiten
   steht er in einem Flex-Container und schrumpft dadurch auf Inhaltsbreite.
   Hier ist er direktes Blockkind und lief über die volle Containerbreite —
   ein 982 px breiter Knopf mit vier Wörtern darin.

   Der Einleitungssatz stand ausserdem in Fliesstextgröße. Für den letzten
   Satz vor dem Absprung ist das zu leise. */

/* Nicht über display: der Elterncontainer ist ein Flex-Container, und ein
   Flex-Item wird per Spezifikation zu block umgerechnet — inline-block kann
   dort nicht greifen. Die volle Breite kommt vom voreingestellten
   align-items: stretch, also wird sie auch dort abgestellt. */
.section_lp-cta .button-gradient {
  align-self: center;
}

.section_lp-cta p {
  max-width: 46ch;
  margin-inline: auto;
  font-size: 1.35rem;
  line-height: 1.5;
}


/* ── Ansprechpartner-Karte ────────────────────────────────────────────
   Bei Personalberatung kauft niemand eine Firma, sondern eine Person. Die
   Karte steht deshalb direkt hinter der Prüfstufen-Skala: dort ist die Frage
   „wer klärt mir das?" am frischesten.

   Der Buchungslink ist der Hauptausgang, Telefon und E-Mail stehen daneben
   für alle, die lieber direkt anrufen als einen Termin einzutragen. */

.section_experte {
  background-color: var(--tk-surface);
}

.experte_headline {
  margin: 0 0 2.5rem;
  text-align: center;
  text-wrap: balance;
}

/* Die Karte trug ursprünglich auch drei Schwerpunkt-Pillen. Ohne sie stand der
   Inhalt in einem zu breiten Kasten, und die Bildspalte endete auf halber
   Höhe. Sie ist deshalb in zwei gleich schwere Blöcke geteilt: links das
   Gesicht mit Name und Rolle, rechts der Satz und die Wege zum Gespräch. */
.experte_card {
  display: grid;
  grid-template-columns: 14rem minmax(0, 28rem);
  grid-column-gap: 3rem;
  justify-content: center;
  align-items: start;
  max-width: 50rem;
  margin-inline: auto;
  padding: 2.5rem;
  border: 1px solid var(--tk-neutral-light);
  border-radius: var(--tk-radius-lg);
  background-color: var(--tk-white);
  box-shadow: var(--tk-shadow-sm);
}

.experte_img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--tk-radius-md);
}

.experte_name {
  margin-top: 1rem;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

/* Kein Fließtextmaß, sondern eine Beschriftung unter dem Namen: gesperrt und
   klein steht sie dem Namen zu, statt mit ihm um Aufmerksamkeit zu ringen. */
.experte_rolle {
  margin: 0.35rem 0 0;
  color: var(--tk-text-muted);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Erstes Element seiner Spalte — mit Randabstand stünde der Satz tiefer als
   die Oberkante des Fotos daneben. */
.experte_vorspann {
  margin: 0;
  max-width: 42ch;
}

/* Schwerpunkte als Marker, nicht als Aufzählung: sie ersetzen keinen Satz,
   sondern beantworten in drei Blicken „kennt der sich damit aus?". */
.experte_chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.experte_chip {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--tk-neutral-light);
  border-radius: var(--tk-radius-pill);
  background-color: var(--tk-surface-muted);
  font-size: 0.9rem;
  line-height: 1.3;
}

.experte_zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--tk-neutral-light);
}

.experte_zahl-wert {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
}

.experte_zahl-label {
  max-width: 16ch;
  margin-top: 0.15rem;
  color: var(--tk-text-muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

/* Knopf und Kontaktzeile teilten sich bisher eine Flex-Zeile und brachen je
   nach Breite unterschiedlich um — mal nebeneinander, mal untereinander, ohne
   dass die Anordnung etwas bedeutete. Jetzt steht die Reihenfolge fest:
   erst der eine Hauptausgang, darunter die Wege für alle, die lieber anrufen. */
.experte_aktionen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

/* Die Spalte steht senkrecht, also regelt align-self hier die Waagerechte.
   Ein zentriertes align-self rückte den Knopf sichtbar aus der Flucht der
   übrigen Zeilen. */
.section_experte .button-gradient {
  align-self: flex-start;
}

/* Untereinander statt nebeneinander. Nebeneinander brauchten die drei Wege mit
   Symbol rund 490px und brachen ab jeder Breite darunter 2:1 um — ein einzelnes
   LinkedIn in der zweiten Zeile sieht nach Versehen aus. Gestapelt liest es
   sich als Kontaktblock und bleibt auf jeder Breite gleich.

   Keine Trennlinie zum Knopf: die Symbolspalte setzt die Zeilen schon ab. */
.experte_links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Unterstrichen wird nur die Beschriftung, nicht das Symbol — eine Linie unter
   dem Hörer sähe aus wie ein Kastenrand. */
.experte_link {
  color: var(--tk-text);
  text-decoration: none;
}

.experte_link > span {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.experte_icon {
  flex: none;
  color: var(--tk-text-muted);
  transition: color var(--tk-duration-base) var(--tk-ease);
}

.experte_link:hover .experte_icon {
  color: inherit;
}

.experte_link:hover {
  color: var(--tk-brand);
}

@media screen and (max-width: 767px) {
  .experte_card {
    grid-template-columns: 1fr;
    grid-row-gap: 1.75rem;
    padding: 1.5rem;
  }

  .experte_media {
    max-width: 9rem;
  }

  .experte_zahlen {
    gap: 1.25rem;
  }
}


/* ── Kennzahlen in der gepinnten Bühne ────────────────────────────────
   Die Zahlen standen bisher als eigene dunkle Sektion hinter dem Artikel.
   Dort liefen sie einmal vorbei — und stießen nach dem Umsortieren direkt an
   das ebenfalls dunkle Prüfstufen-Band, mit sichtbarer Kante zwischen zwei
   verschiedenen Dunkeltönen. Jetzt stehen sie unter dem wechselnden Kapitel
   und bleiben die ganze Zeit im Bild.

   .counts_item bringt aus dem Export eine weiße Füllung mit — auf der dunklen
   Sektion war das die Karte, auf Weiß verschwindet sie. Hier trägt sie
   deshalb eine Kontur statt einer Füllung. */

.lp-pin_zahlen {
  margin-top: 3rem;
}

.lp-pin_zahlen .counts_component {
  flex-wrap: wrap;
}

/* Die Reihe stand mittig auf gut der halben Breite unter einem Textblock, der
   links an der Überschrift beginnt und rechts am Fließtext endet — drei
   verschiedene Kanten übereinander. Ab Desktop füllen die Pillen die Breite
   des Kapitels aus, statt sie zu umgehen. grid-auto-columns statt fester
   Spaltenzahl, weil die Anzahl der Kennzahlen aus dem CMS kommt. */
@media screen and (min-width: 992px) {
  .lp-pin_zahlen .counts_component {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 1.5rem;
    max-width: var(--lp-textbreite);
    margin-inline: auto;
  }

  /* Aus dem Export kommt eine feste Breite von 23.125rem — im Raster hat die
     Pille der Spalte zu folgen, nicht umgekehrt. */
  .lp-pin_zahlen .counts_item {
    width: auto;
    min-width: 0;
  }
}

/* Dieselbe Sprache wie die schwebende Navigation: Glaspille mit teal-Haarlinie
   und Weichzeichner dahinter. Werte bewusst aus .navbar_component übernommen —
   weichen sie ab, liest es sich als zwei verschiedene Bauteile statt als
   Familie. */
.lp-pin_zahlen .counts_item {
  width: auto;
  min-width: 13rem;
  flex: 0 1 15rem;
  padding: 1.5rem 1.75rem;
  -webkit-backdrop-filter: blur(1rem);
  backdrop-filter: blur(1rem);
  border: 1px solid #5c90914d;
  border-radius: 6.25rem;
  background-color: #ffffff0d;
  background-image: none;
  text-align: center;
}

.lp-pin_zahlen .counts_number {
  font-size: 2.2rem;
  color: var(--tk-brand-dark);
}

/* Der Fließtext unter der Zahl darf die Pille nicht auf zwei Zeilen
   aufblähen — sonst kippt die Stadionform in ein Oval. */
.lp-pin_zahlen .counts_item > div:last-child {
  font-size: 0.95rem;
  line-height: 1.3;
  text-wrap: balance;
}

/* Gestaffelter Auftritt. Der versteckte Zustand kommt aus js/reveal.js, damit
   ohne JavaScript drei sichtbare Pillen stehen statt drei leerer Flächen.
   Der Übergang hängt am sichtbaren Zustand, nicht am Ausgangszustand: sonst
   liefe er beim ersten Anstrich einmal rückwärts mit. */
.lp-pin_zahlen .counts_item.zahl-reveal {
  opacity: 0;
  transform: translateY(1.25rem);
}

.lp-pin_zahlen .counts_item.zahl-reveal.is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity 450ms var(--tk-ease-out) var(--d, 0ms),
    transform 450ms var(--tk-ease-out) var(--d, 0ms);
}

/* Unterhalb 992px stapelt der Export die Pillen ohnehin. Zentriert schrumpfte
   jede auf ihre eigene Textbreite — drei verschieden breite Pillen
   untereinander. Gestreckt stehen sie auf einer Kante, wie oben auch. */
@media screen and (max-width: 991px) {
  .lp-pin_zahlen .counts_component {
    flex-direction: column;
    align-items: stretch;
  }

  .lp-pin_zahlen .counts_item {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ── Branchenseite: Prozess und Kundenstimmen ─────────────────────────
   Beide Sektionen sind je Branche optional. Ohne Daten setzt cms.ts die
   Klasse .hide — und weil die Webflow-Regel dafür weit oben im Stylesheet
   steht, wird sie hier bei gleicher Spezifität noch einmal bekräftigt. */
.section_process-heading.hide,
.section_process.hide,
.section_customers.hide {
  display: none;
}

/* Die Sektion erbt sonst den teal Seitenhintergrund, weil sie selbst keinen
   setzt — derselbe Fehler, der die Artikel-Sektion einmal durchscheinen
   liess. */
.section_process-heading,
.section_process,
.section_customers {
  background-color: var(--tk-surface, #fff);
}

.stimmen_component {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  margin-top: 2.5rem;
}

/* Eine einzelne Stimme bleibt das grosse zentrierte Zitat wie auf
   /fuer-unternehmen — als Karte in einer einspaltigen Reihe sähe sie aus,
   als fehlten zwei weitere. */
.stimmen_component.is-single {
  display: block;
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.stimme {
  margin: 0;
  padding: 2rem 2.25rem;
  border: 1px solid #5c90914d;
  border-radius: var(--tk-radius-lg, 1.5rem);
  background-color: #ffffff0d;
  -webkit-backdrop-filter: blur(1rem);
  backdrop-filter: blur(1rem);
}

.stimme.is-single {
  padding: 0;
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.stimme_quelle {
  margin-top: 1.25rem;
  font-size: 0.95rem;
  font-style: normal;
  opacity: 0.75;
}

.stimme_quelle::before {
  content: '— ';
}

.section_customers .services_button {
  margin-top: 3rem;
}

/* ── Branchenseite: Hero-Ergänzungen ──────────────────────────────────── */
.sub-hero_subline {
  max-width: 46rem;
  margin: 1rem auto 0;
  text-align: center;
  text-wrap: balance;
  opacity: 0.8;
}

/* Zweiter Weg neben dem Knopf: wer sofort sprechen will, soll nicht erst ein
   Formular suchen. Bewusst als Textlink, damit er den Hauptknopf nicht
   verwässert — aber mit 44px Zielfläche für den Daumen. */
.sub-hero_tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.75rem;
  padding: 0 0.5rem;
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  color: inherit;
  opacity: 0.75;
}

.sub-hero_tel:hover { opacity: 1; }

/* ── Branchenseite: Referenzen statt Kundenstimmen ────────────────────── */
.section_referenzen.hide,
.section_lp-form.hide,
.section_branche-band.hide,
.section_faq.hide,
.section_lp-cta.hide {
  display: none;
}

.section_referenzen { background-color: var(--tk-surface, #fff); }

.referenz_grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-top: 2.5rem;
}

.referenz {
  padding: 1.75rem;
  border: 1px solid #5c90914d;
  border-radius: var(--tk-radius-lg, 1.5rem);
  background-color: #ffffff0d;
  -webkit-backdrop-filter: blur(1rem);
  backdrop-filter: blur(1rem);
}

.referenz_position {
  margin: 0 0 1rem;
  font-size: 1.15rem;
  line-height: 1.3;
  text-wrap: balance;
}

.referenz_daten { margin: 0; }

.referenz_zeile {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-top: 1px solid #5c909126;
  font-size: 0.9rem;
}

.referenz_zeile dt { opacity: 0.7; }

.referenz_zeile dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.referenz_hinweis {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  text-align: center;
  opacity: 0.6;
}

/* ── Branchenseite: Kurzformular ──────────────────────────────────────── */
.section_lp-form { background-color: var(--tk-surface-muted, #f4f7f7); }

.lp-form_kopf {
  max-width: 40rem;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.lp-form_vorspann {
  margin-top: 0.75rem;
  opacity: 0.75;
  text-wrap: balance;
}

.lp-form { max-width: 44rem; margin: 0 auto; }

@media screen and (min-width: 768px) {
  .lp-form .formular_split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

.lp-form_hinweis {
  margin-top: 1rem;
  font-size: 0.85rem;
  opacity: 0.65;
}

/* Kontaktwege der Beraterkarte: 21px hohe Textlinks sind auf dem Telefon
   nicht zuverlaessig zu treffen (Baymard/WCAG: mindestens 44px). */
.experte_link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 0.25rem;
}

/* Der Abschluss-CTA sitzt auf dem teal Seitengrund; dunkle Schrift darauf
   ist genau beim letzten Handlungsangebot der Seite zu schwach. */
.section_lp-cta,
.section_lp-cta p {
  color: #fff;
}

/* Handlungsangebot im dunklen Band — heller Rahmen statt Vollflaeche, damit
   es den Hauptknopf der Seite nicht kopiert, aber 48px hoch bleibt. */
.branche-band_cta {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 1.75rem;
  padding: 0 1.75rem;
  border: 1px solid #ffffff59;
  border-radius: var(--tk-radius-pill, 6.25rem);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--tk-duration-base) var(--tk-ease);
}

.branche-band_cta:hover { background-color: #ffffff1a; }

@media (prefers-reduced-motion: reduce) {
  .branche-band_cta { transition: none; }
}

/* ── Kurzformular: Feldfarben für hellen Grund ────────────────────────
   Die Webflow-Formularfelder sind durchgehend auf #fff gesetzt — Schrift,
   Beschriftung, Platzhalter und Unterstrich. Auf der Kontaktseite steht das
   Formular auf dunklem Grund, hier auf hellem: weiß auf hellgrau ist
   unsichtbar. Umgekehrte Farbgebung, nur innerhalb von .lp-form. */
.section_lp-form { background-color: #eef3f3; }

.lp-form .form-input,
.lp-form .form-text-area {
  color: var(--tk-brand-dark);
  caret-color: var(--tk-brand);
  border-bottom-color: #1d383c40;
}

.lp-form .form-input::placeholder,
.lp-form .form-text-area::placeholder {
  color: transparent;
}

.lp-form .form-input:hover,
.lp-form .form-text-area:hover {
  border-bottom-color: #1d383c80;
}

.lp-form .form-input:focus,
.lp-form .form-text-area:focus {
  border-bottom-color: var(--tk-brand);
}

.lp-form .form-label,
.lp-form .form-label-area {
  color: var(--tk-brand-dark);
  opacity: 0.85;
}

/* Die Schwebe-Beschriftung stand als <style>-Einbettung nur im Quelltext der
   Kontaktseite. Ohne sie bleibt das Label mittig über dem Feld stehen und
   überlagert die Eingabe, sobald jemand tippt. */
.lp-form .form-input:focus + .form-label,
.lp-form .form-input:not(:placeholder-shown) + .form-label {
  top: 0;
  transform: translateY(-20%);
  opacity: 0.55;
  font-size: 0.85rem;
}

.lp-form .form-text-area:focus + .form-label-area,
.lp-form .form-text-area:not(:placeholder-shown) + .form-label-area {
  top: 0;
  transform: translateY(-50%);
  opacity: 0.55;
  font-size: 0.85rem;
}

/* Zustimmungstext und Datenschutzlink erben sonst das Weiß der Vorlage. */
.lp-form .w-form-label { color: var(--tk-brand-dark); }
.lp-form .w-form-label a { color: inherit; text-decoration: underline; }

.lp-form .checkbox-field { gap: 0.75rem; align-items: center; }

.lp-form input[type="submit"] { align-self: center; }

/* Der Absendeknopf erbte die Streckung des Spalten-Flexbehälters und lief
   über die ganze Formularbreite — ein schwarzer Balken, der schwerer wiegt
   als die Hauptaktion der Seite. */
.lp-form input[type="submit"] {
  align-self: center;
  width: auto;
  min-width: 16rem;
  padding: 1.25rem 3rem;
  font-size: 1rem;
}

/* Abschlussband: lag als durchscheinender Seitengrund da und wirkte dadurch
   losgelöst. Jetzt eigene Fläche, bündig an der Sektion darüber. */
.section_lp-cta {
  background-color: var(--tk-brand);
  margin-top: 0;
}

.section_lp-cta .padding-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.section_lp-cta .margin-bottom.margin-medium {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

/* ── Branchen-Hero: Logoreihe über die Falz holen ─────────────────────
   Gemessen bei 1419×900: der Hero war 768px hoch, die Logoreihe begann bei
   855px. Auf einem Laptop mit ~800px sichtbarer Höhe fiel damit das
   stärkste Vertrauenssignal der Seite unter die Kante — Airbus, Thales und
   Siemens sieht nur, wer ohnehin schon scrollt.

   Gekürzt wird ausschließlich Luft, kein Inhalt. is-lp grenzt es auf die
   Branchenseiten ein; /fuer-unternehmen und /fuer-expertinnen teilen sich
   dieselbe Sektion und bleiben unverändert. */
@media screen and (min-width: 992px) {
  /* Oben bleibt der Abstand: darunter liegt die schwebende Navigationsleiste,
     die bis 128px reicht. Gekürzt wird deshalb unterhalb des Inhalts. */
  .section_sub-hero.is-lp {
    padding-top: 11.5rem;
    padding-bottom: 2rem;
  }

  .section_sub-hero.is-lp .sub-hero_text {
    margin-top: 1.75rem;
  }

  .section_sub-hero.is-lp .sub-hero_bottom {
    margin-top: 2.25rem;
  }

  /* Die Logoreihe soll angeschnitten sichtbar sein, nicht bündig abschließen:
     ein sichtbarer Anschnitt sagt dem Auge, dass es weitergeht. */
  .section_logos {
    padding-top: 1.75rem;
  }
}

/* Referenz ohne Eckdaten: nur die Rolle. Kompakter und mittig, damit vier
   Nennungen als Reihe lesen und nicht als vier halbleere Datenblätter. */
.referenz.is-nur-titel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6rem;
  padding: 1.25rem 1.5rem;
  text-align: center;
}

.referenz.is-nur-titel .referenz_position {
  margin: 0;
  font-size: 1.05rem;
}

/* ── Bento-Kacheln der Startseite: Ziel ───────────────────────────────
   Die sieben Kacheln nannten je eine Branche und verlinkten nichts. Der Link
   liegt über der ganzen Kachel statt um die Überschrift: das Bild füllt die
   Fläche, ein Link nur um das Label ließe den größten Teil tot.

   Beschriftet über aria-label am Anker, damit Vorlesewerkzeuge nicht auf
   einen leeren Link stoßen. */
.bento_link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.bento_first-item,
.bento_secondary-item,
.bento_normal-item {
  position: relative;
}

/* Ohne eigenen Zustand wäre nicht erkennbar, dass die Kachel überhaupt
   klickbar ist — der Zeiger allein reicht auf Touch-Geräten nicht. */
.bento_link:hover ~ .bento_bg-img,
.bento_first-item:has(.bento_link:hover) .bento_bg-img,
.bento_secondary-item:has(.bento_link:hover) .bento_bg-img,
.bento_normal-item:has(.bento_link:hover) .bento_bg-img {
  transform: scale(1.04);
}

.bento_bg-img {
  transition: transform var(--tk-duration-slow) var(--tk-ease);
}

.bento_link:focus-visible {
  outline: none;
  box-shadow: var(--tk-focus-ring);
  border-radius: var(--tk-radius-md);
}

@media (prefers-reduced-motion: reduce) {
  .bento_bg-img {
    transition: none;
  }

  .bento_first-item:has(.bento_link:hover) .bento_bg-img,
  .bento_secondary-item:has(.bento_link:hover) .bento_bg-img,
  .bento_normal-item:has(.bento_link:hover) .bento_bg-img {
    transform: none;
  }
}

/* ── Branchenzeile im Fuß ─────────────────────────────────────────────
   Eine Zeile über die volle Breite, keine fünfte Spalte: .footer_right steht
   auf display:contents und besetzt mit Ressourcen und Karteneinbettung bereits
   die Spalten drei und vier. Ein weiteres Rasterkind fiele in eine zweite
   Zeile und stünde allein unter der Anschrift. */
.footer_branchen {
  grid-column: 1 / -1;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

.footer_branchen_liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.75rem;
}

/* Die Regel aus dem Export setzt jeden Fußlink auf display:block; in der
   waagerechten Zeile muss er sich auf Textbreite zurücknehmen. */
.footer_branchen_liste a {
  display: inline-block;
}

@media screen and (max-width: 640px) {
  .footer_branchen_liste {
    flex-direction: column;
    gap: 0.35rem;
  }
}

/* ── Branchen im Navigationsmenü ──────────────────────────────────────
   Als Aufklappmenü unter „Für Unternehmen" statt als neunter Punkt: die
   Leiste bricht unterhalb von etwa 1200px ohnehin schon um. Ein Pfeil hinter
   dem vorhandenen Label kostet zwölf Pixel, ein eigener Punkt neunzig. */
.navbar_branchen {
  position: relative;
}

.navbar_branchen-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  user-select: none;
}

.navbar_branchen-pfeil {
  flex: none;
  transition: transform var(--tk-duration-base) var(--tk-ease);
}

.navbar_branchen-toggle.w--open .navbar_branchen-pfeil {
  transform: rotate(180deg);
}

.navbar_branchen-toggle:focus-visible {
  outline: none;
  box-shadow: var(--tk-focus-ring);
  border-radius: var(--tk-radius-sm);
}

/* Geschlossen ist die Liste aus dem Fluss genommen statt nur durchsichtig —
   sonst fingen ihre Links Klicks ab, die dem Inhalt darunter gelten. */
.navbar_branchen-liste {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 0;
  z-index: 40;
  display: none;
  min-width: 17rem;
  padding: 0.5rem;
  border: 1px solid var(--tk-neutral-light);
  border-radius: var(--tk-radius-md);
  background-color: var(--tk-white);
  box-shadow: var(--tk-shadow-md);
}

.navbar_branchen-liste.w--open {
  display: block;
}

.navbar_branchen-link {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: var(--tk-radius-sm);
  color: var(--tk-text);
  font-size: 0.95rem;
  line-height: 1.3;
  text-decoration: none;
}

.navbar_branchen-link:hover {
  background-color: var(--tk-surface-muted);
  color: var(--tk-brand-dark);
}

/* Der erste Eintrag führt auf die Übersichtsseite, die der Umschalter selbst
   nicht mehr verlinkt — er ist ein div. Deshalb abgesetzt. */
.navbar_branchen-link:first-child {
  margin-bottom: 0.35rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--tk-neutral-light);
  border-radius: 0;
  font-weight: 600;
}

/* Im aufgeklappten Mobilmenü hat ein schwebendes Feld keinen Platz; dort
   steht die Liste im Fluss. Das Mobilmenü zentriert seine Einträge, also
   zentriert auch dieser Zweig — links ausgerichtet stand „Für Unternehmen"
   als einziger Punkt aus der Reihe. Die Rangfolge trägt die Schriftgröße. */
@media screen and (max-width: 991px) {
  /* inline-flex schrumpft auf Inhaltsbreite — justify-content zentriert dann
     nur innerhalb dieser schmalen Box, nicht die Box im Menü. */
  .navbar_branchen-toggle {
    display: flex;
    justify-content: center;
  }

  .navbar_branchen-liste {
    position: static;
    min-width: 0;
    margin-top: 0.25rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    text-align: center;
  }

  .navbar_branchen-link {
    font-size: 0.9rem;
  }

  .navbar_branchen-link:first-child {
    font-size: 0.95rem;
  }
}

/* Die Regel des Exports blendet den Tablet-Zwilling über .navlink.show-tablet
   aus. Beim Aufklappmenü sitzt show-tablet am Rahmen, .navlink am Umschalter
   darin — die Regel greift nicht mehr, und „Für Unternehmen" stand auf dem
   Desktop zweimal in der Leiste. */
.navbar_branchen.show-tablet {
  display: none;
}

@media screen and (max-width: 991px) {
  .navbar_branchen.show-tablet {
    display: block;
  }

  /* Umgekehrt: die Desktop-Fassung liegt im Menü mit .hide-tablet, das der
     Export am umgebenden nav setzt — daran ändert sich nichts. */
}

/* ── Blogkarten: gleiche Höhe für alle ───────────────────────────────
   Die Karten standen zwischen 544px und 635px hoch nebeneinander, in fünf
   verschiedenen Höhen. Ursache waren zwei bewegliche Blöcke: Titel über zwei
   oder drei Zeilen, Vorschautext über drei bis sieben.

   Die Klasse .cut-off aus dem Export verspricht das Abschneiden im Namen und
   tat nichts — kein Clamp, kein overflow. Hier ist es nachgeholt.

   Titel auf drei Zeilen: das ist die aktuelle Höchstlänge, es wird also heute
   kein Titel gekürzt, und ein längerer bekäme künftig Auslassungspunkte statt
   die Karte zu verschieben. Vorschautext auf drei Zeilen — der längste läuft
   über sieben, was den Rest der Reihe mitzieht.

   min-height neben line-clamp, weil clamp nur nach oben begrenzt: ohne die
   Untergrenze bliebe eine kurze Karte kurz. Erst die em-Fassung als Rückfall,
   dann die zeilengenaue in lh. */

.insights_item .heading-style-h5,
.insights_item .cut-off {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.insights_item .heading-style-h5 {
  -webkit-line-clamp: 3;
  min-height: 4.2em;
  min-height: 3lh;
}

.insights_item .cut-off {
  -webkit-line-clamp: 3;
  min-height: 5.1em;
  min-height: 3lh;
}

/* ── Beitragskopf: Bild auf Texthöhe ─────────────────────────────────
   Der Kopf ist ein zweispaltiges Raster. Das Motiv liegt im Hochformat vor
   und bestimmte damit die Zeilenhöhe: 792px Bild neben 447px Text, darunter
   eine halbe Bildschirmhöhe leerer Spalte.

   height:0 nimmt das Bild aus der Höhenberechnung des Rasters — die Zeile
   richtet sich damit nach dem Text. min-height:100% streckt es anschließend
   auf genau diese Höhe, object-fit beschneidet statt zu verzerren.

   Nur ab Desktop: einspaltig gibt es keine Nachbarspalte, an der sich die
   Höhe bemessen ließe, und das Bild fiele auf null zusammen. */
@media screen and (min-width: 992px) {
  .sub-hero_historie .blog_img {
    height: 0;
    min-height: 100%;
    object-fit: cover;
  }
}

/* Einspaltig bleibt das Hochformat sonst über eine ganze Bildschirmhöhe
   stehen, bevor der Text beginnt. */
@media screen and (max-width: 991px) {
  .sub-hero_historie .blog_img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }
}



/* Was js/footergrid4col-1.0.0.js, which injected exactly these rules. */
.footer_right { display: contents }
.footer_component { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1.3fr; gap: 48px; align-items: start }
.footer_component > .footer_item { display: flex; flex-direction: column; gap: 8px }
.footer_component > .footer_item > h2,
.footer_component > .footer_item > .text-size-large { margin-bottom: 8px; margin-top: 0 }
.footer_component > .footer_item a { display: block; text-decoration: none }
.footer_component > .footer_item .footer_sm-wrapper a { display: inline-block }
.footer_component > [class*="GMB"] { min-height: 240px }
@media (max-width: 991px) { .footer_component { grid-template-columns: 1fr 1fr; gap: 40px } }
@media (max-width: 640px) { .footer_component { grid-template-columns: 1fr; gap: 32px } }