/**
 * Home Neu (Aug '26) — isolated stylesheet.
 * Only enqueued on pages that contain one of the "Neu" blocks (see functions.php).
 * Every rule is scoped under an .hn-* class, plus the shared .grayPill and two
 * body.page-id-13603 rules that are called out below, so nothing here can leak
 * onto existing pages or blocks.
 *
 * Colour and family come from the theme's own tokens wherever they exist
 * (--cDef, --cPink, --cWhite, --cLightGrey, --family-*, --b-radius-*, --f-reg).
 * Only the heading steps had no equivalent — see the comment on .hn-scope.
 *
 * WHY EVERYTHING IS IN PX: the theme drives the root font-size off --f-reg
 * (24px above 993px, 18px below), so 1rem is 24px here, not 16px. Using rem for
 * a value measured off the artboard would silently inflate it by 1.5x, so all
 * sizes and spacings below are px (only the pill radii keep 9999rem, where the
 * unit is irrelevant, and the --b-radius-* tokens are reused as-is).
 *
 * DARK MODE: --cDef / --cWhite / --cLightGrey all flip under
 * body.darkmode__theme, --cGrey and --cPink do NOT. So --cGrey is only ever
 * used for decorative fills that read on both grounds, never as a surface.
 */

/* ---------------------------------------------------------------------------
 * 0. Scoped design tokens
 *    Applied to every section root (class="hn-scope hn-<section>"), so the
 *    values are inherited by the section's children but cannot escape.
 *
 *    The XD file is a 1920px artboard drawn 1:1 to CSS pixels — verified
 *    against the live global footer, which appears in the design: the
 *    newsletter input is 60px tall in both and "Newsletter abonnieren" is
 *    27.6px in both. Its heading steps measure 64 / 48 / 40 / 24px. The theme's
 *    own steps resolve to 134px (--f-3xl) and 58px (--f-2xl) at 1920, so these
 *    four are scoped additions. Body copy still uses the theme's --f-reg value
 *    (24px) and small copy its --f-lg value (20px), expressed here so they
 *    ramp down on mobile the same way the headings do.
 *    Each clamp() reaches its design size at ~1392px viewport width.
 * ------------------------------------------------------------------------- */
.hn-scope {
  --hn-f-h1: clamp(36px, 4.6vw, 64px);
  --hn-f-h2: clamp(30px, 3.45vw, 48px);
  --hn-f-h3: clamp(24px, 2.9vw, 40px);
  --hn-f-h4: clamp(20px, 1.75vw, 24px);
  --hn-f-lead: clamp(18px, 1.9vw, 26px);
  --hn-f-small: clamp(16px, 1.45vw, 20px);
  --hn-f-xs: clamp(15px, 1.3vw, 18px);

  /* The design keeps a 4% page inset (76.8px at 1920, 15px at 375) — wider
     than the theme's nested container-fluid + container-xl (36px at 1920), so
     the sections add the difference themselves. */
  --hn-inset: 4%;

  --hn-shadow: 0 6px 18px rgba(18, 18, 18, 0.07);
  --hn-shadow-strong: 0 10px 30px rgba(18, 18, 18, 0.09);
}

body.darkmode__theme .hn-scope {
  /* A dark ground swallows a black shadow — lift the cards with black-on-black
     depth instead, which still reads as an edge. */
  --hn-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  --hn-shadow-strong: 0 10px 30px rgba(0, 0, 0, 0.65);
}

/* Section shell: the ~100px top/bottom rhythm the design keeps between
   sections, collapsing to 48px on phones. */
.hn-sec {
  padding-block: clamp(48px, 5.5vw, 100px);
}

/* Full-bleed tinted band. The design tints exactly two sections
   ("Kommt das bekannt vor?" and "Wo ran merken Sie…"); the rest sit on the
   page ground. --cLightGrey flips to #181818 in dark mode. */
.hn-band {
  background: var(--cLightGrey);
}

/* Content column. */
.hn-cont {
  width: 100%;
  padding-inline: var(--hn-inset);
}

/* Sections that wrap an existing block still carry the theme's nested
   container-fluid + container-xl (36px inset at 1920). Zero those out so the
   only inset is .hn-cont's 4% and every section lines up on one edge. */
.hn-cont .wp-bootstrap-blocks-container,
.hn-cont .container-fluid,
.hn-cont .container-xl {
  padding-inline: 0;
  max-width: none;
}

/* Inner measures, straight off the artboard. */
.hn-mw-1400 {
  max-width: 1400px;
  margin-inline: auto;
}

.hn-mw-1560 {
  max-width: 1560px;
  margin-inline: auto;
}

.hn-mw-1240 {
  max-width: 1240px;
  margin-inline: auto;
}

/* Shared heading styles (the theme's .h-* helpers carry the wrong sizes). */
.hn-h1,
.hn-h2 {
  font-family: var(--family-headline);
  font-weight: var(--fw-bold);
  line-height: var(--l-height-headline);
  color: var(--cDef);
  margin: 0;
}

.hn-h1 {
  font-size: var(--hn-f-h1);
}

.hn-h2 {
  font-size: var(--hn-f-h2);
}

