:root {

  /* Boxed design */
  --boxed-width: 1600px;   /* Achtung: Muss auch im Scroll-to-top-Element angewendet werden */
  --boxed-bg-outer--light: #dddddd;
  --boxed-bg-outer--dark: #232629;
  --boxed-bg-inner: var(--white);

  /* Viewport boundaries */
  --viewport-min: 320;
  --viewport-max: 1201;
  --container-width: calc(var(--viewport-max) * 1px);

  /* Colors */
  --primary-700: hsl(356, 95%, 40%);
  --primary-500: #e30613;
  --primary-300: #fde9e9;
  --primary-100: #fef4f4;

  --primary: var(--primary-500);
  --primary-hover: var(--base);

  --base-500: #212226;
  --base-450: #28292d;
  --base-350: #48494c;
  --base-300: #5d5d5d;
  --base-200: #c2c2c2;
  --base-175: #dddddd;
  --base-150: #f1f1f1;
  --base-100: #f6f6f6;
  --base: var(--base-500);


  --neutral-0: hsl(0, 0%, 100%);
  --neutral-100: hsl(0, 0%, 90%);
  --neutral-500: hsl(0, 0%, 50%);
  --neutral-1000: hsl(0, 0%, 0%);


  --white: var(--neutral-0);
  --black: var(--neutral-1000);
  --border-color: var(--base-175);
  --background-tint: var(--base-100);

  --transparent: transparent;

  /* Body & Heading Colors */
  --body-color: var(--base-300);
  --heading-color: var(--black);
  /* --h1-heading-color: var(--base);
  --h2-heading-color: var(--base);
  --h3-heading-color: var(--base);
  --h4-heading-color: var(--base);
  --h5-heading-color: var(--base);
  --h6-heading-color: var(--base); */

  /* Link Colors */
  --link-color: var(--black);
  --link-color-hover: var(--primary);


  /* Text Selections */
  --text-selection-bg: var(--primary);
  --text-selection-bg-link: var(--base-350);
  --text-selection-color: white;


  /* Scrollbars */
  /* scrollbar-width: auto; */
  /* scrollbar-color: gray transparent; */


  /* Buttons */
  --btn-1-bg: var(--primary);
  --btn-1-bg-hover: var(--primary-hover);
  --btn-1-border-width: 2px;
  --btn-1-border: var(--btn-1-border-width) solid var(--primary);
  --btn-1-border-hover: var(--btn-1-border-width) solid var(--primary-hover);
  --btn-1-color: white;
  --btn-1-color-hover: white;
  --btn-border-radius: 50rem;
  --btn-padding: .85rem 3.25rem;
  --btn-font-weight: 700;
  --btn-font-size: var(--text-m);

  --btn-1-outline-bg: transparent;
  --btn-1-outline-bg-hover: var(--btn-1-bg-hover);
  --btn-1-outline-border: var(--btn-1-border-width) solid var(--primary);
  --btn-1-outline-border-hover: var(--btn-1-border-hover);
  --btn-1-outline-color: var(--primary);
  --btn-1-outline-color-hover: white;


  /* Transitions*/
  --transition-standard: .35s ease all;

  /* Images */
  --object-fit: cover;
  --object-position: 50% 50%;

  /* Border Radius */
  --border-radius-m: 2rem;
  --border-radius-s: 1.5rem;
  --border-radius-xs: .5rem;

  /* Header Spacer */
  /* --header-spacer-xl: 105px;
  --header-spacer-l: 105px;
  --header-spacer-m: 80px;
  --header-spacer-s: 80px;
  --header-spacer-background: transparent; */


  /* --logo-aspect-ratio: 253/71; */
  /* --logo-width-xl: 200px;
  --logo-height-xl: 55px;
  --logo-width-s: 150px;
  --logo-height-s: 41px; */

  /* Heading Typography Scale */

  --h1-max: 48;
  --h1-min: 30;

  --h2-max: 34;
  --h2-min: 26;

  --h3-max: 24;
  --h3-min: 21;

  --h4-max: 20;
  --h4-min: 18;

  --h5-max: 18;
  --h5-min: 16;

  --h6-max: 17;
  --h6-min: 15;


  /* Text Scale Min/Max Values */
  --body-max: var(--text-m-max);
  --body-min: var(--text-m-min);

  --text-xxl-max: 24;
  --text-xxl-min: 21;

  --text-xl-max: 20;
  --text-xl-min: 18;

  --text-l-max: 18;
  --text-l-min: 16;

  /* Body Text */
  --text-m-max: 17;
  --text-m-min: 15;

  --text-s-max: 16;
  --text-s-min: 14;

  --text-xs-max: 15;
  --text-xs-min: 13;

  --text-xxs-max: 14;
  --text-xxs-min: 12;





  /* Line Heights */
  --body-line-height: calc(4px + 2.25ex);
  --h1-line-height: calc(4px + 2ex);
  --h2-line-height: calc(4px + 2ex);
  --h3-line-height: calc(4px + 2ex);
  --h4-line-height: calc(4px + 2ex);
  --h5-line-height: calc(4px + 2ex);
  --h6-line-height: calc(4px + 2ex);


  /* Spacing */
  /* --space-unit: 3rem;
  --space-xxs: calc(var(--space-unit) * 0.25);
  --space-xs: calc(var(--space-unit) * 0.5);
  --space-s: calc(var(--space-unit) * 0.75);
  --space-m: var(--space-unit);
  --space-l: calc(var(--space-unit) * 1.5);
  --space-xl: calc(var(--space-unit) * 2);
  --space-xxl: calc(var(--space-unit) * 3);
  --space-3xl: calc(var(--space-unit) * 4);      
  --space-4xl: calc(var(--space-unit) * 5);     
  --space-5xl: calc(var(--space-unit) * 6);  */

  /* Fluid Spacing */
  /* Base Fluid Spacing */
  --space-m-min: 2.25rem;
  --space-m-max: 2.75rem;
  --space-m: clamp(var(--space-m-min), calc(0.75rem + 1.5vw), var(--space-m-max));

  /* Derived Spacing Sizes */
  --space-xxs: calc(var(--space-m) * 0.25);
  --space-xs: calc(var(--space-m) * 0.5);
  --space-s: calc(var(--space-m) * 0.75);
  --space-l: calc(var(--space-m) * 1.5);
  --space-xl: calc(var(--space-m) * 2);
  --space-xxl: calc(var(--space-m) * 3);
  --space-3xl: calc(var(--space-m) * 4);
  --space-4xl: calc(var(--space-m) * 5);
  --space-5xl: calc(var(--space-m) * 6);


  --heading-spacing: var(--space-m);
  --paragraph-spacing: calc(var(--space-xs) * 1.5);

  --content-gap: var(--space-m);
  --container-gap: var(--space-xl);
  --grid-gap: var(--space-m);

  --section-padding-x: var(--space-m);
  --section-padding-y: var(--space-3xl);
  --section-padding-y--m: var(--space-xxl); 


  /* Lists */
  /* --list-indent-spacing: 1.4em;
  --flow-spacing: var(--paragraph-spacing); */
  --list-indent-spacing: var(--space-s);
  --flow-spacing: var(--space-xxs);



  /* Calculate viewport width percentage */
  --viewport-calc: calc((100vw - var(--viewport-min) * 1px) / (var(--viewport-max) - var(--viewport-min)));

  /* Fluid heading typography calculations */
  --body-scale: calc((var(--body-max) - var(--body-min)) * var(--viewport-calc));
  --h1-scale: calc((var(--h1-max) - var(--h1-min)) * var(--viewport-calc));
  --h2-scale: calc((var(--h2-max) - var(--h2-min)) * var(--viewport-calc));
  --h3-scale: calc((var(--h3-max) - var(--h3-min)) * var(--viewport-calc));
  --h4-scale: calc((var(--h4-max) - var(--h4-min)) * var(--viewport-calc));
  --h5-scale: calc((var(--h5-max) - var(--h5-min)) * var(--viewport-calc));
  --h6-scale: calc((var(--h6-max) - var(--h6-min)) * var(--viewport-calc));

  /* Define the final fluid heading sizes as CSS variables */
  --body-font-size: clamp(calc(var(--body-min) * 1px), calc(var(--body-min) * 1px + var(--body-scale)), calc(var(--body-max) * 1px));
  --h1: clamp(calc(var(--h1-min) * 1px), calc(var(--h1-min) * 1px + var(--h1-scale)), calc(var(--h1-max) * 1px));
  --h2: clamp(calc(var(--h2-min) * 1px), calc(var(--h2-min) * 1px + var(--h2-scale)), calc(var(--h2-max) * 1px));
  --h3: clamp(calc(var(--h3-min) * 1px), calc(var(--h3-min) * 1px + var(--h3-scale)), calc(var(--h3-max) * 1px));
  --h4: clamp(calc(var(--h4-min) * 1px), calc(var(--h4-min) * 1px + var(--h4-scale)), calc(var(--h4-max) * 1px));
  --h5: clamp(calc(var(--h5-min) * 1px), calc(var(--h5-min) * 1px + var(--h5-scale)), calc(var(--h5-max) * 1px));
  --h6: clamp(calc(var(--h6-min) * 1px), calc(var(--h6-min) * 1px + var(--h6-scale)), calc(var(--h6-max) * 1px));

  /* Fluid text scale calculations */
  --text-xxs-scale: calc((var(--text-xxs-max) - var(--text-xxs-min)) * var(--viewport-calc));
  --text-xs-scale: calc((var(--text-xs-max) - var(--text-xs-min)) * var(--viewport-calc));
  --text-s-scale: calc((var(--text-s-max) - var(--text-s-min)) * var(--viewport-calc));
  --text-m-scale: calc((var(--text-m-max) - var(--text-m-min)) * var(--viewport-calc));
  --text-l-scale: calc((var(--text-l-max) - var(--text-l-min)) * var(--viewport-calc));
  --text-xl-scale: calc((var(--text-xl-max) - var(--text-xl-min)) * var(--viewport-calc));
  --text-xxl-scale: calc((var(--text-xxl-max) - var(--text-xxl-min)) * var(--viewport-calc));

  /* Final fluid text sizes */
  --text-xxs: clamp(calc(var(--text-xxs-min) * 1px), calc(var(--text-xxs-min) * 1px + var(--text-xxs-scale)), calc(var(--text-xxs-max) * 1px));
  --text-xs: clamp(calc(var(--text-xs-min) * 1px), calc(var(--text-xs-min) * 1px + var(--text-xs-scale)), calc(var(--text-xs-max) * 1px));
  --text-s: clamp(calc(var(--text-s-min) * 1px), calc(var(--text-s-min) * 1px + var(--text-s-scale)), calc(var(--text-s-max) * 1px));
  --text-m: clamp(calc(var(--text-m-min) * 1px), calc(var(--text-m-min) * 1px + var(--text-m-scale)), calc(var(--text-m-max) * 1px));
  --text-l: clamp(calc(var(--text-l-min) * 1px), calc(var(--text-l-min) * 1px + var(--text-l-scale)), calc(var(--text-l-max) * 1px));
  --text-xl: clamp(calc(var(--text-xl-min) * 1px), calc(var(--text-xl-min) * 1px + var(--text-xl-scale)), calc(var(--text-xl-max) * 1px));
  --text-xxl: clamp(calc(var(--text-xxl-min) * 1px), calc(var(--text-xxl-min) * 1px + var(--text-xxl-scale)), calc(var(--text-xxl-max) * 1px));
}


