@charset "utf-8";
/* ==========================================================================
   HP4U FAQ — Visual alignment with Events/Referenten (FULL DROP-IN)
   Loads AFTER hp4u-faq.css
   ========================================================================== */

/* --------------------------------------
   Tokens aligned with Events/Referenten
   -------------------------------------- */
.hp4u-faq{
  /* Ink */
  --hp4u-faq-q: var(--hp4u-ink-dark, #1b4259);
  --hp4u-faq-a: var(--hp4u-ink-dark, #2f373f);

  /* Surfaces & borders */
  --hp4u-faq-surface:   var(--hp4u-surface-1, #ffffff);
  --hp4u-faq-surface-2: var(--hp4u-surface-2, #fafbfc);
  --hp4u-faq-border:    var(--hp4u-color-border, #e5e7eb);

  /* Radius & spacing */
  --hp4u-faq-radius: var(--hp4u-radius, 16px);
  --hp4u-faq-gap:    var(--hp4u-gap, 16px);

  /* Motion */
  --hp4u-faq-ease: var(--hp4u-evt-anim-ease, cubic-bezier(.33,.06,.19,.99));
  --hp4u-faq-dur:  220ms;
  --hp4u-faq-focus-ring: var(--hp4u-evt-focus-ring, 0 0 0 2px #fff, 0 0 0 4px rgba(233,79,28,.38));

  /* Inset hairline tokens  */
  --hp4u-faq-line-color: var(--hp4u-ui-hairline, #c7d2e0);
  --hp4u-faq-line-thickness: 1px;

  /* Start the line where the question text starts:
     toggle padding + arrow size + arrow gap (with fallbacks) */
  --hp4u-faq-toggle-pad-x: var(--hp4u-section-pad, 1.125rem);
  --hp4u-faq-line-inset: calc(
    var(--hp4u-faq-toggle-pad-x) + var(--hp4u-icon-arrow-size) + var(--hp4u-icon-arrow-gap)
  );
	--hp4u-faq-line-inset:var(--hp4u-section-pad, 1.125rem);
}
/* --------------------------------------
   Prevent clipping + give the list a bleed zone
   -------------------------------------- */
.hp4u-faq,
.hp4u-faq .hp4u-faq-list{
  overflow: visible;
  position: relative;
}
/*
.hp4u-faq .hp4u-faq-list{
  padding-block: var(--hp4u-section-pad);
  padding-inline: var(--hp4u-section-pad);    
  margin-inline: var(--hp4u-section-mar-minus);      
	padding-bottom:var(--hp4u-section-pad);
}
*/
/* --------------------------------------
   Item = the “card”
   -------------------------------------- */
.hp4u-faq .hp4u-faq-item{
  background: var(--hp4u-faq-surface);
  border-radius: var(--hp4u-faq-radius);
  margin: 0 !important;     /* use the list gap for rhythm */
  overflow: visible;         /* override base file’s hidden → fixes clipping */
  position: relative;
  isolation: isolate;
  background-clip: padding-box;  /* avoids hard inner edge under shadow */
  transition:
    box-shadow      var(--hp4u-faq-dur) var(--hp4u-faq-ease),
    transform       var(--hp4u-faq-dur) var(--hp4u-faq-ease),
    border-color    var(--hp4u-faq-dur) var(--hp4u-faq-ease),
    background-color var(--hp4u-faq-dur) linear;
  will-change: box-shadow, transform;
}

/* HP4U — FAQ inset hairlines: top at toggle, bottom after panel */

/* LIST: a single top hairline for the whole list */
.hp4u-faq .hp4u-faq-list{
  position: relative;
  overflow: visible;
}
/*
.hp4u-faq .hp4u-faq-list::before{
  content: "";
  position: absolute;
  top: 0;
  left:  var(--hp4u-faq-line-inset);
  right: var(--hp4u-faq-line-inset);
  height: var(--hp4u-faq-line-thickness);
  background: var(--hp4u-faq-line-color);
  pointer-events: none;
}
 */
.hp4u-faq .hp4u-faq-item{
  position: relative;
  overflow: visible;
  isolation: isolate;
}

/* TOP line at the toggle 
.hp4u-faq .hp4u-faq-item::before{
  content: "";
  position: absolute;
  top: 0;
  left:  var(--hp4u-faq-line-inset);
  right: var(--hp4u-faq-line-inset);
  height: var(--hp4u-faq-line-thickness);
  background: var(--hp4u-faq-line-color);
  pointer-events: none;
  z-index: 1;
}
*/

/* BOTTOM line that follows the panel */
.hp4u-faq .hp4u-faq-item::after{
  content: "";
  position: absolute;
  bottom: 0;
  left:  var(--hp4u-faq-line-inset);
  right: var(--hp4u-faq-line-inset);
  height: var(--hp4u-faq-line-thickness);
  background: var(--hp4u-faq-line-color);
  pointer-events: none;
  z-index: 1;
}

/* --------------------------------------
   Trigger (button) — visually merges with the card
   -------------------------------------- */
.hp4u-faq .hp4u-faq-q{ margin: 0; }

.hp4u-faq .hp4u-faq-toggle {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--hp4u-panel-trigger-gap, 10px);
    text-align: left;
    padding: var(--hp4u-panel-trigger-padding-faq, 16px 18px);
	padding-left:var(--hp4u-section-pad);
	padding-right:var(--hp4u-section-pad);
	padding-bottom:0;
    border-radius: var(--hp4u-faq-radius);
    color: var(--hp4u-faq-q);
    background: transparent;
    box-shadow: none;
    outline: none;
    align-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

/* The card owns focus visuals; avoid double rings 
.hp4u-faq .hp4u-faq-toggle:focus,
.hp4u-faq .hp4u-faq-toggle:focus-visible{
  box-shadow: none;
  outline: none;
}
*/
/* Plus / minus like Events/Referenten 
.hp4u-faq .hp4u-faq-toggle::after{
  content: "+";
  display: inline-block;
  width: 1rem;
  text-align: center;
}
.hp4u-faq .hp4u-faq-item.is-open .hp4u-faq-toggle::after,
.hp4u-faq .hp4u-faq-toggle[aria-expanded="true"]::after{
  content: "–";
}
*/
/* Slight title pop while hovering the whole (closed) card 
.hp4u-faq .hp4u-faq-item:not(.is-open):hover .hp4u-faq-toggle{
  filter: saturate(1.02);
}
*/
/* --------------------------------------
   Panel body (the open content)
   -------------------------------------- */
.hp4u-faq .hp4u-faq-panel{
  overflow: hidden;
  border-top: 0 solid color-mix(in oklab, var(--hp4u-faq-border) 80%, transparent);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
@supports (overflow: clip){
  .hp4u-faq .hp4u-faq-panel{ overflow: clip; }
}

.hp4u-faq .hp4u-faq-panel-inner{
  /*padding: clamp(14px, 2.2vw, 20px) clamp(16px, 2.8vw, 24px);*/
	padding-top:0;
	padding-bottom:var(--hp4u-section-pad);
		padding-left:var(--hp4u-faq-panel-pad-inline);
	padding-right:var(--hp4u-section-pad);
  color: var(--hp4u-faq-a);
}

/* --------------------------------------
   Optional builder guard (WPBakery/The7 text columns)
   Gives a 2px “bleed zone” only to this component so rings never appear cut
   -------------------------------------- */
.wpb_text_column .wpb_wrapper > .hp4u-faq{
  padding-inline: 2px;
  margin-inline: -2px;
}

/* --------------------------------------
   Reduced motion
   -------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .hp4u-faq .hp4u-faq-item{
    transition: border-color 1ms linear, background-color 1ms linear;
    transform: none !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   FAQ: arrow before the question (right → left on open)
   Markup target: <button class="hp4u-faq-toggle" aria-expanded="…">
   ---------------------------------------------------------------- */

/* Layout: icon before text with a small gap */
.hp4u-faq-toggle{
  display: inline-flex;
  align-items: center;
  gap: var(--hp4u-icon-arrow-gap);
}
.hp4u-faq .hp4u-faq-toggle:hover{
 	
}
/* Draw the arrow (defaults to pointing RIGHT) */
.hp4u-faq-toggle::before{
  content: "";
  flex: 0 0 auto;
  inline-size: var(--hp4u-icon-arrow-size);
  block-size:  var(--hp4u-icon-arrow-size);
  margin-inline-end: calc(var(--hp4u-icon-arrow-gap) - 0.25em);
  pointer-events: none;

  /* Use your brand accent as in the referenten cards */
  background-color: var(--hp4u-accent);

  -webkit-mask-image: var(--hp4u-icon-arrow-svg);
          mask-image: var(--hp4u-icon-arrow-svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  transform: scaleX(1);

  /* transition: transform 120ms steps(1, end); */
}

/* OPEN state → point LEFT */
.hp4u-faq-toggle[aria-expanded="true"]::before{
  transform: scaleX(-1);
}

/* Fallback for browsers without mask-image support */
@supports not ((mask-image: var(--hp4u-icon-arrow-svg)) or (-webkit-mask-image: var(--hp4u-icon-arrow-svg))){
  .hp4u-faq-toggle::before{
    content: "›";
    inline-size: auto;
    block-size: auto;
    background: none;
    transform: none;
  }
}



/* LIST: draw top hairline once and bottom end-cap once */
.hp4u-faq .hp4u-faq-list{
  position: relative;
  overflow: visible;
}

.hp4u-faq .hp4u-faq-list::after{
  content: "";
  position: absolute;
  left:  var(--hp4u-faq-line-inset);
  right: var(--hp4u-faq-line-inset);
  height: var(--hp4u-faq-line-thickness);
  background: var(--hp4u-faq-line-color);
  pointer-events: none;
}
.hp4u-faq .hp4u-faq-list::before{ top: 0; }
.hp4u-faq .hp4u-faq-list::after { bottom: 0; }

/* ITEM: bottom hairline that sits after the panel content */
.hp4u-faq .hp4u-faq-item{
  position: relative;   /* anchor the ::after */
  overflow: visible;
  isolation: isolate;   /* z-index safety */
}
.hp4u-faq .hp4u-faq-item:not(:last-child)::after{
  content: "";
  position: absolute;
  bottom: 0;  /* at the true bottom of the <li> (follows panel height) */
  left:  var(--hp4u-faq-line-inset);
  right: var(--hp4u-faq-line-inset);
  height: var(--hp4u-faq-line-thickness);
  background: var(--hp4u-faq-line-color);
  pointer-events: none;
  z-index: 1;
}

/* We do NOT draw lines on the question row anymore */
.hp4u-faq .hp4u-faq-q::before,
.hp4u-faq .hp4u-faq-q::after{ content: none; }

@media (max-width: 800px){
.hp4u-faq .hp4u-faq-toggle
 {
    flex-direction: column;
    align-content: flex-start;
}
	.hp4u-faq-toggle::before{align-self: flex-start;}
	.hp4u-faq .hp4u-faq-panel-inner {
    /* padding: clamp(14px, 2.2vw, 20px) clamp(16px, 2.8vw, 24px); */
    padding-top: 0;
    padding-bottom: var(--hp4u-section-pad);
    padding-left: var(--hp4u-section-pad);
    padding-right: var(--hp4u-section-pad);
    color: var(--hp4u-faq-a);
}
}