@layer reset, base, components;

/* Modern reset: https://piccalil.li/blog/a-more-modern-css-reset/ */

/* Box sizing rules */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */

body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */

h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */

img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */

textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */

:target {
  scroll-margin-block: 5ex;
}

/* @font-face declarations for custom fonts */

@font-face {
  font-family: 'HostGrotesk';

  src: url('../../assets/fonts/HostGrotesk-Light.woff2') format('woff2');

  font-weight: 300;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'HostGrotesk';

  src: url('../../assets/fonts/HostGrotesk-Regular.woff2') format('woff2');

  font-weight: 400;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'HostGrotesk';

  src: url('../../assets/fonts/HostGrotesk-Bold.woff2') format('woff2');

  font-weight: 700;

  font-style: normal;

  font-display: swap;
}

:root{
  --color-dark: #102728;
  --color-schiefer: #2A2A2A;
  --color-light: #FFF;
  --color-neutral-0: #FDFDFD;
  --color-neutral-10: #EBEDED;
  --color-neutral-20: #CDD2D2;
  --color-neutral-40: #9CA3A4;
  --color-neutral-60: #6B7677;
  --color-neutral-80: #3A4849;
  --color-purple-0: #F5F3FF;
  --color-purple-10: #EDE9FE;
  --color-purple-20: #E0D9FC;
  --color-purple-40: #C4B5FD;
  --color-purple-60: #7C3AED;
  --color-purple-80: #4C1D95;
  --color-purple-100: #2D105A;
  --color-error: #D8443B;
  --color-success: #3BD87A;
  --color-orange-100: #F2910C;
  --color-orange-hover: #D5871B;
  --color-kreideblau-100: #7FA7BE;
  --color-kreideblau-20: #C9E1EE;
  --color-kreideblau-hover: #7690A0;
  --color-oktoberrot-100: #96403E;
  --color-oktoberrot-20: #F4C6C5;
  --color-oktoberrot-hover: #7D3F3D;
  --color-kaktusgruen-100: #4E583A;
  --color-kaktusgruen-20: #D5E3B8;
  --color-kaktusgruen-hover: #4A523A;
  --space-zero: 0rem;
  --space-xs: clamp(0.0625rem, 0.04rem + 0.09vw, 0.125rem);
  --space-s: clamp(0.125rem, 0.08rem + 0.18vw, 0.25rem);
  --space-m: clamp(0.25rem, 0.16rem + 0.36vw, 0.5rem);
  --space-l: clamp(0.5rem, 0.33rem + 0.71vw, 1rem);
  --space-xl: clamp(1rem, 0.83rem + 0.71vw, 1.5rem);
  --space-2xl: clamp(1.5rem, 1.33rem + 0.71vw, 2rem);
  --space-3xl: clamp(2rem, 1.65rem + 1.43vw, 3rem);
  --space-4xl: clamp(3rem, 2.83rem + 0.71vw, 3.5rem);
  --space-5xl: clamp(3.5rem, 3.15rem + 1.43vw, 4.5rem);
  --space-6xl: clamp(4.5rem, 3.98rem + 2.14vw, 6rem);
  --space-7xl: clamp(6rem, 5.30rem + 2.85vw, 8rem);
  --space-gutter-inline: clamp(1.25rem, 1.03rem + 0.89vw, 1.875rem);
  --space-grid-gutter: clamp(1rem, 0.70rem + 1.25vw, 1.875rem);
  --space-xl-2xl: clamp(1rem, 0.65rem + 1.43vw, 2rem);
  --space-l-2xl: clamp(0.5rem, -0.02rem + 2.14vw, 2rem);
  --space-2xl-3xl: clamp(1.5rem, 0.98rem + 2.14vw, 3rem);
  --space-2xl-4xl: clamp(1.5rem, 0.80rem + 2.85vw, 3.5rem);
  --space-xl-5xl: clamp(1rem, -0.22rem + 4.99vw, 4.5rem);
  --size-heading-5xl: clamp(2.25rem, 1.82rem + 1.78vw, 3.5rem);
  --size-heading-4xl: clamp(2rem, 1.65rem + 1.43vw, 3rem);
  --size-heading-3xl: clamp(1.5rem, 1.11rem + 1.60vw, 2.625rem);
  --size-heading-2xl: clamp(1.5rem, 1.24rem + 1.07vw, 2.25rem);
  --size-heading-xl: clamp(1.5rem, 1.33rem + 0.71vw, 2rem);
  --size-heading-l: clamp(1.25rem, 1.16rem + 0.36vw, 1.5rem);
  --size-heading-m: 1.25rem;
  --size-heading-s: clamp(0.75rem, 0.66rem + 0.36vw, 1rem);
  --size-heading-xs: clamp(0.75rem, 0.71rem + 0.18vw, 0.875rem);
  --size-body-xl: clamp(1.375rem, 1.33rem + 0.18vw, 1.5rem);
  --size-body-l: clamp(1.25rem, 1.21rem + 0.18vw, 1.375rem);
  --size-body: clamp(1rem, 0.91rem + 0.36vw, 1.25rem);
  --size-body-s: clamp(0.875rem, 0.83rem + 0.18vw, 1rem);
  --size-body-xs: 0.875rem;
  --size-button-l: clamp(0.875rem, 0.74rem + 0.53vw, 1.25rem);
  --size-button: clamp(0.75rem, 0.71rem + 0.18vw, 0.875rem);
  --size-button-s: 0.875rem;
  --size-heading-s-2xl: clamp(1rem, 0.57rem + 1.78vw, 2.25rem);
  --size-heading-l-5xl: clamp(1.25rem, 0.47rem + 3.21vw, 3.5rem);
  --size-heading-xl-5xl: clamp(1.5rem, 0.80rem + 2.85vw, 3.5rem);
  --size-body-l-xl: clamp(1.25rem, 1.16rem + 0.36vw, 1.5rem);
  --leading-tight: 1.05;
  --leading-flat: 1.15;
  --leading-fine: 1.25;
  --leading-standard: 1.32;
  --leading-loose: 1.4;
  --font-base: HostGrotesk,Inter,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  --font-mono: SF Mono,Consolas,Liberation Mono,Menlo,Monaco,Courier New,monospace;
  --font-light: 300;
  --font-regular: 400;
  --font-bold: 700;
  --gutter: var(--space-gutter-inline);
  --transition-base: 250ms ease;
  --transition-movement: 200ms linear;
  --transition-fade: 300ms ease;
  --transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
  --stroke: 1px dashed var(--color-dark);
  --stroke-solid: 1px solid var(--color-dark);
  --radius-s: 0.25rem;
  --radius-m: 0.5rem;
  --radius-l: 1rem;
  --radius-xl: 1.5rem;
  /* .75rem - 1.5rem */
  --radius-l-xl: clamp(0.75rem, 0.49rem + 1.07vw, 1.5rem);
  --uppercase-kerning: 0.2ch;
}

/*
  Global styles

  Low-specificity, global styles that apply to the whole
  project: https://cube.fyi/css.html
*/

body {
  background: var(--color-schiefer);
  color: var(--color-light);
  font-size: var(--size-body);
  font-family: var(--font-base);
  line-height: var(--leading-standard);
  font-size-adjust: from-font;
  margin: 0;
  letter-spacing: 2%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:is(h1, h2, h3, h4) {
  line-height: var(--leading-fine);
  letter-spacing: 1%;
  text-wrap: initial;
}

:is(h1, h2) {
  text-wrap: balance;
}

:is(h5, h6) {
  line-height: var(--leading-tight);
  letter-spacing: 4%;
}

h1 {
  font-size: var(--size-heading-4xl);
  max-width: 35ch;
}

h2 {
  font-size: var(--size-heading-3xl);
  max-width: 35ch;
}

h3 {
  font-size: var(--size-heading-2xl);
  max-width: 35ch;
}

h4 {
  font-size: var(--size-heading-xl);
  max-width: 40ch;
}

h5 {
  font-size: var(--size-heading-l);
  max-width: 45ch;
}

h6 {
  font-size: var(--size-heading-m);
  max-width: 50ch;
}

:is(h1, h2, h3, h4, h5, h6) {
  margin-block: 0;
  padding-block: 0;
  font-weight: var(--font-regular);
  line-height: var(--leading-tight);
}

p {
  margin-block: 0;
}

strong {
  font-weight: var(--font-bold);
}

small {
  font-size: var(--size-body-s);
}

ins {
  text-decoration: none;
  background: var(--color-neutral-60);
  color: var(--color-orange-100);
  padding-inline: 0.3em;
  padding-block-start: 0.2em;
}

:is(code, kbd, samp) {
  font-family: var(--font-mono);
  padding: 0.2em 0.2em 0.05em 0.2em;
  hyphens: none;
  -moz-tab-size: 2;
    -o-tab-size: 2;
       tab-size: 2;
  text-align: left;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* Inline code styling — pill background, brand-red text.
   `pre code` (block-level code) is reset below to remove these styles. */

code {
  padding: 2px 4px;
  font-size: 90%;
  color: #c7254e;
  background-color: #f9f2f4;
  border-radius: 4px;
}

/* This is quite a new property, so we want code styles to at least, not be huge or tiny */

@supports not (font-size-adjust: from-font) {
  :is(code, kbd, samp) {
    font-size: 0.8em;
  }
}

/* code snippet styling */

pre:has(code) {
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  overflow: auto;
  background-color: var(--color-neutral-20);
  padding: 1em;
  border-radius: var(--radius-m);
  font-size: var(--size-body-s);
  color: var(--color-dark);
  max-height: 20lh;
  code {
    font-size: inherit;
    color: inherit;
  }
}

pre code {
  border: none;
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
  border-radius: 0;
}

kbd {
  border: 1px solid;
  padding-block-end: 0.1em;
}

var {
  font-style: normal;
  font-weight: var(--font-bold);
}

q {
  font-style: italic;
}

ul {
  margin-block: 0;
}

ul:not([class]) {
  padding-inline-start: 1.5ch;
  list-style-type: disc;
}

ul:not([class])>li {
  padding-inline-start: var(--space-2xs);
}

:is(ol, ul):not([class]) li+* {
  margin-block-start: var(--flow-space, var(--space-2xs));
}

ul ::marker {
  font-size: .9lh;
}

p {
  font-weight: var(--font-light);
}

ol ::marker {
  font-size: 1em;
  font-weight: var(--font-bold);
}

/* Lists with classes and roles will be out of standard flow, so remove the default spacing */

[role='list'][class],
[role='tablist'][class] {
  margin-block: 0;
  padding: 0;
}

dt {
  font-weight: var(--font-bold);
}

dt+dd {
  margin-block-start: var(--space-xs);
}

dd+dt {
  margin-block-start: var(--space-s);
}

dd {
  margin-inline-start: 1.5ch;
}

blockquote {
  margin-inline: 0;
  color: var(--color-violett);
}

blockquote footer {
  margin-block-start: var(--space-s);
  color: var(--color-primary);
  font-size: var(--size-step-0);
}

blockquote q {
  font-style: normal;
}

:is(video, iframe[src*='youtube'], iframe[src*='vimeo']) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

img {
  height: auto;
  max-width: 100%;
  display: block;
}

figcaption {
  padding-block-start: 0.5em;
  font-size: var(--size-step-0);
  font-family: monospace;
}

table {
  border: var(--stroke);
  border-collapse: collapse;
  width: 100%;
}

th {
  text-align: left;
  font-weight: var(--font-bold);
  line-height: var(--leading-fine);
}

thead th {
  padding-block: var(--space-s);
}

td,
th {
  padding: var(--space-xs) var(--space-s);
}

th:not(:only-of-type) {
  border-block-end: var(--stroke);
}

th:only-of-type {
  border-inline-end: var(--stroke);
}

:is(th, td)~ :is(th, td) {
  border-inline-start: var(--stroke);
}

tr+tr :is(th, td) {
  border-block-start: var(--stroke);
}

caption {
  caption-side: bottom;
  margin-block-start: var(--space-s);
}

a:not([class]):hover {
  color: var(--color-orange-hover);
}

a:not([class]) {
  text-underline-offset: 0.2ex;
  text-decoration-thickness: 0.12ex;
}

:is(h1, h2, h3, h4) a:not([class]) {
  text-decoration-thickness: 0.1ex;
  text-underline-offset: 0.2ex;
}

:is(h1, h2, h3, h4) a:not([class]):hover {
  text-underline-offset: 0.2ex;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
  padding: var(--space-xs) var(--space-s);
  background: var(--color-light);
  color: var(--color-dark);
  font-weight: var(--font-bold);
  text-decoration: none;
}

.skip-link:focus {
  position: fixed;
  top: var(--space-xs);
  left: var(--space-xs);
  width: auto;
  height: auto;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--focus-color, currentColor);
  outline-offset: var(--focus-offset, 0.2lh);
}

/* Firefox is the only browser that doesn't outline the whole element unless you make it display: inline-block. That in itself causes multiple flow issues so we can detect it, using its own vendor prefix and reduce focus offset
*/

@supports (-moz-appearance: none) {
  :root {
    --focus-offset: 0.08em;
  }
}

:target {
  scroll-margin-block: 5lh;
}

::-moz-selection {
  color: var(--color-purple-0);
  background: var(--color-purple-60);
}

::selection {
  color: var(--color-purple-0);
  background: var(--color-purple-60);
}

hr {
  border: none;
  border-block-start: var(--stroke);
  margin-block: var(--flow-space, var(--space-xl));
}

/*
svg:not([class]) {
  width: auto;
  height: 1lh;
}

svg {
  flex-shrink: 0;
}

svg[role='img'][width][height] {
  width: revert;
  height: revert;
  background: var(--color-light);
  padding: var(--space-xs);
}*/

/* There's a .flow composition, but this prevents forms from having to have that applied where markup is harder to control in certain systems. It still uses the --flow-space variables though to make managing space easier */

form>*+* {
  margin-top: var(--flow-space, 1rem);
}

:is(input, select, textarea) {
  accent-color: var(--color-tuerkis);
}

:is(input:not([type='checkbox'], [type='radio'], [type='color']), select, textarea) {
  padding: 1em 0.5em 1em 0.5em;
  color: var(--color-dark);
  width: 100%;
  &::-moz-placeholder {
    color: var(--color-neutral-80);
  }
  &::placeholder {
    color: var(--color-neutral-80);
  }
}

label {
  line-height: var(--leading-loose);
  font-weight: var(--font-regular);
}

label::after {
  content: '\A';
  white-space: pre;
}

/* Usually label wraps checkbox and radio buttons, so we give ourselves more layout and text-flow control with flex */

label:has(input) {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  font-weight: var(--font-regular);
}

label:has(input)+label:has(input) {
  --flow-space: var(--space-s-m);
}

/* Slightly adjusts the vertical position of the check/radio */

label:has(input) input {
  transform: translateY(-0.1ex);
}

input:disabled {
  background: var(--color-blaugrau);
}

input:disabled,
label input:disabled+* {
  cursor: not-allowed;
}

fieldset {
  border: var(--stroke);
  padding: var(--space-s);
}

legend {
  font-weight: var(--font-bold);
  padding-inline: var(--space-xs);
}

summary {
  font-weight: var(--font-regular);
  cursor: pointer;
}

address {
  font-size: var(--size-body);
  line-height: var(--leading-loose);
  font-weight: var(--font-regular);
  font-style: normal;
}

iframe body {
  background-color: transparent;
}

figure {
  margin: 0;
}

a[href^="tel:"],
a[href^="mailto:"] {
  text-decoration: none;
  max-width: -moz-fit-content;
  max-width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: var(--space-m);
  line-height: var(--leading-loose);
}

a[href^="tel:"]::before,
a[href^="mailto:"]::before {
  content: "";
  display: inline-block;
  width: .8lh;
  height: .8lh;
  background-color: var(--color-light);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  flex-shrink: 0;
}

a[href^="tel:"]::before {
  -webkit-mask-image: url('../../assets/icons/tel.svg');
          mask-image: url('../../assets/icons/tel.svg');
}

a[href^="mailto:"]::before {
  -webkit-mask-image: url('../../assets/icons/mailto.svg');
          mask-image: url('../../assets/icons/mailto.svg');
}

a[href^="tel:"]:hover,
a[href^="mailto:"]:hover {
  text-decoration: underline;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  text-underline-offset: 0.2lh;
}

p,
h3,
h4,
h5,
h6 {
  /* hyphens: auto; */
  /* [no-break-test] temporaer deaktiviert (Test ohne Wort-Umbrueche) */
  hyphenate-limit-chars: 6 3 2;
}

@view-transition {
  navigation: auto;
}

#wpadminbar {
  bottom: 0 !important;
  top: unset !important;
}

