/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


/*#############################################
Variablen
############################################*/

:root {
  /* XS */
  --sp-10: 5rem;
  --sp-9: 4.5rem;
  --sp-8: 2.5rem;
  --sp-7: 1.5rem;
  --sp-6: 1.25rem;
  --sp-5: 1rem;
  --sp-4: 0.75rem;
  --sp-3: 0.875rem;
  --sp-2: 0.75rem;
  --sp-1: 0.25rem;
  --sp-0: 0.25rem;
  --pad: 0.75rem;
  --gut: 0.5rem;
  --gut-sm: 0.25rem;
}

/* S ≥ 480px */
@media (min-width: 480px) {
  :root {
    --sp-10: 6rem;
    --sp-9: 5rem;
    --sp-8: 3.5rem;
    --sp-7: 2rem;
    --sp-6: 1.5rem;
    --sp-5: 1.25rem;
    --sp-4: 1rem;
    --sp-3: 0.875rem;
    --sp-2: 0.75rem;
    --sp-1: 0.5rem;
    --sp-0: 0.25rem;
    --pad: 1.25rem;
    --gut: 1rem;
  }
}

/* M ≥ 768px */
@media (min-width: 768px) {
  :root {
    --sp-10: 7.5rem;
    --sp-9: 6rem;
    --sp-8: 4.5rem;
    --sp-7: 2.5rem;
    --sp-6: 2rem;
    --sp-5: 1.5rem;
    --sp-4: 1.25rem;
    --sp-3: 1rem;
    --sp-2: 0.75rem;
    --sp-1: 0.5rem;
    --sp-0: 0.5rem;
    --pad: 2.5rem;
    --gut: 1.25rem;
  }
}

/* L ≥ 1024px bzw. 1440px je nach System */
@media (min-width: 1440px) {
  :root {
    --sp-10: 10rem;
    --sp-9: 7.5rem;
    --sp-8: 5rem;
    --sp-7: 3rem;
    --sp-6: 2.5rem;
    --sp-5: 1.75rem;
    --sp-4: 1.5rem;
    --sp-3: 1.25rem;
    --sp-2: 1rem;
    --pad: 5rem;
  }
}


/*Variablen Ende*/


/*#################################
Reset und Grundeinstellungen
##################################*/

button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}



.no-fr:focus,
.no-fr:focus-visible {
  outline: none;
}

.ol-reset {  
	list-style: none;  
	margin: 0;  
	padding: 0;
}

h2:empty,
h3:empty,
h4:empty
{
  display: none;
}




html, body {
    overflow-x: clip;
}


button,
a,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/*#######################
maximale Textbreite
#################*/

ul,
p,
ol,
dl,
li,
dt,
dd,
blockquote,
pre {
  max-width: 1080px;
}


.brxe-post-content :is(
  p,
  ul,
  ol,
  li,
  blockquote,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6
) {
  max-width: 983px;
}

.brxe-post-content :is(h1, h2, h3, h4, h5, h6) {
  margin-bottom: var(--sp-6);
}

.brxe-post-content p:has(+ :is(h2, h3, h4, h5, h6))
 {
  margin-bottom: var(--sp-9);
}

.text-content .brxe-post-content ul li:last-of-type, .text-content .brxe-post-content ol li:last-of-type {
  margin-bottom: var(--sp-9);
}




/* Trim alle Textarten plus utiliy Klasse .text-trim */

/* 1. Fallback – gilt für Firefox & alle ohne Support */
.trim {
  padding-top: 0.15em; /* minimaler optischer Ausgleich */
}

/* 2. Progressive Enhancement – nur Chromium */
@supports (text-box-trim: trim-both) and (text-box-edge: text alphabetic) {
  .trim
   {
    padding-top: 0;
    text-box-trim: trim-both;
    text-box-edge: text alphabetic;
  }
}


/* =========================================================
   Menu ausklappen 
   ========================================================= */
   
  
   