.hn-lead {
  font-family: var(--family-body);
  font-size: var(--hn-f-lead);
  line-height: var(--l-height-body);
  font-weight: var(--fw-regular);
  color: var(--cDef);
  margin: 0;
}

/* Section head = big headline left, lead paragraph right. The design splits
   7/5: the right column starts at 60% of the content width. */
.hn-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
}

.hn-head__title {
  flex: 1 1 55%;
  min-width: 0;
}

.hn-head__lead {
  flex: 1 1 34%;
  min-width: 0;
  max-width: 720px;
}

@media (max-width: 767px) {
  .hn-head {
    gap: 18px;
  }

  .hn-head__title,
  .hn-head__lead {
    flex: 1 1 100%;
  }
}

/* Utility */
@media (min-width: 993px) {
  .br-lg-show br {
    display: block !important;
  }

  .br-lg-hide br {
    display: none !important;
  }
}

@media (max-width: 992px) {
  .br-lg-none br {
    display: none;
  }
}

/* Small italic label pill — the hero ("Markenkommunikation") and the compare
   columns ("Vorher"/"Nachher") share it. 35px tall on the artboard. */
.grayPill {
  display: inline-flex;
  align-items: center;
  height: 35px;
  padding-inline: 12px;
  border-radius: 9999rem;
  background: var(--cGrey);
  color: var(--cDark);
  font-family: var(--family-alternative);
  font-style: italic;
  font-size: var(--hn-f-small);
  line-height: 1;
  white-space: nowrap;
  margin: 0;
}

/* ---------------------------------------------------------------------------
 * 0b. Page chrome
 *     The design shows no breadcrumb — page 13603 only has one because it is
 *     not (yet) the front page, which is where this content is headed. Scoped
 *     to the page id so no other page is affected.
 * ------------------------------------------------------------------------- */
body.page-id-13603 .bs-breadcrumb__wrap {
  display: none;
}

/* ---------------------------------------------------------------------------
 * 1. Hero
 *    Built from wp:cover + wp-bootstrap-blocks + core blocks in page 13603;
 *    only what the design asks for beyond the block defaults lives here.
 * ------------------------------------------------------------------------- */
.hn-hero__cover {
  position: relative;
}

.hn-hero {
  position: relative;
  text-align: center;
}

/* Department icon row (bs-alle-department-icons.svg). 128px wide in the
   design; the icons are BLACK there, which is the SVG's own fill. */
.hn-hero__icons {
  display: flex;
  justify-content: center;
  margin-bottom: 44px;
}

.hn-hero__icons figure {
  margin: 0;
}

.hn-hero__icons img,
.hn-hero__icons svg {
  width: 128px;
  height: auto;
}

.hn-hero__pill_row {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.hn-hero__title {
  font-family: var(--family-headline);
  font-weight: var(--fw-bold);
  font-size: var(--h-2-5-xl);
  line-height: var(--l-height-headline);
  color: var(--cDef);
  margin: 0;
}

.hn-hero__title_word {
  position: relative;
  display: inline-block;
}
.hn-logos__block {
  justify-content: center;
}

/* The crown sits ON the end of the word in the design: its right edge lines up
   with the last letter and its bottom overlaps the cap line. It measures ~97px
   against a 563px-wide headline, i.e. 1.5em of the 64px type. */
.hn-hero__crown {
  position: absolute;
  right: -3.5rem;
  bottom: -0.5rem;
  width: clamp(54px, 9.05vw, 197px);
  height: auto;
  transform: rotate(6deg);
  pointer-events: none;
}

.hn-hero__sub {
  font-family: var(--family-body) !important;
  font-weight: var(--fw-regular) !important;
  font-size: var(--hn-f-lead) !important;
  line-height: var(--l-height-body) !important;
  color: var(--cDef);
  /* The design breaks this onto two lines over a ~600px measure. */
  max-width: 610px;
  margin: 16px auto 0 !important;
}

.hn-hero__ctas {
  margin-top: 44px;
  margin-bottom: 43px;
}

/* Button rows. Both CTAs come from the theme's own [ctaBs] shortcode
   (getCTABs() in blocks/shortcodes/basicButtons.php): the style token list
   "Wrap btnPrime ArrowRight arrowPill" already emits pill + round arrow cap as
   one .btn__wrapper.prime__wrapper unit, so no hand-rolled arrow markup is
   needed anywhere on this page.
   Deviations from block_cta.css that the design requires: an 18px label
   instead of 24px, a 68px pill/cap, a 9px gap between pill and cap, and a
   solid dark cap with a white glyph (block_cta.css ships a white cap). */
.hn-btnrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.hn-btnrow .btn__wrapper {
  gap: 9px;
}

.hn-btnrow .default__btn_pill {
  font-size: var(--hn-f-xs);
  min-height: 68px;
}

.hn-btnrow .arrow__pill {
  background: var(--cDef);
  border-color: var(--cDef);
  width: 68px;
  height: 68px;
  min-width: 68px;
}

.hn-btnrow .arrow__pill svg * {
  fill: var(--cWhite);
}

/* Trust row (bsTrustRowNeu) — hero and final CTA both use it. */
.hn-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 24px;
  font-family: var(--family-body);
  font-size: 16px;
  line-height: 1.2;
  color: var(--cDef);
}