/* Cyber Emergency Button
 *
 * Injected into <header class="header"> via render_block_core/template-part
 * filter. On desktop the button is absolutely positioned inside the fixed
 * header so it shares the header's container context and reacts to the
 * .header--hidden scroll state (slides up into the nav position on scroll
 * down, slides back down on scroll up).
 *
 * On mobile/tablet it falls back to a viewport-fixed bottom-right card.
 */

.cyber-emergency {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: 24px;
  background: var(--color-orange-100);
  color: var(--color-dark);
  font-weight: var(--font-bold);
  line-height: var(--leading-flat);
  font-size: var(--size-body-s);
  text-decoration: none;
  box-shadow: 0 12px 28px -6px rgba(16, 24, 40, 0.22);
  will-change: transform;
  /* Mobile default (<md): fixed bottom-right, 117×92 per Figma spec,
   * 16px padding all around, 24px bottom offset, inside the content gutter. */
  position: fixed;
  right: var(--space-gutter-inline);
  bottom: 24px;
  z-index: 90;
  width: 117px;
  min-height: 92px;
  transition:
    background var(--transition-base),
    transform var(--transition-movement);
}

/* Hide arrow ring on mobile — Figma mobile design is icon + label only */

.cyber-emergency__arrow.button {
  display: none;
}

.cyber-emergency:hover,
.cyber-emergency:focus-visible {
  background: var(--color-orange-hover);
  color: var(--color-dark);
  transform: rotate(-2.4deg);
}

.cyber-emergency:focus-visible {
  outline: 2px solid var(--color-dark);
  outline-offset: 2px;
}

.cyber-emergency__icon {
  display: inline-flex;
  align-self: flex-start;
}

.cyber-emergency__icon svg {
  width: 24px;
  height: 24px;
}

.cyber-emergency__label {
  display: block;
}

/* Desktop: anchored inside <header> .wp-block-pp-repel
 * The repel is the flex container that holds the site-brand and the menu
 * (justify-content: space-between), so its right edge matches the menu's
 * right edge exactly. By making it the positioning context, the button
 * sits flush with the nav horizontally.
 */

@media (min-width: 767px) {
  header.header .wp-block-pp-repel {
    position: relative;
  }

  header.header .cyber-emergency {
    position: absolute;
    top: 100%;
    right: 0;
    bottom: auto;
    margin-block-start: 88px;
    width: 16rem;
    min-width: 0;
    max-width: none;
    font-size: var(--size-heading-l);
    padding: var(--space-l);
    padding-inline-end: calc(var(--space-l) + 52px + var(--space-s));
    border-radius: var(--radius-xl);
    gap: var(--space-l);
    /* Stay behind the navigation's dropdown submenus (the card is injected
     * after the menu in the DOM, so without a lower z-index it would paint
     * on top and hide the opened submenu). */
    z-index: 0;
    transition:
      top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      margin-block-start 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      translate 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      background var(--transition-base),
      transform var(--transition-movement);
  }

  /* Lift the menu (and its absolute-positioned submenu panels) above the
   * cyber-emergency card so opened dropdowns are never covered. */

  header.header .menu {
    z-index: 2;
  }

  header.header .cyber-emergency__icon svg {
    width: 36px;
    height: 36px;
  }

  /* Show arrow ring again on desktop */

  header.header .cyber-emergency__arrow.button {
    display: inline-flex;
    position: absolute;
    top: var(--space-l);
    right: var(--space-l);
  }

  /* Desktop hover: circle stretches to 52px — matches teaser-box @screen md */

  header.header .cyber-emergency:hover .cyber-emergency__arrow.button::before,
  header.header .cyber-emergency:focus-visible .cyber-emergency__arrow.button::before {
    transform: translateX(-3.5px) var(--icon-transform);
  }

  header.header .cyber-emergency:hover .cyber-emergency__arrow.button::after,
  header.header .cyber-emergency:focus-visible .cyber-emergency__arrow.button::after {
    width: 52px;
  }

  /* Nav hides on scroll down → button takes the nav's exact vertical
   * position (vertically centered inside the repel row, no 88px offset).
   * Uses the standalone CSS `translate` property (independent of
   * `transform`) so the hover rotate still composes correctly.
   */

  header.header--hidden .cyber-emergency {
    top: 50%;
    margin-block-start: 0;
    translate: 0 -50%;
  }
}

/* Hide the Cyber-Emergency button while the user scrolls DOWN, reveal
   it when scrolling up or at top. Toggled via html.is-scrolling-down
   set by theme/assets/js/header-scroll.js. */

.cyber-emergency {
  transition:
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0s;
}

html.is-scrolling-down .cyber-emergency {
  opacity: 0;
  transform: translateY(-1rem);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0.3s;
}

/*
CLUSTER
More info: https://every-layout.dev/layouts/cluster/
A layout that lets you distribute items with consitent
spacing, regardless of their size

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.

--cluster-horizontal-alignment (flex-start) How items should align
horizontally. Can be any acceptable flexbox aligmnent value.

--cluster-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-m));
  justify-content: var(--cluster-horizontal-alignment, flex-start);
  align-items: var(--cluster-vertical-alignment, center);
}

/* 
COLUMN LAYOUT
A layout that flows content into columns from top to bottom
using CSS multi-column layout.

CUSTOM PROPERTIES AND CONFIGURATION
--column-width (16.75rem): The ideal width of each column. 
The browser will create as many columns as will fit.

--column-count (auto): Alternative to column-width. Sets an 
exact number of columns. When set, this takes precedence over 
column-width.

--column-gap (var(--space-xl)): The horizontal space between columns.

--row-gap (var(--column-gap)): The vertical space between items 
within columns (via margin-bottom on children).

USAGE:
Use either column-width OR column-count, not both:
- column-width: responsive, creates as many columns as fit
- column-count: fixed number of columns

*/

.column-layout {
  -moz-column-count: var(--column-count, auto);
       column-count: var(--column-count, auto);
  -moz-column-width: var(--column-width, 16.75rem);
       column-width: var(--column-width, 16.75rem);
  -moz-column-gap: var(--column-gap, var(--space-xl));
       column-gap: var(--column-gap, var(--space-xl));
}

/* for nested components use flex */

.column-layout>div,
.column-layout>article,
.column-layout>section,
.column-layout>figure {
  display: flex;
  width: 100%;
  height: auto;
}

.column-layout>* {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  margin-bottom: var(--row-gap, var(--column-gap, var(--space-xl)));
}

.column-layout .column-layout>figure>img {
  width: 100%;
  height: auto;
}

.column-layout.offset {
  --offset: var(--space-3xl);
  .col-offset {
    transform: translateY(var(--offset));
  }
  .col-offset~* {
    transform: translateY(calc(var(--offset)));
  }
}

.column-layout__container {
  container-type: inline-size;
  container-name: column-layout__container;
}

/* On narrow containers (≈ viewport ≤ 765px after gutter-inline/col-X-12 padding
   is deducted) collapse multi-column layouts to a single column. `column-count`
   is set directly (not via the custom property) so it overrides any inline
   `--column-count` value set by the block. */

@container column-layout__container (max-width: 720px) {
  .column-layout {
    -moz-column-count: 1;
         column-count: 1;
    .col-offset {
      transform: translateY(0) !important;
    }
    .col-offset~* {
      transform: translateY(0) !important;
    }
  }
}

/* On tablet-width layout-grids (≈ viewport 766–960px), expand `col-2-12`
   wrappers that host a column-layout to full grid width so the two-column
   card layout uses the available space instead of being inset by 1/12 each
   side. Below 767px the default `col-X-Y` utility already collapses to
   `grid-column: 1 / -1`, so this rule only adds the tablet range. */

@container layout-grid (max-width: 910px) {
  .col-2-12:has(> .column-layout__container) {
    grid-column: 1 / -1;
  }
}

/* 
FLOW COMPOSITION 
Like the Every Layout stack: https://every-layout.dev/layouts/stack/
Info about this implementation: https://piccalil.li/quick-tip/flow-utility/ 
*/

.flow>*+* {
  margin-block-start: var(--flow-space, 1em);
}

.frame {
  --n: 16;
  --d: 9;
  aspect-ratio: var(--n) / var(--d);
  overflow: clip;
  display: flex;
  justify-content: center;
  align-items: center;
}

.frame>img,
.frame>video {
  inline-size: 100%;
  block-size: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* AUTO GRID
Related Every Layout: https://every-layout.dev/layouts/grid/
More info on the flexible nature: https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
A flexible layout that will create an auto-fill grid with
configurable grid item sizes

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.

--grid-min-item-size (14rem): How large each item should be
ideally, as a minimum.

--grid-placement (auto-fill): Set either auto-fit or auto-fill
to change how empty grid tracks are handled */

.grid-container {
  container-type: inline-size;
  container-name: grid-container;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-placement, auto-fill),
      minmax(min(100%, var(--grid-min-item-size, 16rem)), 1fr));
  gap: var(--gutter, var(--space-grid-gutter));
}

/* A split 50/50 layout */

.grid[data-layout='halves'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 50vw, 33rem);
}

/* Three column grid layout */

.grid[data-layout='thirds'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 33%, 20rem);
}

/* Page teaser grid layout: requires image as first child and teaser-box as second child */

.grid[data-layout='page-teaser-grid'] {
  --gutter: var(--space-zero);
  --grid-min-item-size: 100cqw;
  --grid-placement: auto-fit;
  figure:nth-child(1) {
    border-radius: unset;
    aspect-ratio: 390 / 239;
    margin-inline: calc(-1 * var(--space-gutter-inline));
    &>img {
      min-width: 100%;
      min-height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
    }
  }
  .teaser-box {
    margin-block-start: calc(-1 * var(--space-5xl));
  }
}

@container grid-container (min-width: 767px) {
  .grid[data-layout='page-teaser-grid'] {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, auto)) calc(var(--space-5xl) - .8 * var(--space-grid-gutter));
    --grid-min-item-size: unset;
    --gutter: var(--grid-gutter);
    align-items: flex-start;
    figure:nth-child(1) {
      grid-column: 1 / span 7;
      grid-row: 1 / span 2;
      aspect-ratio: 803 / 539;
      border-radius: var(--radius-l);
      margin-inline: unset;
      &>img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
      }
    }
    .teaser-box {
      grid-row: 2 / span 2;
      align-self: flex-end;
      margin-block-start: unset;
      grid-column: 8 / span 5;
    }
  }
}

.grid[data-layout='solutions-grid'] {
  grid-template-columns: auto;
  gap: var(--space-2xl);
  /* add additonal space  between on top of kickstart your solution journey */
  &>:nth-child(3) {
    margin-block-start: var(--space-2xl);
  }
}

@container grid-container (min-width:1028px) {
  .grid[data-layout='solutions-grid'] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: var(--space-4xl) var(--space-5xl);
    &>:nth-child(n + 1) {
      grid-column: 1 / span 1;
      grid-row: 1 / 2;
    }
    &>:nth-child(n + 2) {
      grid-column: 1 / span 1;
      grid-row: 2 / 3;
    }
    &>:nth-child(n + 3) {
      margin-block-start: unset;
      grid-column: 2 / span 1;
      grid-row: 1 / 2;
    }
    &>:nth-child(n + 4) {
      grid-column: 2 / span 1;
      grid-row: 2 / 3;
    }
  }
}

.grid[data-layout='page-intro-grid'],
.grid[data-layout='page-intro-grid-v2'] {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto;
  row-gap: var(--space-xl);
  /* teaser box */
  &>:nth-child(n + 1) {
    grid-column: 1 / -1;
  }
  /* image */
  &>:nth-child(n + 2) {
    grid-column: 2 / -1;
    aspect-ratio: 1.69 / 1;
    img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
    }
  }
}

@container grid-container (min-width:767px) {
  .grid[data-layout='page-intro-grid'],
  .grid[data-layout='page-intro-grid-v2'] {
    align-items: center;
    &>:nth-child(2n + 1) {
      grid-column: 1 / 8;
      grid-row: 1 / -1;
    }
    &>:nth-child(2n + 2) {
      grid-column: 5 / 13;
      aspect-ratio: 1.55 / 1;
      grid-row: 1 / -1;
    }
  }

  .grid[data-layout='page-intro-grid-v2'] {
    &>:nth-child(2n + 1) {
      grid-column: 1 / 7;
    }
  }
}

/* custom layout for benefits cards including title/intro as first grid item 
  and the benefit cards as subsequent grid items */

.grid[data-layout='benefits-grid'] {
  --grid-min-item-size: 300px;
  &>:first-child {
    grid-column: 1 / span 2;
    p {
      max-width: 40ch;
    }
  }
}

@container grid-container (max-width:630px) {
  .grid[data-layout='benefits-grid'] {
    &>:first-child {
      grid-column: unset;
    }
  }
}

/* custom layout for academy cards on page baseVISION academy */

.grid[data-layout='academy-grid'] {
  --grid-min-item-size: 445px;
  &>:first-child {
    grid-column: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    p {
      max-width: 50ch;
    }
  }
}

@container grid-container (max-width: 920px) {
  .grid[data-layout='academy-grid'] {
    &>:first-child {
      grid-column: unset;
    }
  }
}

/* Custom class added via the editor's Additional CSS Class field. The
   block ships --grid-min-item-size as an inline style so external CSS
   can't compete on specificity — !important is needed. Force a single
   full-width column on mobile so cards stack instead of pairing two-up. */

@media (max-width: 767px) {
  .grid.journey-res {
    --grid-min-item-size: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Contact page address-vs-map grid: gutter-7xl is the desktop side-by-
   side gap, but once it collapses to a single vertical stack on mobile
   the ≈96-130px gap between the text block and the Maps embed reads as
   overwhelming whitespace. Target the grid via the Google Maps teaser-
   box presence so this only kicks in where the editor actually pairs
   description + map. */

@media (max-width: 767px) {
  .grid.gutter-7xl:has([data-variant="google-maps"]) {
    --gutter: var(--space-4xl);
  }
}

/* Editor-applied modifier: force a two-column grid on mobile.
   Block ships --grid-min-item-size as an inline style (e.g. 260px) so
   the default auto-fit collapses to a single column when the viewport
   is narrower than that. The !important overrides the inline value,
   and the explicit grid-template-columns wins regardless of the
   min-item-size since it pins the column count directly. */

@media (max-width: 767px) {
  .grid.basemobile-two {
    --grid-min-item-size: 100px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.layout-grid {
  display: grid;
  -moz-column-gap: var(--space-grid-gutter);
       column-gap: var(--space-grid-gutter);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  container-name: layout-grid;
  container-type: inline-size;
}

.min-width-220 {
  min-width: min(220px, 100%);
}

.max-width-370 {
  max-width: 370px;
}

.max-width-640 {
  max-width: 640px;
}

.flex-grow-1 {
  flex-grow: 1;
}

@container layout-grid (max-width: 767px) {
  .sticky-sidebar {
    padding-bottom: 0 !important;
  }
}

@media (min-width: 767px) {
  .sticky-sidebar-grid {
    align-items: start;
    & .sticky-sidebar {
      position: sticky;
      top: var(--header-height, 0px);
    }
  }
}

.reel {
  --color-scrollbar-thumb: var(--color-primary);
  --color-scrollbar-track: var(--color-light);
  --scrollbar-height: 1rem;
  --reel-gap: var(--space-m);
  display: flex;
  block-size: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}

.reel::-webkit-scrollbar {
  block-size: var(--scrollbar-height);
}

.reel::-webkit-scrollbar-track {
  background-color: var(--color-scrollbar-track);
}

.reel::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar-thumb);
  background-image: linear-gradient(var(--color-scrollbar-track) 0,
      var(--color-scrollbar-track) calc(.25 * var(--scrollbar-height)),
      var(--color-scrollbar-thumb) calc(.25 * var(--scrollbar-height)),
      var(--color-scrollbar-thumb) calc(.75 * var(--scrollbar-height)),
      var(--color-scrollbar-track) calc(.75 * var(--scrollbar-height)),
    );
}

.reel>* {
  flex: 0 0 auto;
}

.reel>img {
  block-size: 100%;
  flex-basis: auto;
  width: auto;
}

.reel>*+* {
  margin-inline-start: var(--reel-gap);
}

.reel.overflowing {
  padding-block-end: var(--scrollbar-height);
}

/*
REPEL
A little layout that pushes items away from each other where
there is space in the viewport and stacks on small viewports

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.

--repel-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.repel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: var(--repel-vertical-alignment, center);
  gap: var(--gutter, var(--space-s-m));
}

.repel[data-nowrap] {
  flex-wrap: nowrap;
}

/* 
SIDEBAR
More info: https://every-layout.dev/layouts/sidebar/
A layout that allows you to have a flexible main content area
and a "fixed" width sidebar that sits on the left or right.
If there is not enough viewport space to fit both the sidebar
width *and* the main content minimum width, they will stack
on top of each other

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between the sidebar and main content.

--sidebar-target-width (20rem): How large the sidebar should be

--sidebar-content-min-width(50%): The minimum size of the main content area

Exceptions:
.sidebar[data-direction='rtl']: flips the sidebar to be on the right 
.sidebar[data-reversed="true"]: reverses the order of the sidebar and main content in vertical arrangment
*/

.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-l));
}

