/*
 Theme Name:   BMH Theme
 Theme URI:    https://www.bmh-hessen.de/
 Description:  Child Theme für Bricks.
 Author:       Twentyone Brands
 Author URI:   https://www.twentyone-brands.com/
 Template:     bricks
 Version:      1.1
 Text Domain:  bmh
*/

/**
 * @license
 *
 * Font Family: Space Grotesk
 * Designed by: Florian Karsten
 * URL: https://github.com/floriankarsten/space-grotesk
 * License: SIL Open Font License v1.1
 * Full license text included in ./webfonts/space-grotesk/OFL.txt
 */

@font-face {
  font-family: 'Space Grotesk';
  src: url('./webfonts/space-grotesk/SpaceGrotesk%5Bwght%5D.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-feature-settings: "ss01", "ss04", "ss05";
  font-display: swap;
}

/**
 * @license
 *
 * Font Family: Clash Display
 * Designed by: Indian Type Foundry
 * URL: https://www.fontshare.com/fonts/clash-display
 * © 2026 Indian Type Foundry
 *
 * Clash Display Variable (Variable font)
 */

@font-face {
  font-family: 'Clash Display';
  src: url('./webfonts/clash-display/ClashDisplay-Variable.woff2') format('woff2');
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}


/* ------------------------- Scaling System ------------------------- */

:root {
  --size-unit: 18; /* ursprünglich 20 */
  --size-container-ideal: 1920;
  --size-container-min: 992px;
  --size-container-max: 2560px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));

  --size-font-fluid: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
	
  --font-family-a: 'Clash Display', 'Roboto', system-ui, sans-serif;
  --font-family-b: 'Space Grotesk', 'Roboto', system-ui, sans-serif;	
	
  --mask-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14 19L21 12L14 5' stroke='currentColor' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M21 12H2' stroke='currentColor' stroke-width='2' stroke-miterlimit='10'/%3E%3C/svg%3E") center bottom / contain no-repeat;	
}


@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 991; /*834*/
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 767; /*550*/
    --size-container-min: 479px;
    --size-container-max: 767px;
  }
}

@media screen and (max-width: 478px) {
  :root {
    --size-container-ideal: 478; /*390*/
    --size-container-min: 320px;
    --size-container-max: 478px;
  }
}

:root {
	--h1: 8.35em;
	--h2: 3.5em;
    --h3: /*2.5em;*/ 4.25em;
	--h4: /*2em;*/ 2.5em;
	--h5: 1.75em;
	--h6: 1.5em;
}

@media screen and (max-width: 767px) {
  :root {
    --h1: 4em;
    --h2: 2.75em;
    --h3: 2em;
    --h4: 1.75em;
    --h5: 1.25em;
    --h6: 1.1em;
  }
}

@media screen and (max-width: 478px) {
  :root {
    --h1: 3.25em;
    --h2: 2.25em;
    --h3: 1.75em;
    --h4: 1.5em;
    --h5: 1.1em;
    --h6: 1em;
  }
}

/* Framework */

[id]{
  /*scroll-margin-top: calc(var(--offset-header) * -0.1375);*/
  scroll-margin-top: -1em;
}

html, body {
  scrollbar-gutter: stable;
}

/*
html {
  scroll-behavior: smooth;
}*/

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Lenis */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* Accessibility */

body.bricks-is-frontend :focus:not(:focus-visible), .btn-arrow-shift:focus-visible {
  outline: none !important;
}

body.bricks-is-frontend :focus-visible{
  outline: solid 1px var(--primary);
  outline-offset: 5px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(0 100% 100% 0);
  white-space: nowrap;
  border-width: 0;
}

/* Normalizer */

ul[class],
ol[class] {
  padding: 0;
  margin: 0;
  list-style: none;
}

ul.wp-block-list,
ol.wp-block-list {
  padding-left: 1em;
  margin: inherit;
  list-style: inherit;
}

address {
  font-style: normal;
}

/*
.bricks-nav-menu {
  flex-wrap: wrap;
  justify-content: center;
}*/

/* Text */

::selection {
	background: rgba(0,0,0,0.4);
	color: #000;
}

/* Test für früheres laden? */
html {
  font-family: var(--font-family-b)
}
/* */

body {
  font-size: var(--size-font);
  font-family: var(--font-family-a);
  color: var(--text-color);
  background: var(--white);
}

:where(p, .brxe-text-basic) {
  line-height: var(--text-line-height);
  font-weight: var(--text-font-weight);
  letter-spacing: var(--letter-spacing);
  max-width: 65ch;
}

.brxe-text :where(p, ul, ol) {
  line-height: var(--text-line-height);
}

strong {
  font-weight: 600;
}

h1, h2, h3, h4, h5, h6{
  line-height: var(--heading-line-height);
  color: var(--heading-color);
  font-weight: var(--heading-font-weight);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing);
}

h1 { font-size: var(--h1); }
h2 { font-size: var(--h2);
	 text-decoration: underline;
}
h2.is--thin {
	font-size: var(--h3);
	font-weight: 300;
	text-decoration: none;
}
h3 { font-size: var(--h2);
	text-decoration: underline;
}
h3.is--thin {
	font-size: var(--h3);
	font-weight: 300;
	text-decoration: none;
}
h4 { font-size: var(--h4); } /*vorherh3*/
h5 { font-size: var(--h5); }
h6 { font-size: var(--h6); }

.inverse, .inverse :where(h1, h2, h3, h4, h5, h6, a) {
  color: var(--white);
}

/* Containers */

:where(section:not(section section)){
  padding: var(--padding-section);
}

@media screen and (max-width: 767px) {
  :where(section:not(section section)){
    padding-top: var(--space-m);
    padding-bottom: var(--space-m);
  }	
}

:where(.brxe-container) > .brxe-block, :where(.brxe-container){
  gap: var(--content-gap);
}

/* Grid Util */

.grid {
  display: grid;
  gap: var(--grid-gap-l);
}

.grid-1 { grid-template-columns: var(--grid-1); }
.grid-2 { grid-template-columns: var(--grid-2); }
.grid-3 { grid-template-columns: var(--grid-3); }
.grid-4 { grid-template-columns: var(--grid-4); }
.grid-5 { grid-template-columns: var(--grid-5); }

.grid-1-2 { grid-template-columns: var(--grid-1-2); }
.grid-1-3 { grid-template-columns: var(--grid-1-3); }
.grid-1-4 { grid-template-columns: var(--grid-1-4); }
.grid-2-1 { grid-template-columns: var(--grid-2-1); }
.grid-2-3 { grid-template-columns: var(--grid-2-3); }
.grid-2-4 { grid-template-columns: var(--grid-2-4); }
.grid-3-1 { grid-template-columns: var(--grid-3-1); }
.grid-3-2 { grid-template-columns: var(--grid-3-2); }
.grid-3-4 { grid-template-columns: var(--grid-3-4); }
.grid-4-1 { grid-template-columns: var(--grid-4-1); }
.grid-4-2 { grid-template-columns: var(--grid-4-2); }
.grid-4-3 { grid-template-columns: var(--grid-4-3); }

@media (max-width: 767px) {
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .grid-1-2,
  .grid-1-3,
  .grid-1-4,
  .grid-2-1,
  .grid-2-3,
  .grid-2-4,
  .grid-3-1,
  .grid-3-2,
  .grid-3-4,
  .grid-4-1,
  .grid-4-2,
  .grid-4-3 {
    grid-template-columns: 1fr;
  }
}

