:root {

  --radius: 0;
  --radius-sm: 0.7rem;
  --container-width: 136.6rem;
  --container-width-sm: 94rem;
  --container-width-xl: 158rem;

  /* Farben - Grundeinstellungen */
  --color-primary-h: 206; /* Hue        */
  --color-primary-s: 100%; /* Saturation */
  --color-primary-l: 26%; /* Lightness  */

  --color-secondary-h: 195; 
  --color-secondary-s: 100%; 
  --color-secondary-l: 46%; 

  --color-shade-saturation: 10%;

  --color-accent: #00b1eb;

  /* 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-7 : repeat(7,minmax(0,1fr));
  --grid-8 : repeat(8,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-15 : repeat(auto-fit, minmax(15rem, 1fr));
  --grid-20 : repeat(auto-fit, minmax(20rem, 1fr));
  --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=15&minWidth=400&minRatio=1.25&maxFontSize=17&maxWidth=1366&maxRatio=1.333&steps=2xs%2Cxs%2Csm%2Cbase%2Cmd%2Clg%2Cxl%2C2xl%2C3xl%2C4xl&baseStep=base&prefix=text&decimals=2&useRems=on&remValue=10&previewFont=Merriweather+Sans&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1280 */
  /*
  --text-2xs: clamp(0.77rem, -0.05vw + 0.79rem, 0.72rem);
  --text-xs: clamp(0.96rem, 0vw + 0.96rem, 0.96rem);
  --text-sm: clamp(1.2rem, 0.08vw + 1.17rem, 1.28rem);
  --text-base: clamp(1.5rem, 0.21vw + 1.42rem, 1.7rem);
  --text-md: clamp(1.88rem, 0.4vw + 1.71rem, 2.27rem);
  --text-lg: clamp(2.34rem, 0.7vw + 2.06rem, 3.02rem);
  --text-xl: clamp(2.93rem, 1.14vw + 2.48rem, 4.03rem);
  --text-2xl: clamp(3.66rem, 1.77vw + 2.96rem, 5.37rem);
  --text-3xl: clamp(4.58rem, 2.67vw + 3.51rem, 7.15rem);
  --text-4xl: clamp(5.72rem, 3.95vw + 4.14rem, 9.54rem);

  */

  /*  überarbeitet damit mobile die schriften nicht zu groß werden bzw auseinander gehen.
  https://www.fluid-type-scale.com/calculate?minFontSize=15&minWidth=400&minRatio=1.1&maxFontSize=17&maxWidth=1366&maxRatio=1.333&steps=2xs%2Cxs%2Csm%2Cbase%2Cmd%2Clg%2Cxl%2C2xl%2C3xl%2C4xl&baseStep=base&prefix=text&decimals=2&useRems=on&remValue=10&previewFont=Merriweather+Sans&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=491
  */
  --text-2xs: clamp(1.13rem, -0.42vw + 1.3rem, 0.72rem);
  --text-xs: clamp(1.24rem, -0.29vw + 1.36rem, 0.96rem);
  --text-sm: clamp(1.36rem, -0.09vw + 1.4rem, 1.28rem);
  --text-base: clamp(1.5rem, 0.21vw + 1.42rem, 1.7rem);
  --text-md: clamp(1.65rem, 0.64vw + 1.39rem, 2.27rem);
  --text-lg: clamp(1.82rem, 1.25vw + 1.32rem, 3.02rem);
  --text-xl: clamp(2rem, 2.1vw + 1.16rem, 4.03rem);
  --text-2xl: clamp(2.2rem, 3.28vw + 0.88rem, 5.37rem);
  --text-3xl: clamp(2.42rem, 4.91vw + 0.45rem, 7.15rem);
  --text-4xl: clamp(2.66rem, 7.12vw + -0.19rem, 9.54rem);

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

  /* SPACE für Abstände wie Padding und Margin bei Elementen und Containern */
  /* https://www.fluid-type-scale.com/calculate?minFontSize=24&minWidth=400&minRatio=1.25&maxFontSize=30&maxWidth=1366&maxRatio=1.618&steps=2xs%2Cxs%2Csm%2Cmd%2Clg%2Cxl%2C2xl%2C3xl%2C4xl&baseStep=md&prefix=space&decimals=2&useRems=on&remValue=10&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1280 */
  --space-2xs: clamp(1.23rem, -0.54vw + 1.44rem, 0.71rem);
  --space-xs: clamp(1.54rem, -0.4vw + 1.7rem, 1.15rem);
  --space-sm: clamp(1.92rem, -0.07vw + 1.95rem, 1.85rem);
  --space-md: clamp(2.4rem, 0.62vw + 2.15rem, 3rem);
  --space-lg: clamp(3rem, 1.92vw + 2.23rem, 4.85rem);
  --space-xl: clamp(3.75rem, 4.25vw + 2.05rem, 7.85rem);
  --space-2xl: clamp(4.69rem, 8.3vw + 1.37rem, 12.71rem);
  --space-3xl: clamp(5.86rem, 15.22vw + -0.23rem, 20.56rem);
  --space-4xl: clamp(7.32rem, 26.86vw + -3.42rem, 33.27rem);

  --container-gap: var(--space-lg); /* Abstand zwischen Containern in einer Section */
  --content-gap: var(--space-xs); /* In einem Block die Abstände der einzelnen Elemente (meist vertikal) bestimmen */
  
  /* Farbsystem */
  
  --color-primary: hsl(var(--color-primary-h),var(--color-primary-s),var(--color-primary-l));
  --color-primary-light: hsl(var(--color-primary-h),var(--color-primary-s),calc(var(--color-primary-l) * 1.27 ));
  --color-primary-dark: hsl(var(--color-primary-h),var(--color-primary-s),calc(var(--color-primary-l) * 0.8 ));

  --color-text: hsl(var(--color-primary-h),10%,30% );
  
  --color-secondary: hsl(var(--color-secondary-h),var(--color-secondary-s),var(--color-secondary-l));
  --color-secondary-light: hsl(var(--color-secondary-h),var(--color-secondary-s),calc(var(--color-secondary-l) * 1.5 ));
  --color-secondary-dark: hsl(var(--color-secondary-h),var(--color-secondary-s),calc(var(--color-secondary-l) *0.8 ));
  
  /* Shades */
  --color-shade-5: hsl(var(--color-primary-h),var(--color-shade-saturation),5%);
  --color-shade-10: hsl(var(--color-primary-h),var(--color-shade-saturation),10%);
  --color-shade-15: hsl(var(--color-primary-h),var(--color-shade-saturation),15%);
  --color-shade-20: hsl(var(--color-primary-h),var(--color-shade-saturation),20%);
  --color-shade-25: hsl(var(--color-primary-h),var(--color-shade-saturation),25%);
  --color-shade-30: hsl(var(--color-primary-h),var(--color-shade-saturation),30%);
  --color-shade-35: hsl(var(--color-primary-h),var(--color-shade-saturation),35%);
  --color-shade-40: hsl(var(--color-primary-h),var(--color-shade-saturation),40%);
  --color-shade-45: hsl(var(--color-primary-h),var(--color-shade-saturation),45%);
  --color-shade-50: hsl(var(--color-primary-h),var(--color-shade-saturation),50%);
  --color-shade-55: hsl(var(--color-primary-h),var(--color-shade-saturation),55%);
  --color-shade-60: hsl(var(--color-primary-h),var(--color-shade-saturation),60%);
  --color-shade-65: hsl(var(--color-primary-h),var(--color-shade-saturation),65%);
  --color-shade-70: hsl(var(--color-primary-h),var(--color-shade-saturation),70%);
  --color-shade-75: hsl(var(--color-primary-h),var(--color-shade-saturation),75%);
  --color-shade-80: hsl(var(--color-primary-h),var(--color-shade-saturation),80%);
  --color-shade-85: hsl(var(--color-primary-h),var(--color-shade-saturation),85%);
  --color-shade-90: hsl(var(--color-primary-h),var(--color-shade-saturation),90%);
  --color-shade-95: hsl(var(--color-primary-h),var(--color-shade-saturation),95%);
  --color-shade-100: hsl(var(--color-primary-h),var(--color-shade-saturation),100%);

  ::selection {
    color:white;
    background-color: var(--color-primary, black);
  }  
}


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