.sidebar> :first-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
}

.sidebar> :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}

.sidebar[data-reversed="true"] {
  flex-direction: row-reverse;
}

.sidebar[data-direction='rtl']> :last-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
  min-width: unset;
}

.sidebar[data-direction='rtl']> :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}

/*
SWITCHER
More info: https://every-layout.dev/layouts/switcher/
A layout that allows you to lay **2** items next to each other
until there is not enough horizontal space to allow that.

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between each item

--switcher-target-container-width (40rem): How large the container
needs to be to allow items to sit inline with each other

--switcher-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-l));
  align-items: var(--switcher-vertical-alignment, flex-start);
}

.switcher>* {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
}

/* Max 2 items,
so anything greater than 2 is full width */

.switcher> :nth-child(n + 3) {
  flex-basis: 100%;
}

/*
WRAPPER COMPOSITION 
A common wrapper/container
*/

.wrapper {
  margin-inline: auto;
  max-width: clamp(16rem, var(--wrapper-max-width, 1460px), 105rem);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
}

.wrapper-min {
  --wrapper-max-width: 390px;
}

.wrapper-mid {
  --wrapper-max-width: 767px;
}

.wrapper-max {
  --wrapper-max-width: 1460px;
}

.basis-full {
  flex-basis: 100%;
}

.flex-grow-1 {
  flex-grow: 1;
}

:root {
  --measure: 65ch;
}

.no-measure {
  max-width: unset;
}

/*
REGION UTILITY
Consistent block padding for page sections
*/

.region {
  padding-block: var(--region-space, var(--space-xl-2xl));
}

/* Mobile: tighten the largest region-space step.
   region-space-6xl reads as ≈96px of vertical breathing room on
   desktop, which becomes overwhelming whitespace between sections on
   phone screens. Step down by one tier (-> region-space-5xl) only on
   mobile so the desktop rhythm is preserved.

   Specificity note: the `region-space-*` utility is generated by the
   tailwind.config.js plugin AFTER this file in the bundle. With the
   same single-class selector, Tailwind's later declaration would win
   the cascade and the mobile override would be silently ignored. The
   compound selector `.region.region-space-6xl` (0,2,0 vs Tailwind's
   0,1,0) raises specificity and ensures this rule wins. */

@media screen and (max-width: 600px) {
  .region.region-space-6xl {
    --region-space: var(--space-5xl);
  }
}

.heading-5xl {
  font-size: var(--size-heading-5xl);
  line-height: var(--leading-tight);
  letter-spacing: 1%;
  font-weight: var(--font-regular);
}

.heading-4xl {
  font-size: var(--size-heading-4xl);
  line-height: var(--leading-flat);
  letter-spacing: 1%;
  font-weight: var(--font-regular);
}

.heading-3xl {
  font-size: var(--size-heading-3xl);
  line-height: var(--leading-flat);
  letter-spacing: 1%;
  font-weight: var(--font-regular);
}

.heading-2xl {
  font-size: var(--size-heading-2xl);
  line-height: var(--leading-flat);
  letter-spacing: 0%;
  font-weight: var(--font-regular);
}

.heading-xl {
  font-size: var(--size-heading-xl);
  line-height: var(--leading-flat);
  letter-spacing: 0%;
  font-weight: var(--font-regular);
}

.heading-l {
  font-size: var(--size-heading-l);
  line-height: var(--leading-fine);
  letter-spacing: 1%;
  font-weight: var(--font-regular);
}

.heading-m {
  font-size: var(--size-heading-m);
  line-height: var(--leading-fine);
  letter-spacing: 2%;
  font-weight: var(--font-bold);
}

.heading-s {
  font-size: var(--size-heading-s);
  line-height: var(--leading-fine);
  letter-spacing: 4%;
  font-weight: var(--font-bold);
}

.heading-xs {
  font-size: var(--size-heading-xs);
  line-height: var(--leading-fine);
  letter-spacing: 4%;
  font-weight: var(--font-regular);
}

.body-xl {
  font-size: var(--size-body-xl);
  line-height: var(--leading-flat);
  letter-spacing: 1%;
  font-weight: var(--font-light);
}

.body-l {
  font-size: var(--size-body-l);
  line-height: var(--leading-fine);
  letter-spacing: 2%;
  font-weight: var(--font-light);
}

.body {
  font-size: var(--size-body-m);
  line-height: var(--leading-loose);
  letter-spacing: 2%;
  font-weight: var(--font-light);
}

.body-s {
  font-size: var(--size-body-s);
  line-height: var(--leading-fine);
  letter-spacing: 2%;
  font-weight: var(--font-regular);
}

.body-xs {
  font-size: var(--size-body-xs);
  line-height: var(--leading-standard);
  letter-spacing: 2%;
  font-weight: var(--font-regular);
}

/* 
VISUALLY HIDDEN UTILITY
Info: https://piccalil.li/quick-tip/visually-hidden/ 
*/

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.wp-block-pp-button.button,
.wp-core-ui .button,
:is(.button) {
  --button-bg: var(--color-orange-100);
  --button-bg-hover: var(--color-orange-hover);
  --button-text: var(--color-light);
  --button-x-padding: 16px;
  --button-y-padding: 9.71px 11.71px;
  --button-gutter: .25rem;
  --focus-color: var(--color-neutral-80);
  --icon-transform: rotate(45deg);
  --icon-color: var(--color-light);
  --circle-diameter: 34px;
  --arrow-width: 14px;
  font-size: 12px;
  padding: 0;
  background: transparent;
  @media (min-width: 767px) {
    --circle-diameter: 46px;

    --arrow-width: 15px;

    --button-x-padding: 20px;

    --button-y-padding: 15.32px 16px;

    font-size: 14px;
  }
  display: inline-flex;
  will-change: transform;
  gap: var(--button-gutter);
  align-items: center;
  line-height: var(--leading-tight);
  position: relative;
  border: none;
  cursor: pointer;
  color: var(--button-text);
  text-decoration: none !important;
  font-weight: var(--font-regular);
  & * {
    transition: inherit;
  }
  & span.button-text {
    display: inline-block;
    background-color: var(--button-bg);
    padding-block: var(--button-y-padding);
    padding-inline: var(--button-x-padding);
    border-radius: 100vmax;
    font-weight: var(--font-bold);
    letter-spacing: 2%;
  }
  &::before {
    content: "";
    position: absolute;
    will-change: transform, width, height;
    top: 50%;
    right: 0;
    translate: calc((var(--circle-diameter) - var(--arrow-width)) / -2) -50%;
    width: var(--arrow-width);
    height: var(--arrow-width);
    background-color: var(--icon-color);
    transition: transform var(--transition-movement);
    -webkit-mask-image: url("../../assets/icons/arrow-top-right.svg");
            mask-image: url("../../assets/icons/arrow-top-right.svg");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
  }
  &::after {
    will-change: transform, width;
    height: var(--circle-diameter);
    width: var(--circle-diameter);
    content: "";
    position: relative !important;
    transition: width var(--transition-movement);
    border-radius: 100vmax;
    border: 2px solid var(--color-light);
  }
}

.wp-block-pp-button.button:hover,
.wp-core-ui .button:hover,
.button:hover,
.teaser-box:has(.teaser-box__link:hover) .button {
  & span.button-text {
    background-color: var(--button-bg-hover);
  }
  &::before {
    transform: translateX(-5px) var(--icon-transform);
    @media (min-width: 767px) {
      transform: translateX(-3.5px) var(--icon-transform);
    }
  }
  &::after {
    width: 44px;
    @media (min-width: 767px) {
      width: 52px;
    }
  }
}

.wp-block-pp-button.button:active,
.wp-core-ui .button:active,
.button:active {
  transform: scale(0.98);
}

.wp-block-pp-button.button:disabled,
.wp-core-ui .button:disabled,
.button:disabled {
}

.button[data-variant="secondary"] {
  --button-bg: none;
  --button-bg-hover: none;
  --button-text: var(--color-light);
  --button-text-hover: var(--color-light);
  --button-x-padding: 0;
  --button-gutter: .5rem;
}

.button[data-variant="tertiary"] {
  --button-x-padding: 0;
  --button-y-padding: 0;
  --button-bg: none;
  --button-bg-hover: none;
  --button-text: var(--color-orange-100);
  --button-gutter: .4rem;
  & span.button-text {
    font-size: var(--size-button-l);
    font-weight: var(--font-light);
    position: relative;
    /* underline */
    &::before {
      content: '';
      position: absolute;
      bottom: -.1em;
      left: 0;
      right: 0;
      height: 1px;
      background-color: var(--color-orange-100);
    }
  }
  &::after {
    content: "";
    -webkit-mask-image: url("../../assets/icons/arrow-top-right-light.svg");
            mask-image: url("../../assets/icons/arrow-top-right-light.svg");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    width: 17px;
    height: 17px;
    background-color: var(--color-orange-100);
    border-radius: 0;
    border: none;
    transform: unset;
    transform-origin: 15% center;
    transition: var(--transition-movement);
  }
  &::before {
    content: none;
  }
}

.button[data-variant="tertiary"]:hover,
.teaser-box:has(.teaser-box__link:hover) .button[data-variant="tertiary"] {
  &::after {
    transform: var(--icon-transform);
  }
}

.button[data-variant="back-button"] {
  --button-bg: none;
  --button-bg-hover: none;
  --button-text: var(--color-light);
  --button-text-hover: var(--color-light);
  --button-x-padding: 0;
  --button-gutter: .5rem;
  /* Back-button uses the clean `arrow-top-right.svg` (which has no
     internal SVG transform — iOS Safari ignores those when the file
     is used as a CSS mask-image). The icon is rotated in CSS:
       - DEFAULT: rotate(270deg)  → arrow points top-left (↖)
       - HOVER:   rotate(225deg)  → arrow points left   (←)
     The 45° delta between the two states animates smoothly via the
     base button's `transition: transform` and reads as a small tilt
     toward the back direction — not the full ~225° spin the previous
     setup produced (which kicked off from 0° on hover). */
  --icon-default-transform: rotate(270deg);
  --icon-transform: rotate(225deg);
  flex-direction: row-reverse;
  font-size: .875rem;
  &::before {
    -webkit-mask-image: url("../../assets/icons/arrow-top-right.svg");
            mask-image: url("../../assets/icons/arrow-top-right.svg");
    left: 0;
    translate: calc((var(--circle-diameter) - var(--arrow-width)) / 2) -50%;
    /* Apply the default rotation so the icon already shows as ↖. */
    transform: var(--icon-default-transform);
  }
  &:hover::before {
    /* Slide left + tilt to ← on hover (back-action direction). */
    transform: translateX(-5px) var(--icon-transform) !important;
    @media (min-width: 767px) {
      transform: translateX(-3.5px) var(--icon-transform) !important;
    }
  }
}

/* Mobile/responsive: keep some breathing room below the back-button so
   the next section starts visibly lower than the link. */

@media (max-width: 1023px) {
  .button[data-variant="back-button"] {
    margin-block-end: 24px;
  }
}

.button[data-variant="navigation"] {
  --button-bg: var(--color-schiefer);
  --button-bg-hover: var(--color-neutral-80);
  --line-height: var(--leading-standard);
  font-size: .875rem;
  --button-x-padding: 18px;
  --button-y-padding: 15.3px 14px;
  &::before {
    content: none;
  }
  &::after {
    content: none;
  }
}

.button[data-variant="icon-only"] {
  font-size: .875rem;
  & .button-text {
    visibility: hidden;
    position: absolute;
    transform: scale(0);
  }
}

.button[download] {
  --icon-transform: none;
  &::before {
    content: "";
    position: absolute;
    will-change: transform, width, height;
    top: 50%;
    right: -3px;
    transform: translate(0%, 0%);
    -webkit-mask-image: url("../../assets/icons/download-button.svg");
            mask-image: url("../../assets/icons/download-button.svg");
    width: 18px;
    height: 20px;
    background-color: white;
    transition: none;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
  }
  &:hover::after {
    transform: none;
    height: var(--circle-diameter) !important;
    width: var(--circle-diameter) !important;
  }
}

/* Custom modifier: render the button text at body-xl size to match
   the surrounding paragraph styling (used e.g. on the Contact page
   so the link reads as the same weight/size as the address copy).
   The selectors duplicate the `[data-variant="..."]` form so this
   rule wins specificity against the tertiary/secondary variant
   declarations that follow later in source order. */

.button.btn-pp-body-xl,
.button[data-variant="tertiary"].btn-pp-body-xl,
.button[data-variant="secondary"].btn-pp-body-xl {
  font-size: var(--size-body-xl);
}

.button.btn-pp-body-xl span.button-text,
.button[data-variant="tertiary"].btn-pp-body-xl span.button-text,
.button[data-variant="secondary"].btn-pp-body-xl span.button-text {
  font-size: var(--size-body-xl);
  line-height: var(--leading-fine);
  font-weight: var(--font-light);
}

/* Contact-box layout helpers
 *
 * Two markup variants share the `.contact-box` class:
 *   1) `pp/contact-box` block          → `<div class="contact-box">…</div>`
 *      Block-specific CSS lives in `theme/blocks/contact-box/style.css`
 *      and is only enqueued when that block is on the page.
 *
 *   2) `pp/flex` block with editor-added class `contact-box` →
 *      `<div class="wp-block-pp-flex … contact-box">…</div>`
 *      Used on job-detail / contact-quote pages. The flex layout
 *      itself comes from the `pp/flex` block; we only add layout
 *      helpers that aren't tied to a single block instance.
 *
 * This file lives under `theme/assets/css/blocks/` and is auto-
 * included via the `blocks/*.css` glob in `theme/assets/css/global.css`
 * so it loads regardless of which block produces the markup.
 */

/* On phone-size layouts the contact-box stacks under the headline /
   quote above it. Give it breathing room so the photo + text don't
   crash into the headline. Scope to the pp/flex variant specifically
   (`wp-block-pp-flex.self-end.contact-box`) so the pp/contact-box
   layout — which controls its own spacing — is unaffected. */

@media (max-width: 765px) {
  .wp-block-pp-flex.self-end.contact-box {
    margin-top: var(--space-4xl);
  }
}

.wp-block-embed {
  border-radius: var(--radius-xl);
  overflow: clip;
}