.grid.grid-2:has(> hgroup:first-child) > :nth-child(2), .grid.grid-3:has(> hgroup:first-child) > :nth-child(2), .grid.grid-4:has(> hgroup:first-child) > :nth-child(2) {
  padding-top: 2.25em;
}

@media (max-width: 767px) {
	.grid.grid-2:has(> hgroup:first-child) > :nth-child(2), .grid.grid-3:has(> hgroup:first-child) > :nth-child(2), .grid.grid-4:has(> hgroup:first-child) > :nth-child(2) {
	  padding-top: unset;
	}
  }
}	

.col-1 { grid-column: 1; }
.col-2 { grid-column: 2; }
.col-3 { grid-column: 3; }
.col-4 { grid-column: 4; }

.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }

.g-align-end { align-items: end; }
.g-align-start { align-items: start; }
.g-align-center { align-items: center; }

/* Aspect Ratio Util */

.aspect-1-1 { aspect-ratio: 1 / 1; }
.aspect-4-3 { aspect-ratio: 4 / 3; }
.aspect-3-4 { aspect-ratio: 3 / 4; }
.aspect-3-2 { aspect-ratio: 3 / 2; }
.aspect-2-3 { aspect-ratio: 2 / 3; }
.aspect-4-5 { aspect-ratio: 4 / 5; }
.aspect-5-4 { aspect-ratio: 5 / 4; }
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-21-9 { aspect-ratio: 21 / 9; }

/* fix overflow */

.bricks-is-frontend header{
  max-width: 100vw;
}

body.bricks-is-frontend {
  overflow-x: clip;
}

.brxe-section {
  overflow-x: hidden;
  overflow-x: clip;
}

body.bricks-is-frontend.no-scroll{
  overflow: hidden !important;
}

/* Custom link */

body .brxe-post-content a:not([class]), body .brxe-text a:not([class]), body label a{
  text-decoration-line: underline;
  text-decoration-color: var(--primary);
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
  transition: color .3s ease, text-decoration-color .3s ease;
}

body .brxe-post-content a:hover:not([class]), body .brxe-text a:hover:not([class]), body label a:hover, body label a:focus-visible{
	color: var(--primary);
}

/* Global Parallax */

.parallax-media {
  position: relative;	
  aspect-ratio: 1/1;
  width: auto;
  /*height: 40em;*/
  min-width: 0;	
  border-radius: var(--radius-main);
  overflow: clip;
}

.parallax-media__bg {
  z-index: 0;
  width: 100%;
  height: 120%;
  position: absolute;
}

.parallax-media__img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* Section Divider */

.has--divider {
  position: relative;
}

.has--divider::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--container-width-m);
  height: 1px;
  transform: translateX(-50%);
  background-color: #0000001a;
}


/* ------------------------- Button: Arrow Shift ------------------------- */

:root {
  --btn-arrow-shift-color: var(--black);
  --btn-arrow-shift-bg: var(--white);
  --btn-arrow-shift-icon-color: var(--black);
  --btn-arrow-shift-icon-bg: var(--primary);
  --btn-arrow-shift-focus-color: var(--primary);
	
  --btn-font-family: var(--font-family-b);
  --btn-font-size: /*0.9em*/ 1em;
  --btn-font-weight: 400;
  --btn-letter-spacing: 0;
  --btn-text-transform: none;	

  --btn-arrow-shift-height: 2.5em;
  --btn-arrow-shift-padding-x: 1em;
  --btn-arrow-shift-radius: var(--radius-pill);
  --btn-arrow-shit-border: 0.5px solid var(--secondary);
  --btn-arrow-shift-gap: 0em;
  --btn-arrow-shift-focus-inset: -0.125em;

  --btn-arrow-shift-ease-hover: cubic-bezier(0.625, 0.05, 0, 1);
  --btn-arrow-shift-ease-focus: cubic-bezier(0.32, 0.72, 0, 1);
}

.btn-arrow-shift {
  color: var(--btn-arrow-shift-color);
  -webkit-user-select: none;
  user-select: none;
  height: var(--btn-arrow-shift-height);
  width: fit-content;	/* Test wegen Safari Textproblem */
  grid-column-gap: var(--btn-arrow-shift-gap);
  grid-row-gap: var(--btn-arrow-shift-gap);
  background-color: transparent;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  text-transform: var(--btn-text-transform);
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  position: relative;
  --btn-arrow-shift-translate-x: calc((var(--btn-arrow-shift-height) + var(--btn-arrow-shift-gap, 0em)) * -1);
  -webkit-tap-highlight-color: transparent;
}

.btn-arrow-shift::after {
  content: '';
  display: block;
  position: absolute;
  inset: var(--btn-arrow-shift-focus-inset);
  border-radius: var(--btn-arrow-shift-radius);
  transition: box-shadow 0.3s var(--btn-arrow-shift-ease-focus);
  pointer-events: none;
  z-index: 1;
}

.btn-arrow-shift:is(:focus-visible)::after {
  box-shadow: 0 0 0 0.125em var(--btn-arrow-shift-focus-color);
}

.btn-arrow-shift__icon-wrap {
  aspect-ratio: 1;
  background-color: var(--btn-arrow-shift-icon-bg);
  border-radius: var(--btn-arrow-shift-radius);
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
  will-change: transform;
  transform-origin: left center;
  scale: 0;
  transition: scale 0.6s var(--btn-arrow-shift-ease-hover);
}

.btn-arrow-shift__icon-wrap.is--duplicate {
  z-index: 1;
  position: absolute;
  right: 0;
  transform-origin: right center;
  scale: 1;
}

.btn-arrow-shift__icon {
  width: 0.9em;
  height: 0.9em;
  color: var(--btn-arrow-shift-icon-color);
  transition: rotate 0.6s var(--btn-arrow-shift-ease-hover);
  rotate: 45deg;
}

.btn-arrow-shift__icon-wrap.is--duplicate .btn-arrow-shift__icon {
  rotate: 0deg;
}

.btn-arrow-shift__text-wrap {
  height: 100%;
  padding: 0 var(--btn-arrow-shift-padding-x);
  background-color: var(--btn-arrow-shift-bg);
  border: var(--btn-arrow-shit-border);
  border-radius: var(--btn-arrow-shift-radius);
  justify-content: center;
  align-items: center;
  display: flex;
  translate: var(--btn-arrow-shift-translate-x) 0 0;
  transition: translate 0.6s var(--btn-arrow-shift-ease-hover);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn-arrow-shift:is(:hover, :focus-visible) .btn-arrow-shift__icon-wrap,
  [data-hover]:is(:hover, :focus-visible) .btn-arrow-shift .btn-arrow-shift__icon-wrap {
    scale: 1;
    transition: scale 0.735s 0.05s var(--btn-arrow-shift-ease-hover);
  }

  .btn-arrow-shift:is(:hover, :focus-visible) .btn-arrow-shift__icon-wrap.is--duplicate,
  [data-hover]:is(:hover, :focus-visible) .btn-arrow-shift .btn-arrow-shift__icon-wrap.is--duplicate {
    scale: 0;
    transition: scale 0.735s 0.05s var(--btn-arrow-shift-ease-hover);
  }

  .btn-arrow-shift:is(:hover, :focus-visible) .btn-arrow-shift__icon-wrap.is--duplicate .btn-arrow-shift__icon,
  [data-hover]:is(:hover, :focus-visible) .btn-arrow-shift .btn-arrow-shift__icon-wrap.is--duplicate .btn-arrow-shift__icon {
    rotate: 45deg;
  }

  .btn-arrow-shift:is(:hover, :focus-visible) .btn-arrow-shift__icon,
  [data-hover]:is(:hover, :focus-visible) .btn-arrow-shift .btn-arrow-shift__icon {
    rotate: 0deg;
    transition: rotate 0.735s 0.05s var(--btn-arrow-shift-ease-hover), scale 0.4s ease;
  }

  .btn-arrow-shift:is(:hover, :focus-visible) .btn-arrow-shift__text-wrap,
  [data-hover]:is(:hover, :focus-visible) .btn-arrow-shift .btn-arrow-shift__text-wrap {
    translate: 0 0 0;
    transition: translate 0.735s 0.05s var(--btn-arrow-shift-ease-hover);
  }
}

