── Artist Collection ──

── Modern Collection ──

── LOOKS by Wolfgang Joop ──

── Weitere Lines ──

── Country Collection ──

── Baltic Collection ──

Pagebuilder HTML Block – Template

<!-- Zusätzliches CSS im HTML Block (Pagebuilder) -->
<style>
.mat-hero__cta,.mat-hero__cta:visited,.mat-hero__cta:active{display:inline-flex;align-items:center;gap:6px;font-family:Poppins-Medium,Poppins,sans-serif;font-size:13px;letter-spacing:.06em;color:var(--mat-tx)!important;text-decoration:none;opacity:.55;margin-top:20px;transition:opacity .2s,gap .2s}
.mat-hero__cta:hover{opacity:.9;gap:10px;color:var(--mat-tx)!important}
.mat-hero__cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mat-hero__media--panels{display:flex!important}
.mat-hero__mat-panel{flex:1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;background-size:cover;background-position:center;overflow:hidden}
.mat-hero__mat-panel+.mat-hero__mat-panel{border-left:1px solid rgba(255,255,255,.1)}
.mat-hero__mat-panel--bezug{background-size:300px 300px;background-repeat:repeat}
.mat-hero__mat-panel::before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.03) 0%,rgba(0,0,0,.12) 40%,rgba(0,0,0,.58) 100%);z-index:1}
.mat-hero__mat-footer{position:relative;z-index:2;padding:0 28px 28px;text-shadow:0 1px 4px rgba(0,0,0,.4),0 2px 12px rgba(0,0,0,.25)}
.mat-hero__mat-label{font-family:Poppins-Medium,Poppins,sans-serif;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:2.5px;color:rgba(255,255,255,.6);margin-bottom:6px}
.mat-hero__mat-name{font-family:Poppins-Bold,Poppins,sans-serif;font-size:18px;font-weight:700;color:#fff;line-height:1.3;letter-spacing:.01em;margin-bottom:10px;text-shadow:0 1px 6px rgba(0,0,0,.5),0 3px 16px rgba(0,0,0,.3)}
.mat-hero__mat-cta{font-family:Poppins-Medium,Poppins,sans-serif;font-size:12px;font-weight:500;color:rgba(255,255,255,.65);margin-bottom:14px;line-height:1.4}
.mat-hero__mat-link,.mat-hero__mat-link:visited,.mat-hero__mat-link:active{display:inline-flex;align-items:center;gap:5px;font-family:Poppins-Medium,Poppins,sans-serif;font-size:11px;font-weight:600;color:rgba(255,255,255,.75)!important;text-decoration:none;text-transform:uppercase;letter-spacing:1px;transition:color .2s,gap .2s}
.mat-hero__mat-link:hover{color:#fff!important;gap:9px}
.mat-hero__mat-link svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:767px){.mat-hero__media--panels{flex-direction:column!important}.mat-hero__mat-panel{min-height:240px}.mat-hero__mat-panel+.mat-hero__mat-panel{border-left:none;border-top:1px solid rgba(255,255,255,.1)}.mat-hero__mat-footer{padding:0 20px 22px}.mat-hero__mat-name{font-size:16px}}
@media(min-width:768px)and(max-width:1023px){.mat-hero__mat-footer{padding:0 20px 22px}.mat-hero__mat-name{font-size:16px}.mat-hero__mat-cta{font-size:11px}}
</style>

<!-- Hero Banner HTML -->
<div class="mat-hero" style="--mat-bg:{{BG_COLOR}};--mat-tx:{{TX_COLOR}}">
  <div class="mat-hero__brand">
    <img class="mat-hero__logo" src="https://cdn.artelia.de/media/revslider/materials_by_artelia.png" alt="Materials by Artelia">
  </div>
  <div class="mat-hero__text">
    <div class="mat-hero__label">Design Line</div>
    <div class="mat-hero__title">{{LINE_NAME}}</div>
    <div class="mat-hero__sub">{{LINE_DESCRIPTION}}</div>
    <a href="{{LINE_URL}}" class="mat-hero__cta">
      Zur Kollektion
      <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
    </a>
  </div>
  <div class="mat-hero__media mat-hero__media--panels">
    <div class="mat-hero__mat-panel" style="background-image:url('{{KORPUS_IMG}}')">
      <div class="mat-hero__mat-footer">
        <div class="mat-hero__mat-label">Korpus</div>
        <div class="mat-hero__mat-name">{{KORPUS_NAME}}</div>
        <div class="mat-hero__mat-cta">{{KORPUS_CTA}}</div>
        <a href="{{KORPUS_LINK}}" class="mat-hero__mat-link">
          Details entdecken
          <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
        </a>
      </div>
    </div>
    <div class="mat-hero__mat-panel mat-hero__mat-panel--bezug" style="background-image:url('{{BEZUG_IMG}}')">
      <div class="mat-hero__mat-footer">
        <div class="mat-hero__mat-label">Bezug</div>
        <div class="mat-hero__mat-name">{{BEZUG_NAME}}</div>
        <div class="mat-hero__mat-cta">{{BEZUG_CTA}}</div>
        <a href="{{BEZUG_LINK}}" class="mat-hero__mat-link">
          Details entdecken
          <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
        </a>
      </div>
    </div>
  </div>
</div>

Platzhalter-Werte pro Line