/* HEPP Referenzen – Projektmagazin. Erzeugt von werkzeug/css-umwandeln.py aus der Codex-Vorlage.
   Nicht von Hand bearbeiten: Änderungen in die Vorlage oder in css-grundlage.css / css-ergaenzung.css. */
/* --- Grundlage: Stile von Theme (Hello Elementor) und Elementor-Kit innerhalb der Komponente neutralisieren --- */
.hepp-referenzen.hr-magazin{display:block;width:100%;--gewerke-abstand:var(--hr-abstand-oben,28px)}
.admin-bar .hepp-referenzen.hr-magazin{--gewerke-abstand:calc(var(--hr-abstand-oben,28px) + 32px)}
.hepp-referenzen.hr-magazin h1,.hepp-referenzen.hr-magazin h2,.hepp-referenzen.hr-magazin h3{margin:0;padding:0;font-family:inherit;color:inherit;text-transform:none;font-weight:400;letter-spacing:normal}
.hepp-referenzen.hr-magazin p{margin:1em 0;padding:0;font-family:inherit;color:inherit}
.hepp-referenzen.hr-magazin a{color:inherit;text-decoration:none;box-shadow:none;background:none;transition:none}
.hepp-referenzen.hr-magazin a:hover,.hepp-referenzen.hr-magazin a:focus{color:inherit;text-decoration:none}
.hepp-referenzen.hr-magazin button{background:none;border:0;border-radius:0;padding:0;margin:0;font:inherit;color:inherit;text-transform:none;letter-spacing:inherit;line-height:inherit;box-shadow:none;cursor:pointer;min-height:0;width:auto;white-space:normal;text-align:inherit}
.hepp-referenzen.hr-magazin button:hover,.hepp-referenzen.hr-magazin button:focus{background-color:transparent;color:inherit;text-decoration:none}
.hepp-referenzen.hr-magazin img{display:block;max-width:100%;height:auto;border:0;border-radius:0;box-shadow:none}
.hepp-referenzen.hr-magazin .hr-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* --- aus der Vorlage --- */
.hepp-referenzen.hr-magazin{--sand:#bfae92;--sand-light:#d8cdba;--paper:#f6f3ed;--white:#fff;--ink:#20211f;--muted:#66665f;--line:#dedbd3;--dark:#252623;--space:clamp(24px,5vw,84px);--font:Helvetica,Arial,sans-serif}
.hepp-referenzen.hr-magazin, .hepp-referenzen.hr-magazin *{box-sizing:border-box}
.hepp-referenzen.hr-magazin{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
body.hr-gesperrt{overflow:hidden}
.hepp-referenzen.hr-magazin button,.hepp-referenzen.hr-magazin input{font:inherit}
.hepp-referenzen.hr-magazin button,.hepp-referenzen.hr-magazin a{-webkit-tap-highlight-color:transparent}
.hepp-referenzen.hr-magazin button{cursor:pointer}
.hepp-referenzen.hr-magazin a{color:inherit}
.hepp-referenzen.hr-magazin button{color:inherit}
.hepp-referenzen.hr-magazin img{display:block;max-width:100%}
.hepp-referenzen.hr-magazin a{text-decoration:none}
.hepp-referenzen.hr-magazin a:focus-visible,.hepp-referenzen.hr-magazin button:focus-visible{outline:3px solid #786448;outline-offset:5px}
.hepp-referenzen.hr-magazin .shell{width:min(1512px,100%);margin:auto;padding-inline:var(--space)}
.hepp-referenzen.hr-magazin .eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.hepp-referenzen.hr-magazin .intro h1{font-size:clamp(40px,5.8vw,84px);line-height:1.02;letter-spacing:-.05em;font-weight:400;margin:0}
.hepp-referenzen.hr-magazin .intro p{font-weight:400}
.hepp-referenzen.hr-magazin .intro-copy{max-width:390px;font-size:17px;line-height:1.65}
.hepp-referenzen.hr-magazin .intro-copy p{margin:0 0 24px}
.hepp-referenzen.hr-magazin .project-card{min-width:0;position:relative}
.hepp-referenzen.hr-magazin .project-card[hidden]{display:none!important}
.hepp-referenzen.hr-magazin .project-link{display:block;width:100%}
.hepp-referenzen.hr-magazin .project-image{overflow:hidden;background:var(--sand-light);position:relative}
.hepp-referenzen.hr-magazin .project-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.75,.25,1);aspect-ratio:3/2}
.hepp-referenzen.hr-magazin .project-link:hover img{transform:scale(1.025)}
.hepp-referenzen.hr-magazin .project-meta{display:flex;gap:14px;justify-content:space-between;align-items:baseline;color:var(--muted);font-size:12px;letter-spacing:.035em;margin:16px 0 7px}
.hepp-referenzen.hr-magazin .project-meta .category{min-width:0}
.hepp-referenzen.hr-magazin .project-card h2,.hepp-referenzen.hr-magazin .project-card h3{font-size:clamp(21px,2vw,29px);font-weight:400;line-height:1.2;letter-spacing:-.025em;margin:0}
.hepp-referenzen.hr-magazin .project-title{display:flex;align-items:center;justify-content:space-between;gap:18px}
.hepp-referenzen.hr-magazin .project-excerpt{font-size:15px;font-weight:400;color:var(--muted);margin:14px 0 0;max-width:460px}
.hepp-referenzen.hr-magazin .filters{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center}
.hepp-referenzen.hr-magazin .filter-btn{border:0;border-bottom:1px solid transparent;background:none;padding:13px 0;font-size:14px;text-align:left}
.hepp-referenzen.hr-magazin .filter-btn[aria-pressed="true"]{border-bottom-color:currentColor;font-weight:600}
.hepp-referenzen.hr-magazin .filter-btn:hover{color:#75634b}
.hepp-referenzen.hr-magazin .results-count{white-space:nowrap;color:var(--muted);font-size:13px}
.hepp-referenzen.hr-magazin .load-row{display:flex;align-items:center;justify-content:center;padding:50px 0;gap:20px;flex-wrap:wrap}
.hepp-referenzen.hr-magazin .load-more{background:none;border:1px solid currentColor;padding:15px 30px;font-size:14px}
.hepp-referenzen.hr-magazin .load-more:hover{background:var(--sand-light);color:var(--ink)}
.hepp-referenzen.hr-magazin .detail-dialog{padding:0;border:0;width:min(1060px,94vw);max-height:92vh;background:var(--paper);color:var(--ink);overflow:auto}
.hepp-referenzen.hr-magazin .detail-dialog::backdrop{background:#151710c9;backdrop-filter:blur(5px)}
.hepp-referenzen.hr-magazin .dialog-close{position:sticky;float:right;top:14px;margin:14px 14px -58px 0;z-index:2;width:42px;height:42px;background:var(--white);border:1px solid var(--line);border-radius:50%;font-size:24px}
.hepp-referenzen.hr-magazin .detail-image{width:100%;max-height:58vh;object-fit:contain;background:var(--dark)}
.hepp-referenzen.hr-magazin .detail-body{padding:clamp(24px,4vw,54px);font-weight:400}
.hepp-referenzen.hr-magazin .detail-body h2{font-weight:400;font-size:clamp(28px,4vw,50px);line-height:1.12;letter-spacing:-.03em;margin:14px 0 22px}
.hepp-referenzen.hr-magazin .detail-body p{max-width:780px}
.hepp-referenzen.hr-magazin .detail-body .source-link{display:inline-flex;margin-top:18px;border-bottom:1px solid;padding-bottom:5px;font-size:14px}
.hepp-referenzen.hr-magazin .detail-meta{font-size:13px;color:var(--muted)}
.hepp-referenzen.hr-magazin{background:var(--paper)}
.hepp-referenzen.hr-magazin .intro{display:grid;grid-template-columns:1.05fr 1fr;background:var(--sand-light)}
.hepp-referenzen.hr-magazin .intro-photo{position:relative;min-height:610px}
.hepp-referenzen.hr-magazin .intro-photo img{height:100%;width:100%;object-fit:cover;position:absolute;inset:0}
.hepp-referenzen.hr-magazin .intro-caption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#111a);color:#fff;display:flex;align-items:end;justify-content:space-between;gap:20px;padding:70px 32px 30px}
.hepp-referenzen.hr-magazin .intro-caption span{font-size:13px}
.hepp-referenzen.hr-magazin .intro-caption strong{display:block;font-size:24px;line-height:1.2;font-weight:400;max-width:350px;margin-top:5px}
.hepp-referenzen.hr-magazin .intro-text{display:flex;flex-direction:column;justify-content:center;padding:55px clamp(30px,4.5vw,75px)}
.hepp-referenzen.hr-magazin .intro-text .eyebrow{margin:0 0 46px}
.hepp-referenzen.hr-magazin .intro h1{font-size:clamp(43px,5vw,73px);max-width:640px}
.hepp-referenzen.hr-magazin .intro h1 span{display:block}
.hepp-referenzen.hr-magazin .intro-copy{font-size:16px;margin-top:32px;max-width:320px}
.hepp-referenzen.hr-magazin .intro-copy p{margin:0 0 28px}
.hepp-referenzen.hr-magazin .gallery-grid{padding-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:48px 32px}
.hepp-referenzen.hr-magazin .project-card.is-breit{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;background:var(--dark);color:var(--white)}
.hepp-referenzen.hr-magazin .project-card.is-breit .project-link{display:contents}
.hepp-referenzen.hr-magazin .project-card.is-breit .project-image{aspect-ratio:3/2}
.hepp-referenzen.hr-magazin .project-card.is-breit .project-image img{height:100%}
.hepp-referenzen.hr-magazin .project-card.is-breit .project-text{padding:clamp(24px,4vw,65px);display:flex;flex-direction:column;justify-content:center}
.hepp-referenzen.hr-magazin .project-card.is-breit .project-meta{color:var(--sand-light);margin:0 0 28px}
.hepp-referenzen.hr-magazin .project-card.is-breit h2{font-size:clamp(29px,3.2vw,46px)}
.hepp-referenzen.hr-magazin .project-card.is-breit .project-excerpt{color:#e0e0d7;margin-top:24px}
.hepp-referenzen.hr-magazin .project-card:not(.is-breit) .project-excerpt{display:none}
@media(max-width:1100px){
  .hepp-referenzen.hr-magazin .intro-photo{min-height:530px}
  .hepp-referenzen.hr-magazin .intro-text{padding:35px}
  .hepp-referenzen.hr-magazin .intro-text .eyebrow{margin-bottom:25px}
  .hepp-referenzen.hr-magazin .project-card.is-breit .project-text{padding:32px}
}
@media(max-width:820px){
  .hepp-referenzen.hr-magazin .filters{gap:0 20px}
  .hepp-referenzen.hr-magazin .intro{grid-template-columns:1fr 1fr}
  .hepp-referenzen.hr-magazin .intro-photo{min-height:540px}
  .hepp-referenzen.hr-magazin .intro-text{padding:30px}
  .hepp-referenzen.hr-magazin .intro h1{font-size:44px;letter-spacing:-.045em}
  .hepp-referenzen.hr-magazin .intro-copy{font-size:15px}
  .hepp-referenzen.hr-magazin .intro-caption{padding:60px 22px 22px}
  .hepp-referenzen.hr-magazin .intro-caption strong{font-size:21px}
  .hepp-referenzen.hr-magazin .project-card.is-breit{grid-template-columns:1.1fr 1fr}
  .hepp-referenzen.hr-magazin .project-card.is-breit .project-text{padding:24px}
  .hepp-referenzen.hr-magazin .project-card.is-breit .project-excerpt{font-size:14px}
}
@media(max-width:560px){
  .hepp-referenzen.hr-magazin{--space:22px}
  .hepp-referenzen.hr-magazin .intro h1{letter-spacing:-.045em}
  .hepp-referenzen.hr-magazin .eyebrow{font-size:11px}
  .hepp-referenzen.hr-magazin .filters{gap:0 16px}
  .hepp-referenzen.hr-magazin .filter-btn{font-size:13px;padding:8px 0}
  .hepp-referenzen.hr-magazin .results-count{font-size:12px}
  .hepp-referenzen.hr-magazin .project-card h2{font-size:23px}
  .hepp-referenzen.hr-magazin .project-meta{margin-top:12px;font-size:11px}
  .hepp-referenzen.hr-magazin .load-row{padding:32px 0}
  .hepp-referenzen.hr-magazin .intro{display:flex;flex-direction:column-reverse}
  .hepp-referenzen.hr-magazin .intro-photo{min-height:320px}
  .hepp-referenzen.hr-magazin .intro-text{padding:34px 22px}
  .hepp-referenzen.hr-magazin .intro-text .eyebrow{margin-bottom:23px}
  .hepp-referenzen.hr-magazin .intro h1{font-size:44px}
  .hepp-referenzen.hr-magazin .intro-copy{max-width:none;margin-top:22px}
  .hepp-referenzen.hr-magazin .intro-copy p{margin-bottom:20px}
  .hepp-referenzen.hr-magazin .intro-caption strong{font-size:22px}
  .hepp-referenzen.hr-magazin .intro-caption{padding:60px 22px 23px}
  .hepp-referenzen.hr-magazin .gallery-grid{display:flex;flex-direction:column;gap:32px;padding-top:28px}
  .hepp-referenzen.hr-magazin .project-card.is-breit{display:block}
  .hepp-referenzen.hr-magazin .project-card.is-breit .project-link{display:block}
  .hepp-referenzen.hr-magazin .project-card.is-breit .project-text{padding:25px}
  .hepp-referenzen.hr-magazin .project-card.is-breit .project-meta{margin-bottom:17px}
  .hepp-referenzen.hr-magazin .project-card.is-breit h2{font-size:30px}
  .hepp-referenzen.hr-magazin .project-card.is-breit .project-excerpt{font-size:15px;margin-top:18px}
  .hepp-referenzen.hr-magazin .detail-dialog{width:94vw;max-height:94vh}
  .hepp-referenzen.hr-magazin .detail-image{max-height:45vh}
  .hepp-referenzen.hr-magazin .detail-body{padding:24px}
  .hepp-referenzen.hr-magazin .detail-body p{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  .hepp-referenzen.hr-magazin, .hepp-referenzen.hr-magazin *,.hepp-referenzen.hr-magazin *::before,.hepp-referenzen.hr-magazin *::after{transition:none!important;animation:none!important}
}
.hepp-referenzen.hr-magazin .results-count{position:absolute;width:1px;height:1px;padding:0;margin:-1px!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hepp-referenzen.hr-magazin .project-meta{letter-spacing:.07em;font-size:11px;text-transform:uppercase;margin-top:21px;margin-bottom:10px}
.hepp-referenzen.hr-magazin .project-title{justify-content:flex-start}
.hepp-referenzen.hr-magazin .project-title h2{display:inline;background-image:linear-gradient(currentColor,currentColor);background-position:0 100%;background-size:0 1px;background-repeat:no-repeat;transition:background-size .35s ease;padding-bottom:3px}
.hepp-referenzen.hr-magazin .project-link:hover h2{background-size:100% 1px}
.hepp-referenzen.hr-magazin .project-link:focus-visible{outline-offset:8px}
.hepp-referenzen.hr-magazin .filter-btn{min-height:44px}
.hepp-referenzen.hr-magazin .load-more{border:0;border-bottom:1px solid;padding:10px 0}
.hepp-referenzen.hr-magazin .load-more:hover{background:none}
.hepp-referenzen.hr-magazin .project-image img{transition:transform .8s cubic-bezier(.2,.75,.25,1)}
.hepp-referenzen.hr-magazin .intro-photo{min-height:620px}
.hepp-referenzen.hr-magazin .intro-text .eyebrow{margin-bottom:35px}
.hepp-referenzen.hr-magazin .intro h1{font-size:clamp(43px,4.7vw,68px)}
.hepp-referenzen.hr-magazin .intro-caption{padding:100px 42px 36px;background:linear-gradient(transparent,#141710c7)}
.hepp-referenzen.hr-magazin .gallery-grid{gap:64px 40px}
.hepp-referenzen.hr-magazin .project-card.is-breit{background:#30332e}
.hepp-referenzen.hr-magazin .project-card.is-breit .project-text{padding:clamp(28px,4.7vw,72px)}
.hepp-referenzen.hr-magazin .project-card.is-breit .project-meta{font-size:11px;line-height:1.6}
@media(max-width:1100px){
  .hepp-referenzen.hr-magazin .intro-photo{min-height:560px}
}
@media(max-width:820px){
  .hepp-referenzen.hr-magazin .intro-photo{min-height:540px}
  .hepp-referenzen.hr-magazin .intro h1{font-size:44px}
}
@media(max-width:560px){
  .hepp-referenzen.hr-magazin .intro-photo{min-height:350px}
  .hepp-referenzen.hr-magazin .intro-caption{padding:80px 22px 24px}
  .hepp-referenzen.hr-magazin .intro h1{font-size:42px}
  .hepp-referenzen.hr-magazin .intro-text .eyebrow{margin-bottom:22px}
  .hepp-referenzen.hr-magazin .gallery-grid{gap:37px}
  .hepp-referenzen.hr-magazin .project-card.is-breit .project-text{padding:27px}
  .hepp-referenzen.hr-magazin .project-meta{font-size:10px}
}
@media(max-width:360px){
  .hepp-referenzen.hr-magazin .intro h1{font-size:33px}
  .hepp-referenzen.hr-magazin .intro h1{overflow-wrap:normal}
}
.hepp-referenzen.hr-magazin .project-title h2{min-width:0;overflow-wrap:anywhere;hyphens:auto}
.hepp-referenzen.hr-magazin .project-title{min-width:0}
.hepp-referenzen.hr-magazin .detail-body h2{overflow-wrap:anywhere;hyphens:auto}
.hepp-referenzen.hr-magazin .magazine-layout{display:grid;grid-template-columns:210px minmax(0,1fr);column-gap:clamp(32px,3.4vw,52px);padding-top:56px;align-items:start;scroll-margin-top:var(--gewerke-abstand)}
.hepp-referenzen.hr-magazin .magazine-sidebar{position:sticky;top:var(--gewerke-abstand);align-self:start;min-width:0;padding:7px 0 22px;border-top:1px solid #c7c2b6}
.hepp-referenzen.hr-magazin .magazine-sidebar .eyebrow{font-size:10px;letter-spacing:.14em;color:#706c61;margin:17px 0 22px}
.hepp-referenzen.hr-magazin .magazine-sidebar .filters{display:flex;flex-direction:column;align-items:stretch;gap:0}
.hepp-referenzen.hr-magazin .magazine-sidebar .filter-btn{position:relative;min-height:48px;border:0;border-bottom:1px solid #dfdcd4;padding:14px 0;color:#696a60;font-size:14px;line-height:1.4;font-weight:400;transition:color .2s}
.hepp-referenzen.hr-magazin .magazine-sidebar .filter-btn[aria-pressed="true"]{color:var(--ink);font-weight:600;border-bottom-color:#83735b}
.hepp-referenzen.hr-magazin .magazine-sidebar .filter-btn:hover{color:var(--ink)}
.hepp-referenzen.hr-magazin .magazine-projects{min-width:0}
.hepp-referenzen.hr-magazin .magazine-projects .gallery-grid{padding-top:0;gap:52px 32px}
.hepp-referenzen.hr-magazin .magazine-projects .project-card.is-breit .project-text{padding:clamp(26px,2.6vw,42px)}
.hepp-referenzen.hr-magazin .magazine-projects .project-card.is-breit h2{font-size:clamp(28px,2.7vw,39px)}
.hepp-referenzen.hr-magazin .magazine-projects .project-card.is-breit .project-meta{margin-bottom:22px}
.hepp-referenzen.hr-magazin .magazine-projects .project-card.is-breit .project-excerpt{font-size:14px;line-height:1.75;margin-top:20px}
@media(min-width:821px) and (max-width:1100px){
  .hepp-referenzen.hr-magazin .magazine-layout{grid-template-columns:180px minmax(0,1fr);column-gap:28px}
  .hepp-referenzen.hr-magazin .magazine-sidebar .filter-btn{font-size:13px}
  .hepp-referenzen.hr-magazin .magazine-projects .project-card.is-breit{display:block}
  .hepp-referenzen.hr-magazin .magazine-projects .project-card.is-breit .project-link{display:block}
  .hepp-referenzen.hr-magazin .magazine-projects .project-card.is-breit .project-image{aspect-ratio:1.8}
  .hepp-referenzen.hr-magazin .magazine-projects .project-card.is-breit .project-text{padding:28px}
  .hepp-referenzen.hr-magazin .magazine-projects .project-card.is-breit .project-excerpt{max-width:none}
}
@media(max-width:820px){
  .hepp-referenzen.hr-magazin .magazine-layout{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:28px}
  .hepp-referenzen.hr-magazin .magazine-sidebar{position:static;padding:0 0 16px;border-top:0;border-bottom:1px solid var(--line)}
  .hepp-referenzen.hr-magazin .magazine-sidebar .eyebrow{margin:0 0 12px}
  .hepp-referenzen.hr-magazin .magazine-sidebar .filters{flex-direction:row;flex-wrap:wrap;gap:0 22px}
  .hepp-referenzen.hr-magazin .magazine-sidebar .filter-btn{padding:10px 0;min-height:44px;border-bottom-color:transparent;font-size:13px}
  .hepp-referenzen.hr-magazin .magazine-sidebar .filter-btn[aria-pressed="true"]{border-bottom-color:#83735b}
}
@media(max-width:560px){
  .hepp-referenzen.hr-magazin .magazine-layout{gap:26px;padding-top:25px}
  .hepp-referenzen.hr-magazin .magazine-sidebar .filters{gap:0 18px}
  .hepp-referenzen.hr-magazin .magazine-projects .gallery-grid{gap:37px}
  .hepp-referenzen.hr-magazin .magazine-projects .project-card.is-breit .project-text{padding:27px}
  .hepp-referenzen.hr-magazin .magazine-projects .project-card.is-breit h2{font-size:30px}
}
.hepp-referenzen.hr-magazin .project-cta{display:inline-flex;align-items:center;justify-content:center;min-height:54px;max-width:100%;padding:15px 27px;background:var(--dark);color:var(--white);border:1px solid var(--dark);border-radius:2px;font-size:14px;font-weight:500;line-height:1.4;letter-spacing:.01em;text-align:center;text-decoration:none;transition:background-color .2s,border-color .2s}
.hepp-referenzen.hr-magazin .project-cta:hover{background:#43463d;border-color:#43463d}
.hepp-referenzen.hr-magazin .project-cta:focus-visible{outline:2px solid var(--dark);outline-offset:4px}
.hepp-referenzen.hr-magazin .project-cta:active{background:#191c17;border-color:#191c17}
@media(max-width:560px){
  .hepp-referenzen.hr-magazin .project-cta{width:100%;min-height:52px;padding:15px 20px}
}
.hepp-referenzen.hr-magazin .detail-dialog{width:min(1320px,calc(100vw - 56px));max-width:none;max-height:92vh;max-height:92dvh;padding:0;overflow:hidden;background:var(--paper);border:1px solid #ddd7ca;box-shadow:0 25px 100px #0004}
.hepp-referenzen.hr-magazin .detail-dialog::backdrop{background:#161a16cc;backdrop-filter:blur(5px)}
.hepp-referenzen.hr-magazin .detail-topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 24px;border-bottom:1px solid var(--line);background:var(--paper)}
.hepp-referenzen.hr-magazin .detail-topbar .eyebrow{margin:0;font-size:10px;color:#716b5f}
.hepp-referenzen.hr-magazin .detail-dialog .dialog-close{position:static;float:none;margin:0;width:auto;height:auto;min-height:40px;flex-shrink:0;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;font-size:13px;line-height:1.3;padding:8px 0;z-index:auto}
.hepp-referenzen.hr-magazin .detail-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);max-height:calc(92vh - 72px);max-height:calc(92dvh - 72px);overflow:auto;overscroll-behavior:contain}
.hepp-referenzen.hr-magazin .gallery-panel{min-width:0;background:var(--dark);padding:24px 24px 0;display:flex;flex-direction:column}
.hepp-referenzen.hr-magazin .gallery-stage{position:relative;display:flex;align-items:center;justify-content:center;height:min(64vh,680px);height:min(64dvh,680px);min-height:260px;touch-action:pan-y pinch-zoom;user-select:none}
.hepp-referenzen.hr-magazin .detail-dialog .detail-image{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;background:transparent;user-select:none;-webkit-user-drag:none;opacity:1}
.hepp-referenzen.hr-magazin .gallery-stage[aria-busy="true"] .detail-image{opacity:0}
.hepp-referenzen.hr-magazin .gallery-message{position:relative;z-index:1;color:#f3f0e8;text-align:center;font-size:14px;padding:20px;max-width:360px}
.hepp-referenzen.hr-magazin .gallery-message[hidden]{display:none}
.hepp-referenzen.hr-magazin .gallery-controls{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:16px 0 19px;border-top:1px solid #ffffff30;margin-top:22px}
.hepp-referenzen.hr-magazin .gallery-controls[hidden]{display:none}
.hepp-referenzen.hr-magazin .gallery-controls button{background:none;color:var(--white);border:0;border-bottom:1px solid #d8cdba85;min-height:44px;padding:10px 0 7px;font-size:13px;line-height:1.35;text-align:center}
.hepp-referenzen.hr-magazin .gallery-controls button:hover{color:var(--sand-light);border-color:var(--sand-light)}
.hepp-referenzen.hr-magazin .gallery-controls button:focus-visible{outline-color:var(--sand-light);outline-offset:4px}
.hepp-referenzen.hr-magazin .gallery-controls button:disabled{opacity:.45;cursor:default}
.hepp-referenzen.hr-magazin .detail-dialog .detail-body{padding:clamp(28px,3.3vw,52px);align-self:center;min-width:0}
.hepp-referenzen.hr-magazin .detail-dialog .detail-meta{font-size:10px;line-height:1.6;letter-spacing:.09em;text-transform:uppercase;color:#716b5f;padding-bottom:18px;border-bottom:1px solid var(--line)}
.hepp-referenzen.hr-magazin .detail-dialog .detail-body h2{font-size:clamp(32px,3.2vw,46px);line-height:1.08;font-weight:400;letter-spacing:-.045em;margin:25px 0}
.hepp-referenzen.hr-magazin .detail-dialog .detail-copy p{font-size:15px;line-height:1.8;margin:0 0 18px;color:#575a50}
.hepp-referenzen.hr-magazin .detail-dialog .source-link{font-size:13px;border-bottom:1px solid var(--ink);padding:9px 0;min-height:44px;align-items:center;margin-top:14px;display:inline-flex}
.hepp-referenzen.hr-magazin .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.hr-gesperrt{position:fixed;top:var(--dialog-scroll-top,0);left:0;right:0;width:100%;overflow:hidden}
@media(max-width:820px){
  .hepp-referenzen.hr-magazin .detail-dialog{width:calc(100vw - 28px);max-height:94vh;max-height:94dvh}
  .hepp-referenzen.hr-magazin .detail-layout{grid-template-columns:1fr;max-height:calc(94vh - 72px);max-height:calc(94dvh - 72px)}
  .hepp-referenzen.hr-magazin .gallery-panel{padding:16px 16px 0}
  .hepp-referenzen.hr-magazin .gallery-stage{height:clamp(230px,43vh,420px);height:clamp(230px,43dvh,420px);min-height:0}
  .hepp-referenzen.hr-magazin .gallery-controls{margin-top:15px;padding:10px 0 13px;gap:18px}
  .hepp-referenzen.hr-magazin .detail-dialog .detail-body{padding:28px}
  .hepp-referenzen.hr-magazin .detail-dialog .detail-body h2{font-size:34px;margin:20px 0}
  .hepp-referenzen.hr-magazin .detail-dialog .detail-copy p{font-size:15px;line-height:1.7}
}
@media(max-width:560px){
  .hepp-referenzen.hr-magazin .detail-dialog{width:calc(100vw - 20px)}
  .hepp-referenzen.hr-magazin .detail-topbar{padding:10px 18px;min-height:62px}
  .hepp-referenzen.hr-magazin .detail-topbar .eyebrow{font-size:9px;letter-spacing:.11em}
  .hepp-referenzen.hr-magazin .detail-layout{max-height:calc(94vh - 62px);max-height:calc(94dvh - 62px)}
  .hepp-referenzen.hr-magazin .detail-dialog .detail-body{padding:25px 22px 28px}
  .hepp-referenzen.hr-magazin .detail-dialog .detail-body h2{font-size:31px}
  .hepp-referenzen.hr-magazin .gallery-controls button{font-size:12px;flex:1}
}
.hepp-referenzen.hr-magazin .gallery-feedback{text-align:center}
.hepp-referenzen.hr-magazin .gallery-error-link{display:inline-block;color:var(--white);border-bottom:1px solid;padding:10px 0;font-size:13px}
.hepp-referenzen.hr-magazin .gallery-error-link[hidden]{display:none}
.hepp-referenzen.hr-magazin .gallery-feedback[hidden]{display:none}
/* --- Ergänzungen für WordPress --- */
/* Ohne JavaScript: alle Projekte sichtbar, Filter ausgeblendet (sie würden nichts tun). */
.hepp-referenzen.hr-magazin:not(.hr-js) .magazine-sidebar{display:none}
.hepp-referenzen.hr-magazin:not(.hr-js) .magazine-layout{grid-template-columns:minmax(0,1fr)}
.hepp-referenzen.hr-magazin .load-more[hidden]{display:none}

/* Heller Button-Text auch beim Überfahren und mit Tastatur. */
.hepp-referenzen.hr-magazin .project-cta:hover,.hepp-referenzen.hr-magazin .project-cta:focus,.hepp-referenzen.hr-magazin .project-cta:active{color:var(--white)}

/* Einstiegsbild: Beschriftung als Block. */
.hepp-referenzen.hr-magazin .intro-caption>span{display:block}
.hepp-referenzen.hr-magazin .intro-caption .intro-gewerk{display:block;font-size:13px}

/* Projekt ohne Bild: ruhige Fläche statt Lücke. */
.hepp-referenzen.hr-magazin .project-image--leer{aspect-ratio:3/2}

/* Projektfenster: Foto randlos, schmaler Streifen mit Pfeilen (Wunsch Mark, 24.09.2026).
   Die Bildfläche übernimmt das Seitenverhältnis des jeweiligen Fotos (setzt magazin.js) – alle
   HEPP-Galeriefotos sind Querformat (3:2 bis 16:9), also weder Balken noch Beschnitt. Nur wenn
   der Bildschirm zu niedrig ist, begrenzt max-height die Höhe; dann wird oben/unten minimal
   beschnitten statt ein Rahmen gezeigt. Schlichte Pfeile, keine Kreise (Codex-Vorgabe). */
.hepp-referenzen.hr-magazin .gallery-panel{padding:0;align-self:start}
.hepp-referenzen.hr-magazin .gallery-stage{height:auto;min-height:0;aspect-ratio:var(--hr-bildformat,3/2);max-height:calc(92vh - 130px);max-height:calc(92dvh - 130px)} /* Kopfzeile, Foto und Pfeile passen immer zusammen ins Fenster */
.hepp-referenzen.hr-magazin .detail-dialog .detail-image{object-fit:cover}
.hepp-referenzen.hr-magazin .gallery-controls{margin-top:0;padding:4px 20px 5px;gap:16px;border-top:0}
.hepp-referenzen.hr-magazin .gallery-controls button{border-bottom:0;min-width:44px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;padding:6px 4px;opacity:.85}
.hepp-referenzen.hr-magazin .gallery-controls button:hover,.hepp-referenzen.hr-magazin .gallery-controls button:focus-visible{opacity:1}
.hepp-referenzen.hr-magazin .gallery-controls svg{display:block}
@media(max-width:820px){
  .hepp-referenzen.hr-magazin .gallery-panel{padding:0}
  .hepp-referenzen.hr-magazin .gallery-stage{height:auto;max-height:52vh;max-height:52dvh}
  .hepp-referenzen.hr-magazin .gallery-controls{padding:2px 12px 3px;margin-top:0}
  .hepp-referenzen.hr-magazin .gallery-controls button{min-height:44px;flex:0 0 auto}
}

/* Einstiegsfoto ganz zeigen (Variante B, Wunsch Mark 08.10.2026): Am Computer bekommt das Foto
   60 % der Breite und genau das Seitenverhältnis der Titelbilder (3:2, alle 1200 × 800), also
   wird nichts abgeschnitten; die Höhe wächst mit der Bildschirmbreite. Wird der Text einmal höher
   als das Foto (schmale Fenster), streckt das Raster das Foto wie bisher und schneidet seitlich
   etwas ab. Tablet (bis 820 px) bleibt wie bisher, auf dem Handy ist das Foto ohnehin aus. */
@media(min-width:821px){
  .hepp-referenzen.hr-magazin .intro{grid-template-columns:minmax(0,3fr) minmax(0,2fr)} /* fest 60/40, sonst verschiebt das Fotoformat die Spalten */
  .hepp-referenzen.hr-magazin .intro-photo{min-height:0;min-width:0;aspect-ratio:3/2;align-self:stretch;justify-self:stretch} /* beide stretch: Breite = Spalte, bei höherem Text wächst das Foto in der Höhe mit statt eine Lücke zu lassen */
  .hepp-referenzen.hr-magazin .intro-text{padding:40px clamp(26px,3.5vw,60px)}
  .hepp-referenzen.hr-magazin .intro-text .eyebrow{margin-bottom:24px}
  .hepp-referenzen.hr-magazin .intro h1{font-size:clamp(34px,3.5vw,56px)}
  .hepp-referenzen.hr-magazin .intro-copy{margin-top:22px}
}

/* Bilderschau im Einstieg (0.1.6, Wunsch Mark 08.10.2026): Fotos liegen übereinander und blenden
   weich über. Das neue Foto blendet über dem alten ein, das alte bleibt so lange stehen – kein
   Aufhellen dazwischen. Foto, Text und Pause-Knopf haben feste Rasterplätze; der Knopf liegt
   unten rechts im Foto (er darf nicht im Link stecken). */
.hepp-referenzen.hr-magazin .intro-photo{grid-area:1/1}
.hepp-referenzen.hr-magazin .intro-text{grid-area:1/2}
.hepp-referenzen.hr-magazin .intro-photo .intro-bild{opacity:0;z-index:0;transition:opacity 1.2s ease}
.hepp-referenzen.hr-magazin .intro-photo .intro-bild.is-aktiv{opacity:1;z-index:2}
.hepp-referenzen.hr-magazin .intro-photo .intro-bild.is-vorher{opacity:1;z-index:1;transition:none}
.hepp-referenzen.hr-magazin .intro-caption{z-index:3}
.hepp-referenzen.hr-magazin .intro-pause{grid-area:1/1;align-self:end;justify-self:end;position:relative;z-index:4;margin:0 30px 26px 0;padding:10px 4px;min-width:44px;min-height:44px;background:none;border:0;border-radius:0;color:#fff;font-size:13px;letter-spacing:.04em;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;opacity:.85}
.hepp-referenzen.hr-magazin .intro-pause:hover,.hepp-referenzen.hr-magazin .intro-pause:focus{color:#fff;opacity:1;text-decoration:underline}
.hepp-referenzen.hr-magazin .intro-pause:focus-visible{outline-color:#fff;outline-offset:2px}
@media(max-width:820px){
  .hepp-referenzen.hr-magazin .intro-pause{margin:0 16px 14px 0}
}
@media(max-width:560px){
  .hepp-referenzen.hr-magazin .intro-pause{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hepp-referenzen.hr-magazin .intro-photo .intro-bild{transition:none}
}

/* Handy: kein großes Einstiegsfoto, damit nach dem Einleitungstext gleich das Gewerke-Menü und
   die Projekte kommen (Wunsch Mark, 24.09.2026). Das Einstiegsprojekt bleibt als Karte in der Liste. */
@media(max-width:560px){
  .hepp-referenzen.hr-magazin .intro-photo{display:none}
}

/* Eckdaten-Liste und Telefonnummer im Projektfenster (0.1.7, 08.10.2026): Seit den Texten vom
   07.10. steht unter jedem Projekttext eine Eckdaten-Liste. Sie bekam bisher den Stil des Themes
   (16 px, fast schwarz, kein Abstand danach) – jetzt sieht sie aus wie der Fließtext. Die
   Telefonnummer im Schlussbaustein bricht nicht mehr mitten in der Nummer um. */
.hepp-referenzen.hr-magazin .detail-dialog .detail-copy ul{max-width:780px;margin:0 0 18px;padding-left:1.2em}
.hepp-referenzen.hr-magazin .detail-dialog .detail-copy li{font-size:15px;line-height:1.8;margin:0;color:#575a50}
.hepp-referenzen.hr-magazin .detail-dialog .detail-copy a[href^="tel:"]{white-space:nowrap}
@media(max-width:820px){
  .hepp-referenzen.hr-magazin .detail-dialog .detail-copy li{line-height:1.7}
}

/* Typografie B* (0.1.8, T-11, 20.10.2026, Plan: 02_Website/Typografie-Vorschlaege-2026-10/UMSETZUNGSPLAN.md):
   Schrift Archivo wie die übrige Website (liegt auf hepp.lu, Elementor → Individuelle Schriftarten),
   alle Farben aus der Farbfamilie des HEPP-Beige statt Grau mit Grünstich:
   Titel/Text #20211F → #2C2820, dunkle Karte #30332E/#252623 → #342F27, Überzeilen #706C61/#716B5F → Braun #6B5A3C,
   gedämpfter Text #66665F/#696A60 → #675F55, Text im Projektfenster #575A50 → #3E3932. */
.hepp-referenzen.hr-magazin{--ink:#2C2820;--dark:#342F27;--muted:#675F55;--font:"Archivo",Helvetica,Arial,sans-serif}
.hepp-referenzen.hr-magazin .project-card.is-breit{background:#342F27}
.hepp-referenzen.hr-magazin .project-cta:hover{background:#4A4237;border-color:#4A4237}
.hepp-referenzen.hr-magazin .project-cta:active{background:#221E18;border-color:#221E18}
.hepp-referenzen.hr-magazin .detail-dialog .detail-copy p,.hepp-referenzen.hr-magazin .detail-dialog .detail-copy li{color:#3E3932}
.hepp-referenzen.hr-magazin .magazine-sidebar .filter-btn{color:#675F55}
.hepp-referenzen.hr-magazin .magazine-sidebar .eyebrow,.hepp-referenzen.hr-magazin .detail-topbar .eyebrow,.hepp-referenzen.hr-magazin .detail-dialog .detail-meta{color:#6B5A3C}
.hepp-referenzen.hr-magazin .filter-btn:hover{color:#6B5A3C}
.hepp-referenzen.hr-magazin a:focus-visible,.hepp-referenzen.hr-magazin button:focus-visible{outline-color:#6B5A3C}
/* Die Website setzt Überschriften in Archivo 106 % breit. Die Referenzen-Seite hat ihre eigene, enge Überschrift:
   in normaler Breite bleibt „Stöbern Sie durch unsere Projekt-Galerie“ zweizeilig wie bisher. */
.hepp-referenzen.hr-magazin :is(h1,h2,h3){font-variation-settings:normal}