.hn-trust__item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hn-trust__item > svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: var(--cPink);
}

.hn-trust__stars {
  display: inline-flex;
  gap: 1px;
}

.hn-trust__stars svg {
  width: 15px;
  height: 15px;
  fill: var(--cPink);
}

/* Rotating "JETZT ANFRAGEN // SAG HALLO" sticker. The theme ships no such
   asset, so it is drawn inline in the page (SVG textPath + cross-eyed face);
   only the ring rotates, the face stays upright, as in the design.
   Artboard position: 195px across, centred at 71.5% / 30% of the hero. */
.hn-badge {
  position: absolute;
  left: 71.5%;
  top: 30%;
  transform: translate(-50%, -50%);
  width: clamp(104px, 10.2vw, 196px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cPink);
  display: grid;
  place-items: center;
  z-index: 2;
}

.hn-badge__ring {
  position: absolute;
  inset: 0;
  animation: hn-badge-spin 20s linear infinite;
}

.hn-badge__ring text {
  fill: var(--cDark);
  font-family: var(--family-headline);
  font-weight: var(--fw-bold);
  font-size: 8.6px;
  letter-spacing: 0.02em;
}

.hn-badge__face {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--cDark);
  font-family: var(--family-headline);
  font-weight: var(--fw-bold);
  font-size: clamp(7px, 0.65vw, 12px);
  letter-spacing: 0.04em;
  line-height: 1;
}

.hn-badge__eyes {
  display: flex;
  gap: 1.1em;
}

.hn-badge__eyes svg {
  width: 1.6em;
  height: 1.6em;
  fill: var(--cDark);
}

@keyframes hn-badge-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hn-badge__ring {
    animation: none;
  }
}

@media (max-width: 991px) {
  /* There is no mobile artboard for the sticker. Absolutely positioning it
     would collide with either the fixed header logo or the headline, so it
     drops into the flow and sits centred above the icon row instead. */
  .hn-badge {
    /* relative, not static: the ring is inset:0 inside it. */
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: 0 auto 28px;
    width: clamp(96px, 26vw, 132px);
  }
}

@media (max-width: 767px) {
  .hn-hero__icons {
    margin-bottom: 24px;
  }

  .hn-hero__ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 28px;
    margin-bottom: 28px;
  }

  .hn-hero__ctas .btn__wrapper,
  .hn-hero__ctas .default__btn_pill {
    width: 100%;
  }

  .hn-trust {
    justify-content: flex-start;
    text-align: left;
    gap: 8px 18px;
  }
}

@media (max-width: 576px) {
  .hn-trust__stars svg:not(:first-child) {
    display: none;
  }

  .hn-trust {
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
 * 2. "Kommt das bekannt vor?" compare panel (bsCompareNeu)
 *    Design: tinted band, a 1400px panel on the page ground, cards lifted by
 *    a shadow.
 * ------------------------------------------------------------------------- */
.hn-compare__heading {
  text-align: center;
  font-family: var(--family-headline);
  font-weight: var(--fw-bold);
  line-height: var(--l-height-headline);
  font-size: var(--hn-f-h1);
  color: var(--cDef);
  margin: 0 0 60px;
}

.hn-compare__heading br {
  display: none;
}

@media (max-width: 768px) {
  .hn-compare__heading br {
    display: block;
  }
}

.hn-compare__panel {
  /* background: var(--cWhite);
  border-radius: 30px;
  padding: 60px clamp(20px, 5.2vw, 100px);
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.1vw, 40px); */

  background: var(--cWhite);
  border-radius: 30px;
  padding: 60px clamp(20px, 5.2vw, 100px);
  display: flex;
  align-items: stretch; /* Makes all flex children (cols + arrow) equal height */
  gap: clamp(16px, 2.1vw, 40px);
}

.hn-compare__col {
  /* flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
  min-width: 0; */

  flex: 1;
  display: grid;
  grid-template-rows: auto repeat(3, 1fr); /* label auto, then 3 equal card rows */
  gap: 30px;
  min-width: 0;
}

.hn-compare__label {
  align-self: flex-start;
  font-size: var(--hn-f-xs);
  width: fit-content;
}

/* "Vorher" keeps the neutral pill, "Nachher" turns pink. */
.hn-compare__col--after .hn-compare__label {
  background: var(--cPink);
}

.hn-compare__card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--cWhite);
  border-radius: var(--b-radius-reg);
  padding: 26px 24px;
  box-shadow: var(--hn-shadow);
}

.hn-compare__card p {
  margin: 0;
  font-family: var(--family-body);
  font-size: var(--hn-f-xs);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: var(--cDef);
}

.hn-compare__icon {
  flex: none;
  width: 33px;
  height: 33px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -2px;
}

/* --cGrey / --cPink stay light in dark mode, so the glyph inside stays dark. */
.hn-compare__icon svg {
  width: 12px;
  height: 12px;
  fill: var(--cDark);
}

.hn-compare__col--before .hn-compare__icon {
  background: var(--cGrey);
}

.hn-compare__col--after .hn-compare__icon {
  background: var(--cPink);
}