/* Reset */
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
}

/* Base styles */
body {
  font-size: var(--body-font-size);
  color: var(--body-color);
  /* line-height: var(--body-line-height); */
}

/* Body text elements */
/* p, ul, ol, dl {
font-size: var(--body-font-size);
line-height: var(--body-line-height);
} */

/* Headings */
h1 {
  font-size: var(--h1);
  color: var(--h1-heading-color, var(--heading-color));
  line-height: var(--h1-line-height);
}

h2 {
  font-size: var(--h2);
  color: var(--h2-heading-color, var(--heading-color));
  line-height: var(--h2-line-height);
}

h3 {
  font-size: var(--h3);
  color: var(--h3-heading-color, var(--heading-color));
  line-height: var(--h3-line-height);
}

h4 {
  font-size: var(--h4);
  color: var(--h4-heading-color, var(--heading-color));
  line-height: var(--h4-line-height);
}

h5 {
  font-size: var(--h5);
  color: var(--h5-heading-color, var(--heading-color));
  line-height: var(--h5-line-height);
}

h6 {
  font-size: var(--h6);
  color: var(--h6-heading-color, var(--heading-color));
  line-height: var(--h6-line-height);
}



/* Grids */
:root {
  --grid-1: repeat(1, minmax(0, 1fr));
  --grid-2: repeat(2, minmax(0, 1fr));
  --grid-3: repeat(3, minmax(0, 1fr));
  --grid-4: repeat(4, minmax(0, 1fr));
  --grid-5: repeat(5, minmax(0, 1fr));
  --grid-6: repeat(6, minmax(0, 1fr));
  --grid-7: repeat(7, minmax(0, 1fr));
  --grid-8: repeat(8, minmax(0, 1fr));
  --grid-9: repeat(9, minmax(0, 1fr));
  --grid-10: repeat(10, minmax(0, 1fr));
  --grid-11: repeat(11, minmax(0, 1fr));
  --grid-12: repeat(12, minmax(0, 1fr));
  --grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
  --grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
  --grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
  --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
  --grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
  --grid-3-2: minmax(0, 3fr) minmax(0, 2fr);
  /* --grid-1-2-1: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); */
}



