@charset "utf-8";
/* ====== HP4U Referenten====== */
:root{

  --hp4u-ref-open-dur: 300ms;
  --hp4u-ref-close-dur: 280ms;
  --hp4u-ref-anim-ease: cubic-bezier(.33,.06,.19,.99);

  --hp4u-media-w: 18rem;

  --hp4u-media-h-m: clamp(260px, 75vw, 460px);

  --hp4u-max-text: 100%;
--hp4u-ref-left-pad-top: 18px;
  --hp4u-card-left-colum-pad: 8px 18px 18px 18px;
  --hp4u-panel-bg-quiet: var(--hp4u-surface-2, #FAFBFC);
  --hp4u-panel-bg-open: var(--hp4u-surface-2, #FAFBFC);
  --hp4u-ref-leftw: var(--hp4u-allcardsleft-column-width);
}

/* =========================
   List container
   ========================= */
.hp4u-ref-wrap{background-color:var(--hp4u-surface-1)!important;}
.hp4u-ref-grid{
  display: flex;
  flex-wrap: wrap;
  gap: var(--hp4u-gap);
  list-style: none!important;
  margin: 0!important;
  padding: 0!important;
}
.hp4u-ref-card{ flex:1 1 100%; max-width:100%; }


/* =========================
   Card (mobile-first)
   =========================
.hp4u-ref-article{
  display: flex;
  gap: calc(var(--hp4u-gap)*0.75);
  align-items: flex-start;
  background: var(--hp4u-color-surface);
  border: var(--hp4u-border-w) solid var(--hp4u-color-border);
  border-radius: var(--hp4u-radius);
  padding: var(--hp4u-pad);
}*/

.hp4u-ref-article, 
.hp4u-ref-details{ overflow-anchor: none; }

/* =========================
   Photo
   ========================= */
.hp4u-ref-media{
  flex: 0 0 var(--hp4u-media-w);
  width: var(--hp4u-media-w);
  aspect-ratio: 2 / 3;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--hp4u-color-bg);
  border-radius: var(--hp4u-radius);
  align-self: flex-start;
}

.hp4u-ref-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.hp4u-ref-grid .hp4u-ref-media{
  width: var(--hp4u-ref-media-w);
  margin-left:0;
}
/* =========================
   Body
   ========================= */
.hp4u-ref-body{
  flex: 1 1 auto;
  min-width: 0;
  max-width: var(--hp4u-max-text);
  padding-top: var(--hp4u-pad-l);
}
.hp4u-ref-headline{
  margin: .2rem 0 .1rem;
  font-size: var(--hp4u-font-size-kicker);
  line-height: var(--hp4u-lh-tight);
  font-weight: var(--hp4u-font-weight-kicker-title-ref);
}
.hp4u-ref-name{
  margin: 0;
  color: var(--hp4u-accent);
  font-size: var(--hp4u-font-size-title);
  line-height: var(--hp4u-lh-tight);
  font-weight: var(--hp4u-font-weight-medium);
}
.hp4u-ref-ort{
  margin: .25rem 0 .75rem;
  color: var(--hp4u-color-text);
  font-size: var(--hp4u-font-size-people);
  line-height: var(--hp4u-lh-base);
  font-weight: var(--hp4u-font-weight-body);
}

/* =========================
   Vita content
   ========================= */
.hp4u-ref-content{
  margin: 0;
  transition:
    height var(--hp4u-ref-open-dur) var(--hp4u-ref-anim-ease), 
    opacity var(--hp4u-ref-open-dur) linear;
  will-change: height;
}

.hp4u-ref-content-inner{
  padding: .5rem 0 1rem;
  overflow: hidden;
  font-size: var(--hp4u-font-size-people);
  line-height: var(--hp4u-lh-relaxed);
  font-weight: var(--hp4u-font-weight-body);
}

/* =========================
   Buttons (base)
   ========================= */
.hp4u-ref-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  flex-direction: row;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
}
.hp4u-ref-btn{
    display: inline-block;
    text-decoration: none;
    border: var(--hp4u-border-w) solid var(--hp4u-btn-border-color);
    border-radius: var(--hp4u-radius-sm);
    padding: .6rem .85rem;
    background: var(--hp4u-btn-bg);
    color: var(--hp4u-btn-text);
    font-size: var(--hp4u-font-size-cta);
    font-weight: var(--hp4u-font-weight-hp4u-button);
    line-height: var(--hp4u-lh-tight);
    /*transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;*/
	box-sizing: border-box;
}
.hp4u-ref-btn:hover{
    background: var(--hp4u-btn-hover-bg);
    color: var(--hp4u-btn-hover-text);
    border-color: var(--hp4u-btn-hover-border-color);
}

/* =========================
   Vita panel (details/summary)
   ========================= */
.hp4u-ref-details{ margin:.25rem 0 1rem; contain: layout style; }
.hp4u-ref-summary{
  display: inline-flex;
  align-items: center;
  gap: var(--hp4u-panel-trigger-gap);
  padding: var(--hp4u-panel-trigger-padding);
  border-radius: var(--hp4u-radius-sm);
  border-top: var(--hp4u-panel-trigger-border-w) solid var(--hp4u-ui-hairline);
border-bottom: var(--hp4u-panel-trigger-border-w) solid var(--hp4u-ui-hairline);
  background: var(--hp4u-panel-bg-quiet);
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  width: 100%;
  font-size: var(--hp4u-font-size-cta);
  line-height: var(--hp4u-lh-tight);
	font-weight:var(--hp4u-font-weight-summary);
  /* transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;*/
}
.hp4u-ref-details[open]>.hp4u-ref-summary{
/* 
  background: var(--hp4u-panel-bg-open);
  border-color: color-mix(in srgb, var(--hp4u-ui-hairline) 55%, var(--hp4u-btn-bg, var(--hp4u-accent, #5ecb00)) 45%); */
}

.hp4u-ref-summary::after{ content:"+"; display:inline-block; width:1rem; text-align:center; }
.hp4u-ref-details[open]>.hp4u-ref-summary::after{ content:"–"; }