/* Centre arrow: grey disc, light glyph. */
.hn-compare__arrow {
  flex: none;
  width: 68px;
  height: 68px;
  border-radius: 100%;
  background: var(--cGrey);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.hn-compare__arrow svg {
  width: 22px;
  height: 22px;
  fill: var(--cWhite);
}

@media (min-width: 768px) {
  .hn-compare__arrow {
    transform: translateY(1.25rem);
  }
}

@media (max-width: 767px) {
  .hn-compare__heading {
    margin-bottom: 28px;
  }

  .hn-compare__panel {
    flex-direction: column;
    align-items: stretch;
    padding: 24px 20px;
    gap: 20px;
    border-radius: 20px;
  }

  .hn-compare__col {
    gap: 16px;
  }

  .hn-compare__card {
    padding: 18px 18px;
  }

  /* Two stacked columns -> the arrow points down. */
  .hn-compare__arrow {
    transform: rotate(90deg);
    align-self: center;
    width: 52px;
    height: 52px;
  }
}

/* ---------------------------------------------------------------------------
 * 3. Logos ("Marken, die wir geprägt haben")
 *    Reuses acf/logogridslider as-is. Its real markup is
 *    .logo_grid_slider__wrapper > .entries-group > .entry > a > img (see
 *    blocks/templates/logoGridSlider.php) and its own <style> is inline in the
 *    template, which is why the overrides below need !important.
 *    The logo SVGs in the media library are all authored at 277x156 with their
 *    own internal padding (the design cell is 272x154 — the same 1.78 ratio),
 *    so the cell only has to hold that aspect and let the artwork fill it.
 * ------------------------------------------------------------------------- */
.hn-logos__heading {
  text-align: center;
  font-family: var(--family-headline);
  font-weight: var(--fw-bold);
  line-height: var(--l-height-headline);
  font-size: var(--hn-f-h1);
  color: var(--cDef);
  margin: 0 0 72px;
}

@media (min-width: 993px) {
  .hn-logos .logo_grid_slider__wrapper.desktop .entries-group {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr);
    gap: 21px;
  }

  .hn-logos .logo_grid_slider__wrapper.desktop .entry {
    max-width: none !important;
    flex-basis: auto !important;
    margin-bottom: 0 !important;
  }
}

.hn-logos .entry a {
  /* NB: on this site --b-radius-xl (5px) is the SMALLEST radius token and
     --b-radius-reg (15px) is the LARGEST — the names are swapped in
     gb-custom/blockcss.php. The design's logo cells measure ~10px. */
  border-radius: var(--b-radius-lg) !important;
  border: 1px solid var(--cGrey) !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 277 / 156;
  padding: 0 !important;
  overflow: hidden;
}

.hn-logos .entry a img {
  width: 100% !important;
  height: 100% !important;
  /* The block's mobile CSS caps this at 90%, which would shrink the artwork
     inside the cell it was drawn for. */
  max-width: 100% !important;
  object-fit: contain;
  /* Keep the artwork off the hairline border. */
  padding: 2px;
}

/* Swiper's own stylesheet sets .swiper-slide { height: 100% }, which on the
   mobile logo slider inflates each slide to the viewport height and leaves a
   few hundred px of dead space under the logos. */
.hn-logos .swiper.mobile,
.hn-logos .swiper.mobile .swiper-wrapper,
.hn-logos .swiper.mobile .swiper-slide {
  height: auto !important;
}

@media (max-width: 992px) {
  .hn-logos__heading {
    margin-bottom: 32px;
  }
}

/* ---------------------------------------------------------------------------
 * 4. Cases grid — reuses acf/refqueryblock in "slim" mode.
 *    The layout comes from .refQuery__grid_* in css/bscustom.css (4 columns,
 *    the 1st and 8th tile spanning 2x2), which is exactly the design's
 *    arrangement. The design gutter is 37px (the block's default comes from
 *    tile padding) and the thumbnails are rounded.
 * ------------------------------------------------------------------------- */
.hn-referenzen .refQuery__grid_container {
  --tile-height: 56px;
  --grid-tile-pad: 0;
  grid-gap: 37px;
}

.hn-referenzen .refItem_image_wrapper {
  border-radius: var(--b-radius-reg);
  overflow: hidden;
}

.hn-referenzen .refByService__wrapper__title {
  margin-top: 14px !important;
}

.hn-referenzen .refByService__wrapper__title h3 {
  font-size: var(--hn-f-h4);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  margin: 0;
}

/* The block's own wrapper adds a second container-fluid on top of .hn-cont;
   zero it so the grid lines up with the rest of the page. */
.hn-referenzen .refQuery__wrapper.container-fluid {
  padding-inline: 0;
  padding-bottom: 0 !important;
}

@media (max-width: 576px) {
  .hn-referenzen .refQuery__grid_container {
    grid-gap: 20px;
  }
}

/* ---------------------------------------------------------------------------
 * 5. Cases-archive CTA
 *    Client comment #1 is pinned on the "ALLE ARBEITEN ANZEIGEN" ticker strip:
 *    "Das hier wurde leider von Google geflagged. Muss raus :( Dafür dann aber
 *    einen CTA zum Cases Archiv". The repeated-keyword ticker is therefore
 *    dropped and replaced by a single centred CTA to /arbeiten/.
 * ------------------------------------------------------------------------- */