.radius {
  border-radius:var(--radius);
  overflow:hidden;
}
.radius-sm {
  border-radius:var(--radius-sm);
  overflow:hidden;
}

.container-sm {
  width:100% !important;
  max-width:var(--container-width-sm) !important;
}
.container-xl {
  width:100% !important;
  max-width:var(--container-width-xl) !important;
}

ul.brxe-container {
  padding-left:0;
}

.hero-heading {
  font-size: var(--text-2xl);
}
.container-gap {
  gap: var(--container-gap);
}

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

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

.blend-multiply {
  mix-blend-mode: multiply;
}

/* Bild als absolutes Hintergrundbild einstellen */
.img-bg {
  height:100%;
  width:100%;
  position:absolute;
  object-fit: cover !important;
}

.img-bg picture, .img-bg img {
  object-fit: cover;
}
/* Parent relativ machen */
*:has(>.img-bg) {
  position:relative;
}
/* Jedes Element auf gleicher Ebene eins nach oben */
img.img-bg ~ * {
  z-index:1;
}
.center {
  align-items:center;
  text-align:center;
}
.center .brxe-text {
  text-align:center;
}

/* Extra Klasse, die auf mobile die Elemente wieder linksbündig macht */
@media only screen and (max-width: 478px) {
    .m-align-left, .m-align-left * {
        align-items:start;
        text-align:left;  
    }
    .m-align-left * {
        text-align:left;
    }
}

