@charset "utf-8";
/* ====== HP4U Event Switchers====== */
/* ------------------------------
   Tokens (bridge to site palette)
--------------------------------*/
:root{
  --hp4u-sw-gap: .5rem;
  --hp4u-sw-pad: .5rem .75rem;
  --hp4u-sw-radius: 999px;

  --hp4u-color-border: #FFFFFF;
  --hp4u-color-text: #1b4259;
  --hp4u-color-subtle: #6B7280;
  --hp4u-color-bg: #FFFFFF;
  --hp4u-color-bg-panel: #FFFFFF;
  --hp4u-focus-ring-w: 0;
	  /* 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);
}

/* ------------------------------
   Visibility helpers (BASE)
--------------------------------*/
.hp4u-only-desktop{ display:block !important; }
.hp4u-only-mobile { display:none !important; }

/* ------------------------------
   Program/Day BAR layout
--------------------------------*/
.hp4u-program-day-nav.hp4u-program-day-nav--bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 var(--hp4u-section-pad);
  border: var(--hp4u-border-w) solid var(--hp4u-color-border);
  border-radius: var(--hp4u-radius,12px);
  background: var(--hp4u-color-bg-panel);
	position:relative;
}
.hp4u-program-day-nav .hp4u-pnav__program{ min-width:260px; display:flex; align-items:center; }
.hp4u-program-day-nav .hp4u-pnav__days{ flex:1; display:flex; justify-content:flex-end; }

@media (max-width:768px){
  .hp4u-program-day-nav.hp4u-program-day-nav--bar{
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    padding: .5rem;
	  padding-left:var(--hp4u-section-pad);
	  padding-right:var(--hp4u-section-pad);
  }
  .hp4u-program-day-nav .hp4u-pnav__days{ justify-content:stretch; }
}
.hp4u-program-day-nav--bar::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;
}
.hp4u-program-day-nav--bar::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;
}
/* ------------------------------
   <details> fake dropdown
--------------------------------*/
.hp4u-dd{
  position: relative;

  display: inline-block;
}
.hp4u-dd.hp4u-only-mobile, 
.hp4u-dd.hp4u-only-desktop{ display:inherit; }

.hp4u-dd[open] .hp4u-dd__button{ outline:0; }

.hp4u-dd__button{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  border: var(--hp4u-border-w) solid var(--hp4u-color-border);
  border-radius: var(--hp4u-radius,12px);
  background: var(--hp4u-surface-5);
  color: var(--hp4u-color-text);
  font-size: var(--hp4u-step--1,.95rem);
  line-height: var(--hp4u-lh-tight,1.2);
  cursor: pointer;
  user-select: none;
}
.hp4u-dd__label{ color:var(--hp4u-color-subtle); font-weight:var(--hp4u-font-weight-body, 300); }
.hp4u-dd__current{ font-weight:var(--hp4u-font-weight-medium, 500); }
.hp4u-dd__caret{ display:inline-block; transform:translateY(-.5px); }