.btn-arrow-shift:active .btn-arrow-shift__icon {
	scale: 0.8;
}

/* ------------------------- Mesh Background ------------------------- */

:root {
  --mesh-noise-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
}

.bg-mesh {
  --mesh-base: #c2f5e3;
  --mesh-dark: #292c30;
  --mesh-green: var(--primary);
  --mesh-grey: #bdbdbd;

  --mesh-noise-opacity: 0.75;
  --mesh-noise-size: 200px;

  --mesh-min-height: auto;

  position: relative;
  overflow: hidden;
  isolation: isolate;

  min-height: var(--mesh-min-height);

  background-color: var(--mesh-base);

  background-image:
    radial-gradient(circle at 4% 89%, var(--mesh-dark) 11%, transparent 54%),
    radial-gradient(circle at 63% 112%, var(--mesh-dark) 12%, transparent 80%),
    radial-gradient(circle at 39% 42%, var(--mesh-green) 6%, transparent 61%),
    radial-gradient(circle at 13% 3%, var(--mesh-dark) 16%, transparent 84%),
    radial-gradient(circle at 98% 68%, var(--mesh-green) 8%, transparent 29%),
    radial-gradient(circle at 99% 79%, var(--mesh-grey) 8%, transparent 74%);
	
  color: var(--white);
  border-radius: var(--radius-main);
}

.bg-mesh--var-1 {
  background-color: var(--mesh-dark);

  background-image:
    radial-gradient(circle at 87% 0%, var(--mesh-dark) 11%, transparent 80%),
    radial-gradient(circle at 9% 0%, var(--mesh-dark) 24%, transparent 90%),
    radial-gradient(circle at 74% 27%, var(--mesh-green) 4%, transparent 93%),
    radial-gradient(circle at 5% 3%, var(--mesh-green) 34%, transparent 43%),
    radial-gradient(circle at 24% 93%, var(--mesh-grey) 14%, transparent 70%),
    radial-gradient(circle at 41% 80%, var(--mesh-dark) 4%, transparent 70%);
}

.bg-mesh--var-2 {
  background-color: var(--mesh-dark);

  background-image:
    radial-gradient(circle at 99% 96%, var(--mesh-dark) 4%, transparent 70%),
    radial-gradient(circle at 0% 2%, var(--mesh-dark) 4%, transparent 70%),
    radial-gradient(circle at 27% 58%, var(--mesh-green) 4%, transparent 43%),
    radial-gradient(circle at 92% 37%, var(--mesh-green) 4%, transparent 43%),
    radial-gradient(circle at 75% 14%, var(--mesh-grey) 4%, transparent 70%),
    radial-gradient(circle at 40% 46%, var(--mesh-dark) 4%, transparent 70%);
}


.bg-mesh :where(h1, h2, h3, h4, h5, h6, a) {
	color: var(--white);
}

.bg-mesh::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  opacity: var(--mesh-noise-opacity);
  mix-blend-mode: overlay;

  background-image: var(--mesh-noise-svg);
  background-size: var(--mesh-noise-size) var(--mesh-noise-size);
}

.bg-mesh > * {
  position: relative;
  z-index: 1;
}

section.bg-mesh {
  /*margin: var(--padding-section);*/
  margin: var(--space-xl) var(--space-s);
  width: auto;
}

.bg-mesh .btn-arrow-shift__icon-wrap {
  color: black;
}

.bg-mesh .btn-arrow-shift__text-wrap {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px);
}

/* ------------------------- Text Elements ------------------------- */

.content-label {
  display: inline-block;
  font-size: 0.875em;
  font-family: var(--font-family-b);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-color);
  background: var(--primary);
  padding: 0.15em 0.15em 0.05em 0.15em;
}

.content-label + :where(h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}


/* ------------------------- Engagement KPIs ------------------------- */

.engagement-kpis .brxe-heading {
  font-size: var(--h4);
  text-decoration: none;
}

.engagement-kpis__block {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: var(--space-m);
}

.engagement-kpis__block:first-of-type {
  margin-top: var(--space-m);
}

.engagement-kpis__number {
  margin-top: 0;
  margin-bottom: 0.06em;
  font-size: 10em;
  font-weight: 200;
  line-height: 1;
  text-transform: uppercase;
}

.engagement-kpis__info {
  max-width: 30ch;
  margin-top: var(--space-xs);
  text-wrap: balance;
}

@media screen and (max-width: 991px) {
	.engagement-kpis__block {
		flex-direction: column;
		align-items: flex-start;
	}
	.engagement-kpis__number {
		font-size: 6em;
	}
}

@media screen and (max-width: 478px) {
	.engagement-kpis__number {
		font-size: 3.5em;
	}
}


/* ------------------------- Odometer ------------------------- */

[data-odometer-element] {
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
}

[data-odometer-part="mask"], 
[data-odometer-part="static"] {
  display: inline-block;
  overflow: clip;
  padding: 0.05em;
  margin: -0.05em;
  text-align: center;
}

[data-odometer-part="roller"] {
  display: block;
  white-space: pre;
  text-align: center;
  will-change: transform;
}

[data-odometer-part="static"] {
  display: inline-block;
}

/* ------------------------- Quote ------------------------- */

.brxe-container.quote-wrap {
  width: fit-content;
  margin: 12.5em auto;
}

.bmh-quote p {
  font-size: 3.9em; /* 3.5 bei 20*/
  font-family: var(--font-family-b);
  font-weight: 300;
  line-height: 1;
  max-width: 30ch;
}

@media screen and (max-width: 767px) {
	.bmh-quote p {
		font-size: 2em;
	}
	.brxe-container.quote-wrap {
      margin: 6.5em auto;
  }
}

.bmh-quote--small {
  width: auto;
  max-width: 100%;
}

.svg-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--primary);
  border-radius: var(--radius-circle);
  width: 4.65em;
  height: 4.65em;
}

.svg-circle svg {
  width: 2.25em;
  height: auto;
  display: block;
  fill: var(--primary);
}

.svg-circle.is--stroke svg {
  fill: none;
  stroke: var(--primary);
}

.quote-break {
  padding-bottom: calc(var(--space-3xl) * 1.5);
}

.mix-quote-wrap {
  display: flex;
  flex-direction: row;
  gap: var(--space-2xl);
  margin-top: var(--space-section);
}

.mix-quote-wrap__image {
  aspect-ratio: 1/1;
  object-fit: cover;
  flex: 0 0 40%;
  min-width: 0;
  border-radius: var(--radius-main);
}

.mix-quote-wrap__quote {
  flex: 0 1 auto;
}

/* ------------------------- Mission/Vision + Mesh Card ------------------------- */

@media screen and (min-width: 992px) {
.vision__heading-container {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.vision__heading-container hgroup {
  flex: 0 0 25%;
}

.vision__heading-container .brxe-text {
  flex: 0 0 25%;
  margin-bottom: 0.8em;
}
}

.mesh-card__wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: var(--space-l);
  perspective: 900px;
}

