@charset "utf-8";
/* ==========================================================================
   HP4U Referenten
   hp4u-referenten_v2.css — Visual refinements (add-on)
   Loads AFTER hp4u-referenten.css
   ========================================================================== */
.hp4u-ref-grid{
  --hp4u-ref-gap: 32px;
  --hp4u-ref-pad: 16px;
  /*--hp4u-ref-media-w: clamp(160px, 24vw, 220px);*/
	--hp4u-ref-media-aspect-ratio:4/5;

--hp4u-ref-media-w: clamp(220px,calc(var(--hp4u-ref-leftw) - 2 * var(--hp4u-ref-pad, 24px)),var(--hp4u-ref-leftw));
  --hp4u-ref-radius: var(--hp4u-radius-sm);

  --hp4u-ref-ink: var(--hp4u-ink-dark, #2f373f);
  --hp4u-ref-ink-muted: var(--hp4u-ink-secondary, #465059);
  --hp4u-ref-surface: var(--hp4u-surface-1-light, #fff);
  --hp4u-ref-border: color-mix(in srgb, #000 8%, #fff);
  --hp4u-ref-tint: color-mix(in srgb, var(--hp4u-ref-ink) 6%, #fff);
  --hp4u-ref-focus: 0 0 0 3px rgba(233,79,28,.24);
	--hp4u-ref-border-seperator:var(--hp4u-ink-dark);

}


.hp4u-ref-grid .hp4u-ref-card{ list-style:none; /*margin:0 0 calc(var(--hp4u-ref-gap) * 1.5);*/ margin:0;}

.hp4u-ref-grid .hp4u-ref-article{
  display: block;

  background: var(--hp4u-ref-surface);
  border: var( --hp4u-border-w) solid var(--hp4u-ref-border);
  border-radius: var(--hp4u-ref-radius);

  overflow-anchor: none;
}

.hp4u-ref-grid .hp4u-card__inner{padding: var(--hp4u-ref-pad); }
.hp4u-ref-grid .hp4u-card__linkarea{
  display: grid;
  /*grid-template-columns: var(--hp4u-ref-media-w) 1fr;*/
	grid-template-columns: var(--hp4u-ref-leftw) 1fr;
  gap: var(--hp4u-ref-gap);
  align-items: stretch;

  padding: 0;
}

.hp4u-ref-grid .hp4u-col--left{ grid-column:1; padding:var(--hp4u-card-left-colum-pad);}
.hp4u-ref-grid .hp4u-col--right{ grid-column:2; min-width:0; padding-bottom:var(--hp4u-ref-left-pad-top); padding-right:var(--hp4u-ref-left-pad-top);}

.hp4u-ref-grid .hp4u-ref-media{
  width: var(--hp4u-ref-media-w);
  aspect-ratio: var(--hp4u-ref-media-aspect-ratio);
  overflow: hidden;
  border-radius: var(--hp4u-ref-radius);
  background: var(--hp4u-ref-tint);
}
.hp4u-ref-grid .hp4u-ref-img{
  width: 100%; height:100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.hp4u-ref-grid .hp4u-ref-body{ color:var(--hp4u-ref-ink); }
.hp4u-ref-grid .hp4u-titlewrap{ margin:0 0 .4rem; }
.hp4u-ref-grid .hp4u-ref-headline, 
.hp4u-ref-grid .hp4u-title{ margin:0; line-height:1.2; }
.hp4u-ref-grid .hp4u-kicker--inline{
  text-transform: none;
  margin-right: 0;
  display: inline-block;
}
.hp4u-ref-grid .hp4u-ref-ort{
  margin: .25rem 0 0;
  color: var(--hp4u-ref-ink-muted);
}

.hp4u-ref-grid .hp4u-panel, 
.hp4u-ref-grid .hp4u-ref-details{
  margin: .75rem 0 0;
  border: var(--hp4u-border-w) solid var(--hp4u-ref-border);
  background: #fff;
  border-radius: var(--hp4u-radius-sm);
  overflow-anchor: none;
}
.hp4u-ref-grid .hp4u-panel__summary, 
.hp4u-ref-grid .hp4u-ref-summary{
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--hp4u-panel-trigger-gap);
 padding: var(--hp4u-panel-trigger-padding);
	padding-left:0;
     border-radius: var(--hp4u-radius-sm);
  outline: none;
}
/* 
.hp4u-ref-grid .hp4u-panel__summary:focus-visible, 
.hp4u-ref-grid .hp4u-ref-summary:focus-visible{
  box-shadow: var(--hp4u-ref-focus);
}*/
.hp4u-ref-grid .hp4u-panel__content, 
.hp4u-ref-grid .hp4u-ref-content{
  padding: .75rem 0 0;

  will-change: height;
}

.hp4u-ref-grid .hp4u-ref-buttons-wrap{ margin-top:.75rem; }
.hp4u-ref-grid .hp4u-ref-buttons{
  display: flex; flex-wrap:wrap; gap:.5rem;
}
.hp4u-ref-grid .hp4u-ref-btn{
	box-sizing: border-box;
	min-height:54px;
      display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
  padding: 8px 12px;
  border: var(--hp4u-border-w) solid var(--hp4u-btn-border-color);
  border-radius: var(--hp4u-radius-sm);
  background: var(--hp4u-btn-bg);
  color: var(--hp4u-btn-text);
  text-decoration: none;
  font-weight: var(--hp4u-font-weight-hp4u-button);
  font-size: var(--hp4u-font-size-cta);
  line-height: var(--hp4u-lh-tight);
  width: 100%;
  text-align: center;
}
.hp4u-ref-grid .hp4u-ref-btn:hover{
    background: var(--hp4u-btn-hover-bg);
    color: var(--hp4u-btn-hover-text);
    border-color: var(--hp4u-btn-hover-border-color);
}
/*.hp4u-ref-grid .hp4u-ref-btn:focus-visible{ box-shadow: var(--hp4u-ref-focus); }*/

.hp4u-ref-grid .hp4u-col--right{
  display: flex;
  flex-direction: column;
  gap: var(--hp4u-ref-gap);
}
.hp4u-ref-grid .hp4u-ref-buttons-wrap{
  margin-top: auto;

  padding-top: var(--hp4u-ref-pad);

}
.hp4u-ref-grid .hp4u-ref-buttons{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .5rem .75rem;
}
@media (max-width:900px){
	.hp4u-ref-grid .hp4u-ref-buttons {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
}
@media (max-width:800px){
  .hp4u-ref-grid .hp4u-card__linkarea{ grid-template-columns:1fr; }
  .hp4u-ref-grid .hp4u-ref-media{ width:100%; max-width:min(360px, 80vw); }
  .hp4u-ref-grid .hp4u-col--left, 
  .hp4u-ref-grid .hp4u-col--right{ grid-column:1; }
  .hp4u-ref-grid .hp4u-ref-buttons-wrap{ margin-top:.75rem; padding-top:0; }
  .hp4u-ref-grid .hp4u-ref-buttons{ grid-template-columns:1fr; }
}

.hp4u-ref-grid .hp4u-ref-content {
  display: flow-root;

  box-sizing: border-box;
}

.hp4u-ref-grid .hp4u-ref-content-inner {
  display: flow-root;

  padding-bottom: 0.1px;

}

/* ────────────────────────────────────────────────────────────────────────────
   HP4U — Arrow-before-label utility for summaries & the inline "Details" CTA
   -------------------------------------------------------------------------- */

.hp4u-panel__summary{
  display: inline-flex;          
  align-items: center;
  gap: var(--hp4u-icon-arrow-gap);
}

.hp4u-panel__summary::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);
  transform-origin: 50% 50%;
  /*transition: transform var(--hp4u-icon-anim-dur) var(--hp4u-icon-anim-ease);*/
  pointer-events: none;
  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;
}


details.hp4u-panel[open] > .hp4u-panel__summary::before{
  transform: rotate(var(--hp4u-icon-rotate-open));
}


@supports not ((mask-image: var(--hp4u-icon-arrow-svg)) or (-webkit-mask-image: var(--hp4u-icon-arrow-svg))){
  .hp4u-panel__summary::before{
    content: "›";
    inline-size: auto;
    block-size: auto;
    background: none;
    transform: none;
  }
}

.hp4u-ref-summary::after{
  content: none !important;
}

.hp4u-card .details-cta{
  display: inline-flex;
  align-items: center;
  gap: var(--hp4u-icon-arrow-gap);
}

.hp4u-card .details-cta::before{
  content: "";
  flex: 0 0 auto;
  inline-size: calc(var(--hp4u-icon-arrow-size) * 0.9);
  block-size:  calc(var(--hp4u-icon-arrow-size) * 0.9);
  margin-inline-end: calc(var(--hp4u-icon-arrow-gap) - 0.25em);
  pointer-events: none;

  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;
}

@supports not ((mask-image: var(--hp4u-icon-arrow-svg)) or (-webkit-mask-image: var(--hp4u-icon-arrow-svg))){
  .hp4u-card .details-cta::before{
    content: "›";
    inline-size: auto;
    block-size: auto;
    background: none;
  }
}

/* Flip horizontally instead of rotating down/up */
.hp4u-panel__summary::before{
  transform: scaleX(1);

}
details.hp4u-panel[open] > .hp4u-panel__summary::before{
  transform: scaleX(-1);
}


.hp4u-card .details-cta::before{
  transform: scaleX(1);

}
.hp4u-card details[open] .details-cta::before{
  transform: scaleX(-1);
}

/* anchor for the divider */
.hp4u-ref-grid .hp4u-ref-card .hp4u-card__linkarea {
  position: relative; /* only for the ::after positioning */
}

/* inset separator between cards (not on the last one) */
.hp4u-ref-grid .hp4u-ref-card:not(:last-child) .hp4u-card__linkarea::after {
  content: "";
  position: absolute;
  left: var(--hp4u-ref-pad);
  right: var(--hp4u-ref-pad);
  bottom: calc(-1 * (var(--hp4u-ref-gap) / 2));

  height: 1px;
  background: var(--hp4u-ref-border-seperator, #c8d0d6);
  opacity: .9;
  pointer-events: none;
}

.hp4u-ref-grid .hp4u-ref-card {
  padding-bottom: calc(var(--hp4u-ref-gap) / 2);
}
.hp4u-ref-grid .hp4u-ref-card + .hp4u-ref-card {
  padding-top: calc(var(--hp4u-ref-gap) / 2);
}

/* ===== Desktop: 2 columns + fixed footer row ================= */
@media (min-width: 800.99px){
  .hp4u-ref-article{
    display: grid;
    grid-template-columns: var(--hp4u-ref-leftw) 1fr;
    grid-template-areas:
      "media body"
      "media body"
      "media buttons";
    column-gap: var(--hp4u-gap);
    row-gap: var(--hp4u-gap);
    align-items: start;
  }
  .hp4u-ref-media{ grid-area: media; }
  .hp4u-ref-body { grid-area: body; min-width:0; }
  .hp4u-ref-buttons-wrap{
    grid-area: buttons;
    padding-top: var( --hp4u-pad);
    border-top: var(--hp4u-border-w) solid var(--hp4u-color-border);
  }

  .hp4u-ref-buttons{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: .6rem .8rem;
    align-items: stretch;
  }
  .hp4u-ref-btn{
    display: block;
    width: 100%;
    text-align: left;
    white-space: normal;
    line-height: var(--hp4u-lh-compact);
    word-break: break-word;
    padding: .65rem .85rem;
    border-radius: var(--hp4u-radius-sm);

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ===== Mobile/tablet: simple vertical stack ================== */
@media (max-width: 800px){
  .hp4u-ref-body { flex:0 0 100%; min-width:100%; max-width:100%; }
  .hp4u-ref-grid .hp4u-ref-article{
    display: flex;
    flex-direction: column;
    gap: var(--hp4u-gap);
  }
  .hp4u-ref-media{ flex:0 0 50%; width:50%; }
  .hp4u-ref-buttons{
    display: flex; flex-direction:column; gap:.6rem;
  }
  .hp4u-ref-btn{ width:100%; max-inline-size:100%; }
}

@media (max-width: 600px){
  .hp4u-ref-media{
    flex: 0 0 var(--hp4u-media-w);
    width: var(--hp4u-media-w);
    block-size: var(--hp4u-media-h-m);
  }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .hp4u-ref-content{ transition: none !important; }
}

.hp4u-ref-summary:hover{
  border-color: color-mix(in srgb, var(--hp4u-ui-hairline) 60%, #000 40%);
}

@media (max-width: 800px){
  .hp4u-ref-grid .hp4u-col--right{
    display: flex;           /* ensure it remains flex on mobile */
    flex-direction: column;
    min-width: 0;            /* guards long lines/overflow */
  }

  /* spacing above the buttons: keep it INSIDE the column */
  .hp4u-ref-grid .hp4u-ref-buttons-wrap{
    margin-top: auto;        /* pushes to the end of the column (works because parent is flex) */
    padding-top: .75rem;     /* visual gap; adjust to taste */
  }
}

/* === Mobile: stack the real container, not the <article> === */
@media (max-width: 800px){
  /* 1) The grid/flex owner on mobile must be the linkarea */
  .hp4u-ref-grid .hp4u-card__linkarea{
    display: flex;
    flex-direction: column;
    gap: var(--hp4u-gap);
  }

  /* 2) Right column: internal column flow, margins can't escape */
  .hp4u-ref-grid .hp4u-col--right{
    display: flex;
    flex-direction: column;
    min-width: 0;
    isolation: isolate;         /* anchors any ::after lines to this box */
  }

  /* 3) Buttons live INSIDE the right column (no leaking) */
  .hp4u-ref-grid .hp4u-ref-buttons-wrap{
    margin-top: 0;              /* don't use outside spacing */
    padding-top: .75rem;        /* inside spacing */
    border-top: var(--hp4u-border-w) solid var(--hp4u-color-border);
    align-self: stretch;
  }

  /* 4) If you had an outer inset divider, disable it on mobile */
  .hp4u-ref-grid .hp4u-card__linkarea::after,
  .hp4u-ref-grid .hp4u-col--right::after{
    content: none !important;
  }
}

@media (max-width: 800px){
  .hp4u-ref-grid .hp4u-card__linkarea::after,
  .hp4u-ref-grid .hp4u-col--right::after {
    content: none !important;
  }

  .hp4u-ref-grid .hp4u-ref-buttons-wrap{
    border-top: 0;
    padding-top: .75rem;
  }

  .hp4u-ref-grid .hp4u-ref-card{
    border-bottom: 1px solid var(--hp4u-ink-dark);
  }
  .hp4u-ref-grid .hp4u-ref-card:last-child{
    border-bottom: 0;
  }
}