:root {

  --bricks-color-primary: #801625; 
  --bricks-color-primary--light: #ae1d31;

  --radius: 7px;
  --container-width: 1580px;
  --container-width-sm: 940px;


  /* Einfache Spalten */
  --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-2-1: minmax(0,2fr) minmax(0,1fr);
  --grid-1-2: minmax(0,1fr) minmax(0,2fr);

  /* Auto Responsive Spalten mit einer definierten Mindest-Spaltengröße */
  --grid-30 : repeat(auto-fit, minmax(30rem, 1fr));
  --grid-40 : repeat(auto-fit, minmax(40rem, 1fr));
  --grid-50 : repeat(auto-fit, minmax(50rem, 1fr));
  --grid-60 : repeat(auto-fit, minmax(60rem, 1fr));

/* Textgrößen 
/* https://www.fluid-type-scale.com/calculate?minFontSize=14&minWidth=400&minRatio=1.25&maxFontSize=16&maxWidth=1366&maxRatio=1.333&steps=2xs%2Cxs%2Csm%2Cbase%2Cmd%2Clg%2Cxl%2C2xl%2C3xl&baseStep=base&prefix=text&decimals=2&useRems=on&remValue=10&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1280 */

  --text-2xs: clamp(0.72rem, -0.04vw + 0.73rem, 0.68rem);
  --text-xs: clamp(0.9rem, 0vw + 0.89rem, 0.9rem);
  --text-sm: clamp(1.12rem, 0.08vw + 1.09rem, 1.2rem);
  --text-base: clamp(1.4rem, 0.21vw + 1.32rem, 1.6rem);
  --text-md: clamp(1.75rem, 0.4vw + 1.59rem, 2.13rem);
  --text-lg: clamp(2.19rem, 0.68vw + 1.92rem, 2.84rem);
  --text-xl: clamp(2.73rem, 1.09vw + 2.3rem, 3.79rem);
  --text-2xl: clamp(3.42rem, 1.69vw + 2.74rem, 5.05rem);
  --text-3xl: clamp(4.27rem, 2.55vw + 3.25rem, 6.73rem);
  --text-4xl: clamp(5.34rem, 3.76vw + 3.84rem, 8.98rem);

  --h1: var(--text-2xl);
  --h2: var(--text-xl);
  --h3: var(--text-lg);
  --h4: var(--text-md);
  --h5: var(--text-sm);

  /* Gap bei flexbox und grid : row-gap column-cap etc. */
  --gap-2xs: clamp(0.36rem, 0.07vw + 0.33rem, 0.42rem);
  --gap-xs: clamp(0.45rem, 0.12vw + 0.4rem, 0.56rem);
  --gap-sm: clamp(0.56rem, 0.2vw + 0.48rem, 0.75rem);
  --gap-base: clamp(0.7rem, 0.31vw + 0.58rem, 1rem);
  --gap-md: clamp(0.88rem, 0.47vw + 0.69rem, 1.33rem);
  --gap-lg: clamp(1.09rem, 0.71vw + 0.81rem, 1.78rem);
  --gap-xl: clamp(1.37rem, 1.04vw + 0.95rem, 2.37rem);
  --gap-2xl: clamp(1.71rem, 1.5vw + 1.11rem, 3.16rem);
  --gap-3xl: clamp(2.14rem, 2.15vw + 1.28rem, 4.21rem);
  --gap-4xl: clamp(2.67rem, 3.04vw + 1.45rem, 5.61rem);

  --container-gap: var(--gap-lg); /* in eine BEM Klasse bauen */
  --content-gap: var(--gap-base); /* In einem Block die Abstände der einzelnen Elemente (meist vertikal) bestimmen */

    /* SPACE für Abstände wie Padding und Margin bei Elementen und Containern */
    --space-2xs: clamp(0.50rem, calc(0.40rem + 0.48vw), 0.81rem);
    --space-xs: clamp(0.69rem, calc(0.52rem + 0.86vw), 1.25rem);
    --space-sm: clamp(0.94rem, calc(0.73rem + 1.05vw), 1.63rem);
    --space-md: clamp(1.44rem, calc(1.13rem + 1.53vw), 2.44rem);
    --space-lg: clamp(1.88rem, calc(1.45rem + 2.10vw), 3.25rem);
    --space-xl: clamp(2.81rem, calc(2.18rem + 3.15vw), 4.88rem);
    --space-2xl: clamp(3.75rem, calc(2.91rem + 4.21vw), 6.50rem);
    --space-3xl: clamp(5.63rem, calc(4.36rem + 6.31vw), 9.75rem);
    --space-4xl: clamp(8.44rem, calc(6.54rem + 9.46vw), 14.63rem);

}