.mesh-card__wrapper .mesh-card {
  flex: 1 0 49%;
}

.mesh-card {
  padding: var(--space-m);
  transform-style: preserve-3d;
  backface-visibility: hidden;	
}

.mesh-card .svg-circle {
  margin-left: auto;
}

/* ------------------------- Image Strip ------------------------- */

.image-strip__container {
  display: grid;
  grid-template-columns: 1fr 1.95fr 1fr;
  gap: var(--space-s);
  margin-top: var(--space-3xl);
  aspect-ratio: 3/1;
}

.image-strip__col {
  display: grid;
  gap: var(--space-s);
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.image-strip__item {
  overflow: hidden;
  min-width: 0;
  height: 100%;
  width: 100%;
  border-radius: var(--radius-xs);
}

.image-strip__col--right .image-strip__item:last-child {
  border-radius: var(--radius-main);
}

.image-strip__item img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  display: block;
}

.image-strip__col--left {
  grid-template-rows: 1.55fr 1fr;
}

.image-strip__col--right {
  grid-template-rows: 1fr 1.55fr;
}

/* ------------------------- Footer ------------------------- */

footer .brxe-code {
  width: auto;
}

.footer-wrap {
  margin: var(--space-s);
  width: auto;
  padding: var(--padding-section);
  padding-bottom: var(--space-l);
}

.footer-main-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.footer-info-wrap {
  width: fit-content;
  margin-right: var(--space-3xl);
}

@media screen and (max-width: 767px) {
  .footer-info-wrap {
    margin-bottom: var(--space-xl);
  }
}

footer h2 {
  font-size: var(--h4);
  text-decoration: none;
  margin-bottom: var(--space-2xs);
}

footer .svg-circle {
  width: 1.75em;
  height: 1.75em;
  border: 1px solid var(--primary);
}

footer .svg-circle svg {
  width: 0.9em;
}

.footer-adress {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-l);
}

.footer-adress__info {
  display: flex;
  flex-direction: row;
  gap: var(--space-s);
  align-items: baseline;
}

.footer-adress__info p {
  margin-bottom: 0.1em;
}

.footer-adress__text {
  width: auto;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  padding-bottom: var(--space-l);
}

.footer-nav__heading {
  font-size: calc(var(--h6) * 0.85);
  margin-bottom: var(--space-xs);
  overflow-x: clip;
}

@media screen and (max-width: 767px) {
  .footer-nav__heading {
	font-size: var(--h5);	
  }
}

.footer-nav__list {
  line-height: var(--text-line-height);
}

.footer-nav__list li {
  overflow-x: clip;
}

.footer-nav a {
  --arrow-space: 1.15em;

  display: inline-block;
  text-decoration: none;
  transform: translateX(calc(-1 * var(--arrow-space)));
  transition: transform 0.4s cubic-bezier(0.38, 0.005, 0.215, 1);
}

.footer-nav a::before {
  content: "";
  display: inline-block;
  width: var(--arrow-space);
  height: 0.8em;
  transform: translateY(0.05em);	
  background: var(--primary);
  -webkit-mask: var(--mask-arrow);
  mask: var(--mask-arrow);		
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  transform: translateX(0);
}

.mag-zone {
  width: 7.5em;
  height: 7.5em;
  display: flex;
  align-self: flex-end;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}

.back-to-top {
  --size: 5em;
  --icon-size: 1.75em;

  display: inline-flex;
  align-self: center;
  align-items: center;
  justify-content: center;

  inline-size: var(--size);
  block-size: var(--size);

  background: transparent;
  color: var(--primary);
  border: 0.135em solid var(--primary);
  border-radius: 50%;

  text-decoration: none;
  transition: color 0.45s ease-in-out, background 0.45s ease-in-out;
}

.back-to-top__icon {
  inline-size: var(--icon-size);
  block-size: auto;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--primary);
  color: black;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;	
}

.back-to-top:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 0.25rem;
}

.footer-meta {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 0.9em;
}

@media screen and (max-width: 478px) {
  .footer-meta {
	flex-direction: column;	
  }
}

.footer-meta a {
  color: inherit;
  text-decoration: none;
  position: relative;
}

.footer-meta a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.25em;

  width: 100%;
  height: 0.05em;

  background-color: var(--primary);

  transform: scaleX(0) rotate(0.001deg);
  transform-origin: right;

  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
}

@media (hover: hover) and (pointer: fine) {
  .footer-meta a:hover::before {
    transform: scaleX(1) rotate(0.001deg);
    transform-origin: left;
  }
}

.footer-meta a:focus-visible::before {
  transform: scaleX(1) rotate(0.001deg);
  transform-origin: left;
}

.footer-meta__legal {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.footer-meta__legal::before {
  content: "|";
  display: block;
  order: 2;
}

.footer-meta__legal a:first-child {
  order: 1;
}

.footer-meta__legal a:last-child {
  order: 3;
}

.horizontal .line {
  border-top: 1px solid;
  border-top-color: var(--secondary);
  margin-bottom: var(--space-xs);
}

footer .horizontal .line {
  margin-top: var(--space-s);
}


/* ------------------------- Header / Mega Menu ------------------------- */


#brx-header {
  z-index: 3;
}

[data-menu-wrap] {
  --nav-height: 4em;
}

.mega-nav {
  z-index: 100;
  position: fixed;
  width: 100%;
  top: 0;
  font-family: var(--font-family-b);
}

.mega-nav__bar {
  z-index: 3;
  background-color: var(--white);
  border-bottom: 1px solid #0000001a;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.mega-nav__container {
  height: var(--nav-height);
  justify-content: space-between;
  align-items: center;
  padding: 1em 1.5em;
  display: flex;
}

.mega-nav__bar-start {
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.mega-nav__bar-logo {
  flex: none;
  width: 5.75em;
  display: flex;
  transition: transform 0.3s ease;
}

.mega-nav__bar-logo:hover {
  transform: scale(0.975);
}

.mega-nav__bar-list {
  grid-column-gap: 0;
  grid-row-gap: .75em;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
}

.mega-nav__bar-link {
  color: #201d1d;
  background-color: #0000;
  justify-content: flex-start;
  align-items: center;
  padding: 1em 2em;
  text-decoration: none;
  display: flex;
  font-size: 1.1em;
  font-weight: 400;
  line-height: 1.2;
}

.mega-nav__bar-link-label, .mega-nav__bar-link.is--contact {
  padding: 0.05em 0.15em;
  transition: background-color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .mega-nav__bar-link:hover .mega-nav__bar-link-label,
  .mega-nav__bar-link[aria-expanded="true"] .mega-nav__bar-link-label {
    background-color: var(--primary);
  }

  [data-nav-list]:has(.mega-nav__bar-link:hover)
    .mega-nav__bar-link:not(:hover) [data-current="page"],
  [data-nav-list]:has(.mega-nav__bar-link[aria-expanded="true"])
    .mega-nav__bar-link:not([aria-expanded="true"]) [data-current="page"] {
    background: none;
  }
}

.mega-nav__bar-link [data-current="page"] {
  background: var(--primary);
}


.mega-nav__bar-link-label.is--contact {
  position: relative;
}

.mega-nav__bar-link-label.is--contact::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.25px;
  background: black;
}

.mega-nav__bar-link-label.is--contact::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 0.8em;
  margin-left: 0.2em;
  background: currentColor;
  -webkit-mask: var(--mask-arrow);
  mask: var(--mask-arrow);	
}