/* Links */
a {
  color: var(--link-color);
  transition: var(--transition-standard);
}

a:hover {
  color: var(--link-color-hover);
  transition: var(--transition-standard);
}


/* Sections */
:where(section:not(section section)) {
  padding-inline: var(--section-padding-x);
  padding-block: var(--section-padding-y);
}

@media (max-width: 768px) {
  :where(section:not(section section)) {
  padding-block: var(--section-padding-y--m);
}
}

/* Content Spacing */
.brxe-text>*+*,
.brxe-post-content:where(:not([data-source="bricks"]))>*+* {
  margin-block-start: var(--flow-spacing, initial);
  margin-block-end: 0;
}

.brxe-text>*+ :where(h1, h2, h3, h4, h5, h6),
.brxe-post-content:where(:not([data-source="bricks"]))>*+ :where(h1, h2, h3, h4, h5, h6) {
  margin-block-start: var(--heading-spacing, var(--flow-spacing, initial));
  margin-block-end: 0;
}

.brxe-text> :where(* + h2),
.brxe-post-content:where(:not([data-source="bricks"]))> :where(* + h2) {
  margin-block-start: var(--h2-spacing, var(--heading-spacing));
  margin-block-end: 0;
}

.brxe-text> :where(* + h3),
.brxe-post-content:where(:not([data-source="bricks"]))> :where(* + h3) {
  margin-block-start: var(--h3-spacing, var(--heading-spacing));
  margin-block-end: 0;
}