.brxe-text ul, .brxe-text-basic ul {
  list-style-type: square;
}

/* links  */
.brxe-text a[href],
.options-wrapper a[href],
.brxe-post-content[data-source="editor"] a
{
    color: black;
    border-bottom:2px solid var(--color-accent);
  &:hover {
    border-bottom-color: var(--color-primary);
  }
}

.link--invers{}
.link--invers a[href] {
  color: white;
  border-bottom-color: hsla(0,100%,100%,0.5);

  &:hover {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
  }
}




.link-extension {
  position:relative;
}

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

.link-extension:focus-within {
  outline: thin dotted currentcolor;
}

.cmplz-placeholder-1 form, .cmplz-placeholder-1 .brxe-brf-pro-forms-steps {display:none!important; width:0;height:0;overflow:hidden;}

.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.shadow-lg	{ box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.shadow-xl {	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
.shadow-2xl{ box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }

/* Gutenberg Buttons */
.wp-block-button a.wp-block-button__link {
  color:white;
  background-color: var(--color-primary);
  border-radius: 0;
  padding: .5em 1em;
  margin-top:0.5em;
}

.wp-block-button a.wp-block-button__link:hover {
  background-color: var(--color-primary-light);
}

/* Button mit SVG Icon */
:where(.bricks-button svg) {
  fill:currentcolor;
  height:1em;
}

/* Formulare */
.input, input:not([type=submit]), select, textarea {
  background:white;
}

/* Screenreader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


.splide__pagination {
  gap:0.6rem;
}

.page-id-15002 :where(h2,h3,h4) {
  text-transform:none;
}

.page-id-15002 h2 {
  font-size: var(--text-lg);
}
.page-id-15002 h3 {
  font-size: var(--text-md);
}
.page-id-15002 h4 {
  font-size: var(--text-sm);
}