.mega-nav__bar-link-icon {
  width: 1.25em;
  transition: transform 0.25s ease;
}

.mega-nav__bar-link[aria-expanded="true"] .mega-nav__bar-link-icon {
  transform: rotate(-180deg);
}

.mega-nav__bar-end {
  grid-column-gap: .75em;
  grid-row-gap: .75em;
  justify-content: flex-end;
  align-items: center;
  display: none;
}

.mega-nav__bar-inner {
  grid-column-gap: .75em;
  grid-row-gap: .75em;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
}

.mega-nav__burger {
  grid-column-gap: .2em;
  grid-row-gap: .2em;
  border-radius: var(--radius-xs);
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  padding: 0;
  background: none;
}

.mega-nav__burger-line {
  z-index: 1;
  background-color: var(--base);
  border-radius: 0;
  flex: none;
  width: 1.25em;
  height: .125em;
  padding: 0;
  display: block;
  position: relative;
}

.mega-nav__back {
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: -.625em;
}

.mega-nav__backdrop {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  background-color: #00000040;
  position: fixed;
  inset: 0%;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}

@media screen and (max-width: 991px) {
  .mega-nav__backdrop {
	backdrop-filter: none;
  }
}

.mega-nav__dropdown-wrapper {
  z-index: 2;
  pointer-events: none;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  /*top: calc(100% - .25em);*/
  top: 100%;
  left: 0;
  right: 0;
}

.mega-nav__dropdown-container {
  position: relative;
  overflow: hidden;
}

.mega-nav__dropdown-bg {
  will-change: transform;
  background-color: var(--white);
  border-radius: var(--radius-main);
  position: absolute;
  inset: 0;
}

.mega-nav__dropdown-static {
  display: flex;
  align-items: flex-start;
}

.mega-nav__dropdown-panel {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  position: absolute;
  inset: 0 0 auto;
  overflow: hidden;
}

.mega-nav__dropdown-inner {
  display: flex;
}

.mega-nav__panel-col {
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  border-right: 1px solid #0000001a;
  flex-flow: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  padding: var(--space-xl);
  padding-top: var(--space-l);
  display: flex;
}

.mega-nav__panel-col:last-of-type {
  border: none;
}

.mega-nav__panel-col.has--card {
  padding: var(--space-xl);
  padding-top: var(--space-l);
  align-items: center;
  flex: 0 1 auto;
}

.mega-nav__panel-label {
  text-transform: uppercase;
  font-size: .75em;
  line-height: 1;
}

.mega-nav__panel-list {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

ul.mega-nav__panel-sublist  {
  margin-bottom: var(--space-s);
}

ul.mega-nav__panel-sublist a {
  position: relative;
  transition: font-weight 0.25s ease;
}

ul.mega-nav__panel-sublist a::before {
  content: "";
  transform: /*translateY(-0.125em);*/ translate(0, /*-0.125em*/ -0.05em);
  display: inline-block;
  width: 1em;
  height: 0.9em;
  background: currentColor;
  -webkit-mask: var(--mask-arrow);
  mask: var(--mask-arrow);		
  transition: transform 0.25s ease;	
}

@media (hover: hover) and (pointer: fine) {
  ul.mega-nav__panel-sublist a:hover {
	font-weight: 600;
  }	
  ul.mega-nav__panel-sublist a:hover::before {
  transform: translate(0.15em, /*-0.125em*/ -0.05em);
}	
}

ul.mega-nav__panel-sublist a:focus-visible {
  font-weight: 600;
}

.mega-nav__panel-link  {
  color: inherit;
  text-decoration: none;
  position: relative;
  width: fit-content;
}

.mega-nav__panel-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.25em;

  width: 100%;
  height: 0.075em;

  background-color: currentColor;

  transform: scaleX(0) rotate(0.001deg);
  transform-origin: right;

  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
}

@media (hover: hover) and (pointer: fine) {
  .mega-nav__panel-link:hover::after {
    transform: scaleX(1) rotate(0.001deg);
    transform-origin: left;
  }
}

.mega-nav__panel-link:focus-visible::after {
  transform: scaleX(1) rotate(0.001deg);
  transform-origin: left;
}

.mega-nav__panel-cta-text {
  font-family: var(--font-family-a);
  font-size: 1.15em;
  line-height: 1;
  font-weight: 500;
}

.mega-nav__panel-cta-text span {
  display: block;
}

.mega-nav__panel-link {
  font-size: 1.25em;
  font-weight: 700;
  color: var(--base);
  border-radius: .25em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin: var(--space-xs) 0;
  text-decoration: none;
  display: flex;
}

.mega-nav__panel-icon {
  --size: 5em;
  --icon-size: 1.75em;

  display: inline-flex;
  align-self: center;
  align-items: center;
  justify-content: center;

  inline-size: var(--size);
  block-size: var(--size);

  background: transparent;
  color: var(--primary);
  border: 0.135em solid var(--primary);
  border-radius: 50%;

  text-decoration: none;
  transition: color 0.45s ease-in-out, background 0.45s ease-in-out;
}

.mega-nav__panel-icon__icon {
  inline-size: var(--icon-size);
  block-size: auto;
}

.mega-nav__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  justify-content: center;
}

.mega-nav__card-text {
  z-index: 1;
}

.mega-nav__card .btn-arrow-shift {
  margin-bottom: var(--space-m);
}

.mega-nav__card-visual {
  aspect-ratio: 7/4;
  width: 30em;
  height: auto;
  position: relative;
}

.mega-nav__card-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-main);
}

@media screen and (max-width: 991px) {
  .mega-nav {
    top: 0;
    left: 0;
    right: 0;
  }

  .mega-nav__bar-start {
    justify-content: space-between;
    align-items: center;
  }

  .mega-nav__bar-list {
    grid-column-gap: 0em;
    grid-row-gap: 0em;
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
  }

  .mega-nav__bar-list.is--actions {
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    flex-flow: row;
    justify-content: space-between;
    align-items: stretch;
  }

  .mega-nav__bar-link {
    border-bottom: 1px solid #0000001a;
    border-radius: 0;
    width: 100%;
    padding: .75em 0;
    font-size: 1.25em;
  }

  .mega-nav__bar-link.is--dropdown {
    justify-content: space-between;
    align-items: center;
  }

  .mega-nav__bar-link.is--back {
    border-bottom-style: none;
    font-size: 1em;
  }

  .mega-nav__bar-link-label {
    font-size: 1.25em;
  }

  .mega-nav__bar-link-icon {
    width: 1.5em;
  }

  .mega-nav__bar-link-icon.is--dropdown {
    transform: rotate(-90deg);
  }

  .mega-nav__bar-end {
    display: flex;
  }

  .mega-nav__bar-cta {
    padding: 1em .75em 1em 1em;
  }

  .mega-nav__bar-inner {
    opacity: 0;
    bottom: 0%;
    left: 0%;
    right: 0%;
    top: var(--nav-height);
    visibility: hidden;
    background-color: var(--white);
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    padding: 2em 1.5em;
    position: fixed;
    overflow: auto;
	  
	height: calc(100dvh - var(--nav-height)); /* auf einmal nötig? */  
  }

  .mega-nav__backdrop {
    display: none;
	height: 100vh; /* auf einmal nötig? (intro anim) */
  }

  .mega-nav__dropdown-wrapper {
    z-index: 4;
    bottom: 0;
    top: var(--nav-height);
    position: fixed;
  }

  .mega-nav__dropdown-container {
    height: 100%;
    overflow: auto;
  }

  .mega-nav__dropdown-bg {
    display: none;
  }

  .mega-nav__dropdown-panel {
    background-color: var(--white);
    bottom: 0;
    overflow: auto;
  }

  .mega-nav__dropdown-inner {
    flex-flow: column;
  }

  .mega-nav__panel-col {
    border-bottom: 1px solid #0000001a;
    border-right-style: none;
    /*padding-top: 1.5em;
    padding-bottom: 1.5em;*/
    padding: calc(var(--space-l) * 0.8);
  }

  .mega-nav__panel-label {
    width: 100%;
  }

  .mega-nav__bar-action {
    flex: 1;
  }

  .mega-nav__card-cta-icon.is--dropdown {
    transform: rotate(-90deg);
  }
}