.hn-casescta {
  margin-top: 56px;
}

/* ---------------------------------------------------------------------------
 * 6. "Wo ran merken Sie…" 01-06 grid (bsPainGridNeu)
 * ------------------------------------------------------------------------- */
.hn-pain__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 37px 40px;
  margin-top: 64px;
}

.hn-pain__card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--cWhite);
  border-radius: var(--b-radius-reg);
  box-shadow: var(--hn-shadow);
  padding: 24px 28px;
  min-height: 136px;
}

/* Oversized grey number. --cDef at 42% keeps it grey in both themes. */
.hn-pain__num {
  flex: none;
  font-family: var(--family-headline);
  font-weight: var(--fw-bold);
  font-size: clamp(44px, 4.9vw, 90px);
  line-height: 0.85;
  color: var(--cDef);
  opacity: 0.42;
  letter-spacing: -0.02em;
}

.hn-pain__text {
  margin: 0;
  font-family: var(--family-body);
  font-size: var(--hn-f-small);
  line-height: 1.45;
  color: var(--cDef);
}

@media (max-width: 767px) {
  .hn-pain__grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 32px;
  }

  .hn-pain__card {
    padding: 18px 20px;
    gap: 16px;
    min-height: 0;
  }
}

/* ---------------------------------------------------------------------------
 * 7. Testimonials (bsTestimonialsNeu)
 *    Headline + CTA on the left, a Swiper of quote cards on the right that
 *    bleeds off the right page edge exactly as in the design. The left column
 *    starts on the 1240px measure (x=314 on the artboard) while the slider
 *    runs past the content edge.
 * ------------------------------------------------------------------------- */
.hn-testi {
  overflow: hidden;
}

.hn-testi__row {
  display: flex;
  align-items: stretch;
  gap: 94px;
  padding-left: max(0px, calc((100% - 1240px) / 2));
}

.hn-testi__left {
  flex: 0 0 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}

.hn-testi__left .hn-btnrow {
  justify-content: flex-start;
}

.hn-testi__right {
  flex: 1 1 auto;
  min-width: 0;
}

/* Let the slides run past the container's right edge, as the design shows.
   overflow:visible alone would also reveal Swiper's loop clones to the LEFT
   (the wrapper is translated negative in loop mode), which covered the
   headline — so clip on the left edge only and leave the other three open. */
.hn-testi .swiper {
  overflow: visible;
  clip-path: inset(-1000px -1000px -1000px 0);
}

.hn-testi__card {
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  background: var(--cWhite);
  border-radius: var(--b-radius-reg);
  box-shadow: var(--hn-shadow-strong);
  padding: 28px;
  box-sizing: border-box;
}

.hn-testi__quote svg {
  width: 26px;
  height: auto;
  fill: var(--cDef);
  margin-bottom: 14px;
}

.hn-testi__text {
  margin: 0;
  font-family: var(--family-body);
  font-size: var(--hn-f-small);
  line-height: 1.45;
  color: var(--cDef);
}

.hn-testi__person {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hn-testi__avatar {
  width: 48px;
  height: 48px;
  border-radius: 100%;
  background: var(--cGrey);
  flex: none;
}

.hn-testi__name {
  font-family: var(--family-headline);
  font-weight: var(--fw-bold);
  font-size: var(--hn-f-small);
  line-height: 1.2;
  color: var(--cDef);
}

.hn-testi__role {
  font-family: var(--family-body);
  font-size: 16px;
  line-height: 1.2;
  color: var(--cDef);
}

/* The design's pagination bullets are ✕ marks with a pink active one — the
   same idiom the theme's logoGridSlider uses for its own bullets. */
.hn-testi__pagination {
  display: flex;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 28px;
  width: fit-content !important;
}

.hn-testi__pagination .swiper-pagination-bullet {
  opacity: 1;
  background: transparent;
  border-radius: 0;
  width: auto;
  height: auto;
  margin: 0 !important;
}

.hn-testi__pagination .swiper-pagination-bullet svg {
  width: 14px;
  height: 14px;
  fill: var(--cDef);
  opacity: 0.25;
  transition: 0.3s all ease;
}

.hn-testi__pagination .swiper-pagination-bullet-active svg {
  fill: var(--cPink);
  opacity: 1;
}

@media (max-width: 1199px) {
  .hn-testi__row {
    gap: 40px;
  }

  .hn-testi__left {
    flex: 0 0 320px;
  }
}

@media (max-width: 991px) {
  .hn-testi__row {
    flex-direction: column;
    gap: 32px;
    padding-left: 0;
  }

  .hn-testi__left {
    flex: 1 1 auto;
    gap: 24px;
  }

  .hn-testi__pagination {
    justify-content: center;
    margin-inline: auto;
  }
}

/* ---------------------------------------------------------------------------
 * 8. "Drei Dinge…" outline cards (bsBenefitsNeu)
 * ------------------------------------------------------------------------- */
.hn-benefits__heading {
  text-align: center;
  max-width: 1100px;
  margin: 0 auto 56px;
}

.hn-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.hn-benefits__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cDef);
  border-radius: 20px;
  padding: clamp(24px, 2.3vw, 44px);
}