.wpforms-label-hide {
  visibility: hidden;
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

div.wpforms-container {
  padding: 0;
  container-name: form;
  container-type: inline-size;
  .wpforms-layout-row {
    margin: 0 !important;
    -moz-column-gap: var(--space-grid-gutter);
         column-gap: var(--space-grid-gutter);
  }
  .wpforms-layout-column {
    padding: 0 !important;
  }
  /* ------------------------------------
   submit button
   ------------------------------------- */
  .wpforms-submit {
  }
}

@container form (max-width: 500px) {
  .wpforms-layout-row {
    flex-direction: column;
    row-gap: var(--space-l);
  }

  .wpforms-layout-column-50 {
    width: unset !important;
  }
}

.wpforms-field-container {
  margin: 0;
  display: flex;
  flex-direction: column;
  row-gap: var(--space-l);
}

.wpforms-field-email,
.wpforms-field-text,
.wpforms-field-textarea,
.wpforms-field-select {
  position: relative;
}

.wpforms-field.filled:not(.wpforms-field-checkbox) label,
.wpforms-field:has(input:focus-visible):not(.wpforms-field-checkbox) label,
.wpforms-field:has(textarea:focus-visible) label {
  top: 0;
  padding-inline: .25rem;
  font-size: var(--size-body-s);
  font-weight: 300;
  background: var(--color-schiefer);
}

.wpforms-error {
  color: var(--color-error);
  font-size: var(--size-body-s);
  padding-block-start: var(--space-s);
  padding-inline-start: .5em;
  font-weight: var(--font-regular);
  font-style: normal;
}

.wpforms-field-email label,
.wpforms-field-text label,
.wpforms-field-textarea label,
.wpforms-field-select label {
  position: absolute;
  top: 28px;
  left: 0.5em;
  transform: translateY(-50%);
  transition: top var(--transition-base),
        font-size var(--transition-base),
        padding var(--transition-base),
        background var(--transition-base);
  font-size: var(--size-body);
  color: var(--color-neutral-60);
  line-height: var(--leading-loose);
}

.wpforms-field-textarea label {
  top: 2em;
}

.wpforms-field-email input,
.wpforms-field-text input,
.wpforms-field-textarea textarea,
.wpforms-field-select select {
  padding: 14px;
  background-color: transparent;
  color: var(--color-neutral-0);
  font-size: var(--size-body);
  font-weight: 300;
  border-radius: 4px;
  border: 1px solid var(--color-neutral-40);
  outline: none;
  /*.filled &,*/
  &:focus {
    border-color: var(--color-neutral-0);
  }
}

.wpforms-field-select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.wpforms-field-select::after {
  content: "";
  position: absolute;
  right: 0.75em;
  top: 50%;
  width: var(--space-xl);
  height: var(--space-xl);
  transform: translateY(-50%);
  pointer-events: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5929 13.106L6.57868 7.0918L5.17868 8.4918L12.5929 15.906L20.0071 8.4918L18.6071 7.0918L12.5929 13.106Z'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5929 13.106L6.57868 7.0918L5.17868 8.4918L12.5929 15.906L20.0071 8.4918L18.6071 7.0918L12.5929 13.106Z'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.wpforms-confirmation-container {
  font-size: var(--size-body-xl);
  min-height: 20em;
}

.wpforms-field-checkbox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
  fieldset {
    border: none;
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
  label {
    display: block;
    padding-inline-start: 32px;
    position: relative;
    cursor: pointer;
    font-weight: 300;
    a {
      text-decoration: underline;
      color: var(--color-orange-100);
      font-weight: 700;
    }
    /* ------------------------------------
                 Check Area
            ------------------------------------- */
    &:after {
      content: '';
      height: 20px;
      width: 20px;
      border: 1px solid var(--color-neutral-20);
      background-color: var(--color-neutral-0);
      position: absolute;
      left: 0;
      top: .4ex;
      border-radius: 4px;
    }
    &:before {
      display: none;
      position: absolute;
      z-index: 1;
      top: .9ex;
      left: 3px;
      content: '';
      width: 14px;
      height: 10px;
      border-radius: 3px;
      background-color: currentColor;
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M12.2196 0.21967C12.5124 -0.0732233 12.9872 -0.0732233 13.2801 0.21967C13.573 0.512563 13.573 0.987324 13.2801 1.28022L5.0301 9.53022C4.7372 9.82311 4.26244 9.82311 3.96955 9.53022L0.219551 5.78022L0.168281 5.72309C-0.0719815 5.42851 -0.0550362 4.99426 0.219551 4.71967C0.494138 4.44508 0.928388 4.42814 1.22297 4.6684L1.2801 4.71967L4.49982 7.9394L12.2196 0.21967Z'/%3E%3C/svg%3E") no-repeat center;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M12.2196 0.21967C12.5124 -0.0732233 12.9872 -0.0732233 13.2801 0.21967C13.573 0.512563 13.573 0.987324 13.2801 1.28022L5.0301 9.53022C4.7372 9.82311 4.26244 9.82311 3.96955 9.53022L0.219551 5.78022L0.168281 5.72309C-0.0719815 5.42851 -0.0550362 4.99426 0.219551 4.71967C0.494138 4.44508 0.928388 4.42814 1.22297 4.6684L1.2801 4.71967L4.49982 7.9394L12.2196 0.21967Z'/%3E%3C/svg%3E") no-repeat center;
      -webkit-mask-size: contain;
              mask-size: contain;
    }
  }
  input {
    opacity: 0;
    position: absolute;
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
    &:checked+label {
      &:after {
        border: 2px solid var(--color-primary);
        background-color: var(--color-orange-100);
      }
      &:before {
        display: block;
      }
    }
  }
  .wpforms-error {
    margin-inline-start: 24px;
  }
}

/* ------------------------------------
    Layouts — contact-basevision
    Two variants:
      A) Plain form (no WPForms layout block): old grid on
         .wpforms-field-container splits direct field children
         into two columns. Textarea spans both rows.
      B) WPForms layout block present (data-field-type="layout"):
         the editor controls a 50/50 split. We don't double-grid
         the outer container; we style WPForms' own column wrapper
         and re-flow on mobile via display: contents + `order`.
------------------------------------- */

/* Variant A — plain form */

.contact-basevision .wpforms-field-container:not(:has(.wpforms-field-layout)) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  -moz-column-gap: var(--space-grid-gutter);
       column-gap: var(--space-grid-gutter);
  row-gap: var(--space-xl);
  @media screen and (max-width: 600px) {
    grid-template-columns: 1fr;
  }
}

.contact-basevision .wpforms-field-container:not(:has(.wpforms-field-layout)) .wpforms-field-textarea {
  grid-row: span 2;
}

.contact-basevision textarea {
  height: 100%;
  min-height: 0;
}

/* Variant B — WPForms layout block. Outer container is plain flex
   stack so the layout-block child can expand to full width. */

.contact-basevision .wpforms-field-container:has(.wpforms-field-layout) {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-xl);
}

/* Neutralise WPForms' own .wpforms-field-layout-columns {margin:0 -10px;}
   — that negative side-margin makes the column wrapper 20px wider than
   its parent and overflows mobile viewports. */

.contact-basevision .wpforms-field-layout-columns.wpforms-field-layout-preset-50-50 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  -moz-column-gap: var(--space-grid-gutter);
       column-gap: var(--space-grid-gutter);
  margin: 0 !important;
}

.contact-basevision .wpforms-layout-column {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-xl);
}

/* Stretch textarea so it fills any free vertical space in its column,
   matching the visual rhythm of multiple inputs in the other column. */

.contact-basevision .wpforms-field-layout .wpforms-field-textarea textarea {
  flex: 1 1 auto;
}

/* Mobile: collapse layout-columns + columns via display: contents,
   then reorder so all inputs come first, then the two checkboxes,
   then submit. `data-field-id` selectors are stable in WPForms.

   Gap strategy: flex `row-gap` does NOT reliably propagate through
   `display: contents` wrappers in every engine, so instead of relying
   on parent-gap, give each field its own margin-block-end and zero
   out the last visual field. Robust regardless of how the layout-
   block reshapes the DOM. */

@media screen and (max-width: 600px) {
  .contact-basevision .wpforms-field-layout-columns.wpforms-field-layout-preset-50-50,
    .contact-basevision .wpforms-layout-column {
    display: contents;
  }

  .contact-basevision .wpforms-field-layout {
    display: flex;
    flex-direction: column;
  }

  /* Per-field margin instead of parent gap (see comment above).
       --space-xl (16-24px fluid) reads as a clear visual gap on mobile;
       --space-l (8-16px) is too tight on narrow viewports. */

  .contact-basevision .wpforms-field-layout > .wpforms-field-layout-columns .wpforms-field,
    .contact-basevision .wpforms-field-container > .wpforms-field {
    margin-block-end: var(--space-xl);
  }

  /* Visual last field = privacy checkbox (order: 8) — strip its
       trailing margin so the submit button sits at the expected gap. */

  .contact-basevision [data-field-id="11"] {
    margin-block-end: 0;
  }

  /* Field order on mobile — top to bottom:
       Subject, Message, First Name, Last Name, Company, Email,
       Newsletter checkbox, Privacy checkbox. */

  .contact-basevision [data-field-id="9"]  {
    order: 1;
  }

  .contact-basevision [data-field-id="3"]  {
    order: 2;
  }

  .contact-basevision [data-field-id="5"]  {
    order: 3;
  }

  .contact-basevision [data-field-id="6"]  {
    order: 4;
  }

  .contact-basevision [data-field-id="8"]  {
    order: 5;
  }

  .contact-basevision [data-field-id="2"]  {
    order: 6;
  }

  .contact-basevision [data-field-id="10"] {
    order: 7;
  }

  .contact-basevision [data-field-id="11"] {
    order: 8;
  }
}

/* Submit button — centred under the form, both variants. */

.contact-basevision .wpforms-submit-container {
  margin-block-start: var(--space-2xl);
  display: flex;
  justify-content: center;
}

.contact-basevision .wpforms-submit {
  margin-block-start: 0;
}

.bg-kreideblau-100 .wpforms-container {
  --color-schiefer: var(--color-kreideblau-100);
  --color-neutral-60: var(--color-light);
  --color-neutral-40: var(--color-neutral-10);
}

/* ------------------------------------
    Newsletter footer (dark bg, inline input + circle button)
    Class: wpnewsletter-footer on WPForms form
------------------------------------- */

.wpnewsletter-footer {
  /* Honeypot fields: ensure they stay hidden regardless of .filled class */
  .wpforms-field-text {
    position: absolute !important;
    overflow: hidden !important;
    height: 1px !important;
    width: 1px !important;
    padding: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
  }
  /* Form as flex row: input + button side by side */
  form.wpforms-form {
    display: flex;
    align-items: center;
    gap: var(--space-xs, 4px);
  }
  .wpforms-field-container {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    height: 44px;
    overflow: visible;
    position: relative;
  }
  .wpforms-submit-container {
    flex-shrink: 0;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
    font-size: 0;
  }
  /* Input: transparent bg, white border matching circle */
  .wpforms-field-email input {
    background-color: transparent !important;
    border: 2px solid var(--color-light) !important;
    color: var(--color-neutral-0) !important;
    padding: 10px 14px;
    height: 44px;
    border-radius: var(--corner-xs, 4px);
    box-sizing: border-box;
  }
  .wpforms-field-email input:focus {
    border-color: var(--color-light) !important;
  }
  /* Floating label */
  .wpforms-field-email {
    position: relative;
  }
  .wpforms-field-email label {
    color: var(--color-neutral-10);
    top: 22px;
    background-color: transparent;
  }
  .wpforms-field-email.filled label,
    .wpforms-field-email:has(input:focus-visible) label {
    top: 0;
    background: var(--color-schiefer);
    color: var(--color-neutral-40);
  }
  /* No error messages, but keep input visible on validation error */
  .wpforms-error {
    display: none !important;
  }
  .wpforms-field-email input {
    display: inline-block !important;
  }
  .wpforms-field-email.wpforms-has-error input {
    border-color: var(--color-error) !important;
  }
  /* Circle-only button: hide text pill, keep ::before/::after animation */
  button.wpforms-submit {
    --circle-diameter: 44px;
    height: 44px !important;
    gap: 0 !important;
    padding: 0 !important;
    direction: rtl;
  }
  button.wpforms-submit span.button-text {
    visibility: hidden;
    position: absolute;
    transform: scale(0);
  }
  button.wpforms-submit::after {
    height: 44px !important;
    width: 44px;
    box-sizing: border-box;
    flex-shrink: 0;
    transition: width var(--transition-movement);
  }
  button.wpforms-submit:hover::after {
    width: 52px;
  }
}

/* ------------------------------------
    Newsletter form with orange bg
------------------------------------- */

.newsletter-form.wpforms-container {
  .wpforms-submit-container {
    margin-block-start: var(--space-3xl);
  }
  button.wpforms-submit {
    --button-bg: var(--color-schiefer);
    --button-bg-hover: var(--color-light);
    will-change: background-color, color;
    transition: background-color var(--transition-base), color var(--transition-base);
  }
  button.wpforms-submit:hover {
    --button-text: var(--color-dark);
  }
  .wpforms-field input {
    background-color: var(--color-light);
    border: 1px solid var(--color-light);
    color: var(--color-dark);
  }
  .wpforms-field:not(.wpforms-field-checkbox) label {
    background-color: transparent;
  }
  .wpforms-field-email input,
    .wpforms-field-text input,
    .wpforms-field-textarea textarea,
    .wpforms-field-select select {
    padding: 14px;
    background-color: white;
    color: var(--color-dark);
    font-size: var(--size-body);
    font-weight: var(--font-light);
    border-radius: 4px;
    border: none;
    outline: none;
  }
  .wpforms-field.filled:not(.wpforms-field-checkbox) label,
    .wpforms-field:has(input:focus-visible):not(.wpforms-field-checkbox) label,
    .wpforms-field:has(textarea:focus-visible) label {
    top: -15px;
    padding-inline: .25rem;
    font-size: var(--size-body-s);
    font-weight: 300;
    color: var(--color-dark);
  }
}

.wp-block-gallery.is-style-impressions {
  /* Gallery styles for impressions variation */
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: var(--space-grid-gutter) !important;
  align-items: end !important;
  .wp-block-image {
    width: unset !important;
    &>img {
      min-width: 100%;
      min-height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
    }
  }
  .wp-block-image:nth-child(odd) {
    grid-column: 1 / span 3;
    aspect-ratio: 326 / 217;
  }
  .wp-block-image:nth-child(even) {
    grid-column: 4 / span 6;
    aspect-ratio: 684 / 456;
  }
  @media screen and (max-width: 767px) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));

    align-items: stretch !important;

    .wp-block-image:nth-child(odd),
    .wp-block-image:nth-child(even) {
      grid-column: auto;
      aspect-ratio: unset;
      width: 100%;
      height: auto;
    }
  }
}

.icon-check {
  background-color: var(--color-primary);
  font-size: var(--size-heading-l);
  width: 1em;
  height: 1em;
  border-radius: 50%;
  box-shadow: 0 0 10px 0 var(--color-primary);
  &::before {
    /* 2px in 24px font size */
    padding-left: 0.0833em;
  }
  &.icon-check--large {
    font-size: calc(1.25 * var(--size-heading-2xl));
    &::before {
      padding-left: 0.1em;
    }
  }
}

.icon-check--large {
  display: inline-block;
  width: calc(1.25 * var(--space-2xl));
  height: calc(1.25 * var(--space-2xl));
  padding: calc(.2 * var(--space-2xl));
  background-color: var(--color-primary);
  border-radius: 50%;
  box-shadow: 0 0 10px 0 var(--color-primary);
}

figure.wp-block-image {
  /* No border-radius / overflow on the figure itself — otherwise the
     rounded clip wraps around the figcaption too, making the caption
     look like part of a rounded card. Rounding lives on the <img> so
     only the image has rounded corners and the caption sits free
     underneath. */
  &>img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-l);
  }
  /* Figcaption: theme font (override the global monospace) at body-s
     size, with a gap above the caption so it sits free below the
     rounded image (overrides the core 1em margin-top). */
  & > figcaption,
  & > .wp-element-caption {
    font-family: var(--font-base);
    font-size: var(--size-body-s);
    line-height: var(--leading-fine);
    margin-block-start: 1.5em;
  }
}

.wp-block-image img[style*="object-fit"] {
  width: 100%;
  height: 100%;
}

/* Block style "Eckig" — registered in theme/library/blocks.php as a third
   option alongside Standard (theme rounded) and Abgerundet (circle). Drop
   the border-radius so the image keeps its literal corners. */

figure.wp-block-image.is-style-square > img {
  border-radius: 0;
}

/* Default list styling.
   No `display: flex` on the <li> — that turned every inline child
   (e.g. <strong>) into a separate flex item, which caused bold + plain
   text to render side-by-side with a gap instead of flowing inline.
   Instead the bullet is an absolutely-positioned ::before in the
   reserved padding area, and the content inside the <li> stays in
   normal inline flow so <strong> followed by text reads naturally. */

.wp-block-list.is-style-default {
  padding: 0;
  padding-inline-start: calc(1ch + var(--space-l));
  li {
    padding: 0;
    position: relative;
    list-style: none;
    font-weight: var(--font-light);
    line-height: var(--leading-loose);
  }
  li::before {
    content: "•";
    position: absolute;
    inset-inline-start: calc(-1ch - var(--space-l) + 1ex);
    font-size: 0.7lh;
    line-height: inherit;
  }
}

/* Tabular list styling without markers */

.wp-block-list.is-style-tabular-list {
  row-gap: 0;
  margin: var(--space-xl) 0 0;
  padding: 0;
  li {
    list-style-type: none;
    padding: var(--space-l) 0;
    font-size: var(--size-body-s);
    font-weight: var(--font-regular);
    line-height: var(--leading-fine);
    border-top: 1px solid var(--color-neutral-80);
    &:before {
      display: none;
    }
  }
}

/* Footer Navigation Styles
   Polylang appends the language code to the aria-label (e.g. "Footer Navigation EN"),
   so use the prefix selector to match all language variants. */

nav.wp-block-navigation[aria-label^="Footer Navigation"] {
  font-size: var(--size-body-s);
  ul {
    gap: var(--space-l);
  }
}

nav.wp-block-navigation[aria-label^="Footer Navigation"] a.wp-block-navigation-item__content {
  display: inline-flex;
  align-items: center;
  position: relative;
  &:hover {
    text-decoration: underline;
  }
}