@media screen and (max-width: 478px) {
  .mega-nav__bar-link-label {
    font-size: 1.1em;
  }

  .mega-nav__bar-link-icon {
    width: 1.375em;
  }

  .mega-nav__panel-col.has--card {
    order: 2;
    border-bottom: 0;
    border-top: 1px solid #0000001a;
    padding: calc(var(--space-l) * 0.8);
  }

  .mega-nav__card {
    border-bottom: 1px solid #0000001a;
    border-radius: 0;
  }

  .mega-nav__card-content {
    padding: 1em 1em 1.5em;
  }

  .mega-nav__card-cta-label {
    font-size: 1em;
  }

  .mega-nav__card-cta-icon {
    width: 1.375em;
  }
	
  ul.mega-nav__panel-sublist  {
    margin-bottom: var(--space-s);
  }
	
  .mega-nav__panel-link {
		width: 100%;
	}
	
}


/* ------------------------- Hero Media Zoom ------------------------- */

.background-zoom {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: auto;	
  min-height: 100svh;
  margin: var(--space-xl) var(--space-s);
  padding-top: calc(50dvh - 15em);	
  padding-right: 0;
  padding-bottom: var(--space-s);
  padding-left: 0;	
  border-radius: var(--radius-main);
  overflow: clip;	
}

.background-zoom__intro-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /*gap: var(--space-m);*/
  column-gap: var(--space-m);
}

.background-zoom__intro-wrapper .background-zoom__title {
  font-size: 11em;
  text-transform: uppercase;
  font-weight: 600;
  z-index: 2;
  /*line-height: 0.8em;*/
  line-height: 1em;
}

.background-zoom__intro-wrapper .background-zoom__title.is--bottom {
  z-index: 0;
}

/* Start state: small image/card */
.background-zoom__start {
  height: 8.5em;
  max-width: none;
  aspect-ratio: 16/9;
  border-radius: var(--radius-xs) var(--radius-xs) var(--radius-l) var(--radius-xs);
  position: relative;
  z-index: 1;
}

/* Animated element */
.background-zoom__content {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background-color: #ccc;
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  will-change: width, height, transform;
}

/* Image inside animated element */
.background-zoom__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.background-zoom__dark {
  opacity: 0;
  background-color: var(--base);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* End state: where the image expands to */
.background-zoom__end {
  width: 100%;
  height: calc(100dvh - var(--space-s) * 2);
  border-radius: var(--radius-main);
}

/* Content after the zoom */
.background-zoom__text {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: var(--space-xl);
  position: relative;
  z-index: 1;
}

.background-zoom__text h1 {
  color: var(--white);
}

h1 .hero-heading-wght {
  font-weight: 300;
}

h1 .hero-heading-break {
  display: block;
}


/* Intro Animation Zusatz */

.background-zoom__title {
  display: block;
}

.background-zoom__title-mask {
  overflow: hidden;
  z-index: 2
}

.background-zoom__title-mask.is--bottom {
  z-index: 0
}

.background-zoom__start {
  --intro-img-width: 15.3em;

  width: var(--intro-img-width);
  flex: 0 0 auto;
  margin-top: 1em;	
}


/* offset fix mobile */
@media (max-width: 767px) {
  .background-zoom {
    padding-top: calc(50dvh - 15em);	
  }
  .background-zoom__intro-wrapper {
	margin-right: auto;
    margin-left: var(--space-m);
	flex-direction: column;
	align-items: center;
  }
  .background-zoom__start { 	
	order: 2;
  }
  .background-zoom__end {
	margin-right: auto;
  }
  .background-zoom__intro-wrapper .background-zoom__title {
	font-size: 4em;
  }	
  .background-zoom__title-mask {
    z-index: 0;
  }	
  .background-zoom__text {
	margin-left: calc(var(--space-m) * 0.8);	
  }	
  .background-zoom__end {
	/*  height: 60dvh;*/
  }
  .background-zoom__text h1 .hero-heading-wght {
    display: block;
  }

  .background-zoom__text h1 .hero-heading-break {
    display: inline;
  }	
}



/* ------------------------- Investitionsbereiche ------------------------- */

.investment-areas__nav {
  width: var(--container-width-m);
  max-width: 100%;
  margin-top: var(--space-xl);
}

.investment-areas__list {
  counter-reset: investment-card;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-s);
  list-style: none;
  padding: 0;
  margin: 0;
}

.investment-areas__item {
  counter-increment: investment-card;
  min-width: 0;
}

.investment-card {
  position: relative;
  display: flex;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 2 / 1;
  border-radius: var(--radius-main);
  color: var(--white);
  text-decoration: none;
  isolation: isolate;
}

.investment-card > img.investment-card__image {
  position: absolute;
  display: block;
  width: 100%;
  /*height: 100%;*/
  height: 120%;
  object-fit: cover;
  object-position: center 7.5%;
  inset: 0;
  z-index: 0;
  /*transition: transform 0.6s cubic-bezier(0.7, 0.05, 0.13, 1);*/
}

.investment-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.65),
    rgba(0, 0, 0, 0.22) 55%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}

.investment-card__content {
  position: relative;
  align-self: flex-end;
  padding: calc(var(--space-s) * 1.5);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.75em;
  color: var(--white);
}

.investment-card__content::before {
  content: counter(investment-card);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--primary);
  border-radius: var(--radius-circle);
  width: 2em;
  height: 2em;
  font-weight: 700;
  color: var(--primary);
  font-size: var(--text-2xl)
}

.investment-card__title {
  display: block;
  color: inherit;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
/*
.investment-card:hover > img.investment-card__image,
.investment-card:focus-visible > img.investment-card__image {
  transform: scale(1.05);
}*/

.investment-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .investment-card > img.investment-card__image {
    transition: none;
  }

  .investment-card:hover > img.investment-card__image,
  .investment-card:focus-visible > img.investment-card__image {
    transform: none;
  }
}

@media (max-width: 767px) {
  .investment-areas__list {
    grid-template-columns: 1fr;
  }

  .investment-card__content::before {
    flex-basis: 2em;
    flex-grow: 1;
    width: 2em;
    height: 2em;
  }
}

@media (max-width: 478px) {
   .investment-card__content {
    padding: var(--space-s);
  }
   .investment-card__content::before {
    flex: 1 0 auto;
    width: 2em;
    height: 2em;
    font-size: var(--text-l);
  }
  .investment-card__title {
    font-size: var(--text-m);
  }
}

/* Hover Cursor */

[data-cursor-area] {
  position: relative;
}

.cursor {
  z-index: 25;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  padding: 1em 2em;
}

.cursor-bubble {
  opacity: 0;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 0.25em;
}

.cursor .content-label {
  line-height: 1;
  padding: 0.1em 0.15em 0.05em 0.15em;
}