.brx-body {
  min-height: calc(100vh - var(--wp-admin--admin-bar--height));
}

.radius {
  border-radius:var(--radius);
  overflow:hidden;
}
.hero-heading {
  font-size: var(--text-2xl);
}
.container-gap {
  gap: var(--container-gap);
}
.container-sm {
  width:var(--container-width-sm);
  max-width:100%;
}

.content-gap {
  gap: var(--content-gap);
}

.aspect--16-9 {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.aspect--4-3 {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.aspect--21-9 {
  aspect-ratio: 21 / 9;
  object-fit: cover;
}
.aspect--9-16 {
  aspect-ratio: 9 / 16;
  object-fit: cover;
}
.aspect--9-21 {
  aspect-ratio: 9 / 21;
  object-fit: cover;
}
.aspect--1-1 {
  aspect-ratio: 1;
  object-fit: cover;
}

blockquote {
  margin:0;
  padding:0;
  border:none;
}
::selection {
  color:white;
  background-color: var(--primary-d-2, black);
}

.brx-body {
  min-height: calc(100vh - var(--wp-admin--admin-bar--height,0px));
}

.link-extension {
  position:relative;
}

.link-extension a[href]::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
}

.link-extension:focus-within {
  outline: 2px solid var(--primary-50);
  outline-offset:0.5rem;
}

.link--visible, .brxe-post-content[data-source="editor"] a {
  border-bottom:2px solid var(--primary-50);
}
.link--visible:hover, .brxe-post-content[data-source="editor"] a:hover {
  border-bottom-color: var(--primary);
}


/* bild als absolute hintergrundbild einstellen */
.img-bg {
  height:100%;
  width:100%;
  position:absolute;
  object-fit: cover;
}
/* parent relativ machen */
*:has(>.img-bg) {
  position:relative;
}
img.img-bg ~ div {
  z-index:1;
}

/* wenn wir sauberes HTML machen, dann verwenden wir den container als ul und die grid-elemente als li => Styles resetten */
ul.brx-grid, ul.brxe-container, ul.brxe-block {
  list-style:none;
  padding-left:0;
}

/* Für Formular Checkboxen Ausrichtung */
form .options-wrapper>li {
  display: flex;
  align-items: baseline;
}

.input, input:not([type=submit]), select, textarea {
  border-radius: var(--radius);
}

:where(.brxe-text, .brxe-text-basic, .brxe-woocommerce-account-page) a {
  border-bottom:1px solid var(--primary-20);
}
:where(.brxe-text, .brxe-text-basic, .brxe-woocommerce-account-page) a:hover {
  border-bottom-color: var(--primary);
}

/* aspect ratio - cover fit */
[class*="aspect-"], [class*="aspect-"] img {
  object-fit:cover
}

/* Überschriften im Block-Editor */
.brxe-post-content[data-source="editor"] h2 { font-size: var(--text-xl); }
.brxe-post-content[data-source="editor"] h3 { font-size: var(--text-l); }
.brxe-post-content[data-source="editor"] h4 { font-size: var(--text-m); }

/* Blockstatz für Texte */
section .brxe-text {
  text-align:justify;
}


/* Focus für Accessibility */
body.bricks-is-frontend :focus-visible,
.link-extension:focus-within
{
  outline-offset:0.2em;
  outline: 2px dashed var(--primary-30);
}
.link-extension *:focus {
  outline:none !important;
}

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: var(--primary) #ffffff;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #ffffff;
  }

  *::-webkit-scrollbar-thumb {
    background-color: var(--primary);
    border-radius: 10px;
    border: 3px solid #ffffff;
  }