.hn-benefits__icon {
  padding-bottom: 62px;
}

.hn-benefits__icon svg {
  width: auto;
  height: 80px;
  /* Pink line art — stroked, not filled. */
  stroke: var(--cPink);
  fill: none;
  stroke-width: 3;
}

.hn-benefits__title {
  font-family: var(--family-headline);
  font-weight: var(--fw-bold);
  font-size: var(--hn-f-h3);
  line-height: var(--l-height-headline);
  color: var(--cDef);
  margin: 0 0 16px;
}

.hn-benefits__text {
  margin: 0;
  font-family: var(--family-body);
  font-size: var(--hn-f-small);
  line-height: 1.5;
  color: var(--cDef);
}

@media (max-width: 991px) {
  .hn-benefits__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .hn-benefits__heading {
    margin-bottom: 28px;
  }

  .hn-benefits__icon {
    padding-bottom: 24px;
  }

  .hn-benefits__icon svg {
    height: 48px;
  }
}

/* ---------------------------------------------------------------------------
 * 9. Process timeline (bsProcessNeu)
 *    Artboard: three columns, cards 01/03/05 above the axis and 02/04/06 below
 *    it, the lower row shifted 160px right, each card joined to its dot by an
 *    L-shaped connector, and the sixth dot pink.
 *    Below lg the axis is dropped and the steps become a simple stack — a
 *    six-node horizontal timeline is unreadable on a phone.
 * ------------------------------------------------------------------------- */
.hn-process__timeline {
  margin-top: 64px;
}

.hn-process__card {
  position: relative;
  background: var(--cWhite);
  border-radius: var(--b-radius-reg);
  box-shadow: var(--hn-shadow);
  padding: 24px 24px 28px;
}

.hn-process__title {
  display: flex;
  align-items: baseline;
  font-family: var(--family-headline);
  font-weight: var(--fw-bold);
  font-size: var(--hn-f-h4);
  line-height: 1.1;
  color: var(--cDef);
  margin: 0 0 10px;
}

.hn-process__num {
  font-family: var(--family-headline);
  font-weight: var(--fw-bold);
  font-size: var(--hn-f-h4);
  line-height: 1;
  color: var(--cPink);
  margin-right: 12px;
}

.hn-process__text {
  margin: 0;
  font-family: var(--family-body);
  font-size: var(--hn-f-small);
  line-height: 1.45;
  color: var(--cDef);
}

@media (min-width: 992px) {
  .hn-process__timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* The middle row is the 84px band the axis runs through. */
    grid-template-rows: auto 84px auto;
    /* The lower row is shifted right by --hn-tl-shift, so the grid itself has
       to give that much back or the last card would run off the page. */
    --hn-tl-shift: clamp(60px, 8.33vw, 160px);
    /* Artboard: the three-column block starts 85px (4.8%) into the content
       column and the shifted lower row ends 74px short of its right edge, which
       puts the cards at 447px wide at 1920. */
    margin-left: 4.8%;
    max-width: calc(95.2% - var(--hn-tl-shift));
    position: relative;
  }

  /* The axis. Extended left to the first dot and right under the shifted row. */
  .hn-process__timeline::before {
    content: '';
    grid-row: 2;
    grid-column: 1 / -1;
    align-self: center;
    height: 1px;
    margin-left: -37px;
    margin-right: calc(var(--hn-tl-shift) * -1);
    background: var(--cDef);
    z-index: 0;
  }

  .hn-process__step {
    grid-row: 1;
    align-self: end;
    /* Leaves the trailing slack the artboard shows inside each column. */
    padding-inline-end: 58px;
  }

  /* position/left shifts the lower row visually without shrinking the cards,
     which margin-left would do. */
  .hn-process__step--down {
    grid-row: 3;
    align-self: start;
    position: relative;
    left: var(--hn-tl-shift);
  }

  .hn-process__step:nth-child(1) {
    grid-column: 1;
  }
  .hn-process__step:nth-child(2) {
    grid-column: 1;
  }
  .hn-process__step:nth-child(3) {
    grid-column: 2;
  }
  .hn-process__step:nth-child(4) {
    grid-column: 2;
  }
  .hn-process__step:nth-child(5) {
    grid-column: 3;
  }
  .hn-process__step:nth-child(6) {
    grid-column: 3;
  }

  /* L-connector: horizontal stub from the card's left edge at mid height, then
     down (or up) to the axis. Drawn as two borders of one empty box. */
  .hn-process__card::before {
    content: '';
    position: absolute;
    left: -37px;
    width: 37px;
    top: 50%;
    bottom: -42px;
    border-left: 1px solid var(--cDef);
    border-top: 1px solid var(--cDef);
    z-index: 0;
  }

  .hn-process__step--down .hn-process__card::before {
    top: -42px;
    bottom: 50%;
    border-top: none;
    border-bottom: 1px solid var(--cDef);
  }

  /* Dot on the axis. */
  .hn-process__card::after {
    content: '';
    position: absolute;
    left: -43px;
    bottom: -48px;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background: var(--cDef);
    z-index: 1;
  }

  .hn-process__step--down .hn-process__card::after {
    bottom: auto;
    top: -48px;
  }

  .hn-process__step--last .hn-process__card::after {
    background: var(--cPink);
  }
}

