/*!
 * Inverta — bundled stylesheet.
 * Generated by tools/build-css.php from cta.css.
 * Do not edit: change the module under assets/css/ and rebuild.
 * Modules inlined: 1
 */
/* =============================================================
   Inverta — Section: Call to Action

   Four finished layouts behind one markup tree. The renderer emits the
   same nodes every time and puts a variant class on the section; the
   grid, the surface and the type scale are decided here. That is what
   lets somebody switch from a glass capsule to a full-bleed banner
   without a single option being re-entered.

     minimal   hairline-ruled editorial row, no box at all
     capsule   floating glass panel, the site's own material
     split     text beside a picture, inside the capsule
     banner    full-bleed image or video behind large type

   Type, colour, motion and rounding all come from the global tokens, so
   a style preset moves this section with the rest of the site.
   ============================================================= */

.vf-section-cta {
  /* The gap to the capsule above, from "Abstand zur vorherigen Sektion". */
  margin-block-start: var(--vf-cta-mt, 0px);
  --vf-cta-bg: var(--inv-primary, #111827);
  /* Weiss war eine Zahl, die Flaeche darunter aber --inv-primary. Eine
     Vorlage mit heller Primaerfarbe schrieb damit Weiss auf Hell: unter
     "Dunkel" gemessene 1,51:1 am 08.10.2026. --inv-primary-fg ist die
     Tinte, die zur Primaerfarbe gehoert, und im Auslieferungszustand
     genau Weiss. */
  --vf-cta-fg: var(--vf-cta-fg-set, var(--inv-primary-fg, #ffffff));
  --vf-cta-accent: var(--inv-accent, #24a9b3);
  --vf-cta-radius: var(--inv-radius-capsule, 20px);
  --vf-cta-btn-radius: var(--inv-radius-sm, 10px);
  --vf-cta-title-size: 48px;
  --vf-cta-align: center;
  --vf-cta-dur: var(--inv-motion, 400ms);
  --vf-cta-ease: var(--inv-ease, cubic-bezier(.22, .61, .36, 1));
  /* Set by the renderer from the alignment option; the grid needs a
     flex value, not a text-align keyword. */
  --vf-cta-justify: center;

  position: relative;
  isolation: isolate;
  color: var(--vf-cta-fg);
  padding-block: var(--vf-cta-pt, var(--inv-section-rhythm, 80px)) var(--vf-cta-pb, var(--inv-section-rhythm, 80px));
  padding-inline: var(--inv-section-px, var(--inv-edge, 10px));
}

/* -------------------------------------------------------------
   Surface
   ------------------------------------------------------------- */
.vf-cta-capsule {
  position: relative;
  /* Full width, like the bento, services and about capsules — the section's
     own "Maximale Breite" option narrows it, and 0 means full. Capping at
     --inv-container here made that option read as broken: the slider sat at 0
     and the section was still 1280px wide, a good deal narrower than every
     capsule above it. */
  max-width: min(var(--vf-cta-max-w, 100%), var(--inv-shell-max, 100%));
  margin-inline: auto;
  padding: clamp(32px, 5vw, 76px) var(--inv-gutter, clamp(24px, 4vw, 64px));
  border-radius: var(--vf-cta-radius);
  background: var(--vf-cta-bg);
  overflow: hidden;
  isolation: isolate;
}

/* The grain, at a fraction of its old weight.
 *
 * At half opacity over a filled panel it was the loudest thing in the
 * section — texture competing with the sentence it sits behind. It is here
 * to stop the panel reading as printed ink, nothing more. */
.vf-cta-capsule::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Every layer inside the capsule sits at a positive z-index on purpose.
   A negative one paints behind the parent's own background, which hid the
   glow under the capsule fill in every variant except the transparent one. */
/* A single soft lift in one corner, clipped by the capsule. Two competing
   blooms and a hard edge is what a decoration looks like; one that you only
   notice when it is gone is what a surface looks like. */
.vf-cta-glow {
  position: absolute;
  z-index: 1;
  width: 54%;
  aspect-ratio: 1;
  right: -14%;
  top: -42%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--vf-cta-accent) 16%, transparent) 0%,
    transparent 66%);
  /* Kein filter: blur() — Safari rechnet ihn auf dieser Fläche beim Scrollen
     jedes Bild neu (1.7.23). Der Verlauf läuft ohnehin weich aus. */
}

/* -------------------------------------------------------------
   Background media — used by banner, available to every variant
   ------------------------------------------------------------- */
.vf-cta-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}