.hp4u-dd__panel{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 12;
  min-width: 260px;
  padding: .5rem;
  border: var(--hp4u-border-w) solid var(--hp4u-color-border);
  border-radius: var(--hp4u-radius,12px);
  background: var(--hp4u-color-bg);
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.hp4u-dd__list{ margin:0!important; padding:0; list-style:none!important; display:grid; gap:.25rem; }
.hp4u-dd__link{
  display: block;
  padding: .5rem .5rem;
  border-radius: var(--hp4u-radius,12px);
  color: var(--hp4u-color-text);
  text-decoration: none;
  font-size: var(--hp4u-step-0,1rem);
	
}
.hp4u-dd__link:hover{ background: color-mix(in srgb, var(--hp4u-btn-bg) 8%, white);    color: var(--hp4u-color-text); }
.hp4u-dd__link.is-active{ background: color-mix(in srgb, var(--hp4u-btn-bg) 12%, white); }

/* ------------------------------
   Day tabs (desktop)
--------------------------------*/
.hp4u-tabs{
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0!important;
  padding: 0!important;
  list-style: none!important;
}
.hp4u-tabs.hp4u-only-mobile, 
.hp4u-tabs.hp4u-only-desktop{ display:inherit; }

.hp4u-tab{
  position: relative;
  display: inline-block;

  text-decoration: none;
  color: var(--hp4u-color-subtle);
  font-size: var(--hp4u-step--1,.95rem);
  line-height: var(--hp4u-lh-tight,1.2);
}
.hp4u-tab:hover{ color:var(--hp4u-color-text); }
.hp4u-tab.is-active, 
.hp4u-tab[aria-current="page"]{ color:var(--hp4u-color-text); }

.hp4u-tab::after{
  content: "";
  position: absolute;
  left: 0; right:0; bottom:-1px;
  height: 2px;
  background: var(--hp4u-btn-bg);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.hp4u-tab.is-active::after, 
.hp4u-tab[aria-current="page"]::after{
  transform: scaleX(1);
  opacity: 1;
}

.hp4u-tabs li{ list-style:none!important; }
.hp4u-tabs li::marker{ content:""; }
.hp4u-tabs li + li::before{ content:none !important; }

/* ------------------------------
   Focus (local only)
--------------------------------*/
:where(.hp4u-program-day-nav, .hp4u-day-switcher)
  :where(a, button, summary, [role="button"]):focus-visible{
  outline: var(--hp4u-focus-ring-w) solid var(--hp4u-color-focus, rgba(233,79,28,.55));
  outline-offset: 2px;
}

/* ------------------------------
   Anchor scroll offset
--------------------------------*/
.hp4u-daysep, 
[id^="event-day-"], 
[id^="event-program-"]{
  scroll-margin-top: var(--hp4u-scroll-offset);
}

/* ------------------------------
   Legacy pills (compat)
--------------------------------*/
.hp4u-switcher__list{ display:flex; flex-wrap:wrap; gap:var(--hp4u-sw-gap); margin:0!important; padding:0!important; list-style:none!important; }
.hp4u-switcher__item{ margin:0; padding:0; }
.hp4u-switcher__link{
  display: inline-block; padding:var(--hp4u-sw-pad);
  border-radius: var(--hp4u-sw-radius);
  border: var(--hp4u-border-w) solid var(--hp4u-color-border);
  background: var(--hp4u-color-bg);
  text-decoration: none; line-height:1.2; color:inherit;
}
.hp4u-switcher__link.is-active, 
.hp4u-switcher__link[aria-current="page"]{
  border-color: var(--hp4u-btn-bg);
  color: var(--hp4u-btn-bg);
}
.hp4u-tabs.hp4u-only-desktop{ display:flex !important; }
.hp4u-dd.hp4u-only-desktop{ display:inline-block !important; }

@media (max-width:768px){
  .hp4u-tabs.hp4u-only-mobile{ display:flex !important; }
  .hp4u-dd.hp4u-only-mobile{ display:inline-block !important; }
}
@media (max-width:768px){
  #ID .hp4u-only-desktop{display:none!important}
  #ID .hp4u-only-mobile{display:block!important}
}
@media (max-width:360px){
.hp4u-dd__panel {
    min-width: 100%;

}
}
/* ===== HP4U Program/Day switchers – hard wrap fix for ultra-narrow screens ===== */
@media (max-width: 360px) {
.hp4u-program-day-nav .hp4u-pnav__program {
    min-width: 100%;
    display: flex;
    align-items: center;
}

  .hp4u-program-day-nav,
  .hp4u-program-day-nav--bar,
  .hp4u-program-switcher,
  .hp4u-program-switcher .hp4u-dd,
  .hp4u-program-switcher .hp4u-dd__button {
    white-space: normal !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .hp4u-program-switcher .hp4u-dd.hp4u-only-mobile .hp4u-dd__button {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.25rem 0.5rem;
    width: 100%;
  }

  .hp4u-program-switcher .hp4u-dd.hp4u-only-mobile .hp4u-dd__label {
    flex: 0 0 100%;
    font-size: 0.78rem;
    line-height: 1.2;
  }


  .hp4u-program-switcher .hp4u-dd.hp4u-only-mobile .hp4u-dd__current {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    font-size: 0.9rem;
    line-height: 1.25;
  }

  .hp4u-program-switcher .hp4u-dd.hp4u-only-mobile .hp4u-dd__caret {
    flex: 0 0 auto;
    margin-left: auto;
  }
}

/* === HP4U Program + Day switchers – small mobile behaviour === */
@media (max-width: 360px) {

  /* Both switchers should be fluid and allowed to shrink */
  .hp4u-program-day-nav .hp4u-pnav__program,
  .hp4u-program-day-nav .hp4u-pnav__day {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Stack Program + Day switchers instead of squeezing them side by side */
  .hp4u-program-day-nav,
  .hp4u-program-day-nav--bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  /* Mobile dropdown button (applies to both Program + Day) */
  .hp4u-program-day-nav .hp4u-dd.hp4u-only-mobile .hp4u-dd__button {
    display: flex;
    flex-wrap: wrap;          /* allow label + value to wrap */
    align-items: flex-start;
    gap: 0.25rem 0.5rem;
    width: 100%;
    white-space: normal;
    box-sizing: border-box;
  }

  /* Label line: "Programm wählen:" / "Tag wählen:" */
  .hp4u-program-day-nav .hp4u-dd.hp4u-only-mobile .hp4u-dd__label {
    flex: 0 0 100%;
    font-size: 0.78rem;
    line-height: 1.2;
    white-space: normal;
  }

  /* Current value: long titles / dates must wrap nicely */
  .hp4u-program-day-nav .hp4u-dd.hp4u-only-mobile .hp4u-dd__current {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    font-size: 0.9rem;
    line-height: 1.25;
    text-align: left;
  }

  /* Caret stays on the right edge */
  .hp4u-program-day-nav .hp4u-dd.hp4u-only-mobile .hp4u-dd__caret {
    flex: 0 0 auto;
    margin-left: auto;
  }
}