/* Footnote pill under the timeline. */
.hn-process__note {
  margin: 56px auto 0;
  max-width: 1030px;
  background: var(--cWhite);
  border-radius: var(--b-radius-reg);
  box-shadow: var(--hn-shadow);
  padding: 18px 32px;
  text-align: center;
  font-family: var(--family-body);
  font-size: var(--hn-f-small);
  line-height: 1.4;
  color: var(--cDef);
  font-weight: 400;
}

.hn-process__note strong {
  font-weight: 700;
}

.hn-process__note p {
  margin-bottom: 0;
}

/* Client comment #2 ("Hier würde ich noch einen CTA einbauen für Kontakt") is
   pinned directly below that note. */
.hn-process__cta {
  margin-top: 44px;
}

@media (max-width: 991px) {
  .hn-process__timeline {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 32px;
  }

  .hn-process__note {
    margin-top: 28px;
    padding: 16px 20px;
    text-align: left;
  }

  .hn-process__cta {
    margin-top: 28px;
  }
}

/* ---------------------------------------------------------------------------
 * 10. Team cards (bsTeamCardsNeu)
 * ------------------------------------------------------------------------- */
.hn-team__cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 56px;
  margin-top: 64px;
}

.hn-team__card {
  flex: 0 1 382px;
  background: var(--cWhite);
  border-radius: var(--b-radius-reg);
  box-shadow: var(--hn-shadow-strong);
  overflow: hidden;
}

.hn-team__img {
  display: block;
  width: 100%;
  aspect-ratio: 382 / 380;
  object-fit: cover;
}

.hn-team__body {
  padding: 22px 36px 30px;
}

.hn-team__name {
  font-family: var(--family-headline);
  font-weight: var(--fw-bold);
  font-size: clamp(18px, 2.15vw, 30px);
  line-height: 1.1;
  color: var(--cDef);
  margin: 0 0 2px;
}

.hn-team__role {
  font-family: var(--family-headline);
  font-weight: var(--fw-bold);
  font-size: var(--hn-f-xs);
  line-height: 1.2;
  color: var(--cDef);
}

@media (max-width: 767px) {
  .hn-team__cards {
    gap: 20px;
    margin-top: 32px;
  }

  .hn-team__card {
    flex: 0 1 43%;
  }
  .hn-team__body {
    padding: 12px 8px 16px;
  }
}

/* ---------------------------------------------------------------------------
 * 11. "THE TEAM" — the theme's transparent group shot (attachment 10413, the
 *     same one the Jobs page uses) over an oversized pink wordmark.
 * ------------------------------------------------------------------------- */
.hn-theteam {
  position: relative;
  overflow: hidden;
}

.hn-theteam__inner {
  position: relative;
}

/* Oversized pink wordmark behind the cut-out group shot. 13.6vw lands on the
   artboard's ~260px / 1310px-wide lockup at 1920. */
.hn-theteam__word {
  position: absolute;
  left: 50%;
  /* The artboard puts the cap line of the wordmark just above the team's heads
     and lets them stand in front of the lower ~70% of the letters. */
  bottom: 70%;
  transform: translateX(-50%);
  margin: 0;
  z-index: 0;
  white-space: nowrap;
  font-family: var(--family-headline);
  font-weight: var(--fw-black);
  font-size: clamp(56px, 13.6vw, 260px);
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: var(--cPink);
  pointer-events: none;
}

.hn-theteam__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------------
 * 12. FAQ — reuses acf/basicaccordion (Bootstrap accordion, repeater
 *     "basicAcc" -> baTitle / baContent). Its markup is
 *     .accBasicWrapper > .accordion > .accordion-item > h3.accordion-header
 *     > button.accordion-button + .accordion-body.bgLightGrey.
 *     The design wants white cards with a shadow, a 15px radius and
 *     Bootstrap's own right-hand chevron. (The block always ships its first
 *     item open — js/homeneu/homeneu.js closes it, see the comment there.)
 * ------------------------------------------------------------------------- */
.hn-faq__heading {
  text-align: center;
  margin: 0 auto 56px;
}

.hn-faq .accordion-item {
  border: none !important;
  background: transparent;
  margin-bottom: 28px;
}

.hn-faq .accordion-header {
  font-size: inherit;
  margin: 0;
}

.hn-faq .accordion-button {
  min-height: 96px;
  padding: 24px 36px;
  background: var(--cWhite) !important;
  color: var(--cDef) !important;
  border: none !important;
  border-radius: var(--b-radius-reg) !important;
  box-shadow: var(--hn-shadow) !important;
  font-family: var(--family-headline);
  font-weight: var(--fw-bold);
  font-size: var(--hn-f-h4);
  line-height: 1.25;
  text-align: left;
}

.hn-faq .accordion-button:focus {
  box-shadow: var(--hn-shadow) !important;
}

/* Bootstrap paints its chevron as a background-image with a hardcoded colour;
   redraw it through a mask so it follows --cDef in dark mode. */