.vf-cta-bg-layer img,
.vf-cta-bg-layer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vf-cta-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--vf-cta-overlay-c, #0f172a) 82%, transparent) 0%,
      color-mix(in srgb, var(--vf-cta-overlay-c, #0f172a) 40%, transparent) 100%);
  opacity: calc(var(--vf-cta-overlay-o, 62) / 100);
}

/* -------------------------------------------------------------
   Content
   ------------------------------------------------------------- */
.vf-cta-grid {
  position: relative;
  z-index: 3;
  display: grid;
  gap: clamp(28px, 4vw, 56px);
}

.vf-cta-body {
  display: flex;
  flex-direction: column;
  align-items: var(--vf-cta-justify);
  text-align: var(--vf-cta-align);
  gap: 0;
  min-width: 0;
}

.vf-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.1rem;
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: var(--vf-cta-eyebrow-size, .7rem);
  font-weight: var(--vf-cta-eyebrow-weight, 600);
  letter-spacing: .16em;
  text-transform: uppercase;
  /* Akzentschrift auf gefuellter Flaeche — siehe die Regel unter dem Titel. */
  color: var(--inv-accent-on-primary, var(--vf-cta-accent));
}

/* No rule beside the eyebrow. Letter-spacing and colour already separate a
   three-word label from the headline under it. */

.vf-cta-title {
  margin: 0;
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: clamp(1.8rem, 4.8vw, var(--vf-cta-title-size));
  font-weight: var(--vf-cta-title-weight, 700);
  line-height: 1.06;
  letter-spacing: -.026em;
  color: var(--vf-cta-fg);
  text-wrap: balance;
  max-width: var(--vf-cta-title-max-w, 20ch);
}

/* One word carried in the accent colour, so the headline has a focal
   point without a second typeface.

   Die Farbe ist nicht einfach der Akzent, sondern „Akzentfarbe als Schrift auf
   der Primaerflaeche“ mit dem Akzent als Rueckfall. Grund: die Flaeche ist die
   Primaerfarbe, und ob ein Akzent darauf lesbar ist, weiss keine Regel — in
   zwei der mitgelieferten Paletten ist er eine hellere Tonart derselben Farbe
   und kommt auf 2,05:1 beziehungsweise 1,82:1. Gemessen am 10.10.2026;
   tools/tests/kontrast.php rechnet es seitdem bei jedem Lauf nach. Leer
   gelassen aendert der neue Wert nichts: dann steht hier weiter der Akzent. */
.vf-cta-title em {
  font-style: normal;
  color: var(--inv-accent-on-primary, var(--vf-cta-accent));
}

.vf-cta-desc {
  margin: 1.15rem 0 0;
  max-width: var(--vf-cta-desc-max-w, 52ch);
  font-size: var(--vf-cta-desc-size, clamp(.95rem, 1.15vw, 1.06rem));
  font-weight: var(--vf-cta-desc-weight, 400);
  line-height: 1.62;
  color: color-mix(in srgb, var(--vf-cta-fg) 78%, transparent);
}

.vf-cta-desc p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------
   Actions

   The buttons are the site's buttons. Rounding, the lift, the single pass of
   light and the arrow's nudge all live in components/buttons.css; what is
   left here is which colour each one is, and where the row sits.

   The section used to grow its own button with its own sheen and its own
   lift — which is how a site ends up with four buttons that all behave
   slightly differently depending on which block you are standing in.
   ------------------------------------------------------------- */
.vf-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--vf-cta-justify);
  gap: .35rem 1.4rem;
  margin-top: clamp(1.5rem, 2.4vw, 2.2rem);
}

.vf-cta-btn {
  border-radius: var(--vf-cta-btn-radius);
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: var(--vf-cta-btn-size, .9rem);
  font-weight: var(--vf-cta-btn-weight, 600);
  letter-spacing: -.005em;
  text-decoration: none;
}

.vf-cta-btn--primary {
  background: var(--vf-cta-accent);
  color: var(--vf-cta-btn-ink, var(--inv-accent-fg, var(--inv-fg, #0f172a)));
  padding: .9rem 1.5rem;
}

/* The secondary action is a text link, not a second box. Two filled buttons
   side by side ask the reader to choose before they have read anything. */
.vf-cta-btn--ghost {
  color: var(--vf-cta-fg);
  padding: .9rem 0;
}

.vf-cta-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* -------------------------------------------------------------
   Variant: split — text beside a picture
   ------------------------------------------------------------- */
.vf-cta--split .vf-cta-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
}

.vf-cta--split .vf-cta-title { max-width: 18ch; }

/* Only the split layout shows the picture. The figure itself is always in the
   document so the Customizer can patch the badge in place and anchor a pencil
   on it; hiding it here costs nothing and keeps every variant switch instant. */
.vf-cta-media { display: none; }

.vf-cta--split .vf-cta-media { display: block; }

.vf-cta-media {
  position: relative;
  border-radius: calc(var(--vf-cta-radius) * .75);
  overflow: hidden;
  aspect-ratio: var(--vf-cta-media-ratio, 4 / 3);
  background: color-mix(in srgb, var(--vf-cta-fg) 8%, transparent);
}

.vf-cta-media img,
.vf-cta-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform calc(var(--vf-cta-dur) * 3) var(--vf-cta-ease);
}

.vf-cta-capsule:hover .vf-cta-media img { transform: scale(1.06); }

/* A floating figure over the picture — turnaround time, rating, count. */
.vf-cta-badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .7rem 1rem;
  border-radius: calc(var(--vf-cta-btn-radius) * 1.2);
  background: color-mix(in srgb, var(--vf-cta-bg) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--vf-cta-fg) 18%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  text-align: start;
}