.cursor-bubble span {
  line-height: 1;
}

.cursor-bubble__arrow {
  width: 1em;
  stroke: currentColor;
  margin-left: 0.25em;
  transform: translateY(-0.05em);	
}

@media (hover: hover) and (pointer: fine) {
  [data-cursor] .cursor-bubble {
    transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1), opacity 0.6s cubic-bezier(0.625, 0.05, 0, 1);
    transform: translateX(0%) scale(0.6) rotate(0.001deg);
  }
  
  [data-cursor="active"] .cursor-bubble {
    opacity: 1; 
    transform: translateX(0%) scale(1) rotate(0.001deg);
  }
  
  [data-cursor="active-edge"] .cursor-bubble {
    opacity: 1; 
    transform: translateX(-100%) scale(1) rotate(0.001deg);
  }
}

@media (hover: none) and (pointer: coarse) {
  .cursor {
    display: none;
  }
}


/* ------------------------- Erfolgsbeispiel Akkordeon ------------------------- */

#erfolge {
  padding-bottom: calc(var(--space-3xl) * 2.5);
}

.erfolge__container {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.erfolge__intro {
  max-width: 40ch;
  position: sticky;
  top: calc(var(--space-3xl) * 1.25);
}

.case-accordion__wrapper {
  max-width: 50em; 
}

.case-accordion {
  width: 100%;

  /*--item-height: clamp(7rem, 12vw, 10rem);*/
  --item-height: 6em;
  --item-height-active: clamp(14rem, 22vw, 20rem);

  /*--image-size: clamp(7rem, 12vw, 10rem);*/
  --image-size: 6em;
  --image-width-active: clamp(16rem, 28vw, 26rem);

  --gap: 0.35em;
  --border-color: #0000001a;
  --radius: calc(var(--item-height) / 2);
  --radius-image-active: var(--radius-main, 2rem);

  --padding-x: clamp(2rem, 6vw, 5rem);
  --padding-y-active: clamp(2rem, 4vw, 4rem);

  --ease: cubic-bezier(0.625, 0.05, 0, 1);
  --transition-timing: 0.6s;
  
  --button-reappear-delay: 0.25s;
}

.case-accordion__list {
  display: flex;
  flex-direction: column;
  gap: 1.25em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-accordion__item {
  position: relative;
  width: 100%;
  height: var(--item-height);
  cursor: pointer;	
  overflow: visible;
  contain: layout paint;	
}

/* Background / card shell */

.case-accordion__bg {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 calc(var(--image-size) + var(--gap));

  border: 1px solid var(--border-color);
  border-radius: var(--radius);

  transition: inset var(--transition-timing) var(--ease);
}

.case-accordion__item[data-active="true"] .case-accordion__bg {
  inset: 0;
}

/* Image */

.case-accordion__image-wrap {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;

  width: var(--image-size);
  height: var(--image-size);

  overflow: hidden;
  border-radius: 50%;
  transform: translateY(calc((var(--item-height) - var(--image-size)) / 2));

  /*transition:
    width var(--transition-timing) var(--ease),
    border-radius var(--transition-timing) var(--ease),
    transform var(--transition-timing) var(--ease);*/
  transition:
    border-radius var(--transition-timing) var(--ease),
    transform var(--transition-timing) var(--ease);	
}

.case-accordion__item[data-active="true"] .case-accordion__image-wrap {
  width: var(--image-width-active);
  border-radius: var(--radius-image-active);
  transform: translateY(0);
}

.case-accordion__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Button */

.case-accordion__button {
  appearance: none;
  -webkit-appearance: none;

  position: relative;
  z-index: 1;

  width: calc(100% - var(--image-size) - var(--gap));
  height: var(--item-height);
  margin-left: calc(var(--image-size) + var(--gap));

  padding: 0 var(--padding-x);
  border: 0;
  background: transparent;
  color: currentColor;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;

  font: inherit;
  text-align: left;

  transition:
    width var(--transition-timing) var(--ease),
    height var(--transition-timing) var(--ease),
    margin-left var(--transition-timing) var(--ease),
    padding var(--transition-timing) var(--ease),
    opacity 0.2s ease;
}

.case-accordion__button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--primary);
  border-radius: 999em;
}

.case-accordion__item[data-active="true"] .case-accordion__button {
  width: 100%;
  height: 100%;
  margin-left: 0;
  padding: 0;
  justify-content: flex-start;
}

.case-accordion__button-title,
.case-accordion__content-title {
  font-size: var(--text-xl);
  line-height: 0.95;
  font-weight: 600;
  text-transform: uppercase;
}

/* Only the collapsed button title should have the delayed reappear */
.case-accordion__button-title {
  opacity: 1;
  transition:
    opacity 0.25s ease var(--button-reappear-delay),
    transform 0.35s ease var(--button-reappear-delay);
}

/* Plus icon */

.case-accordion__icon {
  position: absolute;
  right: var(--padding-x);
  flex: 0 0 auto;
	
  width: 1.25em;
  height: 1.25em;
  min-width: 0;
  min-height: 0;

  opacity: 0.3;

  transition: opacity 0.45s ease, transform var(--transition-timing) ease;
}

.case-accordion__item:hover .case-accordion__icon {
	opacity: 1;
}

.case-accordion__icon::before,
.case-accordion__icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;

  width: 100%;
  height: 0.12em;

  background: currentColor;
  transform: translate(-50%, -50%);
}

.case-accordion__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.case-accordion__item[data-active="true"] .case-accordion__button-title {
  opacity: 0;
  transform: translateX(-1em) scale(0.85);
  transition-delay: 0s;
}

.case-accordion__item[data-active="true"] .case-accordion__icon {
  transform: rotate(45deg);
}

/* Content */

.case-accordion__content {
  position: absolute;
  z-index: 1;
  inset: 0;

  pointer-events: none;
}

.case-accordion__mask {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.case-accordion__inner {
  width: auto;
  max-width: 95%;

  padding-top: var(--padding-y-active);
  padding-right: var(--padding-x);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  padding-left: calc(var(--image-width-active) + var(--padding-x));

  opacity: 0;
  transform: translateX(-2.5em);
	
  transition:
    opacity 0.5s ease,
    transform var(--transition-timing) ease;
}

.case-accordion__item[data-active="true"] .case-accordion__content {
  pointer-events: auto;
}

.case-accordion__item[data-active="true"] .case-accordion__inner {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.16s;
}

.case-accordion__text {
  max-width: 34em;
  margin: 0.8em 0 1em 0;
  line-height: 1.2;
}

.case-accordion__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  color: currentColor;
}

.case-accordion__link span {
  font-weight: 600;
}

.case-accordion__link-arrow {
  stroke: var(--primary);
  width: 1em;
  margin-bottom: 0.075em;
  transform: rotate(45deg);
  transition: transform 0.45s ease;
}

.case-accordion__link span  {
  color: inherit;
  text-decoration: none;
  position: relative;
  width: fit-content;
}

.case-accordion__link span::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.1em;

  width: 100%;
  height: 0.05em;

  background-color: currentColor;
}

.case-accordion__link span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.1em;

  width: 100%;
  height: 0.05em;

  background-color: var(--primary);

  transform: scaleX(0) rotate(0.001deg);
  transform-origin: right;

  transition: transform 0.65s cubic-bezier(0.625, 0.05, 0, 1);
}

@media (hover: hover) and (pointer: fine) {
  .case-accordion__link:hover span::after {
    transform: scaleX(1) rotate(0.001deg);
    transform-origin: left;
  }
}