.hn-faq .accordion-button::after {
  width: 28px;
  height: 28px;
  background-image: none;
  background-color: var(--cDef);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E")
    center / 28px 28px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E")
    center / 28px 28px no-repeat;
  flex: none;
}

.hn-faq .accordion-body {
  background: var(--cWhite) !important;
  border-bottom-left-radius: var(--b-radius-reg);
  border-bottom-right-radius: var(--b-radius-reg);
  padding: 36px 36px 28px !important;
  font-family: var(--family-body);
  font-size: var(--hn-f-small);
  line-height: 1.5;
  color: var(--cDef);
}

.hn-faq .accordion-body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .hn-faq__heading {
    margin-bottom: 28px;
  }

  .hn-faq .accordion-item {
    margin-bottom: 14px;
  }

  .hn-faq .accordion-button {
    min-height: 0;
    padding: 18px 20px;
  }

  .hn-faq .accordion-body {
    padding: 0 20px 20px !important;
  }
}

/* ---------------------------------------------------------------------------
 * 13. Final CTA ("Ihr nächster Schritt : das Erstgespräch")
 * ------------------------------------------------------------------------- */
.hn-finalcta {
  text-align: center;
}

.hn-finalcta__heading {
  margin: 0 auto;
}

/* Second line is pink in the design. */
.hn-finalcta__accent {
  color: var(--cPink);
}

.hn-finalcta__lead {
  max-width: 600px;
  margin: 28px auto 0;
}

.hn-finalcta .hn-btnrow {
  margin: 40px 0 32px;
}

@media (max-width: 767px) {
  .hn-finalcta .hn-btnrow {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .hn-finalcta .hn-btnrow .btn__wrapper,
  .hn-finalcta .hn-btnrow .default__btn_pill {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
 * 13. "Jetzt anfragen" sticker (global markup, block-local styling)
 *
 *     header.php injects .bsHero__contact_us on every page, but its sizing
 *     lives ONLY in the inline <style> of blocks/templates/heroImageSlider.php
 *     — the block the current homepage hero uses. This page does not use that
 *     block, so without the rules below the sticker renders at its intrinsic
 *     size (~1190px) and inflates the hero to ~2810px instead of one screen.
 *
 *     Copied verbatim from heroImageSlider.php:86-121 rather than edited there,
 *     so that block keeps behaving exactly as it does today. These selectors
 *     are deliberately unscoped (they have to match the injected markup), which
 *     is safe because this stylesheet is only enqueued on this page.
 * ------------------------------------------------------------------------- */
.bsHero__contact_us {
  transform: translate(-20vh, 20vh);
}

.bsHero__contact_us__link {
  width: 250px;
  position: relative;
  padding: 0.5rem;
  border-radius: 50%;
  background: var(--cPink);
  pointer-events: all;
}

.bsHero__contact_us__img_outer {
  width: 100%;
  animation: rotate360 20s linear infinite;
  transform: rotate(0deg);
}

@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.bsHero__contact_us__img_inner {
  position: absolute;
  left: 49%;
  top: 55%;
  width: 60%;
  transform: translate(-50%, -50%);
}

.bsHero__bottom_content {
  display: flex;
  align-items: flex-end;
  margin-bottom: 5vh;
  margin-top: 0;
  justify-content: space-between;
}
.hn-btnrow .default__btn_pill:visited {
  color: var(--cDef);
}

.darkmode__theme .hn-process__card,
.darkmode__theme .hn-compare__card,
.darkmode__theme .hn-benefits__card,
/* .darkmode__theme .hn-pain__card, */
.darkmode__theme .hn-testi__card,
.darkmode__theme .hn-team__card,
.darkmode__theme .hn-faq .accordion-button.collapsed {
  border: 1px solid var(--cGrey) !important;
}
.darkmode__theme .hn-hero__icons img,
.hn-hero__icons svg {
  filter: brightness(0) invert(1);
}

@media (max-width: 576px) {
  .logo_grid_slider__wrapper .entries-group {
    gap: 12px !important;
  }
  .logo_grid_slider__wrapper.mobile .entries-group .entry {
    max-width: calc(50% - 6px) !important;
    flex-basis: calc(50% - 6px) !important;
    margin-bottom: 0 !important;
  }

  .bsHero__contact_us {
    display: none;
  }
  .hn-hero__title {
    font-size: clamp(var(--f-3xl-min), var(--f-3xl-ideal), var(--f-3xl-max));
  }
  .hn-hero__ctas.hn-btnrow .btn__arrow.arrow__pill {
    display: none;
  }
  .hn-hero__ctas.hn-btnrow a {
    font-size: clamp(var(--f-md-min), var(--f-md-ideal), var(--f-md-max));
  }
  .hn-pain__card {
    padding: 18px 10px 18px 0;
    gap: 16px;
    min-height: 0;
  }
  .hn-pain__num {
    width: 60px;
    display: flex;
    align-items: center;
  }
  .hn-pain__card:nth-child(2) {
    order: 2;
  }
  .hn-pain__card:nth-child(4) {
    order: 3;
  }
  .hn-pain__card:nth-child(6) {
    order: 4;
  }
}