nav.wp-block-navigation[aria-label^="Legal Navigation"] {
  & ul {
    gap: var(--space-xl);
    & a {
      &>span {
        color: var(--color-neutral-40);
        font-size: 1rem;
      }
      &:hover {
        text-decoration: underline;
        text-decoration-color: var(--color-neutral-40);
      }
    }
  }
}

.news {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  align-items: start;
  gap: var(--space-grid-gutter);
}

.wp-block-post-date {
  time {
    line-height: 1;
    letter-spacing: 8%;
    font-size: var(--size-body-xs);
    font-weight: var(--font-regular);
  }
}

/* Default styling for all post featured images */

.wp-block-post-featured-image img {
  border-radius: var(--radius-l);
}

.success-story-template-default figure.wp-block-post-featured-image,
.post-type-success-story figure.wp-block-post-featured-image {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  &>img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

.wp-block-post-title {
  font-size: var(--size-heading-5xl);
  line-height: var(--leading-tight);
  letter-spacing: 1%;
  font-weight: var(--font-regular);
}

.prose {
  --flow-space: var(--space-s);
}

.prose :is(h1, h2, h3) {
  /* overflow-wrap: anywhere; */
  /* [no-break-test] temporaer deaktiviert (Test ohne Wort-Umbrueche) */
  /* hyphens: auto; */
  /* [no-break-test] temporaer deaktiviert (Test ohne Wort-Umbrueche) */
}

.prose :is(p, li, dl, figcaption, blockquote) {
  max-width: 80ch;
  text-wrap: pretty;
}

.prose :is(p) {
  font-weight: 300;
  line-height: var(--leading-loose);
}

.prose :is(h1, h2, h3, h4)+*:not([class]) {
  --flow-space: var(--space-m);
}

/* Add more space on and around figures and tables */

.prose :is(figure, table),
.prose :is(figure, table)+* {
  --flow-space: var(--space-2xl);
}

/* Add more space to headings on block start */

.prose *+ :is(h1, h2, h3, h4):not([class]) {
  --flow-space: var(--space-xl);
}

.prose :is(ul, ol):not([class]) li+li,
.prose :is(ul, ol):not([class]) li> :is(ol, ul) {
  --flow-space: var(--space-zero);
}

.prose :is(ul, ol) li {
  margin-block-start: var(--space-m);
}

.prose hr {
  --flow-space: var(--space-2xl);
}

@media (min-width: 767px) {
  .prose :is(h1, h2) {
    overflow-wrap: unset;
    /* hyphens: auto remains from the base rule above — required so that
       long German compounds (e.g. "unvorhergesehene", "Krisenmanagement")
       can break with a soft hyphen instead of forcing an extra line.
       Without this, text-wrap: balance produces 3 thin lines where 2 would fit. */
  }
}

/* Query Loop Style Variations */

.wp-block-query,
.wp-block-query>ul {
  min-width: 100%;
}

.wp-block-query.is-style-news-teaser,
.wp-block-query.is-style-success-stories-teaser,
.wp-block-query.is-style-news,
.wp-block-query.is-style-services-teaser {
  container-type: inline-size;
  container-name: query-loop;
}

.wp-block-query.is-style-news-teaser>ul,
.wp-block-query.is-style-news>ul,
.wp-block-query.is-style-success-stories-teaser>ul,
.wp-block-query.is-style-services-teaser>ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-l-2xl);
  align-items: stretch;
  &>li {
    display: flex;
    flex-direction: column;
    &>* {
      flex-grow: 1;
    }
  }
}

.wp-block-query.is-style-success-stories-teaser>ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 450px), 1fr));
  gap: var(--gutter, var(--space-grid-gutter));
}

.wp-block-query.is-style-services-teaser>ul {
  display: grid;
  gap: var(--space-grid-gutter);
  grid-template-columns: repeat(auto-fit, min(100%, 441px));
}

@container query-loop (min-width: 46rem) {
  .wp-block-query.is-style-news-teaser>ul {
    grid-template-columns: minmax(344px, 1fr) minmax(0, 1fr) minmax(344px, 33%);
    &>:nth-child(4n+1) {
      grid-column: span 2;
    }
    &>:nth-child(4n+2) {
      grid-column: span 1;
    }
    &>:nth-child(4n+3) {
      grid-column: span 1;
    }
    &>:nth-child(4n+4) {
      grid-column: span 2;
    }
  }

  .wp-block-query.is-style-news>ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    &>:nth-child(10n+1),
    &>:nth-child(10n+2),
    &>:nth-child(10n+4),
    &>:nth-child(10n+6),
    &>:nth-child(10n+9),
    &>:nth-child(10n+10) {
      grid-column: span 2;
    }
    &>:nth-child(10n+3),
    &>:nth-child(10n+5),
    &>:nth-child(10n+7),
    &>:nth-child(10n+8) {
      grid-column: span 1;
    }
  }
}

.wp-block-query-pagination {
  display: flex;
}

.wp-block-query-pagination .wp-block-query-pagination-numbers {
  display: flex;
  gap: var(--space-m);
}

.wp-block-query-pagination .wp-block-query-pagination-numbers .current {
  color: var(--color-orange-100);
  border-color: var(--color-orange-100);
}

.wp-block-query-pagination .wp-block-query-pagination-numbers>*,
.wp-block-query-pagination .wp-block-query-pagination-next,
.wp-block-query-pagination .wp-block-query-pagination-previous {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-3xl);
  height: var(--space-3xl);
  color: var(--color-light);
  font-size: var(--size-body-s);
  border: 2px solid var(--color-light);
  border-radius: 50%;
  text-decoration: none;
}

.wp-block-query-pagination .wp-block-query-pagination-next:hover,
.wp-block-query-pagination .wp-block-query-pagination-previous:hover {
  border-color: var(--color-orange-hover);
  &::after {
    background-color: var(--color-orange-hover);
  }
}

.wp-block-query-pagination .wp-block-query-pagination-numbers>*:hover {
  color: var(--color-orange-hover);
  border-color: var(--color-orange-hover);
}

.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
  position: relative;
  color: transparent;
  &:after {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    background-color: var(--color-light);
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
  }
}

.wp-block-query-pagination .wp-block-query-pagination-previous {
  margin-inline-end: var(--space-m);
  &:after {
    -webkit-mask-image: url('../../assets/icons/arrow-left.svg');
            mask-image: url('../../assets/icons/arrow-left.svg');
  }
}

.wp-block-query-pagination .wp-block-query-pagination-next {
  margin-inline-start: var(--space-m);
  &:after {
    -webkit-mask-image: url('../../assets/icons/arrow-right.svg');
            mask-image: url('../../assets/icons/arrow-right.svg');
  }
}

ul.wp-block-social-links {
  gap: var(--space-l);
  display: inline-flex !important;
  padding: 0;
}

.wp-block-social-links li {
  color: var(--color-primary);
  background-color: transparent;
  & svg[role='img'][width][height] {
    width: var(--space-xl);
    height: var(--space-xl);
    aspect-ratio: 1 / 1;
    background-color: transparent;
    color: var(--color-light);
    transition: color var(--transition-fade);
  }
}

.wp-block-social-links li a,
.wp-block-social-links li button {
  padding: 0;
}

.wp-block-social-links li:hover svg[role='img'][width][height] {
  color: var(--color-orange-hover);
}

/* hide label text for screen readers */

.wp-block-social-links .wp-block-social-link-label.screen-reader-text {
  border: 0;
  clip: rect(0 0 0 0);
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.success-story-detail-tags {
  display: flex;
  gap: var(--space-m);
  flex-wrap: wrap;
  align-items: center;
}

figure.is-style-timetable {
  table {
    font-size: var(--size-body-s);
    td,
    th {
      padding: var(--space-l);
    }
    td,
    th {
      &:nth-child(2) {
        padding-inline-start: var(--space-2xl);
      }
    }
    thead {
      vertical-align: middle;
      border-bottom: 1px solid var(--color-neutral-60);
      td,
      th {
        font-weight: var(--font-bold);
        border: none;
        color: unset;
      }
    }
    tbody {
      vertical-align: top;
      tr {
        border-bottom: 1px solid var(--color-neutral-60);
        &:nth-child(even) {
          background-color: rgba(255, 255, 255, 0.10);
        }
      }
      td {
        border: none;
        &:first-child {
          white-space: nowrap !important;
        }
      }
    }
  }
}

.tag {
  --color-indicator-size: .5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--color-neutral-60);
  font-size: var(--size-heading-xs);
  border-radius: 100px;
  padding-block: 0.3rem 0.3rem;
  padding-inline: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--uppercase-kerning);
  opacity: 0.8;
  span.text {
    line-height: 1em;
    display: inline-block;
    color: var(--color-light);
    font-weight: var(--font-regular);
    letter-spacing: var(--uppercase-kerning);
    white-space: nowrap;
    max-width: 20ch;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-block-end: -.035em;
  }
  @media (min-width: 767px) {
    --color-indicator-size: .75rem;

    padding-block: .57rem .57rem;

    padding-inline: 0.875rem;

    span.text {
      margin-block-end: 0em;
    }
  }
}

.tag[data-size="small"] {
  --tag-padding-block: clamp(0.5rem, 0.41rem + 0.36vw, 0.75rem);
  padding-block: var(--tag-padding-block);
  padding-inline: 0.75rem;
  span.text {
    line-height: 1em;
    font-size: var(--size-button);
  }
}

.tag>.color-indicator {
  flex-shrink: 0;
  content: '';
  display: inline-block;
  width: var(--color-indicator-size);
  height: var(--color-indicator-size);
  border-radius: 50%;
  background-color: var(--tag-color, var(--color-light));
}

button.tag.active {
  opacity: 1;
  border-color: var(--color-light);
  background-color: rgba(255, 255, 255, 0.2);
}

button.tag {
  background-color: transparent;
  cursor: pointer;
  transition: border-color var(--transition-base), background-color var(--transition-base), transform 0.1s ease;
}

button.tag>.text {
  font-weight: var(--font-light);
}

button.tag:hover:not(.active) {
  border-color: var(--color-light);
  background-color: rgba(255, 255, 255, 0.1);
}

button.tag:active {
  transform: scale(.98);
}

.client {
  text-transform: uppercase;
  font-size: var(--size-button);
  color: var(--color-light);
  letter-spacing: var(--uppercase-kerning);
  line-height: var(--leading-flat);
}

.wp-block-video {
  border-radius: var(--radius-l);
  overflow: clip;
}

footer .wp-block-navigation-item__label {
  color: var(--color-light);
}

/* include .footer as in part editor there is no footer element,
so I manually added .footer class */

footer a,
footer button,
.footer a,
.footer button {
  --focus-color: var(--color-light);
  color: var(--color-light);
}

:root {
  --mobile-logo-height: 2rem;
  --header-height: calc(var(--space-3xl) + var(--space-l) + var(--mobile-logo-height));
  @media (min-width: 767px) {
    --nav-button-padding: 40px;

    --nav-button-line-height: 21.12px;

    --header-height: calc(
      var(--space-3xl) + var(--space-l) + var(--nav-button-padding) +
        var(--nav-button-line-height)
    );
  }
}

header.header {
  top: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: 100;
}

main {
  margin-block-start: var(--header-height);
}

/* ──────────────────────────────────────────────────────────────
   Scrolled state — desktop only (>=1024px).
   When the user scrolls past 0, the logo wordmark swaps to its
   round mark variant (driven by brand/view.js). The translucent
   pill becomes the OUTER container (encloses brand + menu) at
   the SAME height as before — the menu's own pill ::after fades
   out, and the outer pill ::before fades in. No padding change
   on the outer container, so total height stays constant.
   The round mark is sized in brand/style.scss to fit inside this
   pill without growing it.
   ────────────────────────────────────────────────────────────── */