.menu-open {
  visibility: hidden;
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path 0.45s cubic-bezier(.77,0,.18,1),
    visibility 0s linear 0.45s;
}

.menu-is-open .menu-open {
  visibility: visible;
  pointer-events: auto;
  clip-path: inset(0 0 0 0);
  transition:
    clip-path 0.45s cubic-bezier(.77,0,.18,1),
    visibility 0s linear 0s;
}

/* =========================================================
   ARIA PRESSED
   ========================================================= */
:is(
  .btn-list.brxe-button.btn-list,
  .cta-primary.brxe-button.cta-primary,
  .cta-primary.brxe-div.cta-primary,
  .cta-anchor.brxe-button.cta-anchor,
  .cta-anchor.brxe-div.cta-anchor,
	.slider-control
	)[aria-pressed="true"] {
  background-color: var(--ui-pressed);
  border-color: var(--ui-pressed);
  color: var(--white);
}

/*aber kein PRESSED in anchor-nav*/

.anchor-nav :is(.cta-anchor.brxe-button, .cta-anchor.brxe-div)[aria-pressed="true"] {
  background-color: initial;
  border-color: initial;
  color: initial;
}


/* =========================================================
   SECONDARY ARIA PRESSED
   ========================================================= */
.cta-secondary[aria-pressed="true"] {
  color: var(--red) !important;
}

.cta-secondary[aria-pressed="true"] .cta-sec-underline::after {
  background-color: var(--red);
}

/* =========================================================
   GLOBAL TRANSITION – FOCUS / INTERACTIVE
   ========================================================= */

:is(
  .cta-primary.brxe-button,
  .cta-primary.brxe-div,
  .cta-anchor,
  .slider-control,
  .btn-list.brxe-button,
  .brxe-block.panel-link,
  .cta-primary,
  .cta-secondary,
  #brxe-xexdhb > li.menu-item > a,
  .main-nav-secondary,
  .menu-open.cta-secondary,
  .team-detail .cta-secondary,
  .cta-anchor.cta-anchor-variant,
  .anchor-nav a
) {
  transition: 
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

/* =========================================================
   FOCUS VISIBLE – SHARED
   ========================================================= */
:is(
  .cta-primary.brxe-button,
  .cta-primary.brxe-div,
  .cta-anchor, 
  .slider-control
  ):focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
  outline: none;
  background-color: #fff;
  border: 2px solid var(--black);
  color: var(--black);
}

button:focus:not(:focus-visible) {
  outline: none;
}