.vf-cta-badge__value {
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--vf-cta-accent);
  font-variant-numeric: tabular-nums;
}

.vf-cta-badge__label {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--vf-cta-fg) 66%, transparent);
}

/* -------------------------------------------------------------
   Variant: banner — full-bleed media, type on top
   ------------------------------------------------------------- */
.vf-cta--banner .vf-cta-capsule {
  background: transparent;
  min-height: var(--vf-cta-banner-h, clamp(360px, 52vh, 560px));
  display: grid;
  align-items: center;
  padding-block: clamp(56px, 8vw, 108px);
}

.vf-cta--banner .vf-cta-capsule::after { opacity: .35; }

.vf-cta--banner .vf-cta-glow { display: none; }

.vf-cta--banner .vf-cta-title { --vf-cta-title-size: 68px; max-width: 22ch; }

/* -------------------------------------------------------------
   Variant: minimal — hairlines, no box
   ------------------------------------------------------------- */
.vf-cta--minimal .vf-cta-capsule {
  background: transparent;
  border-radius: 0;
  padding-inline: 0;
  padding-block: clamp(28px, 4vw, 52px);
  border-block: 1px solid color-mix(in srgb, var(--vf-cta-fg) 18%, transparent);
  overflow: visible;
}

.vf-cta--minimal .vf-cta-capsule::after,
.vf-cta--minimal .vf-cta-glow { display: none; }

.vf-cta--minimal .vf-cta-grid {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
}

/* No panel means no white ink. The hairlines, the rules under the ghost
   button and the muted description are all mixed from this one colour, so the
   whole variant changes register with it. A colour picked in the Customizer
   still wins — it sets --vf-cta-fg-set, which both fallbacks read first. */
.vf-cta--minimal { --vf-cta-fg: var(--vf-cta-fg-set, var(--inv-fg, #0f172a)); }

.vf-cta--minimal .vf-cta-title { --vf-cta-title-size: 40px; max-width: 26ch; }

.vf-cta--minimal .vf-cta-actions { margin-top: 0; }

.vf-cta--minimal .vf-cta-desc { margin-top: .8rem; }

/* The minimal variant carries its action as a rule that draws itself. */
.vf-cta--minimal .vf-cta-btn--ghost {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: .4rem 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 -1px 0 0 color-mix(in srgb, var(--vf-cta-fg) 30%, transparent);
}

.vf-cta--minimal .vf-cta-btn--ghost:hover {
  --shift: 0px;
  box-shadow: inset 0 -1px 0 0 var(--vf-cta-accent);
  color: var(--vf-cta-accent);
}

/* -------------------------------------------------------------
   Alignment — left and right pull the whole block, not just the text
   ------------------------------------------------------------- */
.vf-cta-align-left   { --vf-cta-align: left;   --vf-cta-justify: flex-start; }

.vf-cta-align-center { --vf-cta-align: center; --vf-cta-justify: center; }

.vf-cta-align-right  { --vf-cta-align: right;  --vf-cta-justify: flex-end; }

/* -------------------------------------------------------------
   Responsive
   ------------------------------------------------------------- */
/* One set of breakpoints for the whole page.
 *
 * The bento, and the sections built around it, change at 991px and 767px. This
 * section used to change at its own width, so on a tablet you could be looking
 * at one section already stacked and the next still in two columns. */
@media (max-width: 991px) {
.vf-cta--split .vf-cta-grid,
.vf-cta--minimal .vf-cta-grid {
    grid-template-columns: minmax(0, 1fr);
  }

.vf-cta--split .vf-cta-title,
.vf-cta--minimal .vf-cta-title { max-width: 24ch; }

/* The picture leads on a phone: it is the thing that is scrolled past. */
  .vf-cta--split .vf-cta-media { order: -1; aspect-ratio: 16 / 10; }
}

@media (max-width: 767px) {
.vf-cta-capsule { padding-inline: var(--inv-gutter, 20px); }

.vf-cta-actions { flex-direction: column; align-items: stretch; }

.vf-cta-btn { justify-content: center; }

.vf-cta-trust { gap: .45rem 1rem; }
}

@media (max-width: 420px) {
  .vf-cta-capsule { padding: 22px 14px; }

  .vf-cta-title { --vf-cta-title-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
.vf-cta-marquee__track { animation: none; }

.vf-cta-btn--primary::after { display: none; }
}

/* The section's own button ink, handed to the shared button styles. Unset it
   resolves to nothing and the chosen style keeps its own colour. */
.vf-section-cta {
  --inv-btn-ink: var(--vf-cta-btn-ink);
}