.brxe-text> :where(* + h4),
.brxe-post-content:where(:not([data-source="bricks"]))> :where(* + h4) {
  margin-block-start: var(--h4-spacing, var(--heading-spacing));
  margin-block-end: 0;
}

.brxe-text> :where(* + h5),
.brxe-post-content:where(:not([data-source="bricks"]))> :where(* + h5) {
  margin-block-start: var(--h5-spacing, var(--heading-spacing));
  margin-block-end: 0;
}

.brxe-text> :where(* + h6),
.brxe-post-content:where(:not([data-source="bricks"]))> :where(* + h6) {
  margin-block-start: var(--h6-spacing, var(--heading-spacing));
  margin-block-end: 0;
}

.brxe-text>*+p,
.brxe-post-content:where(:not([data-source="bricks"]))>*+p {
  margin-block-start: var(--paragraph-spacing, var(--flow-spacing, initial));
  margin-block-end: 0;
}

.brxe-text> :is(* + ul, * + ol),
.brxe-post-content:where(:not([data-source="bricks"]))> :is(* + ul, * + ol) {
  margin-block: var(--list-spacing, var(--flow-spacing, initial));
}

.brxe-text> :is(ul, ol),
.brxe-post-content:where(:not([data-source="bricks"]))> :is(ul, ol) {
  padding-inline-start: var(--list-indent-spacing, var(--flow-spacing, initial));
  margin-block-start: 0;
  margin-block-end: 0;
}

.brxe-text>ul *+li,
.brxe-text>ol *+li,
.brxe-post-content:where(:not([data-source="bricks"]))>ul *+li,
.brxe-post-content:where(:not([data-source="bricks"]))>ol *+li {
  margin-block-start: var(--list-item-spacing, var(--flow-spacing, initial));
  margin-block-end: 0;
}