.btn-list.brxe-button:focus-visible  {
    background: var(--black, #000);
    box-shadow: 0 0 0 2px #FFF, 0 0 0 4px #000;
}

.brxe-block.panel-link:focus-visible {
border-bottom: 1px solid var(--black, #000);
background: var(--grey-light, #F3F3F3);
box-shadow: 0 0 0 2px #FFF, 0 0 0 4px #000;
}
/* =========================================================
   FOCUS VISIBLE – PRIMARY
   ========================================================= */

   .cta-primary:focus-visible {
  border: 2px solid var(--black, #000);
}

/* =========================================================
   FOCUS VISIBLE – Secondary
   ========================================================= */

.cta-secondary:focus-visible, #brxe-xexdhb > li.menu-item > a:focus-visible {
    background: #fff;
    box-shadow: 0 0 0 2px #FFF, 0 0 0 4px #000;
     padding: var(--sp-0);
     outline: none;
}



:is(
  .main-nav-secondary:focus-visible, .menu-open.cta-secondary
  ):focus-visible {

background: var(--iid-purple-light, #E2D1FF);
box-shadow: 0 0 0 2px #FFF, 0 0 0 4px #000;

}

.team-detail .cta-secondary:focus-visible {
    background: var(--violett);
    box-shadow: 0 0 0 2px #FFF, 0 0 0 4px #000;
    padding: var(--sp-0);
}



/* =========================================================
   FOCUS VISIBLE – ANCHOR VARIANT
   ========================================================= */
cta-anchor.cta-anchor-variant:focus-visible {
  background-color: #000 ;
  border-width: 2px ;
  color: #fff ;
}
.cta-anchor.cta-anchor-variant:focus-visible {
  background-color: #000 !important;
  border-width: 2px !important;
  color: #fff !important;
}

.cta-anchor.cta-anchor-variant {
  background-color: #000 !important ;
  border-width: 2px !important;
  color: #fff  !important;
}

.cta-anchor.cta-anchor-variant:hover {
  background-color: var(--red) !important;
  border-width: 2px !important;
  color: #fff !important;
}

.anchor-nav a.is-active {
  background-color: var(--red) !important;
  border-width: 1px !important;
  color: #fff !important;
  border-color: var(--red);
}

.anchor-nav a.is-active.cta-anchor-variant {
  background-color: #000 !important ;
  border-width: 2px !important;
  color: #fff  !important;
  border-color: #000 !important;
}

/* =========================================================
   FOCUS + HOVER COMBINATIONS
   ========================================================= */
.cta-anchor:focus-visible:hover {
  border-color: var(--black) !important;
}

.cta-anchor:focus-visible:hover .cta-tx {
  color: var(--black);
}

.cta-anchor-variant:focus-visible:hover .cta-tx {
  color: var(--white);
}

/* =========================================================
  underline
   ========================================================= */


.cta-sec-underline {
  position: relative;
  display: inline-block;
}

.cta-sec-underline::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px 0;
  height: 1px;
  background-color: #000;
}

.cta-secondary:hover .cta-sec-underline::after {
  background-color: var(--black);
  height: 3px;
}


/* =========================================================
   DISABLED STATES
   ========================================================= */
:is(.cta-secondary, .cta-anchor, ):disabled {
  opacity: 0.5;
}

.slider-control.brxe-div:disabled {
    color: var(--white-50, rgba(255, 255, 255, 0.50));
}

/*Letzer slider optischer Abstandshalter*/
.splide__slide:last-child {
  width: 0.5rem !important;
  
  
  padding: 0 !important;
}

/* =========================================================
 	 CURRENT STATES
   ========================================================= */
.slider-control.brxe-div[aria-current="true"]
{
    background-color: var(--red);
}

/* =========================================================
 	 tag
   ========================================================= */
.tag.brxe-div
{
	display: flex;
	height: 25px;
	padding: var(--sp-0, 8px) var(--sp-2, 12px);
	justify-content: center;
	align-items: center;
 	border-radius: 1000px;
	border: 1px solid var(--black, #000);
}

.tag.brxe-div:hover {
 
	border: 1px solid var(--black, #000);
	background: var(--black, #000);
  color: var(--white);

}

.sub-grid-span-4 .tag.brxe-div.tag--zielgruppe, .sub-grid-span-4 .tag.brxe-div, .news-card .tag.brxe-div  {
   transition: all 0.2s;
}

.sub-grid-span-4:hover .tag.brxe-div, .news-card:hover .tag.brxe-div {
    border: 1px solid var(--black, #000);
	background: var(--black, #000);
    color: var(--white);
}



.sub-grid-span-4:hover .tag.brxe-div.tag--zielgruppe {
   background: var(--red);
	color: var(--white);
}


.tag--zielgruppe.brxe-div.tag {
	
	color: var(--red);
	border-color: var(--red);
} 

.sub-grid-span-4:hover .tag--zielgruppe.brxe-div.tag {
	
	color: var(--white);
	border-color: var(--red);
	background-color: var(--red);
} 

.tag--zielgruppe.brxe-div:hover {
	background: var(--red);
	color: var(--white);
}

.tag--zielgruppe.no-hover.brxe-div:hover {
    background: var(--white);
    color: var(--black);
    border-color: var(--black);
}

.tag.no-hover.brxe-div:hover {
 	color: var(--black);
 	background-color: var(--white);

}

.tag--zielgruppe.brxe-div.tag.no-hover:hover {
    color: var(--red);
    border-color: var(--red);
}

/* =========================================================
 	nav items 
   ========================================================= */

.main-nav-underline {
position: relative;
display: inline-block;



}
.main-nav-underline:after {
  content: "";
  position: absolute;
  inset: auto 0 0px 0;
  height: 2px;
  background-color: #000;
  opacity: 0;
}

.main-nav-underline:hover::after,
.main-nav-underline.variant-special::after {
  opacity: 1;
}

.main-nav-primary:focus-visible {
    background: var(--iid-purple-light, #E2D1FF);
    box-shadow: 0 0 0 2px #FFF, 0 0 0 4px #000;


}


.main-nav-primary:focus-visible .font-main-nav-primary {
  transform: translateY(4px);
}



/* =========================================================
  Video
    ========================================================= */

/* Controls komplett ausblenden solange nicht gespielt wird */



    .video-square .bricks-video-overlay-icon {
 left: auto;
 top: auto;
 bottom: 5%;
 right: 5%;
 transform: none;
 
} 

    .video-4zu3 .bricks-video-overlay-icon {
 left: auto;
 top: auto;
 bottom: 6%;
 right: 3%;
 transform: none;

} 

.bricks-video-overlay {
   background-color: rgba(0, 0, 0, 0.50);
}


.brxe-video:hover .bricks-video-overlay {
    opacity: 0.5;
    background: rgba(0, 0, 0, 0.50);
}

.brxe-container:has(> .brxe-video:first-child) {
    max-height: 80vh;
    min-height: 600px;
}

/*
  .brxe-container:has(> .brxe-video:first-child) {
     max-width: 70vw;
}

*/
/* =============================================
  Anchor-Nav
 ========================================================= */


.anchor-nav {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  scroll-snap-type: x mandatory;

  scrollbar-width: none; /* Firefox */
}

.anchor-nav::-webkit-scrollbar {
  display: none; /* Chrome */
}

.anchor-nav__list {
  display: flex;
  gap: 1rem;
  flex-wrap: nowrap;
  width: max-content;

  padding: 0 1rem;
  margin: 0;

  list-style: none;

  justify-content: flex-start;
}

.anchor-nav__list li {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 4px;
}

.padding-7pad.bg-anchorNav.top-anchorNav {
       padding-top: var(--sp-7);
        padding-bottom: var(--sp-6);
}



/* =========================================================
  custom bullets
 ========================================================= */


.text-content ul {
  list-style: none;
  margin: var(--sp-4) 0 0 0;
  padding: 0;
}

.text-content ul:first-of-type {
    margin-top:0;
}

.text-content ul li {
  position: relative;
  padding-left: 1em;
  padding-block: 0.7em;
}

.text-content > ul:first-child li:first-of-type {
  margin-top: 0em;
  padding-top: 0;
}



.text-content ul li:first-of-type {
    margin-top: 0em;
}

.text-content ul li:last-of-type {
    margin-bottom: 1.3em;
}

/* Ausnahme: wenn .text-content direkt mit einem UL beginnt → kein Margin */
.text-content > ul:last-child li:last-of-type {
  margin-bottom: 0;
}

.text-content ul li::before {
  content: "";
  position: absolute;
  top: 1.06em;
  left: 0;
  width: 0.5em;
  height: 0.5em;
  border-radius: 1000px;
  background: var(--iid-purple-dark, #7B01EE);
  
}

.text-content > ul:first-child li:first-of-type::before {
 top: .36em;
}


/* =========================================================
  Zahlen Aufzählungen
 ========================================================= */

.ol-styled {  
  --marker-offset: 5rem; /* Default (Desktop) */
  
  list-style: none;
  counter-reset: item;
  margin: 0;
  padding-left: var(--marker-offset);
}

.ol-styled li {  
  counter-increment: item;  
  position: relative;
}

.ol-styled li::before {  
  content: counter(item);
  position: absolute;
  left: calc(-1 * var(--marker-offset));
  
  color: var(--iid-purple-dark, #7B01EE);
  font-family: "Epilogue", sans-serif;
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.14;
}

/* =========================================================
  Linkstyle Fußnoten
 ========================================================= */

.footnotes a, .text-content a, .list-top-0 a {
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: auto;
}

/* =========================================================
 Videoslider Navigationsbuttons und Contentausrichtung
 ========================================================= */
 
 .ctrl-pagination {
  display: flex;
  gap: 8px;
}





.ctrl-btn {
    display: flex;
    width: 48px;
    height: 48px;
    padding: var(--margin-padding-spacing-3, 20px);
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    border-radius: 1000px;
    border: 1px solid var(--white, #FFF);
    background: var(--black, #000);
    color: var(--white);
}




.ctrl-btn.is-current, .ctrl-pagination > .ctrl-btn:hover {
    border: 1px solid var(--iid-red, #EA0026);
    background: var(--iid-red, #EA0026);
    color: var(--white);

}

 .splide__slide {
    
    
    justify-content: start;
 
}


/*################################
Collapsibles
##############################*/


.toggle-section {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: 
    max-height 0.5s ease,
    opacity 0.3s ease;
  will-change: max-height, opacity;
}

/* Offener Zustand */

.toggle-section.is-open {
  max-height: 15000px; 
  opacity: 1;
}

/*

.toggle-section-mobile {
   max-height: none;
   opacity: 1;
   will-change: max-height, opacity;
}    




@media (max-width: 480px) {

  .toggle-section-mobile {
   max-height: 0;
   opacity: 0;
   overflow: hidden;
   transition: 
   max-height 0.5s ease,
   opacity 0.3s ease;
   will-change: max-height, opacity;
}    
    
  .toggle-section-mobile.is-open-mobile {
    max-height: 15000px;
    opacity: 1;
  }
}

*/

.btn-close.is-visible {
  display: flex !important	; 
}

.btn-open.is-hidden {
  display: none !important	;
}

/*Maximalweite der Überschrift im Accorion, sodass das Icon nicht gequetscht wird*/

.brxe-accordion-nested .accordion-title-wrapper > .brxe-heading {
  max-width: 90%;
}

/*Focusstate Accordion */ 


.accordion-titel.accordion-title-wrapper:focus-visible {
	border-top: 2px solid var(--black, #000);
	border-bottom: 1px solid var(--black, #000);
	background: var(--ui-hervorhebung-pressed-state-focus-state, #EDECEC);
	box-shadow: 0 0 0 2px #FFF, 0 0 0 4px #000;
}

.list-top-0 ol,
.list-top-0 ul {
  margin-top: 0;
}

/* Hover Accordinon Titel */ 

.accordion-titel h4, .panel-element .panel-content {
    transition: transform 0.2s;
}

.accordion-titel:hover h4, .panel-element:hover .panel-content {
    transform: translateX(4px);
}



/*#######################################
Smooter Slider
########################################*/

.splide__list {
	transition-timing-function: linear !important	;
}

/*#######################################
Border Top Accordion Elemnent
##########################*/


.brxe-block.listening {
   
	border-top: 1px solid var(--black); 

}




.brxe-block.listening.brx-open {
   border-top: 2px solid var(--black); 
}



.fs-0 {
    flex-shrink: 0;
}


/*######################################
Button Form-Field Klick-Clever
#######################################*/

.form-group.submit-button-wrapper > button.bricks-button {
    display: flex;
    height: 48px;
    padding: var(--sp-2, 16px) var(--sp-3, 20px);
    justify-content: center;
    align-items: center;
}






/*################################
Content einblenden Click Clever Plus
##############################*/


.protected-content {
  display: none;
}

.protected-content.is-visible {
  display: block;
}

.is-hidden {
  display: none;
}


.password-gate {
  max-width: 900px;
}

.password-gate__row {
  display: flex;
  gap: 20px;
  align-items: center;
}

.password-gate__input {
  flex: 1;
  padding: 18px 20px;
 
  border: 1px solid #222;
  border-radius: 2px;
  background: #fff;
}

.password-gate__button {
  padding: 12px 24px;
  border: 1px solid #222;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
}

.password-gate__hint {
  margin-top: 12px;
  font-size: 14px;
  opacity: 0.7;
}


/*#################################
TeamMember Style
#################################*/

.sub-grid-span-4.team-member.brxe-div {
    background-color: #fff;
}

/*###############################
Position Menu-Toggle Menu Open 
#################################*/
#brxe-rcwvwd {
    right: calc( var(--pad) + ((100vw - 1600px) / 2));
}

@media (max-width: 1600px) {
  #brxe-rcwvwd {
    right: var(--pad);
  }
}


/*######################################
Newsletteranmelung 
########################################*/

.newsletteranmeldung {
  display: flex;
  gap: var(--sp-8);
  margin: var(--sp-9-pad);
  align-items: center;
  flex-direction: row;
}

.newsletteranmeldung input {
  outline: none;
}

.newsletteranmeldung input:focus {
  box-shadow: 0 0 0 2px #FFF, 0 0 0 4px #000;
}

.emailinput {
  width: 100%;
  max-width: 628px;
  border: 1px solid var(--black);
  height: 72px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 24px;
  background-color: #e1d1ff;
  font-family: "Epilogue";
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  font-size: var(--fs-xs);
  color: var(--black);
}



.emailinput::placeholder {
  font-family: "Epilogue";
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  font-size: var(--fs-xs);
  color: var(--black);
}

.email_form_input_tag {
    margin-top: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.absenden {
  border: 1px solid var(--black);
  border-radius: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: var(--sp-2);
  padding-top: calc(var(--sp-2) + 0.2em);
  height: 48px;
}

.absenden:hover {
  background-color: var(--red);
  border-color: var(--red);
  color: var(--white);
}

@media (max-width: 768px) {
  .newsletteranmeldung {
    flex-direction: column;
    align-items: start;
  }

  .absenden {
    align-self: end;
  }
}


/*##############################
Texte Datenschutz
#################################*/

.imprint H2, .imprint H3 {
    margin-top: var(--sp-9);
    margin-bottom: var(--sp-6);
}

/*###############################
Medienabfragen
#################################*/


@media (max-width: 1439px) {
  .ol-styled {
    --marker-offset: 4.7rem;
  }
  


  
  
}



@media (max-width: 1023px) {
  .ol-styled {
    --marker-offset: 4.2rem;
  }
  
   .brxe-container:has(> .brxe-video:first-child) {
    
    min-height: 550px;
}
  
  
}

@media (max-width: 767px) {
  .ol-styled {
    --marker-offset: 2.9rem;
  }
  
  .brxe-container:has(> .brxe-video:first-child) {
    
    min-height: 420px;
}
  
  
}

@media (max-width: 479px) {
  .ol-styled {
    --marker-offset: 2.5rem;
  }
  
  .brxe-container:has(> .brxe-video:first-child) {
    
    min-height: 0;
}
  
  .team-detail .cta-secondary:focus-visible {
    background: var(--violett);
    box-shadow: none;
    padding: var(--sp-0);
}

}


@media (max-width: 425px) {
  .brxe-pustgg.brxe-pustgg  {
    height: 650px; 
  }
}


@media (max-width: 375px) {
  .brxe-pustgg.brxe-pustgg {
    height: 615px; 
  }
}


@media (max-width: 320px) {
  .brxe-pustgg.brxe-pustgg {
    height: 575px; 
  }
}