.case-accordion__link:focus-visible span::after {
  transform: scaleX(1) rotate(0.001deg);
  transform-origin: left;
}

.case-accordion__link-arrow {
  color: var(--primary);
  font-size: 1em;
  line-height: 1;
  text-decoration: none;
}

.case-accordion__link:hover .case-accordion__link-arrow {
  transform: rotate(0);
}

/* Mobile */

@media (max-width: 767px) {
  .case-accordion {
    --item-height: 5rem;
    --image-size: 5rem;
    --image-width-active: 5rem;
    --gap: 0.75rem;
    --padding-x: 1.25rem;
  }

  .case-accordion__item {
    height: auto;
    min-height: var(--item-height);
  }

  .case-accordion__bg,
  .case-accordion__item[data-active="true"] .case-accordion__bg {
    inset: 0 0 0 calc(var(--image-size) + var(--gap));
  }

  .case-accordion__image-wrap,
  .case-accordion__item[data-active="true"] .case-accordion__image-wrap {
    top: 0;
    width: var(--image-size);
    height: var(--image-size);
    border-radius: 50%;
    transform: none;
  }

  .case-accordion__button,
  .case-accordion__item[data-active="true"] .case-accordion__button {
    width: calc(100% - var(--image-size) - var(--gap));
    height: var(--item-height);
    margin-left: calc(var(--image-size) + var(--gap));

    padding: 1rem var(--padding-x);

    justify-content: space-between;
  }

  .case-accordion__title {
    font-size: clamp(1.25rem, 8vw, 2rem);
  }

  .case-accordion__content {
    position: relative;
    inset: auto;

    margin-left: calc(var(--image-size) + var(--gap));
    pointer-events: none;
  }

  .case-accordion__item[data-active="true"] .case-accordion__content {
    pointer-events: auto;
  }

  .case-accordion__inner {
    max-width: none;

    padding: 0 var(--padding-x) 1.5rem;
    opacity: 0;
    transform: translateY(0.5em);
  }

  .case-accordion__item[data-active="true"] .case-accordion__inner {
    opacity: 1;
    transform: translateY(0);
  }

  .case-accordion__text {
    font-size: 1rem;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .case-accordion__bg,
  .case-accordion__image-wrap,
  .case-accordion__button,
  .case-accordion__icon,
  .case-accordion__inner {
    transition: none;
  }
}

/* ------------------------- Erfolgsbeispiel Template ------------------------- */

.erfolgsbeispiel__section {
  padding: calc(var(--space-3xl) * 1.25) 0;
}

.erfolgsbeispiel__container {
  flex-direction: row;
  position: relative;
}

.erfolgsbeispiel__content {
  width: fit-content;
  margin: auto;
}

.erfolgsbeispiel__title {
  font-size: var(--h2);
  text-decoration: underline;
}

.erfolgsbeispiel__section .content-label {
  margin-right: 0.25em;
  margin-bottom: 0;
}

.investment-label {
  /*color: var(--primary);
  background: var(--base);*/
  background: transparent;
  line-height: 1.2;	
}

.erfolgsbeispiel__excerpt {
  font-family: var(--font-family-b);
  margin-top: var(--space-s);
}

.erfolgsbeispiel__image-wrapper {
  position: relative;
  width: 100%;
  max-width: 65ch;
  aspect-ratio: 5 / 3.5;
  border-radius: var(--radius-main);
  overflow: hidden;
  margin-bottom: var(--space-xs);
}

.erfolgsbeispiel__image {
  position: absolute;
  width: 100%;
  height: 120%;
  object-fit: cover;
}

.erfolgsbeispiel__content {
  margin-bottom: var(--space-m);
}

.erfolgsbeispiel__nav {
  position: sticky;
  top: var(--space-3xl);	
  width: 30ch;
  margin-top: 0.4em;
  gap: var(--space-xs);
}

#more-success-stories-title {
  font-weight: 600;
  text-decoration: underline;
}

.erfolgsbeispiel__nav-list-item {
  font-family: var(--font-family-b);
  overflow-x: clip;
	
  margin-bottom: 0.125em;	
}

.erfolgsbeispiel__nav-list-item a {
  --arrow-space: 1em;

  display: inline-block;
  line-height: 1.15;
  text-decoration: none;
  transform: translateX(calc(-1 * var(--arrow-space)));
  transition: transform 0.4s cubic-bezier(0.38, 0.005, 0.215, 1);
}

.erfolgsbeispiel__nav-list-item a::before {	
  content: "";
  display: inline-block;
  width: var(--arrow-space);
  height: 0.8em;
  transform: translateY(0.05em);	
  background: currentColor;
  -webkit-mask: var(--mask-arrow);
  mask: var(--mask-arrow);	
  	
}

.erfolgsbeispiel__nav-list-item a:hover,
.erfolgsbeispiel__nav-list-item a:focus-visible {
  transform: translateX(0);
}

@media screen and (max-width: 478px) {
  .erfolgsbeispiel__nav {
    font-size: 1.1em;
	}
}



/* Bricks Builder mega menu editing helpers */
.bricks_template-template-default header {
  min-height: 100vh;
}

.single-bricks_template header {
  min-height: 0;
}

.bricks_template-template-default [data-menu-wrap]:has([data-nav-content][data-panel-state="active"]) [data-dropdown-wrapper] {
  pointer-events: auto;
}

.bricks_template-template-default [data-menu-wrap]:has([data-nav-content][data-panel-state="active"]) [data-dropdown-container] {
  height: auto !important;
  overflow: visible;
}

.bricks_template-template-default [data-nav-content][data-panel-state="active"] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative !important;
}

.bricks_template-template-default [data-nav-content][data-panel-state="active"] [data-menu-fade] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.bricks_template-template-default [data-menu-open]:has([data-nav-content][data-panel-state="active"]) [data-dropdown-bg] {
  opacity: 1;
  inset: 0;
}

.bricks_template-template-default [data-mobile-nav="active"] {
  opacity: 1 !important;
  visibility: visible !important;
}

body[data-builder-window] .brxe-code {
  width: auto;
}

/* Bricks Builder background zoom editing helpers */
body[data-builder-window] .background-zoom__end {
  height: 0;
}

body[data-builder-window] .background-zoom__text h1 {
  color: var(--base);
}




@supports (view-transition-name: root) {

@view-transition {
  navigation: auto;
}

::view-transition {
  background: var(--white);
}

/* Needed so old/new can overlap properly */
::view-transition-group(root) {
  animation-duration: 1.2s;
  animation-timing-function: cubic-bezier(0.7, 0.05, 0.13, 1);
}

/* outgoing page */
::view-transition-old(root) {
  animation: old-page-parallax-out 1.2s cubic-bezier(0.7, 0.05, 0.13, 1) both;
  z-index: 1;
  transform-origin: center bottom;
}

/* incoming page */
::view-transition-new(root) {
  animation: new-page-slide-in 1.2s cubic-bezier(0.7, 0.05, 0.13, 1) both;
  z-index: 2;
}

/* old page moves only slightly */
@keyframes old-page-parallax-out {
    from {
    transform: translateY(0);
	filter: brightness(1);	
  }

  to {
    transform: translateY(-18vh);
	filter: brightness(0.2);  
  }
}

/* new page comes from bottom and overlaps */
@keyframes new-page-slide-in {
  from {
    transform: translateY(100vh);
  }

  to {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(root) {
    animation-duration: 0.01ms;
  }
}

header .mega-nav {
  view-transition-name: nav;
}
	
} /* supports Ende */