@media screen and (min-width: 64rem) {
  header.header .bg-rounded-blur {
    position: relative;
    border-radius: 36px;
  }

  header.header .bg-rounded-blur::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(16.5px);
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  html.is-scrolled header.header .bg-rounded-blur::before {
    opacity: 1;
  }

  /* Menu's own pill fades out so the outer one takes over without
     stacking two blurred layers */

  header.header .menu::after {
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  html.is-scrolled header.header .menu::after {
    opacity: 0;
  }
}

body.error404 .wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body.error404 .wp-site-blocks>main {
  flex-grow: 1;
}

.m-2xl{
  margin: clamp(1.5rem, 1.33rem + 0.71vw, 2rem);
}

.m-2xl-3xl{
  margin: clamp(1.5rem, 0.98rem + 2.14vw, 3rem);
}

.m-2xl-4xl{
  margin: clamp(1.5rem, 0.80rem + 2.85vw, 3.5rem);
}

.m-3xl{
  margin: clamp(2rem, 1.65rem + 1.43vw, 3rem);
}

.m-4xl{
  margin: clamp(3rem, 2.83rem + 0.71vw, 3.5rem);
}

.m-5xl{
  margin: clamp(3.5rem, 3.15rem + 1.43vw, 4.5rem);
}

.m-6xl{
  margin: clamp(4.5rem, 3.98rem + 2.14vw, 6rem);
}

.m-7xl{
  margin: clamp(6rem, 5.30rem + 2.85vw, 8rem);
}

.m-grid-gutter{
  margin: clamp(1rem, 0.70rem + 1.25vw, 1.875rem);
}

.m-gutter-inline{
  margin: clamp(1.25rem, 1.03rem + 0.89vw, 1.875rem);
}

.m-l{
  margin: clamp(0.5rem, 0.33rem + 0.71vw, 1rem);
}

.m-l-2xl{
  margin: clamp(0.5rem, -0.02rem + 2.14vw, 2rem);
}

.m-m{
  margin: clamp(0.25rem, 0.16rem + 0.36vw, 0.5rem);
}

.m-s{
  margin: clamp(0.125rem, 0.08rem + 0.18vw, 0.25rem);
}

.m-xl{
  margin: clamp(1rem, 0.83rem + 0.71vw, 1.5rem);
}

.m-xl-2xl{
  margin: clamp(1rem, 0.65rem + 1.43vw, 2rem);
}

.m-xl-5xl{
  margin: clamp(1rem, -0.22rem + 4.99vw, 4.5rem);
}

.m-xs{
  margin: clamp(0.0625rem, 0.04rem + 0.09vw, 0.125rem);
}

.m-zero{
  margin: 0rem;
}

.mx-2xl{
  margin-left: clamp(1.5rem, 1.33rem + 0.71vw, 2rem);
  margin-right: clamp(1.5rem, 1.33rem + 0.71vw, 2rem);
}

.mx-2xl-3xl{
  margin-left: clamp(1.5rem, 0.98rem + 2.14vw, 3rem);
  margin-right: clamp(1.5rem, 0.98rem + 2.14vw, 3rem);
}

.mx-2xl-4xl{
  margin-left: clamp(1.5rem, 0.80rem + 2.85vw, 3.5rem);
  margin-right: clamp(1.5rem, 0.80rem + 2.85vw, 3.5rem);
}

.mx-3xl{
  margin-left: clamp(2rem, 1.65rem + 1.43vw, 3rem);
  margin-right: clamp(2rem, 1.65rem + 1.43vw, 3rem);
}

.mx-4xl{
  margin-left: clamp(3rem, 2.83rem + 0.71vw, 3.5rem);
  margin-right: clamp(3rem, 2.83rem + 0.71vw, 3.5rem);
}

.mx-5xl{
  margin-left: clamp(3.5rem, 3.15rem + 1.43vw, 4.5rem);
  margin-right: clamp(3.5rem, 3.15rem + 1.43vw, 4.5rem);
}

.mx-6xl{
  margin-left: clamp(4.5rem, 3.98rem + 2.14vw, 6rem);
  margin-right: clamp(4.5rem, 3.98rem + 2.14vw, 6rem);
}

.mx-7xl{
  margin-left: clamp(6rem, 5.30rem + 2.85vw, 8rem);
  margin-right: clamp(6rem, 5.30rem + 2.85vw, 8rem);
}

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.mx-grid-gutter{
  margin-left: clamp(1rem, 0.70rem + 1.25vw, 1.875rem);
  margin-right: clamp(1rem, 0.70rem + 1.25vw, 1.875rem);
}

.mx-gutter-inline{
  margin-left: clamp(1.25rem, 1.03rem + 0.89vw, 1.875rem);
  margin-right: clamp(1.25rem, 1.03rem + 0.89vw, 1.875rem);
}

.mx-l{
  margin-left: clamp(0.5rem, 0.33rem + 0.71vw, 1rem);
  margin-right: clamp(0.5rem, 0.33rem + 0.71vw, 1rem);
}

.mx-l-2xl{
  margin-left: clamp(0.5rem, -0.02rem + 2.14vw, 2rem);
  margin-right: clamp(0.5rem, -0.02rem + 2.14vw, 2rem);
}

.mx-m{
  margin-left: clamp(0.25rem, 0.16rem + 0.36vw, 0.5rem);
  margin-right: clamp(0.25rem, 0.16rem + 0.36vw, 0.5rem);
}

.mx-s{
  margin-left: clamp(0.125rem, 0.08rem + 0.18vw, 0.25rem);
  margin-right: clamp(0.125rem, 0.08rem + 0.18vw, 0.25rem);
}

.mx-xl{
  margin-left: clamp(1rem, 0.83rem + 0.71vw, 1.5rem);
  margin-right: clamp(1rem, 0.83rem + 0.71vw, 1.5rem);
}

.mx-xl-2xl{
  margin-left: clamp(1rem, 0.65rem + 1.43vw, 2rem);
  margin-right: clamp(1rem, 0.65rem + 1.43vw, 2rem);
}

.mx-xl-5xl{
  margin-left: clamp(1rem, -0.22rem + 4.99vw, 4.5rem);
  margin-right: clamp(1rem, -0.22rem + 4.99vw, 4.5rem);
}

.mx-xs{
  margin-left: clamp(0.0625rem, 0.04rem + 0.09vw, 0.125rem);
  margin-right: clamp(0.0625rem, 0.04rem + 0.09vw, 0.125rem);
}

.mx-zero{
  margin-left: 0rem;
  margin-right: 0rem;
}

.my-2xl{
  margin-top: clamp(1.5rem, 1.33rem + 0.71vw, 2rem);
  margin-bottom: clamp(1.5rem, 1.33rem + 0.71vw, 2rem);
}

.my-2xl-3xl{
  margin-top: clamp(1.5rem, 0.98rem + 2.14vw, 3rem);
  margin-bottom: clamp(1.5rem, 0.98rem + 2.14vw, 3rem);
}

.my-2xl-4xl{
  margin-top: clamp(1.5rem, 0.80rem + 2.85vw, 3.5rem);
  margin-bottom: clamp(1.5rem, 0.80rem + 2.85vw, 3.5rem);
}

.my-3xl{
  margin-top: clamp(2rem, 1.65rem + 1.43vw, 3rem);
  margin-bottom: clamp(2rem, 1.65rem + 1.43vw, 3rem);
}

.my-4xl{
  margin-top: clamp(3rem, 2.83rem + 0.71vw, 3.5rem);
  margin-bottom: clamp(3rem, 2.83rem + 0.71vw, 3.5rem);
}

.my-5xl{
  margin-top: clamp(3.5rem, 3.15rem + 1.43vw, 4.5rem);
  margin-bottom: clamp(3.5rem, 3.15rem + 1.43vw, 4.5rem);
}

.my-6xl{
  margin-top: clamp(4.5rem, 3.98rem + 2.14vw, 6rem);
  margin-bottom: clamp(4.5rem, 3.98rem + 2.14vw, 6rem);
}

.my-7xl{
  margin-top: clamp(6rem, 5.30rem + 2.85vw, 8rem);
  margin-bottom: clamp(6rem, 5.30rem + 2.85vw, 8rem);
}

.my-auto{
  margin-top: auto;
  margin-bottom: auto;
}

.my-grid-gutter{
  margin-top: clamp(1rem, 0.70rem + 1.25vw, 1.875rem);
  margin-bottom: clamp(1rem, 0.70rem + 1.25vw, 1.875rem);
}

.my-gutter-inline{
  margin-top: clamp(1.25rem, 1.03rem + 0.89vw, 1.875rem);
  margin-bottom: clamp(1.25rem, 1.03rem + 0.89vw, 1.875rem);
}

.my-l{
  margin-top: clamp(0.5rem, 0.33rem + 0.71vw, 1rem);
  margin-bottom: clamp(0.5rem, 0.33rem + 0.71vw, 1rem);
}

.my-l-2xl{
  margin-top: clamp(0.5rem, -0.02rem + 2.14vw, 2rem);
  margin-bottom: clamp(0.5rem, -0.02rem + 2.14vw, 2rem);
}

.my-m{
  margin-top: clamp(0.25rem, 0.16rem + 0.36vw, 0.5rem);
  margin-bottom: clamp(0.25rem, 0.16rem + 0.36vw, 0.5rem);
}

.my-s{
  margin-top: clamp(0.125rem, 0.08rem + 0.18vw, 0.25rem);
  margin-bottom: clamp(0.125rem, 0.08rem + 0.18vw, 0.25rem);
}

.my-xl{
  margin-top: clamp(1rem, 0.83rem + 0.71vw, 1.5rem);
  margin-bottom: clamp(1rem, 0.83rem + 0.71vw, 1.5rem);
}

.my-xl-2xl{
  margin-top: clamp(1rem, 0.65rem + 1.43vw, 2rem);
  margin-bottom: clamp(1rem, 0.65rem + 1.43vw, 2rem);
}

.my-xl-5xl{
  margin-top: clamp(1rem, -0.22rem + 4.99vw, 4.5rem);
  margin-bottom: clamp(1rem, -0.22rem + 4.99vw, 4.5rem);
}

.my-xs{
  margin-top: clamp(0.0625rem, 0.04rem + 0.09vw, 0.125rem);
  margin-bottom: clamp(0.0625rem, 0.04rem + 0.09vw, 0.125rem);
}

.my-zero{
  margin-top: 0rem;
  margin-bottom: 0rem;
}

.mb-2xl{
  margin-bottom: clamp(1.5rem, 1.33rem + 0.71vw, 2rem);
}

.mb-2xl-3xl{
  margin-bottom: clamp(1.5rem, 0.98rem + 2.14vw, 3rem);
}

.mb-2xl-4xl{
  margin-bottom: clamp(1.5rem, 0.80rem + 2.85vw, 3.5rem);
}

.mb-3xl{
  margin-bottom: clamp(2rem, 1.65rem + 1.43vw, 3rem);
}

.mb-4xl{
  margin-bottom: clamp(3rem, 2.83rem + 0.71vw, 3.5rem);
}

.mb-5xl{
  margin-bottom: clamp(3.5rem, 3.15rem + 1.43vw, 4.5rem);
}

.mb-6xl{
  margin-bottom: clamp(4.5rem, 3.98rem + 2.14vw, 6rem);
}

.mb-7xl{
  margin-bottom: clamp(6rem, 5.30rem + 2.85vw, 8rem);
}

.mb-grid-gutter{
  margin-bottom: clamp(1rem, 0.70rem + 1.25vw, 1.875rem);
}

.mb-gutter-inline{
  margin-bottom: clamp(1.25rem, 1.03rem + 0.89vw, 1.875rem);
}

.mb-l{
  margin-bottom: clamp(0.5rem, 0.33rem + 0.71vw, 1rem);
}

.mb-l-2xl{
  margin-bottom: clamp(0.5rem, -0.02rem + 2.14vw, 2rem);
}

.mb-m{
  margin-bottom: clamp(0.25rem, 0.16rem + 0.36vw, 0.5rem);
}

.mb-s{
  margin-bottom: clamp(0.125rem, 0.08rem + 0.18vw, 0.25rem);
}

.mb-xl{
  margin-bottom: clamp(1rem, 0.83rem + 0.71vw, 1.5rem);
}

.mb-xl-2xl{
  margin-bottom: clamp(1rem, 0.65rem + 1.43vw, 2rem);
}

.mb-xl-5xl{
  margin-bottom: clamp(1rem, -0.22rem + 4.99vw, 4.5rem);
}

.mb-xs{
  margin-bottom: clamp(0.0625rem, 0.04rem + 0.09vw, 0.125rem);
}

.mb-zero{
  margin-bottom: 0rem;
}

.ml-2xl{
  margin-left: clamp(1.5rem, 1.33rem + 0.71vw, 2rem);
}

.ml-2xl-3xl{
  margin-left: clamp(1.5rem, 0.98rem + 2.14vw, 3rem);
}

.ml-2xl-4xl{
  margin-left: clamp(1.5rem, 0.80rem + 2.85vw, 3.5rem);
}

.ml-3xl{
  margin-left: clamp(2rem, 1.65rem + 1.43vw, 3rem);
}

.ml-4xl{
  margin-left: clamp(3rem, 2.83rem + 0.71vw, 3.5rem);
}

.ml-5xl{
  margin-left: clamp(3.5rem, 3.15rem + 1.43vw, 4.5rem);
}

.ml-6xl{
  margin-left: clamp(4.5rem, 3.98rem + 2.14vw, 6rem);
}

.ml-7xl{
  margin-left: clamp(6rem, 5.30rem + 2.85vw, 8rem);
}

.ml-grid-gutter{
  margin-left: clamp(1rem, 0.70rem + 1.25vw, 1.875rem);
}

.ml-gutter-inline{
  margin-left: clamp(1.25rem, 1.03rem + 0.89vw, 1.875rem);
}

.ml-l{
  margin-left: clamp(0.5rem, 0.33rem + 0.71vw, 1rem);
}

.ml-l-2xl{
  margin-left: clamp(0.5rem, -0.02rem + 2.14vw, 2rem);
}

.ml-m{
  margin-left: clamp(0.25rem, 0.16rem + 0.36vw, 0.5rem);
}

.ml-s{
  margin-left: clamp(0.125rem, 0.08rem + 0.18vw, 0.25rem);
}

.ml-xl{
  margin-left: clamp(1rem, 0.83rem + 0.71vw, 1.5rem);
}

.ml-xl-2xl{
  margin-left: clamp(1rem, 0.65rem + 1.43vw, 2rem);
}

.ml-xl-5xl{
  margin-left: clamp(1rem, -0.22rem + 4.99vw, 4.5rem);
}

.ml-xs{
  margin-left: clamp(0.0625rem, 0.04rem + 0.09vw, 0.125rem);
}

.ml-zero{
  margin-left: 0rem;
}

.mr-2xl{
  margin-right: clamp(1.5rem, 1.33rem + 0.71vw, 2rem);
}

.mr-2xl-3xl{
  margin-right: clamp(1.5rem, 0.98rem + 2.14vw, 3rem);
}

.mr-2xl-4xl{
  margin-right: clamp(1.5rem, 0.80rem + 2.85vw, 3.5rem);
}

.mr-3xl{
  margin-right: clamp(2rem, 1.65rem + 1.43vw, 3rem);
}

.mr-4xl{
  margin-right: clamp(3rem, 2.83rem + 0.71vw, 3.5rem);
}

.mr-5xl{
  margin-right: clamp(3.5rem, 3.15rem + 1.43vw, 4.5rem);
}

.mr-6xl{
  margin-right: clamp(4.5rem, 3.98rem + 2.14vw, 6rem);
}

.mr-7xl{
  margin-right: clamp(6rem, 5.30rem + 2.85vw, 8rem);
}

.mr-grid-gutter{
  margin-right: clamp(1rem, 0.70rem + 1.25vw, 1.875rem);
}

.mr-gutter-inline{
  margin-right: clamp(1.25rem, 1.03rem + 0.89vw, 1.875rem);
}

.mr-l{
  margin-right: clamp(0.5rem, 0.33rem + 0.71vw, 1rem);
}

.mr-l-2xl{
  margin-right: clamp(0.5rem, -0.02rem + 2.14vw, 2rem);
}

.mr-m{
  margin-right: clamp(0.25rem, 0.16rem + 0.36vw, 0.5rem);
}

.mr-s{
  margin-right: clamp(0.125rem, 0.08rem + 0.18vw, 0.25rem);
}

.mr-xl{
  margin-right: clamp(1rem, 0.83rem + 0.71vw, 1.5rem);
}

.mr-xl-2xl{
  margin-right: clamp(1rem, 0.65rem + 1.43vw, 2rem);
}

.mr-xl-5xl{
  margin-right: clamp(1rem, -0.22rem + 4.99vw, 4.5rem);
}

.mr-xs{
  margin-right: clamp(0.0625rem, 0.04rem + 0.09vw, 0.125rem);
}

.mr-zero{
  margin-right: 0rem;
}

.mt-2xl{
  margin-top: clamp(1.5rem, 1.33rem + 0.71vw, 2rem);
}

.mt-2xl-3xl{
  margin-top: clamp(1.5rem, 0.98rem + 2.14vw, 3rem);
}

.mt-2xl-4xl{
  margin-top: clamp(1.5rem, 0.80rem + 2.85vw, 3.5rem);
}

.mt-3xl{
  margin-top: clamp(2rem, 1.65rem + 1.43vw, 3rem);
}

.mt-4xl{
  margin-top: clamp(3rem, 2.83rem + 0.71vw, 3.5rem);
}

.mt-5xl{
  margin-top: clamp(3.5rem, 3.15rem + 1.43vw, 4.5rem);
}

.mt-6xl{
  margin-top: clamp(4.5rem, 3.98rem + 2.14vw, 6rem);
}

.mt-7xl{
  margin-top: clamp(6rem, 5.30rem + 2.85vw, 8rem);
}

.mt-grid-gutter{
  margin-top: clamp(1rem, 0.70rem + 1.25vw, 1.875rem);
}

.mt-gutter-inline{
  margin-top: clamp(1.25rem, 1.03rem + 0.89vw, 1.875rem);
}

.mt-l{
  margin-top: clamp(0.5rem, 0.33rem + 0.71vw, 1rem);
}

.mt-l-2xl{
  margin-top: clamp(0.5rem, -0.02rem + 2.14vw, 2rem);
}

.mt-m{
  margin-top: clamp(0.25rem, 0.16rem + 0.36vw, 0.5rem);
}

.mt-s{
  margin-top: clamp(0.125rem, 0.08rem + 0.18vw, 0.25rem);
}

.mt-xl{
  margin-top: clamp(1rem, 0.83rem + 0.71vw, 1.5rem);
}

.mt-xl-2xl{
  margin-top: clamp(1rem, 0.65rem + 1.43vw, 2rem);
}

.mt-xl-5xl{
  margin-top: clamp(1rem, -0.22rem + 4.99vw, 4.5rem);
}

.mt-xs{
  margin-top: clamp(0.0625rem, 0.04rem + 0.09vw, 0.125rem);
}

.mt-zero{
  margin-top: 0rem;
}

.flex{
  display: flex;
}

.inline-flex{
  display: inline-flex;
}

.flex-row{
  flex-direction: row;
}

.flex-row-reverse{
  flex-direction: row-reverse;
}

.flex-col{
  flex-direction: column;
}

.flex-col-reverse{
  flex-direction: column-reverse;
}

.flex-wrap{
  flex-wrap: wrap;
}

.flex-wrap-reverse{
  flex-wrap: wrap-reverse;
}

.flex-nowrap{
  flex-wrap: nowrap;
}

.items-start{
  align-items: flex-start;
}

.items-end{
  align-items: flex-end;
}

.items-center{
  align-items: center;
}

.items-baseline{
  align-items: baseline;
}

.items-stretch{
  align-items: stretch;
}

.justify-start{
  justify-content: flex-start;
}

.justify-end{
  justify-content: flex-end;
}

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

.justify-between{
  justify-content: space-between;
}

.justify-around{
  justify-content: space-around;
}

.justify-evenly{
  justify-content: space-evenly;
}

.self-start{
  align-self: flex-start;
}

.self-end{
  align-self: flex-end;
}

.self-center{
  align-self: center;
}

.self-stretch{
  align-self: stretch;
}

.bg-dark{
  background-color: #102728;
}

.bg-error{
  background-color: #D8443B;
}

.bg-kaktusgruen-100{
  background-color: #4E583A;
}

.bg-kaktusgruen-20{
  background-color: #D5E3B8;
}

.bg-kaktusgruen-hover{
  background-color: #4A523A;
}

.bg-kreideblau-100{
  background-color: #7FA7BE;
}

.bg-kreideblau-20{
  background-color: #C9E1EE;
}

.bg-kreideblau-hover{
  background-color: #7690A0;
}

.bg-light{
  background-color: #FFF;
}

.bg-neutral-0{
  background-color: #FDFDFD;
}

.bg-neutral-10{
  background-color: #EBEDED;
}

.bg-neutral-20{
  background-color: #CDD2D2;
}

.bg-neutral-40{
  background-color: #9CA3A4;
}

.bg-neutral-60{
  background-color: #6B7677;
}

.bg-neutral-80{
  background-color: #3A4849;
}

.bg-oktoberrot-100{
  background-color: #96403E;
}

.bg-oktoberrot-20{
  background-color: #F4C6C5;
}

.bg-oktoberrot-hover{
  background-color: #7D3F3D;
}

.bg-orange-100{
  background-color: #F2910C;
}

.bg-orange-hover{
  background-color: #D5871B;
}

.bg-purple-0{
  background-color: #F5F3FF;
}

.bg-purple-10{
  background-color: #EDE9FE;
}

.bg-purple-100{
  background-color: #2D105A;
}

.bg-purple-20{
  background-color: #E0D9FC;
}

.bg-purple-40{
  background-color: #C4B5FD;
}

.bg-purple-60{
  background-color: #7C3AED;
}

.bg-purple-80{
  background-color: #4C1D95;
}

.bg-schiefer{
  background-color: #2A2A2A;
}

.bg-success{
  background-color: #3BD87A;
}

.p-2xl{
  padding: clamp(1.5rem, 1.33rem + 0.71vw, 2rem);
}

.p-2xl-3xl{
  padding: clamp(1.5rem, 0.98rem + 2.14vw, 3rem);
}

.p-2xl-4xl{
  padding: clamp(1.5rem, 0.80rem + 2.85vw, 3.5rem);
}

.p-3xl{
  padding: clamp(2rem, 1.65rem + 1.43vw, 3rem);
}

.p-4xl{
  padding: clamp(3rem, 2.83rem + 0.71vw, 3.5rem);
}

.p-5xl{
  padding: clamp(3.5rem, 3.15rem + 1.43vw, 4.5rem);
}

.p-6xl{
  padding: clamp(4.5rem, 3.98rem + 2.14vw, 6rem);
}

.p-7xl{
  padding: clamp(6rem, 5.30rem + 2.85vw, 8rem);
}

.p-grid-gutter{
  padding: clamp(1rem, 0.70rem + 1.25vw, 1.875rem);
}

.p-gutter-inline{
  padding: clamp(1.25rem, 1.03rem + 0.89vw, 1.875rem);
}

.p-l{
  padding: clamp(0.5rem, 0.33rem + 0.71vw, 1rem);
}

.p-l-2xl{
  padding: clamp(0.5rem, -0.02rem + 2.14vw, 2rem);
}

.p-m{
  padding: clamp(0.25rem, 0.16rem + 0.36vw, 0.5rem);
}

.p-s{
  padding: clamp(0.125rem, 0.08rem + 0.18vw, 0.25rem);
}

.p-xl{
  padding: clamp(1rem, 0.83rem + 0.71vw, 1.5rem);
}

.p-xl-2xl{
  padding: clamp(1rem, 0.65rem + 1.43vw, 2rem);
}

.p-xl-5xl{
  padding: clamp(1rem, -0.22rem + 4.99vw, 4.5rem);
}

.p-xs{
  padding: clamp(0.0625rem, 0.04rem + 0.09vw, 0.125rem);
}

.p-zero{
  padding: 0rem;
}

.px-2xl{
  padding-left: clamp(1.5rem, 1.33rem + 0.71vw, 2rem);
  padding-right: clamp(1.5rem, 1.33rem + 0.71vw, 2rem);
}

.px-2xl-3xl{
  padding-left: clamp(1.5rem, 0.98rem + 2.14vw, 3rem);
  padding-right: clamp(1.5rem, 0.98rem + 2.14vw, 3rem);
}

.px-2xl-4xl{
  padding-left: clamp(1.5rem, 0.80rem + 2.85vw, 3.5rem);
  padding-right: clamp(1.5rem, 0.80rem + 2.85vw, 3.5rem);
}

.px-3xl{
  padding-left: clamp(2rem, 1.65rem + 1.43vw, 3rem);
  padding-right: clamp(2rem, 1.65rem + 1.43vw, 3rem);
}

.px-4xl{
  padding-left: clamp(3rem, 2.83rem + 0.71vw, 3.5rem);
  padding-right: clamp(3rem, 2.83rem + 0.71vw, 3.5rem);
}

.px-5xl{
  padding-left: clamp(3.5rem, 3.15rem + 1.43vw, 4.5rem);
  padding-right: clamp(3.5rem, 3.15rem + 1.43vw, 4.5rem);
}

.px-6xl{
  padding-left: clamp(4.5rem, 3.98rem + 2.14vw, 6rem);
  padding-right: clamp(4.5rem, 3.98rem + 2.14vw, 6rem);
}

.px-7xl{
  padding-left: clamp(6rem, 5.30rem + 2.85vw, 8rem);
  padding-right: clamp(6rem, 5.30rem + 2.85vw, 8rem);
}

.px-grid-gutter{
  padding-left: clamp(1rem, 0.70rem + 1.25vw, 1.875rem);
  padding-right: clamp(1rem, 0.70rem + 1.25vw, 1.875rem);
}

.px-gutter-inline{
  padding-left: clamp(1.25rem, 1.03rem + 0.89vw, 1.875rem);
  padding-right: clamp(1.25rem, 1.03rem + 0.89vw, 1.875rem);
}

.px-l{
  padding-left: clamp(0.5rem, 0.33rem + 0.71vw, 1rem);
  padding-right: clamp(0.5rem, 0.33rem + 0.71vw, 1rem);
}

.px-l-2xl{
  padding-left: clamp(0.5rem, -0.02rem + 2.14vw, 2rem);
  padding-right: clamp(0.5rem, -0.02rem + 2.14vw, 2rem);
}

.px-m{
  padding-left: clamp(0.25rem, 0.16rem + 0.36vw, 0.5rem);
  padding-right: clamp(0.25rem, 0.16rem + 0.36vw, 0.5rem);
}

.px-s{
  padding-left: clamp(0.125rem, 0.08rem + 0.18vw, 0.25rem);
  padding-right: clamp(0.125rem, 0.08rem + 0.18vw, 0.25rem);
}

.px-xl{
  padding-left: clamp(1rem, 0.83rem + 0.71vw, 1.5rem);
  padding-right: clamp(1rem, 0.83rem + 0.71vw, 1.5rem);
}

.px-xl-2xl{
  padding-left: clamp(1rem, 0.65rem + 1.43vw, 2rem);
  padding-right: clamp(1rem, 0.65rem + 1.43vw, 2rem);
}

.px-xl-5xl{
  padding-left: clamp(1rem, -0.22rem + 4.99vw, 4.5rem);
  padding-right: clamp(1rem, -0.22rem + 4.99vw, 4.5rem);
}

.px-xs{
  padding-left: clamp(0.0625rem, 0.04rem + 0.09vw, 0.125rem);
  padding-right: clamp(0.0625rem, 0.04rem + 0.09vw, 0.125rem);
}

.px-zero{
  padding-left: 0rem;
  padding-right: 0rem;
}

.py-2xl{
  padding-top: clamp(1.5rem, 1.33rem + 0.71vw, 2rem);
  padding-bottom: clamp(1.5rem, 1.33rem + 0.71vw, 2rem);
}

.py-2xl-3xl{
  padding-top: clamp(1.5rem, 0.98rem + 2.14vw, 3rem);
  padding-bottom: clamp(1.5rem, 0.98rem + 2.14vw, 3rem);
}

.py-2xl-4xl{
  padding-top: clamp(1.5rem, 0.80rem + 2.85vw, 3.5rem);
  padding-bottom: clamp(1.5rem, 0.80rem + 2.85vw, 3.5rem);
}

.py-3xl{
  padding-top: clamp(2rem, 1.65rem + 1.43vw, 3rem);
  padding-bottom: clamp(2rem, 1.65rem + 1.43vw, 3rem);
}

.py-4xl{
  padding-top: clamp(3rem, 2.83rem + 0.71vw, 3.5rem);
  padding-bottom: clamp(3rem, 2.83rem + 0.71vw, 3.5rem);
}

.py-5xl{
  padding-top: clamp(3.5rem, 3.15rem + 1.43vw, 4.5rem);
  padding-bottom: clamp(3.5rem, 3.15rem + 1.43vw, 4.5rem);
}

.py-6xl{
  padding-top: clamp(4.5rem, 3.98rem + 2.14vw, 6rem);
  padding-bottom: clamp(4.5rem, 3.98rem + 2.14vw, 6rem);
}

.py-7xl{
  padding-top: clamp(6rem, 5.30rem + 2.85vw, 8rem);
  padding-bottom: clamp(6rem, 5.30rem + 2.85vw, 8rem);
}

.py-grid-gutter{
  padding-top: clamp(1rem, 0.70rem + 1.25vw, 1.875rem);
  padding-bottom: clamp(1rem, 0.70rem + 1.25vw, 1.875rem);
}

.py-gutter-inline{
  padding-top: clamp(1.25rem, 1.03rem + 0.89vw, 1.875rem);
  padding-bottom: clamp(1.25rem, 1.03rem + 0.89vw, 1.875rem);
}

.py-l{
  padding-top: clamp(0.5rem, 0.33rem + 0.71vw, 1rem);
  padding-bottom: clamp(0.5rem, 0.33rem + 0.71vw, 1rem);
}

.py-l-2xl{
  padding-top: clamp(0.5rem, -0.02rem + 2.14vw, 2rem);
  padding-bottom: clamp(0.5rem, -0.02rem + 2.14vw, 2rem);
}

.py-m{
  padding-top: clamp(0.25rem, 0.16rem + 0.36vw, 0.5rem);
  padding-bottom: clamp(0.25rem, 0.16rem + 0.36vw, 0.5rem);
}

.py-s{
  padding-top: clamp(0.125rem, 0.08rem + 0.18vw, 0.25rem);
  padding-bottom: clamp(0.125rem, 0.08rem + 0.18vw, 0.25rem);
}

.py-xl{
  padding-top: clamp(1rem, 0.83rem + 0.71vw, 1.5rem);
  padding-bottom: clamp(1rem, 0.83rem + 0.71vw, 1.5rem);
}

.py-xl-2xl{
  padding-top: clamp(1rem, 0.65rem + 1.43vw, 2rem);
  padding-bottom: clamp(1rem, 0.65rem + 1.43vw, 2rem);
}

.py-xl-5xl{
  padding-top: clamp(1rem, -0.22rem + 4.99vw, 4.5rem);
  padding-bottom: clamp(1rem, -0.22rem + 4.99vw, 4.5rem);
}

.py-xs{
  padding-top: clamp(0.0625rem, 0.04rem + 0.09vw, 0.125rem);
  padding-bottom: clamp(0.0625rem, 0.04rem + 0.09vw, 0.125rem);
}

.py-zero{
  padding-top: 0rem;
  padding-bottom: 0rem;
}

.pb-2xl{
  padding-bottom: clamp(1.5rem, 1.33rem + 0.71vw, 2rem);
}

.pb-2xl-3xl{
  padding-bottom: clamp(1.5rem, 0.98rem + 2.14vw, 3rem);
}

.pb-2xl-4xl{
  padding-bottom: clamp(1.5rem, 0.80rem + 2.85vw, 3.5rem);
}

.pb-3xl{
  padding-bottom: clamp(2rem, 1.65rem + 1.43vw, 3rem);
}

.pb-4xl{
  padding-bottom: clamp(3rem, 2.83rem + 0.71vw, 3.5rem);
}

.pb-5xl{
  padding-bottom: clamp(3.5rem, 3.15rem + 1.43vw, 4.5rem);
}

.pb-6xl{
  padding-bottom: clamp(4.5rem, 3.98rem + 2.14vw, 6rem);
}

.pb-7xl{
  padding-bottom: clamp(6rem, 5.30rem + 2.85vw, 8rem);
}

.pb-grid-gutter{
  padding-bottom: clamp(1rem, 0.70rem + 1.25vw, 1.875rem);
}

.pb-gutter-inline{
  padding-bottom: clamp(1.25rem, 1.03rem + 0.89vw, 1.875rem);
}

.pb-l{
  padding-bottom: clamp(0.5rem, 0.33rem + 0.71vw, 1rem);
}

.pb-l-2xl{
  padding-bottom: clamp(0.5rem, -0.02rem + 2.14vw, 2rem);
}

.pb-m{
  padding-bottom: clamp(0.25rem, 0.16rem + 0.36vw, 0.5rem);
}

.pb-s{
  padding-bottom: clamp(0.125rem, 0.08rem + 0.18vw, 0.25rem);
}

.pb-xl{
  padding-bottom: clamp(1rem, 0.83rem + 0.71vw, 1.5rem);
}

.pb-xl-2xl{
  padding-bottom: clamp(1rem, 0.65rem + 1.43vw, 2rem);
}

.pb-xl-5xl{
  padding-bottom: clamp(1rem, -0.22rem + 4.99vw, 4.5rem);
}

.pb-xs{
  padding-bottom: clamp(0.0625rem, 0.04rem + 0.09vw, 0.125rem);
}

.pb-zero{
  padding-bottom: 0rem;
}

.pl-2xl{
  padding-left: clamp(1.5rem, 1.33rem + 0.71vw, 2rem);
}

.pl-2xl-3xl{
  padding-left: clamp(1.5rem, 0.98rem + 2.14vw, 3rem);
}

.pl-2xl-4xl{
  padding-left: clamp(1.5rem, 0.80rem + 2.85vw, 3.5rem);
}

.pl-3xl{
  padding-left: clamp(2rem, 1.65rem + 1.43vw, 3rem);
}

.pl-4xl{
  padding-left: clamp(3rem, 2.83rem + 0.71vw, 3.5rem);
}

.pl-5xl{
  padding-left: clamp(3.5rem, 3.15rem + 1.43vw, 4.5rem);
}

.pl-6xl{
  padding-left: clamp(4.5rem, 3.98rem + 2.14vw, 6rem);
}

.pl-7xl{
  padding-left: clamp(6rem, 5.30rem + 2.85vw, 8rem);
}

.pl-grid-gutter{
  padding-left: clamp(1rem, 0.70rem + 1.25vw, 1.875rem);
}

.pl-gutter-inline{
  padding-left: clamp(1.25rem, 1.03rem + 0.89vw, 1.875rem);
}

.pl-l{
  padding-left: clamp(0.5rem, 0.33rem + 0.71vw, 1rem);
}

.pl-l-2xl{
  padding-left: clamp(0.5rem, -0.02rem + 2.14vw, 2rem);
}

.pl-m{
  padding-left: clamp(0.25rem, 0.16rem + 0.36vw, 0.5rem);
}

.pl-s{
  padding-left: clamp(0.125rem, 0.08rem + 0.18vw, 0.25rem);
}

.pl-xl{
  padding-left: clamp(1rem, 0.83rem + 0.71vw, 1.5rem);
}

.pl-xl-2xl{
  padding-left: clamp(1rem, 0.65rem + 1.43vw, 2rem);
}

.pl-xl-5xl{
  padding-left: clamp(1rem, -0.22rem + 4.99vw, 4.5rem);
}

.pl-xs{
  padding-left: clamp(0.0625rem, 0.04rem + 0.09vw, 0.125rem);
}

.pl-zero{
  padding-left: 0rem;
}

.pr-2xl{
  padding-right: clamp(1.5rem, 1.33rem + 0.71vw, 2rem);
}

.pr-2xl-3xl{
  padding-right: clamp(1.5rem, 0.98rem + 2.14vw, 3rem);
}

.pr-2xl-4xl{
  padding-right: clamp(1.5rem, 0.80rem + 2.85vw, 3.5rem);
}

.pr-3xl{
  padding-right: clamp(2rem, 1.65rem + 1.43vw, 3rem);
}

.pr-4xl{
  padding-right: clamp(3rem, 2.83rem + 0.71vw, 3.5rem);
}

.pr-5xl{
  padding-right: clamp(3.5rem, 3.15rem + 1.43vw, 4.5rem);
}

.pr-6xl{
  padding-right: clamp(4.5rem, 3.98rem + 2.14vw, 6rem);
}

.pr-7xl{
  padding-right: clamp(6rem, 5.30rem + 2.85vw, 8rem);
}

.pr-grid-gutter{
  padding-right: clamp(1rem, 0.70rem + 1.25vw, 1.875rem);
}

.pr-gutter-inline{
  padding-right: clamp(1.25rem, 1.03rem + 0.89vw, 1.875rem);
}

.pr-l{
  padding-right: clamp(0.5rem, 0.33rem + 0.71vw, 1rem);
}

.pr-l-2xl{
  padding-right: clamp(0.5rem, -0.02rem + 2.14vw, 2rem);
}

.pr-m{
  padding-right: clamp(0.25rem, 0.16rem + 0.36vw, 0.5rem);
}

.pr-s{
  padding-right: clamp(0.125rem, 0.08rem + 0.18vw, 0.25rem);
}

.pr-xl{
  padding-right: clamp(1rem, 0.83rem + 0.71vw, 1.5rem);
}

.pr-xl-2xl{
  padding-right: clamp(1rem, 0.65rem + 1.43vw, 2rem);
}

.pr-xl-5xl{
  padding-right: clamp(1rem, -0.22rem + 4.99vw, 4.5rem);
}

.pr-xs{
  padding-right: clamp(0.0625rem, 0.04rem + 0.09vw, 0.125rem);
}

.pr-zero{
  padding-right: 0rem;
}

.pt-2xl{
  padding-top: clamp(1.5rem, 1.33rem + 0.71vw, 2rem);
}

.pt-2xl-3xl{
  padding-top: clamp(1.5rem, 0.98rem + 2.14vw, 3rem);
}

.pt-2xl-4xl{
  padding-top: clamp(1.5rem, 0.80rem + 2.85vw, 3.5rem);
}

.pt-3xl{
  padding-top: clamp(2rem, 1.65rem + 1.43vw, 3rem);
}

.pt-4xl{
  padding-top: clamp(3rem, 2.83rem + 0.71vw, 3.5rem);
}

.pt-5xl{
  padding-top: clamp(3.5rem, 3.15rem + 1.43vw, 4.5rem);
}

.pt-6xl{
  padding-top: clamp(4.5rem, 3.98rem + 2.14vw, 6rem);
}

.pt-7xl{
  padding-top: clamp(6rem, 5.30rem + 2.85vw, 8rem);
}

.pt-grid-gutter{
  padding-top: clamp(1rem, 0.70rem + 1.25vw, 1.875rem);
}

.pt-gutter-inline{
  padding-top: clamp(1.25rem, 1.03rem + 0.89vw, 1.875rem);
}

.pt-l{
  padding-top: clamp(0.5rem, 0.33rem + 0.71vw, 1rem);
}

.pt-l-2xl{
  padding-top: clamp(0.5rem, -0.02rem + 2.14vw, 2rem);
}

.pt-m{
  padding-top: clamp(0.25rem, 0.16rem + 0.36vw, 0.5rem);
}

.pt-s{
  padding-top: clamp(0.125rem, 0.08rem + 0.18vw, 0.25rem);
}

.pt-xl{
  padding-top: clamp(1rem, 0.83rem + 0.71vw, 1.5rem);
}

.pt-xl-2xl{
  padding-top: clamp(1rem, 0.65rem + 1.43vw, 2rem);
}

.pt-xl-5xl{
  padding-top: clamp(1rem, -0.22rem + 4.99vw, 4.5rem);
}

.pt-xs{
  padding-top: clamp(0.0625rem, 0.04rem + 0.09vw, 0.125rem);
}

.pt-zero{
  padding-top: 0rem;
}

.text-left{
  text-align: left;
}

.text-center{
  text-align: center;
}

.text-right{
  text-align: right;
}

.text-justify{
  text-align: justify;
}

.text-start{
  text-align: start;
}

.text-end{
  text-align: end;
}

.font-base{
  font-family: HostGrotesk, Inter, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
}

.font-mono{
  font-family: SF Mono, Consolas, Liberation Mono, Menlo, Monaco, Courier New, monospace;
}

.text-body{
  font-size: clamp(1rem, 0.91rem + 0.36vw, 1.25rem);
}

.text-body-l{
  font-size: clamp(1.25rem, 1.21rem + 0.18vw, 1.375rem);
}

.text-body-l-xl{
  font-size: clamp(1.25rem, 1.16rem + 0.36vw, 1.5rem);
}

.text-body-s{
  font-size: clamp(0.875rem, 0.83rem + 0.18vw, 1rem);
}

.text-body-xl{
  font-size: clamp(1.375rem, 1.33rem + 0.18vw, 1.5rem);
}

.text-body-xs{
  font-size: 0.875rem;
}

.text-button{
  font-size: clamp(0.75rem, 0.71rem + 0.18vw, 0.875rem);
}

.text-button-l{
  font-size: clamp(0.875rem, 0.74rem + 0.53vw, 1.25rem);
}

.text-button-s{
  font-size: 0.875rem;
}

.text-heading-2xl{
  font-size: clamp(1.5rem, 1.24rem + 1.07vw, 2.25rem);
}

.text-heading-3xl{
  font-size: clamp(1.5rem, 1.11rem + 1.60vw, 2.625rem);
}

.text-heading-4xl{
  font-size: clamp(2rem, 1.65rem + 1.43vw, 3rem);
}

.text-heading-5xl{
  font-size: clamp(2.25rem, 1.82rem + 1.78vw, 3.5rem);
}

.text-heading-l{
  font-size: clamp(1.25rem, 1.16rem + 0.36vw, 1.5rem);
}

.text-heading-l-5xl{
  font-size: clamp(1.25rem, 0.47rem + 3.21vw, 3.5rem);
}

.text-heading-m{
  font-size: 1.25rem;
}

.text-heading-s{
  font-size: clamp(0.75rem, 0.66rem + 0.36vw, 1rem);
}

.text-heading-s-2xl{
  font-size: clamp(1rem, 0.57rem + 1.78vw, 2.25rem);
}

.text-heading-xl{
  font-size: clamp(1.5rem, 1.33rem + 0.71vw, 2rem);
}

.text-heading-xl-5xl{
  font-size: clamp(1.5rem, 0.80rem + 2.85vw, 3.5rem);
}

.text-heading-xs{
  font-size: clamp(0.75rem, 0.71rem + 0.18vw, 0.875rem);
}

.font-bold{
  font-weight: 700;
}

.font-light{
  font-weight: 300;
}

.font-regular{
  font-weight: 400;
}

.leading-fine{
  line-height: 1.25;
}

.leading-flat{
  line-height: 1.15;
}

.leading-loose{
  line-height: 1.4;
}

.leading-standard{
  line-height: 1.32;
}

.leading-tight{
  line-height: 1.05;
}

.text-dark{
  color: #102728;
}

.text-error{
  color: #D8443B;
}

.text-kaktusgruen-100{
  color: #4E583A;
}

.text-kaktusgruen-20{
  color: #D5E3B8;
}

.text-kaktusgruen-hover{
  color: #4A523A;
}

.text-kreideblau-100{
  color: #7FA7BE;
}

.text-kreideblau-20{
  color: #C9E1EE;
}

.text-kreideblau-hover{
  color: #7690A0;
}

.text-light{
  color: #FFF;
}

.text-neutral-0{
  color: #FDFDFD;
}

.text-neutral-10{
  color: #EBEDED;
}

.text-neutral-20{
  color: #CDD2D2;
}

.text-neutral-40{
  color: #9CA3A4;
}

.text-neutral-60{
  color: #6B7677;
}

.text-neutral-80{
  color: #3A4849;
}

.text-oktoberrot-100{
  color: #96403E;
}

.text-oktoberrot-20{
  color: #F4C6C5;
}

.text-oktoberrot-hover{
  color: #7D3F3D;
}

.text-orange-100{
  color: #F2910C;
}

.text-orange-hover{
  color: #D5871B;
}

.text-purple-0{
  color: #F5F3FF;
}

.text-purple-10{
  color: #EDE9FE;
}

.text-purple-100{
  color: #2D105A;
}

.text-purple-20{
  color: #E0D9FC;
}

.text-purple-40{
  color: #C4B5FD;
}

.text-purple-60{
  color: #7C3AED;
}

.text-purple-80{
  color: #4C1D95;
}

.text-schiefer{
  color: #2A2A2A;
}

.text-success{
  color: #3BD87A;
}

.flow-space-zero > *{
  --flow-space: 0rem;
}

.flow-space-xs > *{
  --flow-space: clamp(0.0625rem, 0.04rem + 0.09vw, 0.125rem);
}

.flow-space-s > *{
  --flow-space: clamp(0.125rem, 0.08rem + 0.18vw, 0.25rem);
}

.flow-space-m > *{
  --flow-space: clamp(0.25rem, 0.16rem + 0.36vw, 0.5rem);
}

.flow-space-l > *{
  --flow-space: clamp(0.5rem, 0.33rem + 0.71vw, 1rem);
}

.flow-space-xl > *{
  --flow-space: clamp(1rem, 0.83rem + 0.71vw, 1.5rem);
}

.flow-space-2xl > *{
  --flow-space: clamp(1.5rem, 1.33rem + 0.71vw, 2rem);
}

.flow-space-3xl > *{
  --flow-space: clamp(2rem, 1.65rem + 1.43vw, 3rem);
}

.flow-space-4xl > *{
  --flow-space: clamp(3rem, 2.83rem + 0.71vw, 3.5rem);
}

.flow-space-5xl > *{
  --flow-space: clamp(3.5rem, 3.15rem + 1.43vw, 4.5rem);
}

.flow-space-6xl > *{
  --flow-space: clamp(4.5rem, 3.98rem + 2.14vw, 6rem);
}

.flow-space-7xl > *{
  --flow-space: clamp(6rem, 5.30rem + 2.85vw, 8rem);
}

.flow-space-gutter-inline > *{
  --flow-space: clamp(1.25rem, 1.03rem + 0.89vw, 1.875rem);
}

.flow-space-grid-gutter > *{
  --flow-space: clamp(1rem, 0.70rem + 1.25vw, 1.875rem);
}

.flow-space-xl-2xl > *{
  --flow-space: clamp(1rem, 0.65rem + 1.43vw, 2rem);
}

.flow-space-l-2xl > *{
  --flow-space: clamp(0.5rem, -0.02rem + 2.14vw, 2rem);
}

.flow-space-2xl-3xl > *{
  --flow-space: clamp(1.5rem, 0.98rem + 2.14vw, 3rem);
}

.flow-space-2xl-4xl > *{
  --flow-space: clamp(1.5rem, 0.80rem + 2.85vw, 3.5rem);
}

.flow-space-xl-5xl > *{
  --flow-space: clamp(1rem, -0.22rem + 4.99vw, 4.5rem);
}

.region-space-zero{
  --region-space: 0rem;
}

.region-space-xs{
  --region-space: clamp(0.0625rem, 0.04rem + 0.09vw, 0.125rem);
}

.region-space-s{
  --region-space: clamp(0.125rem, 0.08rem + 0.18vw, 0.25rem);
}

.region-space-m{
  --region-space: clamp(0.25rem, 0.16rem + 0.36vw, 0.5rem);
}

.region-space-l{
  --region-space: clamp(0.5rem, 0.33rem + 0.71vw, 1rem);
}

.region-space-xl{
  --region-space: clamp(1rem, 0.83rem + 0.71vw, 1.5rem);
}

.region-space-2xl{
  --region-space: clamp(1.5rem, 1.33rem + 0.71vw, 2rem);
}

.region-space-3xl{
  --region-space: clamp(2rem, 1.65rem + 1.43vw, 3rem);
}

.region-space-4xl{
  --region-space: clamp(3rem, 2.83rem + 0.71vw, 3.5rem);
}

.region-space-5xl{
  --region-space: clamp(3.5rem, 3.15rem + 1.43vw, 4.5rem);
}

.region-space-6xl{
  --region-space: clamp(4.5rem, 3.98rem + 2.14vw, 6rem);
}

.region-space-7xl{
  --region-space: clamp(6rem, 5.30rem + 2.85vw, 8rem);
}

.region-space-gutter-inline{
  --region-space: clamp(1.25rem, 1.03rem + 0.89vw, 1.875rem);
}

.region-space-grid-gutter{
  --region-space: clamp(1rem, 0.70rem + 1.25vw, 1.875rem);
}

.region-space-xl-2xl{
  --region-space: clamp(1rem, 0.65rem + 1.43vw, 2rem);
}

.region-space-l-2xl{
  --region-space: clamp(0.5rem, -0.02rem + 2.14vw, 2rem);
}

.region-space-2xl-3xl{
  --region-space: clamp(1.5rem, 0.98rem + 2.14vw, 3rem);
}

.region-space-2xl-4xl{
  --region-space: clamp(1.5rem, 0.80rem + 2.85vw, 3.5rem);
}

.region-space-xl-5xl{
  --region-space: clamp(1rem, -0.22rem + 4.99vw, 4.5rem);
}

.gutter-zero{
  --gutter: 0rem;
}

.gutter-xs{
  --gutter: clamp(0.0625rem, 0.04rem + 0.09vw, 0.125rem);
}

.gutter-s{
  --gutter: clamp(0.125rem, 0.08rem + 0.18vw, 0.25rem);
}

.gutter-m{
  --gutter: clamp(0.25rem, 0.16rem + 0.36vw, 0.5rem);
}

.gutter-l{
  --gutter: clamp(0.5rem, 0.33rem + 0.71vw, 1rem);
}

.gutter-xl{
  --gutter: clamp(1rem, 0.83rem + 0.71vw, 1.5rem);
}

.gutter-2xl{
  --gutter: clamp(1.5rem, 1.33rem + 0.71vw, 2rem);
}

.gutter-3xl{
  --gutter: clamp(2rem, 1.65rem + 1.43vw, 3rem);
}

.gutter-4xl{
  --gutter: clamp(3rem, 2.83rem + 0.71vw, 3.5rem);
}

.gutter-5xl{
  --gutter: clamp(3.5rem, 3.15rem + 1.43vw, 4.5rem);
}

.gutter-6xl{
  --gutter: clamp(4.5rem, 3.98rem + 2.14vw, 6rem);
}

.gutter-7xl{
  --gutter: clamp(6rem, 5.30rem + 2.85vw, 8rem);
}

.gutter-gutter-inline{
  --gutter: clamp(1.25rem, 1.03rem + 0.89vw, 1.875rem);
}

.gutter-grid-gutter{
  --gutter: clamp(1rem, 0.70rem + 1.25vw, 1.875rem);
}

.gutter-xl-2xl{
  --gutter: clamp(1rem, 0.65rem + 1.43vw, 2rem);
}

.gutter-l-2xl{
  --gutter: clamp(0.5rem, -0.02rem + 2.14vw, 2rem);
}

.gutter-2xl-3xl{
  --gutter: clamp(1.5rem, 0.98rem + 2.14vw, 3rem);
}

.gutter-2xl-4xl{
  --gutter: clamp(1.5rem, 0.80rem + 2.85vw, 3.5rem);
}

.gutter-xl-5xl{
  --gutter: clamp(1rem, -0.22rem + 4.99vw, 4.5rem);
}

.font-light{
  font-weight: 300;
}

.font-regular{
  font-weight: 400;
}

.font-bold{
  font-weight: 700;
}

.col-1-3{
  grid-column: 1 / -1;
}

@container layout-grid (min-width: 767px){
  .col-1-3{
    grid-column: 1 / 3;
  }
}

.col-1-6{
  grid-column: 1 / -1;
}

@container layout-grid (min-width: 767px){
  .col-1-6{
    grid-column: 1 / 6;
  }
}

.col-1-7{
  grid-column: 1 / -1;
}

@container layout-grid (min-width: 767px){
  .col-1-7{
    grid-column: 1 / 7;
  }
}

.col-1-8{
  grid-column: 1 / -1;
}

@container layout-grid (min-width: 767px){
  .col-1-8{
    grid-column: 1 / 8;
  }
}

.col-1-9{
  grid-column: 1 / -1;
}

@container layout-grid (min-width: 767px){
  .col-1-9{
    grid-column: 1 / 9;
  }
}

.col-1-10{
  grid-column: 1 / -1;
}

@container layout-grid (min-width: 767px){
  .col-1-10{
    grid-column: 1 / 10;
  }
}

.col-1-11{
  grid-column: 1 / -1;
}

@container layout-grid (min-width: 767px){
  .col-1-11{
    grid-column: 1 / 11;
  }
}

.col-1-13{
  grid-column: 1 / -1;
}

@container layout-grid (min-width: 767px){
  .col-1-13{
    grid-column: 1 / -1;
  }
}

.col-2-13{
  grid-column: 1 / -1;
}

@container layout-grid (min-width: 767px){
  .col-2-13{
    grid-column: 2 / -1;
  }
}

.col-1-12{
  grid-column: 1 / -1;
}

@container layout-grid (min-width: 767px){
  .col-1-12{
    grid-column: 1 / 12;
  }
}

.col-2-12{
  grid-column: 1 / -1;
}

@container layout-grid (min-width: 767px){
  .col-2-12{
    grid-column: 2 / 12;
  }
}

.col-3-11{
  grid-column: 1 / -1;
}

@container layout-grid (min-width: 767px){
  .col-3-11{
    grid-column: 3 / 11;
  }
}

.col-8-12{
  grid-column: 1 / -1;
}

@container layout-grid (min-width: 767px){
  .col-8-12{
    grid-column: 8 / 12;
  }
}

.col-7-12{
  grid-column: 1 / -1;
}

@container layout-grid (min-width: 767px){
  .col-7-12{
    grid-column: 7 / 12;
  }
}