.brxe-text>ul ul,
.brxe-text>ol ol,
.brxe-text>ul ol,
.brxe-text>ol ul,
.brxe-post-content:where(:not([data-source="bricks"]))>ul ul,
.brxe-post-content:where(:not([data-source="bricks"]))>ol ol,
.brxe-post-content:where(:not([data-source="bricks"]))>ul ol,
.brxe-post-content:where(:not([data-source="bricks"]))>ol ul {
  margin-block: var(--nested-list-spacing, var(--list-item-spacing, initial));
  padding-inline-start: var(--nested-list-indent-spacing, initial);
}

.brxe-text> :is(ul, ol) :is(ul, ol) li,
.brxe-post-content:where(:not([data-source="bricks"]))> :is(ul, ol) :is(ul, ol) li {
  margin-block-start: var(--nested-list-item-spacing, var(--list-item-spacing, initial));
}

.brxe-text>*+figure,
.brxe-post-content:where(:not([data-source="bricks"]))>*+figure {
  margin-block: var(--figure-spacing, var(--flow-spacing, initial));
}

.brxe-text figcaption,
.brxe-post-content:where(:not([data-source="bricks"])) figcaption {
  margin-block: var(--figcaption-spacing, var(--flow-spacing, initial));
}

.brxe-text>*+blockquote:where(:not(figure > blockquote)),
.brxe-post-content:where(:not([data-source="bricks"]))>*+blockquote:where(:not(figure > blockquote)) {
  margin-block: var(--blockquote-spacing, var(--flow-spacing, initial));
}

.brxe-text>blockquote *+*,
.brxe-post-content:where(:not([data-source="bricks"]))>blockquote *+* {
  margin-block-start: var(--paragraph-spacing, var(--flow-spacing, initial));
  margin-block-end: 0;
}

body :where(p:last-of-type)+ :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
  margin-block-start: 0;
}

/* Gutenberg Headings */
.gutenberg-content h1 {
  font-size: var(--h2);
}

.gutenberg-content h2 {
  font-size: var(--h4);
}

.gutenberg-content h3 {
  font-size: var(--h5);
}

.gutenberg-content h4,
.gutenberg-content h5,
.gutenberg-content h6 {
  font-size: var(--h6);
}


/* Bricks-related settings */

/* Move footer to bottom */
.brx-body {
  min-height: 100dvh;
}



/* Bricks Buttons */
.bricks-button {
  transition: var(--transition-standard);
  background: var(--btn-1-bg);
  color: var(--btn-1-color);
  border: var(--btn-1-border);
  border-radius: var(--btn-border-radius);
  padding: var(--btn-padding);
  font-weight: var(--btn-font-weight);
  font-size: var(--btn-font-size);
}

.bricks-button:hover {
  background: var(--btn-1-bg-hover);
  color: var(--btn-1-color-hover);
  border: var(--btn-1-border-hover);
}


.bricks-button.btn--outline {
  background: var(--btn-1-outline-bg);
  color: var(--btn-1-outline-color);
  border: var(--btn-1-outline-border);
}

.bricks-button.btn--outline:hover {
  background: var(--btn-1-outline-bg-hover);
  color: var(--btn-1-outline-color-hover);
  border: var(--btn-1-outline-border-hover);
}


/* Images */
img {
  object-fit: var(--object-fit, cover);
  object-position: var(--object-position, 50% 50%);
}


/* Text Selections */

::selection {
  background: var(--text-selection-bg);
  color: var(--text-selection-color);
}

a::selection {
  background: var(--text-selection-bg-link);
}


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


/* Accessibility */
/* #wpadminbar .screen-reader-shortcut:focus {
     background: #f0f0f1; 
} */
#wpadminbar .screen-reader-shortcut {
  /* background: #f0f0f1; */
  color: var(--primary);
}


/* Utility Classes */

.display-none {
  display: none !important;
}


/* Clickable Parent */

button.clickable-parent,
a.clickable-parent, .clickable-parent a {
  position: static !important;
}

button.clickable-parent::after,
a.clickable-parent::after, .clickable-parent a::after {
  content: "";
  position: absolute;
  inset: 0;
  cursor: pointer !important;
  display: flex;
  z-index: 1;
}